/**
 * Grantha Storefront — Nocturne One-Page Checkout Stylesheet
 * Seamless 2-Column High-Conversion Responsive Checkout for Magento 2
 */

/* ==========================================================================
   1. Checkout Container & Grid Layout
   ========================================================================== */
.checkout-index-index .page-main {
    max-width: 1180px;
    margin: 0 auto;
    padding: 30px 20px 80px;
    box-sizing: border-box;
}

.checkout-index-index .page-title-wrapper {
    display: none;
}

/* Two-column responsive checkout layout */
.checkout-container {
    display: grid !important;
    grid-template-columns: 1fr 380px !important;
    gap: 40px !important;
    align-items: start !important;
    width: 100% !important;
}

/* Ensure full-width utility and message elements span across both grid columns */
html body .opc-progress-bar,
.checkout-index-index .opc-progress-bar,
.checkout-index-index .authentication-wrapper,
.checkout-index-index [data-role="checkout-messages"],
.checkout-index-index .messages,
.checkout-index-index #checkout-loader {
    grid-column: 1 / -1 !important;
}

/* Explicitly anchor Left Column (Checkout Steps & Forms) */
.checkout-index-index .opc-wrapper,
.opc-wrapper {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

/* Explicitly anchor Right Column (Order Summary Sticky Sidebar) */
.checkout-index-index .opc-sidebar,
.opc-sidebar {
    grid-column: 2 !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    position: sticky !important;
    top: 90px !important;
}

.opc-estimated-wrapper {
    display: none !important;
}

@media (max-width: 960px) {
    .checkout-container {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    .checkout-index-index .opc-wrapper,
    .opc-wrapper,
    .checkout-index-index .opc-sidebar,
    .opc-sidebar {
        grid-column: 1 !important;
        position: static !important;
    }
}

/* Reset list formatting for checkout steps */
.checkout-index-index .opc,
.checkout-index-index ol.opc,
.checkout-index-index #checkoutSteps {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.checkout-index-index .opc > li,
.checkout-index-index ol.opc > li,
.checkout-index-index #checkoutSteps > li {
    list-style: none !important;
    margin: 0 0 24px 0 !important;
}

/* ==========================================================================
   2. Progress Bar & Step Navigation
   ========================================================================== */
/* In One-Page Checkout all sections are unified, so hide the multi-step progress bar */
html body .opc-progress-bar,
.checkout-index-index .opc-progress-bar {
    display: none !important;
}

/* Hide intermediate 'Next' button from shipping step (payment is directly below) */
#shipping-method-buttons-container,
.checkout-index-index #shipping-method-buttons-container {
    display: none !important;
}
/* Shipping Policy helper styling */
.shipping-policy-block,
.checkout-index-index .shipping-policy-block {
    display: block !important;
    margin: 8px 0 16px 0 !important;
}

.shipping-policy-block .field-tooltip-action:before,
.checkout-index-index .shipping-policy-block .field-tooltip-action:before {
    content: none !important;
    display: none !important;
}

.shipping-policy-block .field-tooltip-action,
.checkout-index-index .shipping-policy-block .field-tooltip-action,
.checkout-index-index .shipping-policy-block .field-tooltip .field-tooltip-action {
    display: inline !important;
    color: var(--g-accent) !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    font-size: 13px !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    border-radius: 0 !important;
}

/* ==========================================================================
   3. Step Headings & Section Cards
   ========================================================================== */
.step-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--g-text) !important;
    border-bottom: 1px solid var(--g-line) !important;
    padding-bottom: 12px !important;
    margin: 0 0 20px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.checkout-shipping-address,
.checkout-shipping-method,
.checkout-payment-method {
    background: var(--g-card);
    border: 1px solid var(--g-line);
    border-radius: 10px;
    padding: 24px 28px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   4. Form Inputs & 2-Column Responsive Grid
   ========================================================================== */
.checkout-index-index fieldset {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
}

.checkout-index-index fieldset legend {
    padding: 0 !important;
    margin-bottom: 6px !important;
    display: block !important;
    float: none !important;
    border: none !important;
    width: 100% !important;
}

/* Address Form 2-Column Responsive Grid */
.checkout-index-index .form-shipping-address .fieldset.address,
.checkout-index-index .form-billing-address .fieldset.address,
.checkout-index-index .fieldset.address {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px 20px !important;
}

.checkout-index-index .fieldset.address > .field {
    margin: 0 !important;
}

/* First Name & Last Name (Row 1) */
.checkout-index-index .fieldset.address > div[name$=".firstname"] {
    grid-column: 1 / 2 !important;
}
.checkout-index-index .fieldset.address > div[name$=".lastname"] {
    grid-column: 2 / 3 !important;
}

/* Phone Number & Company (Row 2) */
.checkout-index-index .fieldset.address > div[name$=".firstname"] {
    grid-row: 1 !important;
}
.checkout-index-index .fieldset.address > div[name$=".lastname"] {
    grid-row: 1 !important;
}
.checkout-index-index .fieldset.address > div[name$=".telephone"] {
    grid-column: 1 / 2 !important;
    grid-row: 2 !important;
}
.checkout-index-index .fieldset.address > div[name$=".company"] {
    grid-column: 2 / 3 !important;
    grid-row: 2 !important;
}

/* Street Address (Row 3, Full Width) */
.checkout-index-index .fieldset.address > .field.street,
.checkout-index-index .fieldset.address > div[name$=".street"] {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
}

/* Hide duplicate/redundant inner "Street Address: Line 1" sub-labels */
.checkout-index-index .field.street .field .label,
.checkout-index-index .field.street .nested .field .label,
.checkout-index-index div[name$=".street"] .field .label {
    display: none !important;
}

.checkout-index-index .field.street .field,
.checkout-index-index div[name$=".street"] .field {
    margin-bottom: 8px !important;
}

.checkout-index-index .field.street .field:last-child,
.checkout-index-index div[name$=".street"] .field:last-child {
    margin-bottom: 0 !important;
}

/* Country & State/Province (Row 4) */
.checkout-index-index .fieldset.address > div[name$=".country_id"] {
    grid-column: 1 / 2 !important;
    grid-row: 4 !important;
}
.checkout-index-index .fieldset.address > div[name$=".region_id"],
.checkout-index-index .fieldset.address > div[name$=".region"] {
    grid-column: 2 / 3 !important;
    grid-row: 4 !important;
}

/* City & Zip/Postal Code (Row 5) */
.checkout-index-index .fieldset.address > div[name$=".city"] {
    grid-column: 1 / 2 !important;
    grid-row: 5 !important;
}
.checkout-index-index .fieldset.address > div[name$=".postcode"] {
    grid-column: 2 / 3 !important;
    grid-row: 5 !important;
}

/* Save in address book checkbox */
.checkout-index-index .fieldset.address > .field.choice {
    grid-column: 1 / -1 !important;
    margin-top: 4px !important;
}

@media (max-width: 640px) {
    .checkout-index-index .form-shipping-address .fieldset.address,
    .checkout-index-index .form-billing-address .fieldset.address,
    .checkout-index-index .fieldset.address {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .checkout-index-index .fieldset.address > .field,
    .checkout-index-index .fieldset.address > div[name] {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
}

.fieldset > .field {
    margin: 0 0 16px 0 !important;
}

.field .label {
    display: flex !important;
    align-items: center !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: var(--g-soft2) !important;
    margin-bottom: 6px !important;
    text-align: left !important;
}

.field .label span:after {
    content: "" !important;
}

.field.required > .label:after,
.field._required > .label:after {
    content: " *" !important;
    color: #e53e3e !important;
    font-weight: bold;
}

.control input.input-text,
.control input[type="text"],
.control input[type="email"],
.control input[type="password"],
.control input[type="tel"],
.control select,
.checkout-index-index input.input-text,
.checkout-index-index select {
    width: 100% !important;
    height: 42px !important;
    padding: 0 14px !important;
    font-size: 13.5px !important;
    font-family: inherit !important;
    color: var(--g-text) !important;
    background: var(--g-bg) !important;
    border: 1px solid var(--g-line) !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.control input.input-text:focus,
.control input[type="text"]:focus,
.control input[type="email"]:focus,
.control select:focus,
.checkout-index-index input.input-text:focus,
.checkout-index-index select:focus {
    border-color: var(--g-accent) !important;
    box-shadow: 0 0 0 3px var(--g-accent-soft) !important;
    outline: none !important;
}

/* Tooltip trigger & popover */
.field-tooltip,
.checkout-index-index .field-tooltip {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
}

.field-tooltip > .label,
.checkout-index-index .field-tooltip > .label {
    display: none !important;
}

.field-tooltip .field-tooltip-action,
.checkout-index-index .field-tooltip .field-tooltip-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    border-radius: 50% !important;
    background: var(--g-line) !important;
    color: var(--g-muted) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    border: none !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}

.field-tooltip .field-tooltip-action:before,
.checkout-index-index .field-tooltip .field-tooltip-action:before {
    content: "?" !important;
    display: block !important;
}

.field-tooltip .field-tooltip-action:hover,
.checkout-index-index .field-tooltip .field-tooltip-action:hover {
    background: var(--g-accent) !important;
    color: #ffffff !important;
}

.field-tooltip-content,
.checkout-index-index .field-tooltip-content {
    display: none !important;
    position: absolute !important;
    bottom: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    max-width: 220px !important;
    background: var(--g-card) !important;
    border: 1px solid var(--g-line) !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    color: var(--g-text) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    padding: 8px 12px !important;
    z-index: 100 !important;
    white-space: normal !important;
    pointer-events: none !important;
}

/* Tooltip pointer arrow */
.field-tooltip-content:after,
.checkout-index-index .field-tooltip-content:after {
    content: "" !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    margin-left: -5px !important;
    border-width: 5px !important;
    border-style: solid !important;
    border-color: var(--g-card) transparent transparent transparent !important;
}

.field-tooltip:hover .field-tooltip-content,
.field-tooltip._active .field-tooltip-content,
.checkout-index-index .field-tooltip:hover .field-tooltip-content,
.checkout-index-index .field-tooltip._active .field-tooltip-content {
    display: block !important;
}

.field-error,
div.mage-error {
    color: #e53e3e !important;
    font-size: 12px !important;
    margin-top: 4px !important;
}

/* ==========================================================================
   5. Delivery / Shipping Methods (Interactive Radio Cards)
   ========================================================================== */
.table-checkout-shipping-method {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
    margin-top: 10px !important;
}

.table-checkout-shipping-method thead {
    display: none !important;
}

.table-checkout-shipping-method tbody tr {
    background: var(--g-card) !important;
    border: 1.5px solid var(--g-line) !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    padding: 12px 16px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    box-sizing: border-box !important;
}

.table-checkout-shipping-method tbody tr:hover {
    border-color: var(--g-accent) !important;
    background: var(--g-line-2) !important;
}

.table-checkout-shipping-method td {
    padding: 0 !important;
    border: none !important;
    font-size: 13.5px !important;
    color: var(--g-text) !important;
}

.table-checkout-shipping-method .col-method:first-child {
    flex: none !important;
    margin-right: 12px !important;
    display: flex !important;
    align-items: center !important;
}

.table-checkout-shipping-method .col-method:first-child input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    cursor: pointer !important;
    accent-color: var(--g-accent) !important;
}

.table-checkout-shipping-method .col-method[attr*="label_method"],
.table-checkout-shipping-method td[id*="label_method"] {
    flex: 1 !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

.table-checkout-shipping-method .col-carrier {
    display: none !important;
}

.table-checkout-shipping-method .col-price {
    flex: none !important;
    font-weight: 700 !important;
    color: var(--g-text) !important;
    margin-left: 12px !important;
    font-size: 14px !important;
}

/* ==========================================================================
   6. Payment Methods (Interactive Selection Cards)
   ========================================================================== */
.payment-group {
    margin-bottom: 16px !important;
}

.payment-method {
    border: 1.5px solid var(--g-line) !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
    padding: 16px 18px !important;
    background: var(--g-card) !important;
    transition: all 0.15s ease !important;
}

.payment-method._active {
    border-color: var(--g-accent) !important;
    box-shadow: 0 0 0 1px var(--g-accent) !important;
    background: var(--g-card) !important;
}

.payment-method-title {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--g-text) !important;
    cursor: pointer !important;
}

.payment-method-title input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    cursor: pointer !important;
    accent-color: var(--g-accent) !important;
}

.payment-method-content {
    padding-top: 16px !important;
    border-top: 1px solid var(--g-line-2) !important;
    margin-top: 14px !important;
}

.checkout-agreements {
    margin-top: 16px !important;
    font-size: 12.5px !important;
    color: var(--g-muted) !important;
}

/* ==========================================================================
   7. Buttons & Actions
   ========================================================================== */
.actions-toolbar {
    margin-top: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
}

.actions-toolbar .action.primary.checkout,
.action.primary.checkout,
button.action.continue.primary,
button.action.primary.checkout {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 46px !important;
    padding: 0 32px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    color: #ffffff !important;
    background: var(--g-accent) !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: background 0.15s ease, transform 0.1s ease !important;
    text-decoration: none !important;
}

.actions-toolbar .action.primary.checkout:hover,
.action.primary.checkout:hover,
button.action.continue.primary:hover,
button.action.primary.checkout:hover {
    background: var(--g-accent-hover) !important;
}

/* ==========================================================================
   8. Order Summary Sticky Sidebar (Permanently Expanded)
   ========================================================================== */
.opc-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    position: sticky !important;
    top: 90px !important;
}

.opc-block-summary {
    background: var(--g-card) !important;
    border: 1px solid var(--g-line) !important;
    border-radius: 10px !important;
    padding: 22px 24px !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.opc-block-summary > .title {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--g-text) !important;
    border-bottom: 1px solid var(--g-line) !important;
    padding-bottom: 12px !important;
    margin-bottom: 16px !important;
    display: block !important;
}

.opc-block-summary .items-in-cart {
    border-bottom: 1px solid var(--g-line) !important;
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;
}

.opc-block-summary .items-in-cart > .title {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--g-muted2) !important;
    margin-bottom: 12px !important;
    display: block !important;
    cursor: default !important;
}

/* Always force open summary item content */
.opc-block-summary .items-in-cart .content.minicart-items {
    display: block !important;
}

.opc-block-summary .minicart-items {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-height: 380px !important;
    overflow-y: auto !important;
}

.opc-block-summary .product-item {
    display: flex !important;
    gap: 12px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--g-line-2) !important;
}

.opc-block-summary .product-item:last-child {
    border-bottom: none !important;
}

.opc-block-summary .product-image-container {
    width: 48px !important;
    height: 64px !important;
    flex: none !important;
}

.opc-block-summary .product-image-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    border: 1px solid var(--g-line) !important;
}

.opc-block-summary .product-item-name {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--g-text) !important;
    line-height: 1.4 !important;
}

.opc-block-summary .product-item-details .price {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--g-text) !important;
}

.table-totals {
    width: 100% !important;
    border-collapse: collapse !important;
}

.table-totals th,
.table-totals td {
    padding: 8px 0 !important;
    font-size: 13px !important;
    color: var(--g-soft2) !important;
}

.table-totals td {
    text-align: right !important;
    color: var(--g-text) !important;
}

.table-totals .grand.totals th,
.table-totals .grand.totals td {
    padding-top: 14px !important;
    border-top: 1px solid var(--g-line) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--g-text) !important;
}

.table-totals .grand.totals td .price {
    color: var(--g-accent) !important;
    font-size: 17px !important;
}

/* ==========================================================================
   9. Nocturne Checkout Refinements
   ========================================================================== */

/* --- 9.1 Sign-in dropdown -------------------------------------------------
   The authentication block is a Magento modal. Without Luma's modal styles it
   renders as a raw form at the top of the page, so it is kept closed until the
   modal marks it as shown. */
.checkout-index-index .authentication-wrapper {
    display: flex !important;
    justify-content: flex-end !important;
    margin: 0 0 12px 0 !important;
    position: relative !important;
    z-index: 20 !important;
}

.checkout-index-index .action-auth-toggle {
    display: inline-flex !important;
    align-items: center !important;
    height: 34px !important;
    padding: 0 16px !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--g-accent) !important;
    background: transparent !important;
    border: 1px solid var(--g-line) !important;
    border-radius: 6px !important;
    cursor: pointer !important;
}

.checkout-index-index .action-auth-toggle:hover {
    border-color: var(--g-accent) !important;
    background: var(--g-line-2) !important;
}

.checkout-index-index .authentication-dropdown,
.checkout-index-index .block-authentication {
    display: none !important;
}

.checkout-index-index .authentication-dropdown._show {
    display: block !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    width: min(420px, 92vw) !important;
    padding: 22px 24px !important;
    background: var(--g-card) !important;
    border: 1px solid var(--g-line) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16) !important;
    text-align: left !important;
    z-index: 30 !important;
}

.checkout-index-index .authentication-dropdown._show .block-authentication {
    display: block !important;
}

.checkout-index-index .authentication-dropdown .block-title strong {
    font-size: 16px !important;
    font-weight: 600 !important;
}

.checkout-index-index .authentication-dropdown .action.action-login,
.checkout-index-index .authentication-dropdown .action.primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 42px !important;
    padding: 0 24px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    background: var(--g-accent) !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
}

.checkout-index-index .modal-custom-overlay {
    display: none !important;
}

/* --- 9.2 One open payment method at a time -------------------------------
   Each method renders its own billing address, terms and Place Order button.
   Showing them all at once produced six stacked copies of the same controls. */
.checkout-index-index .payment-method > .payment-method-content {
    display: none !important;
}

.checkout-index-index .payment-method._active > .payment-method-content {
    display: block !important;
}

.checkout-index-index .payment-method:hover {
    border-color: var(--g-accent) !important;
}

.checkout-index-index .payment-method-title label.label {
    margin: 0 !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    color: var(--g-text) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 !important;
}

/* Gateway logo strips (PayHere & friends) belong on one wrapped row, not stacked */
.checkout-index-index .payment-method-title img,
.checkout-index-index .payment-method-title .payment-icon,
.checkout-index-index .payment-method-content > p img {
    display: inline-block !important;
    width: auto !important;
    max-width: 46px !important;
    max-height: 22px !important;
    height: auto !important;
    object-fit: contain !important;
    vertical-align: middle !important;
    margin: 0 !important;
}

.checkout-index-index .payment-method-title label.label span,
.checkout-index-index .payment-method-title .payment-method-icons {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Gateway helper copy */
.checkout-index-index .payment-method-content > p,
.checkout-index-index .payment-method-note {
    margin: 0 0 14px 0 !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    color: var(--g-muted) !important;
}

/* --- 9.3 Billing address inside a payment method ------------------------- */
.checkout-index-index .payment-method-billing-address {
    margin-bottom: 14px !important;
}

.checkout-index-index .payment-method-billing-address .field.choice {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 10px 0 !important;
}

.checkout-index-index .payment-method-billing-address .field.choice input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    flex: none !important;
    accent-color: var(--g-accent) !important;
}

.checkout-index-index .payment-method-billing-address .field.choice label {
    margin: 0 !important;
    font-size: 13px !important;
    color: var(--g-soft2) !important;
    cursor: pointer !important;
}

.checkout-index-index .billing-address-details {
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    color: var(--g-muted) !important;
    padding: 10px 12px !important;
    background: var(--g-line-2) !important;
    border-radius: 6px !important;
}

.checkout-index-index .billing-address-details:empty {
    display: none !important;
}

.checkout-index-index .billing-address-form .fieldset.address {
    margin-top: 12px !important;
}

/* --- 9.4 Terms & conditions ---------------------------------------------- */
.checkout-index-index .checkout-agreements-block {
    margin: 4px 0 16px 0 !important;
}

.checkout-index-index .checkout-agreement.field.choice {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin: 0 !important;
}

.checkout-index-index .checkout-agreement input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    margin: 1px 0 0 0 !important;
    flex: none !important;
    accent-color: var(--g-accent) !important;
}

.checkout-index-index .checkout-agreement label.label {
    margin: 0 !important;
    display: block !important;
    font-size: 12.5px !important;
    color: var(--g-soft2) !important;
}

.checkout-index-index .checkout-agreement .action-show {
    padding: 0 !important;
    border: none !important;
    background: none !important;
    font-family: inherit !important;
    font-size: 12.5px !important;
    color: var(--g-accent) !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    text-align: left !important;
}

/* --- 9.5 Place Order ------------------------------------------------------ */
.checkout-index-index .payment-method-content .actions-toolbar {
    margin-top: 4px !important;
}

.checkout-index-index .payment-method-content .actions-toolbar .primary {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
}

.checkout-index-index .action.primary.checkout[disabled],
.checkout-index-index .action.primary.checkout.disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
}

/* --- 9.6 Delivery method rows -------------------------------------------
   Markup order is radio, price, method label, carrier label; the price reads
   far better parked at the end of the row. */
.table-checkout-shipping-method tbody tr {
    gap: 12px !important;
    text-align: left !important;
}

.table-checkout-shipping-method tbody tr._active,
.table-checkout-shipping-method tbody tr:has(input[type="radio"]:checked) {
    border-color: var(--g-accent) !important;
    background: var(--g-accent-soft) !important;
}

.table-checkout-shipping-method .col-method:first-child {
    order: 0 !important;
    margin-right: 0 !important;
}

.table-checkout-shipping-method td[id^="label_method"] {
    order: 1 !important;
    flex: 1 1 auto !important;
    text-align: left !important;
    line-height: 1.45 !important;
}

.table-checkout-shipping-method td[id^="label_carrier"] {
    order: 2 !important;
    flex: none !important;
    display: block !important;
    font-size: 12px !important;
    color: var(--g-muted) !important;
    text-align: right !important;
}

.table-checkout-shipping-method .col-price {
    order: 3 !important;
    margin-left: auto !important;
    white-space: nowrap !important;
    text-align: right !important;
}

/* --- 9.7 Tooltips docked inside their input ------------------------------ */
.checkout-index-index .control._with-tooltip {
    position: relative !important;
}

.checkout-index-index .control._with-tooltip input.input-text {
    padding-right: 38px !important;
}

.checkout-index-index .control._with-tooltip .field-tooltip {
    position: absolute !important;
    top: 13px !important;
    right: 12px !important;
    margin: 0 !important;
}

.checkout-index-index .field .note {
    display: block !important;
    margin-top: 6px !important;
    font-size: 12px !important;
    color: var(--g-muted) !important;
}

/* Shipping policy reads as a sentence, not a tooltip bubble */
.checkout-index-index .shipping-policy-block.field-tooltip {
    position: static !important;
    display: block !important;
    margin: 0 0 14px 0 !important;
    width: auto !important;
}

.checkout-index-index .shipping-policy-block .field-tooltip-action span {
    display: inline !important;
    white-space: normal !important;
}

/* --- 9.8 Order summary --------------------------------------------------- */
.opc-block-summary .table-totals {
    margin-top: 4px !important;
}

.opc-block-summary .table-totals .totals.shipping .value {
    display: block !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;
    color: var(--g-muted) !important;
}

.opc-block-summary .product-item .details-qty {
    font-size: 12px !important;
    color: var(--g-muted) !important;
    margin-top: 2px !important;
}

.opc-block-summary .product-item .subtotal {
    margin-left: auto !important;
    text-align: right !important;
}

.opc-block-summary .product-item .product {
    display: flex !important;
    gap: 12px !important;
    width: 100% !important;
}

/* Loading state so a totals refresh is visibly happening */
.checkout-index-index .loading-mask {
    background: rgba(0, 0, 0, 0.12) !important;
}

/* --- 9.9 Mobile ----------------------------------------------------------- */
@media (max-width: 960px) {
    /* Summary first on mobile: shoppers want the total before the forms */
    .checkout-index-index .opc-sidebar,
    .opc-sidebar {
        order: -1 !important;
    }

    .checkout-index-index .authentication-dropdown._show {
        position: static !important;
        width: 100% !important;
    }
}

@media (max-width: 640px) {
    .checkout-index-index .page-main {
        padding: 16px 14px 60px !important;
    }

    .checkout-shipping-address,
    .checkout-shipping-method,
    .checkout-payment-method {
        padding: 18px 16px !important;
    }

    .table-checkout-shipping-method tbody tr {
        flex-wrap: wrap !important;
    }

    .table-checkout-shipping-method td[id^="label_carrier"] {
        order: 4 !important;
        width: 100% !important;
        text-align: left !important;
        padding-left: 30px !important;
    }

    .checkout-index-index .payment-method-content .actions-toolbar .primary,
    .checkout-index-index .action.primary.checkout {
        width: 100% !important;
    }
}

/* --- 9.10 Summary reading order -----------------------------------------
   Items first, money last, and only one "Order Summary" heading: the totals
   table ships its own <caption> that duplicates the block title. */
.opc-block-summary {
    display: flex !important;
    flex-direction: column !important;
}

.opc-block-summary > .title {
    order: 0 !important;
}

.opc-block-summary .items-in-cart {
    order: 1 !important;
}

.opc-block-summary .table-totals {
    order: 2 !important;
}

.opc-block-summary .table-caption {
    display: none !important;
}

.table-totals th,
.table-totals .mark {
    text-align: left !important;
    font-weight: 500 !important;
}

.table-totals .grand.totals th,
.table-totals .grand.totals .mark {
    font-weight: 700 !important;
}

/* --- 9.11 Payment method title stays a single row -------------------------
   The shared .field.choice rules stack the control above its label, which put
   each payment radio on its own centred line above the gateway name. */
.checkout-index-index .payment-method-title.field.choice,
.checkout-index-index .payment-method-title {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    flex-wrap: nowrap !important;
    padding: 0 !important;
}

.checkout-index-index .payment-method-title > input[type="radio"] {
    flex: none !important;
    align-self: flex-start !important;
    margin-top: 2px !important;
}

.checkout-index-index .payment-method-title label.label {
    justify-content: flex-start !important;
    text-align: left !important;
    flex-wrap: wrap !important;
}

/* Same correction for the billing / terms checkbox rows */
.checkout-index-index .payment-method-content .field.choice,
.checkout-index-index .checkout-agreement.field.choice {
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

/* --- 9.12 Discount code & gift card toggles look clickable ---------------- */
.checkout-index-index .payment-option.opc-payment-additional {
    border: 1px solid var(--g-line) !important;
    border-radius: 8px !important;
    margin-bottom: 10px !important;
    background: var(--g-card) !important;
    overflow: hidden !important;
}

.checkout-index-index .payment-option .payment-option-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    cursor: pointer !important;
    user-select: none !important;
}

.checkout-index-index .payment-option .payment-option-title:hover {
    background: var(--g-line-2) !important;
}

.checkout-index-index .payment-option .payment-option-title .action-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    font-family: inherit !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--g-accent) !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

/* Chevron affordance, rotated once the section is open */
.checkout-index-index .payment-option .payment-option-title:after {
    content: "" !important;
    flex: none !important;
    width: 8px !important;
    height: 8px !important;
    margin-right: 4px !important;
    border-right: 2px solid var(--g-muted) !important;
    border-bottom: 2px solid var(--g-muted) !important;
    transform: rotate(45deg) translateY(-2px) !important;
    transition: transform 0.15s ease !important;
}

.checkout-index-index .payment-option._active > .payment-option-title:after {
    transform: rotate(-135deg) translateY(-2px) !important;
}

.checkout-index-index .payment-option .payment-option-content {
    padding: 0 16px 16px !important;
    border-top: 1px solid var(--g-line-2) !important;
}

.checkout-index-index .payment-option .payment-option-inner {
    margin-bottom: 10px !important;
}

.checkout-index-index .payment-option .actions-toolbar {
    margin-top: 10px !important;
    justify-content: flex-start !important;
}

.checkout-index-index .payment-option .action.action-apply,
.checkout-index-index .payment-option .action.primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 42px !important;
    padding: 0 22px !important;
    font-family: inherit !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    background: var(--g-accent) !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
}

.checkout-index-index .payment-option .action.action-cancel {
    background: none !important;
    border: 1px solid var(--g-line) !important;
    color: var(--g-soft2) !important;
}

/* --- 9.13 Shipping policy link ------------------------------------------
   Section 4's generic tooltip styling squeezes this into a 16px circle, so the
   sentence wrapped three words deep behind a "?" bubble. */
.checkout-index-index .shipping-policy-block.field-tooltip .field-tooltip-action,
.checkout-index-index .shipping-policy-block .field-tooltip-action {
    display: inline !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    color: var(--g-accent) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    text-decoration: underline !important;
}

.checkout-index-index .shipping-policy-block.field-tooltip .field-tooltip-action:before,
.checkout-index-index .shipping-policy-block .field-tooltip-action:before {
    content: none !important;
    display: none !important;
}

.checkout-index-index .shipping-policy-block.field-tooltip .field-tooltip-action:hover {
    background: none !important;
    color: var(--g-accent-hover) !important;
}

/* --- 9.14 Savings lines --------------------------------------------------- */
.table-totals .grantha-list-total th,
.table-totals .grantha-list-total .price {
    color: var(--g-muted) !important;
}

.table-totals .grantha-list-total .price {
    text-decoration: line-through !important;
}

.table-totals .grantha-savings th,
.table-totals .grantha-savings .price {
    color: #2f855a !important;
    font-weight: 600 !important;
}

/* The shared .field.choice rules stack these too, dropping the chevron below the label. */
.checkout-index-index .payment-option .payment-option-title.field.choice,
.checkout-index-index .payment-option .payment-option-title {
    flex-direction: row !important;
    text-align: left !important;
    flex-wrap: nowrap !important;
}

.checkout-index-index .payment-option .payment-option-title .action-toggle {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* --- 9.15 Cash on Delivery locked by the delivery method -------------------
   COD stays on the page when the chosen delivery method does not support it, so
   shoppers who came for it can see why, rather than watching it disappear. */
.checkout-index-index .payment-method._grantha-unavailable {
    opacity: 0.65 !important;
    background: var(--g-line-2) !important;
}

.checkout-index-index .payment-method._grantha-unavailable .payment-method-title,
.checkout-index-index .payment-method._grantha-unavailable .payment-method-title label.label,
.checkout-index-index .payment-method._grantha-unavailable input[type="radio"] {
    cursor: not-allowed !important;
    color: var(--g-muted) !important;
}

.checkout-index-index .grantha-payment-notice {
    display: flex;
    align-items: flex-start !important;
    gap: 8px !important;
    margin: 10px 0 0 0 !important;
    padding: 8px 12px !important;
    background: var(--g-card) !important;
    border: 1px solid var(--g-line) !important;
    border-left: 3px solid #d69e2e !important;
    border-radius: 4px !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    color: var(--g-soft2) !important;
}

.checkout-index-index .grantha-payment-notice:before {
    content: "!" !important;
    flex: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    margin-top: 1px !important;
    border-radius: 50% !important;
    background: #d69e2e !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

/* Koko: Buy Now Pay Later — informational line under the method name. Shares the payment-notice
   shape but not its warning icon, since this is copy, not a caution. */
.checkout-index-index .grantha-koko-notice {
    display: block !important;
    margin: 10px 0 0 0 !important;
    padding: 8px 12px !important;
    background: var(--g-card) !important;
    border: 1px solid var(--g-line) !important;
    border-left: 3px solid var(--g-accent) !important;
    border-radius: 4px !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    color: var(--g-soft2) !important;
}