/*--------------------------------------------------------------
# AW WooCommerce Styles
# All WooCommerce front-end styling lives here.
--------------------------------------------------------------*/

.single-product div.product {
    display: flex !important;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start;
}

/* Row 1 — title only, full width (price is hidden on this page). */
.single-product div.product .afa-title-price-col {
    flex: 0 0 100%;
    max-width: 100%;
    box-sizing: border-box;
    order: 1;
}

/* Row 2, left — booking calendar / form. */
.single-product div.product div.summary.entry-summary {
    flex: 0 0 calc(50% - 15px) !important;
    max-width: calc(50% - 15px) !important;
    width: auto !important;
    float: none !important;
    box-sizing: border-box;
    order: 2;
    padding: 0;
    margin: 0;
}

/* Row 2, right — booking summary (cart preview). */
.single-product div.product .afa-cart-preview {
    flex: 0 0 calc(50% - 15px);
    max-width: none;
    width: calc(50% - 15px);
    box-sizing: border-box;
    order: 3;
    margin: 0;
}

/* Row 3 — service details, full width below the calendar + summary. */
.single-product div.product .afa-booking-info-box {
    flex: 0 0 100%;
    max-width: 100%;
    box-sizing: border-box;
    order: 4;
    margin-bottom: 0;
}

/* Split the service-details list into two columns within the full-width box.
   Heading and notes remain full width as siblings of the list. */
.single-product div.product .afa-booking-info-box .afa-booking-details {
    column-count: 2;
    column-gap: 40px;
}

.single-product div.product .afa-booking-info-box .afa-booking-details li {
    break-inside: avoid;
}

/* Force the column to break after the Balance item so columns split by
   content (Deposit, Rate, Minimum, Balance | Advance Notice, Includes,
   Capacity) rather than by CSS height-balancing. */
.single-product div.product .afa-booking-info-box .afa-booking-details li.afa-detail-break {
    break-after: column;
}

/* Stack the calendar + summary on mobile. !important overrides the base
   entry-summary width rule, which is itself !important. */
@media screen and (max-width: 768px) {
    .single-product div.product div.summary.entry-summary,
    .single-product div.product .afa-cart-preview {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Stacked order: booking summary first, calendar second, service
       details third (title stays at order 1). */
    .single-product div.product .afa-cart-preview {
        order: 2;
    }

    .single-product div.product div.summary.entry-summary {
        order: 3;
    }

    .single-product div.product .afa-booking-info-box .afa-booking-details {
        column-count: 1;
    }

    /* Cancel the forced column break on mobile — with a single column it
       would push the items after Balance into a clipped phantom column. */
    .single-product div.product .afa-booking-info-box .afa-booking-details li.afa-detail-break {
        break-after: auto;
    }
}

.wc-bookings-booking-cost {
    display: none !important;
}

/* Booking calendar availability legend. Swatch colours match WC Bookings'
   frontend.css day states: available #2ecc71, booked #c0392b, unavailable white. */
.afa-calendar-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 16px;
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.3;
}
.afa-calendar-legend .afa-legend-title {
    font-weight: 600;
}
.afa-calendar-legend .afa-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.afa-calendar-legend .afa-legend-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    flex: 0 0 auto;
}
.afa-calendar-legend .afa-legend-available {
    background-color: #2ecc71;
}
.afa-calendar-legend .afa-legend-booked {
    background-color: #c0392b;
}
.afa-calendar-legend .afa-legend-unavailable {
    background-color: #fff;
    border-color: rgba(0, 0, 0, 0.3);
}

/*--------------------------------------------------------------
# Service Agreement (checkout)
--------------------------------------------------------------*/
.afa-sa-checkout { margin: 1.5em 0; }
.afa-sa-heading { margin: 0 0 .25em; }
.afa-sa-checkout-intro { margin: 0 0 .75em; }
/* Full-screen modal: dim backdrop + centered, scrollable "document". */
.afa-sa-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    padding: 30px 20px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.afa-sa-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.25s ease;
}
.afa-sa-modal-doc {
    position: relative;
    background: #fff;
    width: 100%;
    max-width: 820px;
    max-height: calc(100vh - 60px);
    border-radius: 4px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    transform: translateY(12px);
    transition: transform 0.25s ease;
}
.afa-sa-modal.is-open .afa-sa-modal-doc {
    transform: translateY(0);
}
.afa-sa-modal-close {
    position: absolute;
    top: 6px;
    right: 12px;
    z-index: 2;
    width: 36px;
    height: 36px;
    padding: 0;
    background: none;
    border: 0;
    font-size: 30px;
    line-height: 1;
    color: #555;
    cursor: pointer;
}
.afa-sa-modal-close:hover { color: #000; }
.afa-sa-doc-scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 44px 48px;
}
@media (max-width: 600px) {
    .afa-sa-modal { padding: 0; }
    .afa-sa-modal-doc { max-height: 100vh; border-radius: 0; }
    .afa-sa-doc-scroll { padding: 48px 22px 28px; }
}
.afa-sa-doc-title { text-align: center; margin: 18px 0; font-size: 1.4rem; }
.afa-sa-logo-wrap { text-align: center; margin: 4px 0 20px; }
.afa-sa-logo { max-height: 90px; width: auto; height: auto; display: inline-block; }
.afa-sa-customer-head, .afa-sa-services-head { margin-bottom: .25em; letter-spacing: .04em; }

/* Filled-in dynamic fields (pricing/terms values + customer info) display like
   completed fill-in-the-blank fields: bold + underlined. NOT applied in the
   services-booked breakdown table. */
.afa-sa-doc .afa-sa-fill,
.afa-sa-doc .afa-sa-cust {
    font-weight: 700;
    display: inline-block;
    border-bottom: 1px solid currentColor;
    line-height: 1.25;
    padding: 0 3px;
}
.afa-sa-doc .afa-sa-cust { min-width: 140px; }
.afa-sa-breakdown {
    width: 100%;
    border-collapse: collapse;
    margin: .5em 0 1em;
    font-size: 14px;
}
.afa-sa-breakdown th, .afa-sa-breakdown td {
    border: 1px solid rgba(0, 0, 0, 0.15);
    padding: 6px 8px;
    text-align: left;
}
.afa-sa-breakdown tfoot th, .afa-sa-breakdown tfoot td { font-weight: 600; }
.afa-sa-clauses { padding-left: 1.4em; }
.afa-sa-clauses li { margin-bottom: .75em; }
.afa-sa-sign-block {
    margin-top: 1.5em;
    padding-top: 1em;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
}
.afa-sa-agree {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 1em;
    font-weight: 600;
}
.afa-sa-agree input { margin-top: 4px; flex: 0 0 auto; }

/* Signature pad inside the agreement */
.afa-sa-sign-label { margin: 0; }
.afa-sa-sign-provider { margin-top: 1.5em; line-height: 2; }
.afa-sa-sign-rule {
    display: inline-block;
    width: 320px;
    max-width: 100%;
    height: 1.1em;
    border-bottom: 1px solid #000;
    vertical-align: bottom;
}
.afa-sa-sign-rule--date { width: 180px; }
.afa-sa-sign-caption { font-size: 12px; }
.afa-sa-sign-tabs { display: inline-flex; gap: 4px; margin: 6px 0 10px; }
.afa-sa-sign-tab {
    background: #eee;
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 4px 14px;
    cursor: pointer;
    font-size: 13px;
    border-radius: 4px;
}
.afa-sa-sign-tab.is-active { background: #212f1d; color: #fff; border-color: #212f1d; }
.afa-sa-sign-canvas {
    display: block;
    width: 100%;
    height: 150px;
    border: 1px dashed rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    background: #fff;
    touch-action: none;
}
.afa-sa-sign-clear {
    margin-top: 6px;
    background: none;
    border: 0;
    padding: 0;
    color: #777;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}
.afa-sa-sign-typed {
    width: 100%;
    max-width: 420px;
    padding: 8px 10px;
    font-size: 16px;
}
.afa-sa-sign-typed-preview {
    display: block;
    min-height: 40px;
    margin-top: 6px;
    font-family: "Brush Script MT", "Segoe Script", cursive;
    font-size: 30px;
    line-height: 1.2;
    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}

/* Modal footer (sticky accept bar) */
.afa-sa-modal-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    padding: 16px 24px;
    background: #fafafa;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
.afa-sa-modal-footer .afa-sa-agree { margin-top: 0; margin-bottom: 10px; }
.afa-sa-sign-error { color: #c0392b; margin: 0 0 10px; font-weight: 600; min-height: 0; }
.afa-sa-sign-error:empty { display: none; }
.afa-sa-accept { width: 100%; }

/* Checkout status line */
.afa-sa-status { margin: 10px 0 0; font-weight: 600; }
.afa-sa-status--unsigned { color: #b8860b; }
.afa-sa-status--signed { color: #2e7d32; }
.afa-sa-status--nudge { color: #c0392b; }

/*--------------------------------------------------------------
# Checkout 3-step accordion (progressive enhancement)
--------------------------------------------------------------*/
/* Inner headings replaced by the step headers. */
.afa-steps-ready #order_review_heading,
.afa-steps-ready .afa-sa-heading { display: none; }

.afa-step {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 14px;
    background: #fff;
    overflow: hidden;
}
.afa-step-header {
    width: 100%;
    text-align: left;
    background: #f3f3f3;
    border: 0;
    padding: 16px 18px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
}
.afa-step.is-open .afa-step-header { background: #2c2c2c; color: #fff; }
.afa-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #2c2c2c;
    color: #fff;
    font-size: 13px;
    flex: 0 0 auto;
}
.afa-step.is-open .afa-step-num { background: #fff; color: #2c2c2c; }
/* Smooth open/close via grid-template-rows 0fr -> 1fr (no fixed height needed). */
.afa-step-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease;
}
.afa-step.is-open .afa-step-body { grid-template-rows: 1fr; }
.afa-step-inner { overflow: hidden; min-height: 0; }
.afa-step-content { padding: 22px 18px; }
.afa-step-next { margin-top: 20px; }

/* Locked future steps: can't be opened until preceding steps are complete. */
.afa-step--locked > .afa-step-header { opacity: 0.55; cursor: not-allowed; }
.afa-step--locked > .afa-step-header .afa-step-num { background: #999; }

.afa-step--flash .afa-step-header { animation: afaStepFlash 0.4s ease 2; }
@keyframes afaStepFlash { 50% { background: #c0392b; color: #fff; } }

/* Always-visible order summary above the steps. */
.afa-order-summary { margin: 0 0 24px; }
.afa-order-summary-title { margin: 0 0 10px; }

/* Disabled calendar days (incl. fully-booked) are dimmed to opacity .35 by
   WC Bookings, washing out the booked red. Bring them up so the colour reads
   closer to its true #c0392b. */
.wc-bookings-booking-form .ui-state-disabled,
.wc-bookings-booking-form .ui-widget-content .ui-state-disabled,
.wc-bookings-booking-form .ui-widget-header .ui-state-disabled {
    opacity: 0.8;
}

.woocommerce div.product .product_title {
	font-size: 3rem;
	text-align: center;
}

.woocommerce div.product p.price {
	font-size: 2rem;
}

/* Hide the price on the booking product page — pricing is explained in the
   service details and booking summary, not the static product price. */
.afa-booking-product.woocommerce div.product p.price {
	display: none;
}

/* Hide the breadcrumb on the booking product page. */
.afa-booking-product .woocommerce-breadcrumb {
	display: none;
}


/*--------------------------------------------------------------
# Checkout "Your Order" deposit/balance breakdown
--------------------------------------------------------------*/

/* Per-line-item totals are redundant now that the breakdown rows show the
   estimated total, deposit, and balance. Hide the PRICE only (not the cell)
   so the cell remains and the row's top border still spans the full width. */
.woocommerce-checkout-review-order-table .cart_item .product-total .woocommerce-Price-amount {
    display: none;
}

/* Hide the "Subtotal" column header text, keeping the cell so the header
   border spans the full table width. */
.woocommerce-checkout-review-order-table thead th.product-total {
    font-size: 0;
}

/* Timing notes: not bold, centered. */
.woocommerce-checkout-review-order-table .afa-review-note td {
    font-weight: 300 !important;
    text-align: center;
}


/*--------------------------------------------------------------
# Order details page deposit/balance breakdown
# (order-received + My Account view-order)
--------------------------------------------------------------*/

/* Hide the per-line-item total PRICE only, keeping the cell so the row's
   border still spans the full table width. */
.woocommerce-table--order-details .product-total .woocommerce-Price-amount {
    display: none;
}

/* Hide the "Total" column header text, keeping the cell/border. */
.woocommerce-table--order-details thead th.product-total {
    font-size: 0;
}

/* Timing notes below the order details table. */
.afa-order-notes {
    text-align: center;
    margin: 0 0 1.5em;
}

.afa-order-notes .afa-review-note {
    font-weight: 300 !important;
    margin: 0.25em 0;
}

/* My Account -> Addresses. WooCommerce tags each address block .col-1 / .col-2
   (its own ~48% grid), but Bootstrap also defines .col-1/.col-2 (8.33%/16.6%)
   and wins, squashing the column. Shipping is disabled on this site, so only
   the billing address shows -- make the address block full width. Handles two
   blocks too (they'd wrap/stack) should shipping ever be enabled. */
.woocommerce-MyAccount-content .woocommerce-Address {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    float: none;
}
.woocommerce-MyAccount-content .woocommerce-Address + .woocommerce-Address {
    margin-top: 2rem;
}