/*
 * Custom Styles for Baldy Gravity Forms Confirmation
 */

/*
 * Ensure Inter font is loaded on your site.
 * If not already loaded by your theme or another plugin,
 * you might need to add an @import rule here, or preferably,
 * enqueue it properly in your theme's functions.php.
 * e.g., @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
.gf-custom-confirmation-baldy {
    font-family: 'Inter'; /* Apply Inter font */
    box-sizing: border-box;
    line-height: 1.5; /* A sensible default line height */
}

/* Apply box-sizing to all elements within the custom confirmation for consistency */
.gf-custom-confirmation-baldy *,
.gf-custom-confirmation-baldy *::before,
.gf-custom-confirmation-baldy *::after {
    box-sizing: inherit;
}

/* Main container for the custom confirmation */
.gf-custom-confirmation-baldy .contact-section-gf {
    background-color: #000211; /* Dark background color */
    border-radius: 25px;       /* Rounded corners */
    padding: 40px;             /* Padding inside the container */
    max-width: 1680px;         /* Limit maximum width for desktop */
    width: 100%;               /* Responsive width, will be contained by GF wrapper */
    margin: 20px auto;         /* Center the block if parent allows, add some top/bottom space */
    overflow: hidden;          /* Clears floats and contains margins if any child elements use them */
		z-index: 99999;
    position: relative;
}

/* Flexbox wrapper for text and image content */
.gf-custom-confirmation-baldy .content-wrapper-gf {
    display: flex;
    gap: 40px;                 /* Space between text and image columns */
    align-items: center;       /* Vertically align items in the center */
}

/* Text content column */
.gf-custom-confirmation-baldy .text-content-gf {
    flex: 1;                   /* Allow text content to grow and shrink */
    color: #ffffff;            /* Default text color (white) */
}

.gf-custom-confirmation-baldy .text-content-gf h1 {
    color: #E0FF27;            /* Title color */
    font-size: 3em;            /* Large font size for title */
    margin-top: 0;             /* Remove default top margin */
    margin-bottom: 20px;       /* Space below title */
    font-weight: 700;          /* Bold title */
    line-height: 1.2;          /* Adjust line height for title */
    padding: 0;                /* Reset any theme/GF padding */
}

.gf-custom-confirmation-baldy .text-content-gf p {
    color: var(--Beige, #FFFAEB);
    font-family: Inter;
    font-size: 32px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
}

/* "Book Now" button styling */
.gf-custom-confirmation-baldy .book-button-gf {
    display: inline-block;     /* Fit content width but allow padding/margin */
    background-color: #E0FF27; /* Yellow background */
    color: #000211 !important; /* Dark text color - !important to override theme link styles */
    padding: 12px 25px;        /* Padding inside the button */
    border-radius: 100px;        /* Slightly rounded corners for the button */
    text-decoration: none !important; /* Remove underline - !important for theme links */
    font-size: 1.1em;          /* Button text size */
    font-weight: 700;          /* Bold text */
    margin-top: 25px;          /* Space above the button */
    margin-bottom: 25px;       /* Space below the button */
    transition: background-color 0.2s ease, color 0.2s ease; /* Smooth hover effect */
    border: none;              /* Remove default border if any */
    cursor: pointer;           /* Indicate it's clickable */
}

.gf-custom-confirmation-baldy .book-button-gf:hover,
.gf-custom-confirmation-baldy .book-button-gf:focus {
    background-color: #c8e61e; /* Slightly darker yellow on hover/focus */
    color: #000211 !important;
}

/* Disclaimer text styling */
.gf-custom-confirmation-baldy .disclaimer-gf {
    font-size: 0.9em !important;   /* Smaller font size - !important if needed */
    color: #aaaaaa !important;     /* Lighter grey color - !important if needed */
    font-style: italic !important; /* Italic text - !important if needed */
    margin-top: 0;
    margin-bottom: 0; /* Remove bottom margin if it's the last element */
}

/* Image content column */
.gf-custom-confirmation-baldy .image-content-gf {
    flex-shrink: 0;            /* Prevent image container from shrinking */
    width: 400px;              /* Set a specific width for the image container on desktop */
    text-align: center;        /* Center the image if it's narrower than its container */
}

.gf-custom-confirmation-baldy .image-content-gf img {
    display: block;            /* Remove extra space below the image */
    max-width: 100%;           /* Ensure image doesn't overflow its container */
    height: auto;              /* Maintain aspect ratio */
    margin: 0 auto;            /* Center image if container is wider than image */
}

/* --- Responsive Styling --- */

/* For tablets and smaller desktops (up to 768px) */
@media (max-width: 768px) {
    .gf-custom-confirmation-baldy .contact-section-gf {
        padding: 25px;         /* Adjust padding for smaller screens */
        border-radius: 15px;   /* Slightly less rounded corners */
    }

    .gf-custom-confirmation-baldy .content-wrapper-gf {
        flex-direction: column;/* Stack text and image vertically */
        gap: 0px;             /* Space between stacked items */
        align-items: stretch;  /* Stretch items to fill the width */
				line-height: 15px;
    }

    /* Order for mobile: Text first, then image */
    .gf-custom-confirmation-baldy .text-content-gf {
        order: 1;
        text-align: center;    /* Center-align all text content */
    }

    .gf-custom-confirmation-baldy .image-content-gf {
        order: 2;
        width: 100%;           /* Image container takes full width */
    }

    .gf-custom-confirmation-baldy .text-content-gf h1 {
        font-size: 2.2em;      /* Reduce title font size */
    }

    .gf-custom-confirmation-baldy .text-content-gf p {
        font-size: 1em;        /* Slightly smaller paragraph text */
    }

    .gf-custom-confirmation-baldy .book-button-gf {
        display: block;        /* Make button full width (or constrained by max-width) */
        text-align: center;    /* Center button text */
        padding: 15px;         /* Adjust button padding */
        margin-left: auto;     /* Center block button */
        margin-right: auto;    /* Center block button */
        max-width: 220px;      /* Limit button width to prevent it being too wide */
    }

    .gf-custom-confirmation-baldy .image-content-gf img {
        max-width: 70%;       /* Make image smaller relative to its container, and center it */
        margin: 0 auto;        /* Center the image */
    }
}

/* For small mobile screens (up to 480px) */
@media (max-width: 480px) {
    .gf-custom-confirmation-baldy .contact-section-gf {
        padding: 20px;
    }

    .gf-custom-confirmation-baldy .text-content-gf h1 {
        font-size: 1.9em;      /* Further reduce title font size */
    }

    .gf-custom-confirmation-baldy .text-content-gf p {
        font-size: 0.95em;     /* Further reduce paragraph text size */
    }

    .gf-custom-confirmation-baldy .book-button-gf {
        max-width: 200px;      /* Adjust max button width */
        font-size: 1em;        /* Adjust button font size */
        padding: 12px 20px;
    }

    .gf-custom-confirmation-baldy .disclaimer-gf {
        font-size: 0.85em !important;
    }

    .gf-custom-confirmation-baldy .image-content-gf img {
        max-width: 60%;       /* Further reduce image size */
    }
}

.personalised_name{
		text-decoration:italic;
}