:root {
    --ast-global-dark-bg-style: var(--ast-global-color-4);
    --form-border-color: #7C7EA5;
    --form-text-color: #BCB7D8;
    --form-invalid: #D65D67;
    --form-inactive: #463468;

    --small-radius: 6px;
}

/* Reduce horizontal separator width in header bar and in product descriptions for a sleeker look */
.ast-header-break-point .ast-primary-header-bar,
.ast-primary-header-bar {
    border-color: var(--form-inactive);
}
.product-description-separator {
    border: none;
    height: 1px;
    margin: 20px 0;
    background-color: var(--form-inactive);
}

/* Limit the width of the page builder template content to 1200px for better readability */
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > * {
    max-width: 1200px;
}

@media (max-width: 921px) {
    /* Smaller global container padding for mobile and tablet */
    .ast-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Mobile menu styles */
    .ast-mobile-header-wrap .main-header-menu .menu-link {
        font-size: 30px;
        padding: 10px 0;
    }
    .ast-mobile-header-wrap .main-header-menu li:last-child {
        border-bottom: 1px solid var(--form-inactive);
    }
}

/* Add horizontal padding to the footer section */
.site-below-footer-wrap[data-section="section-below-footer-builder"] {
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 40px;
    line-height: 34px;
}

.footer-links,
.ast-footer-copyright {
    font-size: 12px;
    line-height: 20px;
}


/* Add gradient at the bottom of the Homepage about section */
.about-section {
    position: relative;
}
.about-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0) 80%,
        var(--ast-global-color-4) 100%
    );
    pointer-events: none;
    z-index: 1;
}
.about-section > .wp-block-cover__inner-container,
.about-section .project-text,
.about-section .project-image,
.about-section .project-buttons,
.about-section .project-buttons-simple {
    position: relative;
    z-index: 2;
}

/* Custom styles for "Contact" form confirmation message */
#wpforms-confirmation-75 {
    color: var(--ast-global-color-4);
    padding: 24px;
    border: none;
    border-radius: var(--small-radius);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
#wpforms-confirmation-75 p {
    margin: 0;
    color: inherit;
}
.contact-form {
    padding: 24px;
}

/* Contact form error message styles */
div.wpforms-container-full .wpforms-form .wpforms-error-container {
    background: var(--form-invalid);
    border-radius: var(--small-radius);
    color: var(--ast-global-color-4);
    padding: 24px;
}

/* Custom styles for "Contact" form submit button */
div.wpforms-container-full button[type=submit] {
    height: 36px;
    line-height: 16px;
}
div.wpforms-container-full button[type=submit]:hover {
    background: var(--ast-global-color-1);
    background-color: var(--ast-global-color-1);
}
div.wpforms-container-full button[type=submit]:focus:after {
    border: none
}
div.wpforms-container-full button[type=submit]:focus {
    outline: thin dotted;
}

/* Checkout form and contant form label styles */
.wpforms-container .wpforms-form .wpforms-field-label,
.woocommerce-js form .form-row label {
    font-size: 13px;
    letter-spacing: 1px;
}

/* Custom styles for the product listing */
.woocommerce ul.products li.product {
    background: var(--ast-global-color-6);
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
}

.service-card-wrapper,
.woocommerce ul.products li.product .service-card-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    background: var(--ast-global-color-6);
}

.service-card-top {
    display: flex;
    gap: 20px;
    flex-grow: 1;
}

.service-card-thumbnail {
    width: 44px;
    height: 75px;
    overflow: hidden;
    flex-shrink: 0;
}

.service-card-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.service-card-info {
    flex-grow: 1;
}

.service-card-title {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.2rem;
}

.service-card-description {
    color: var(--ast-global-color-3);
    font-size: 0.9rem;
    line-height: 1.4;
}

.service-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    gap: 8px;
}

.service-card-price {
    color: var(--ast-global-color-3);
    font-size: 1.4rem;
    font-weight: 700;
}

.service-card-bottom .button {
    min-width: 126px;
    padding: 10px 20px;
    text-align: center;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.service-card-bottom .button:hover {
    background-color: var(--ast-global-color-1);
}

/* Product catalog: remove gap between card spreads and sessions */
.wp-block-group.offer-spread {
    padding-bottom: 0;
}
.wp-block-group.offer-session {
    padding-top: 0;
}

/* Checkout form styles to match the overall theme */
#customer_details {
    padding: 0 2em;
    margin-right: 0;
}

/* checkout form styles */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
    border: 1px solid var(--form-border-color);
    border-radius: var(--small-radius);
    border-style: solid;

    background: transparent;
    box-shadow: none;

    color: var(--form-text-color);

    padding: 14px;
    font-size: 16px;
    font-weight: 400;

    transition: border-color 0.2s ease;
}

/* focus state for checkout form fields */
.woocommerce .woocommerce-billing-fields .woocommerce-billing-fields__field-wrapper .woocommerce-input-wrapper > .input-text:focus,
.woocommerce .woocommerce-billing-fields .woocommerce-billing-fields__field-wrapper .woocommerce-input-wrapper > select:focus,
.woocommerce .woocommerce-billing-fields .woocommerce-billing-fields__field-wrapper .woocommerce-input-wrapper > textarea:focus {
    outline: none;
    border: 2px solid var(--ast-global-color-0);
}

/* checkout form placeholder text */
.woocommerce-checkout input::placeholder,
.woocommerce-checkout select::placeholder,
.woocommerce-checkout textarea::placeholder {
    color: var(--form-text-color);
    opacity: 0.5;
}

.woocommerce-checkout label {
    color: var(--form-text-color);
    font-weight: 400;
    font-size: 16px;
    text-transform: uppercase;
}

/* Styles for validation error messages on checkout */
.checkout-inline-error-message,
.woocommerce-checkout .msg-invalid {
    color: var(--form-invalid);
    font-size: 13px;
}

/* Hide specific checkout fields which are required by Stripe but not needed */
.hidden-field {
    display: none !important;
}

/* Remove background from order details titles */
.woocommerce-page.woocommerce-checkout .woocommerce-order h2.woocommerce-order-details__title,
.woocommerce-page.woocommerce-checkout .woocommerce-order h2.woocommerce-column__title {
    background-color: transparent;
}

/* Force dark background for Stripe Component in checkout */
.woocommerce-page.woocommerce-checkout #payment div.payment_box,
.woocommerce.woocommerce-checkout #payment div.payment_box {
    background-color: var(--ast-global-color-6);
    border: none;
    border-radius: 6px;
    box-shadow: none;
    color: var(--form-text-color);
}

#order_review_heading {
    display: none;
}

.woocommerce-page.woocommerce-checkout form #order_review table {
    display: none;
}

/* Payment box top arrow color */
.woocommerce-page.woocommerce-checkout #payment div.payment_box:before {
    border-bottom-color: var(--ast-global-color-6)
}

/* Privacy policy on checkout page */
.woocommerce-privacy-policy-text {
    color: var(--form-text-color);
    margin-bottom: 30px;
}
.woocommerce-privacy-policy-text p {
    margin: 10px 0;
    font-size: 12px;
}
.woocommerce-page.woocommerce-checkout #payment ul.payment_methods {
    margin-bottom: 0;
}

/* Lock icon for Stripe payment security notice */
.lock-icon {
    margin-right: 6px;
    width: 8px;
    height: 7px;
    border: 1px solid currentColor;
    border-radius: 1px;
    position: relative;
    display: inline-block;
}
.lock-icon::before {
    content: "";
    position: absolute;
    width: 5px;
    height: 3px;
    border: 1px solid currentColor;
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
    top: -4px;
    left: 0.5px;
}

/* Top level error message styles */
.woocommerce-error {
    border: 1px solid var(--form-invalid);
    border-radius: var(--small-radius);
    background-color: var(--form-invalid);
}
.woocommerce-error > a,
.woocommerce-error a,
.woocommerce-error > strong,
.woocommerce-error > li {
    color: var(--ast-global-color-5);
}
.woocommerce-error > a:hover,
.woocommerce-error > a:focus {
    color: var(--ast-global-color-5);
}

/* Default styles don't apply to our custom product summary, so this copies them on checkout page */
.checkout-product-summary {
    padding-top: var(--wp--custom--ast-default-block-top-padding);
    padding-right: var(--wp--custom--ast-default-block-right-padding);
    padding-bottom: var(--wp--custom--ast-default-block-bottom-padding);
    padding-left: var(--wp--custom--ast-default-block-left-padding);
}


/* Product description styles with "Read more" functionality for mobile and tablet */
@media (max-width: 921px) {
    .product-description {
        position: relative;
        overflow: hidden;
        line-height: 1.6;
        max-height: calc(1.6em * 3);
        transition: max-height 0.3s ease;
    }
    /* Gradient at the bottom of the description to indicate more content */
    .product-description:not(.is-expanded)::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3em;
        pointer-events: none;
        background: linear-gradient(
            to bottom,
            transparent,
            var(--ast-global-color-4)
        );
    }
    .product-description.is-expanded {
        max-height: none;
    }
    .product-description.is-expanded::after {
        display: none;
    }
    .product-description-toggle {
        display: inline-block;
        margin-top: 8px;
        text-decoration: none;
        cursor: pointer;
        font-size: 0.9rem;
        opacity: 0.8;
    }
    .product-description-toggle:hover {
        opacity: 1;
    }
}
/* On desktop, show full description and hide the toggle */
@media (min-width: 921px) {
    .product-description-toggle {
        display: none;
    }
}

/* Force minimum width for buttons everywhere */
.wpforms-submit,
.wp-element-button {
    min-width: 200px;
}

/* Checkout date picker styling */
#order_delivery_date_filter {
    margin-bottom: 20px;
    padding: 20px;
    background: var(--ast-global-color-6);
    border-radius: var(--small-radius);
}
#order_delivery_date_filter h3 {
    color: var(--form-text-color);
    font-size: 1.2rem;
    margin-bottom: 15px;
}
/* Calendar popup styling */
#ui-datepicker-div {
    background: var(--ast-global-color-6);
    border: 1px solid var(--form-border-color);
    border-radius: 6px;
    padding: 10px;
    z-index: 9999;
}
/* Month and year header styling */
#ui-datepicker-div .ui-datepicker-header {
    background: var(--ast-global-color-0);
    border: none;
    border-radius: 4px;
    font-weight: bold;
}

/* Month navigation arrows styling */
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
    top: 4px;
}

/* Calendar grid styling */
#ui-datepicker-div .ui-datepicker-calendar td {
    border: 1px solid var(--form-border-color);
    padding: 0;
}
/* Calendar grid styling */
#ui-datepicker-div .ui-datepicker-calendar th {
    color: var(--form-border-color);
    opacity: 1;
    padding: 8px 0;
}
/* Base style for days (Available days) */
#ui-datepicker-div .ui-state-default {
    background: transparent;
    border: none;
    color: var(--form-border-color);
    text-align: center;
    padding: 10px;
    display: block;
    transition: background 0.2s ease, color 0.2s ease;
    opacity: 1;
}
/* Hover and Selected day state */
#ui-datepicker-div .ui-datepicker-calendar .ui-state-hover,
#ui-datepicker-div .ui-datepicker-calendar .ui-state-active {
    background: var(--ast-global-color-0);
    color: var(--ast-global-color-2);
    opacity: 1;
}
/* Unavailable dates */
#ui-datepicker-div .ui-datepicker-other-month,
#ui-datepicker-div .ui-datepicker-unselectable .ui-state-default,
#ui-datepicker-div .ui-state-disabled .ui-state-default {
    opacity: 1;
    color: var(--form-border-color);
    background: var(--form-inactive);
    cursor: default;
}

/* Disabled navigation arrows for unavailable months */
#ui-datepicker-div .ui-state-disabled.ui-datepicker-prev:before,
#ui-datepicker-div .ui-state-disabled.ui-datepicker-next:before {
    color: var(--form-inactive);
}

/* Highlight Today */
#ui-datepicker-div .ui-datepicker-today .ui-state-default {
    background: #57427E;
    color: var(--form-border-color);
    font-weight: bold;
}

/* Hide Button Pane and separator line */
#ui-datepicker-div .ui-datepicker-buttonpane {
    display: none;
}
/* Disabled default opacity for unavailable dates */
#ui-datepicker-div .ui-state-disabled,
#ui-datepicker-div .ui-widget-content .ui-state-disabled {
    opacity: 1;
}

/* Time slot dropdown styling (including Select2 overrides) */
.woocommerce-checkout .select2-container--default .select2-selection--single {
    width: 100%;
    border: 1px solid var(--form-border-color);
    border-radius: 6px;
    background-color: transparent;
    color: var(--form-text-color);
    display: flex;
    align-items: center;
    transition: border-color 0.2s ease;
}
.woocommerce-checkout .select2-container--default .select2-results__option[data-selected=true] {
    background: var(--form-inactive);
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--form-text-color);
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--form-text-color) transparent transparent transparent;
}
.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--form-text-color) transparent;
}
.woocommerce-checkout .select2-container--default.select2-container--focus .select2-selection--single,
.woocommerce-checkout .select2-container--default .select2-selection--single:focus {
    outline: none;
    box-shadow: none;
    border: 1px solid var(--form-border-color);
    -webkit-tap-highlight-color: transparent;
}
body .select2-container--default .select2-dropdown {
    background-color: #1B132B;
    border: 1px solid var(--form-border-color);
    color: var(--form-text-color);
}
body .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--ast-global-color-0);
    color: var(--ast-global-color-2);
}
body .select2-container--default .select2-search--dropdown {
    display: none;
}

/* Responsive panel layout used in Homepage and My Projects page */
.project-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "text image"
        "buttons image";
    align-items: start;
    column-gap: 40px;
}
.project-section.reverse {
    grid-template-areas:
        "image text"
        "image buttons";
}
.project-text {
    grid-area: text;
}
.project-image {
    grid-area: image;
}
.project-buttons-simple,
.project-buttons {
    grid-area: buttons;
    display: flex;
    width: 100%;
    gap: 16px;
}
.project-buttons .wp-block-button {
    flex: 1;
    display: flex;
}
.project-buttons .wp-block-button .wp-element-button {
    width: 100%;
    min-width: 115px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.project-section .project-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Responsive panel layout for mobile devices */
@media (max-width: 921px) {
    .project-section.reverse,
    .project-section {
        grid-template-columns: 1fr;
        grid-template-areas:
            "text"
            "image"
            "buttons";
    }
    .project-section.offer-section,
    .project-section.about-section {
        grid-template-areas:
            "image"
            "text"
            "buttons";
    }
    .project-section.about-section {
        gap: 40px;
        padding-bottom: 0;
    }
    .project-section.offer-section {
        padding-top: 0;
    }

    .project-section.offer-section .project-text.wp-block-group.is-vertical h2,
    .project-section.offer-section .project-text.wp-block-group.is-vertical {
        text-align: center;
        width: 100%;
    }

    .project-buttons-simple {
        justify-content: center;
    }
}