/* ==========================================================================
   Template: Premium Feel (checkout-6 / bgs-d1)
   Design 1 — Inter font, minimal stepper, black primary CTA
   ========================================================================== */

/* ── Base ─────────────────────────────────────────────────────────────────── */
body.bgs-funnel-body {
    background-color: #f8f9fa !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    color: #1a1a1a;
}

/* ── WC form: 2-column grid ─────────────────────────────────────────────── */
.bgs-d1 .woocommerce form.woocommerce-checkout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 4rem; /* gap-16 */
    align-items: start;
}

@media (max-width: 1024px) {
    .bgs-d1 .woocommerce form.woocommerce-checkout {
        display: flex;
        flex-direction: column;
        gap: 3rem;
    }
}

.bgs-d1 #customer_details {
    grid-column: span 7 / span 7;
}

/* Ensure any WooCommerce error notices injected into the grid span the entire top row */
.bgs-d1 .woocommerce form.woocommerce-checkout > .woocommerce-NoticeGroup,
.bgs-d1 .woocommerce form.woocommerce-checkout > .woocommerce-error,
.bgs-d1 .woocommerce form.woocommerce-checkout > .woocommerce-message,
.bgs-d1 .woocommerce form.woocommerce-checkout > .woocommerce-info {
    grid-column: 1 / -1;
    margin-bottom: 0 !important;
}

/* Premium styling for WooCommerce notices */
.bgs-d1 .woocommerce-error,
.bgs-d1 .woocommerce-info,
.bgs-d1 .woocommerce-message {
    border-radius: 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    border: none !important;
    padding: 1rem 1.5rem !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}
.bgs-d1 .woocommerce-error {
    background-color: #fee2e2 !important;
    color: #991b1b !important;
}
.bgs-d1 .woocommerce-error::before {
    color: #ef4444 !important;
}

/* Hide WooCommerce native h3 for billing and order review (we injected custom ones) */
.bgs-d1 .woocommerce-billing-fields > h3,
.bgs-d1 #order_review_heading {
    display: none !important;
}

/* ── Input Fields ─────────────────────────────────────────────────────────── */
.bgs-d1 .form-row input.input-text,
.bgs-d1 .form-row select,
.bgs-d1 .form-row textarea {
    width: 100%;
    padding: 0.875rem 1rem !important;
    border-radius: 0.75rem !important; /* rounded-xl */
    border: 1px solid #e2e8f0 !important;
    background-color: #fff !important;
    font-size: 0.875rem !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    outline: none !important;
    box-shadow: none !important;
}

.bgs-d1 .form-row input.input-text:focus,
.bgs-d1 .form-row select:focus,
.bgs-d1 .form-row textarea:focus {
    border-color: #000 !important;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.03) !important;
}

/* Labels */
.bgs-d1 .form-row label {
    display: block;
    font-size: 0.75rem !important; /* text-xs */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important; /* tracking-widest */
    color: #94a3b8 !important; /* text-slate-400 */
    margin-bottom: 0.5rem !important;
}
.bgs-d1 .form-row label.checkbox {
    text-transform: none !important;
    letter-spacing: normal !important;
    color: #1a1a1a !important;
    font-size: 0.875rem !important;
    display: flex;
    align-items: center;
}
.bgs-d1 .form-row input[type="checkbox"] {
    margin-right: 0.5rem;
}

/* ── Payment Section ─────────────────────────────────────────────────────── */
.bgs-d1 #payment {
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
.bgs-d1 #payment ul.payment_methods {
    border: none !important;
    padding: 0 !important;
    margin-bottom: 2rem !important;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bgs-d1 #payment ul.payment_methods li {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 1rem !important;
    padding: 1rem !important;
    transition: background-color 0.2s !important;
}
.bgs-d1 #payment ul.payment_methods li:hover {
    background-color: #f8fafc !important;
}
.bgs-d1 #payment ul.payment_methods li input {
    accent-color: #000;
}
.bgs-d1 #payment ul.payment_methods li label {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    display: inline-block;
    margin: 0 0 0 0.5rem !important;
}

.bgs-d1 #payment div.payment_box {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.75rem !important;
    padding: 1rem !important;
    margin-top: 1rem !important;
    color: #475569 !important;
    font-size: 0.875rem !important;
}
.bgs-d1 #payment div.payment_box::before {
    display: none !important;
}

/* Place Order Button */
.bgs-d1 #place_order {
    width: 100% !important;
    padding: 1.25rem !important;
    background-color: #000 !important;
    color: #fff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;
    font-size: 0.875rem !important;
    border-radius: 1rem !important; /* rounded-2xl */
    border: none !important;
    margin-top: 1.5rem !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2) !important;
}
.bgs-d1 #place_order:hover {
    background-color: #222 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

/* ── Order Summary Card ───────────────────────────────────────────────────── */
.bgs-d1 #order_review {
    grid-column: span 5 / span 5;
    background: #fff;
    border: 1px solid #eef0f2;
    position: sticky;
    top: 2rem;
    padding: 2rem;
    border-radius: 1.5rem; /* rounded-3xl */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.bgs-d1 table.shop_table {
    border: none !important;
    margin: 0 !important;
    width: 100% !important;
    display: block;
}
.bgs-d1 table.shop_table tbody,
.bgs-d1 table.shop_table tfoot {
    display: block;
    width: 100%;
}
.bgs-d1 table.shop_table tr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 1.5rem;
}
.bgs-d1 table.shop_table th,
.bgs-d1 table.shop_table td {
    border: none !important;
    padding: 0 !important;
    background: none !important;
}
.bgs-d1 table.shop_table thead {
    display: none; /* We show a custom "Your Order" heading instead */
}

/* ── Cart Item Rows ── */
.bgs-d1 table.shop_table td.product-name {
    display: grid;
    grid-template-columns: 5rem 1fr; /* 80px image */
    gap: 0 1rem;
    align-items: center;
    text-align: left;
    flex: 1;
    width: 100%;
}

/* Hide native item subtotal td because we inject it directly into the title wrap for perfect horizontal alignment */
.bgs-d1 table.shop_table tbody td.product-total {
    display: none !important;
}

/* Make the image span all rows so text and variations stack neatly beside it */
.bgs-d1 table.shop_table td.product-name > .relative.shrink-0 {
    grid-row: 1 / 10; /* Span across any implicit rows WC might generate */
    align-self: center;
}

.bgs-d1 table.shop_table td.product-name .bgs-title-wrap {
    align-self: end;
    margin-bottom: 2px;
}

/* Force image to perfectly fill the container regardless of WC core styles */
.bgs-d1 table.shop_table td.product-name .relative.shrink-0 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* Position WC variation details <dl> into the title wrapper column */
.bgs-d1 table.shop_table td.product-name dl.variation {
    grid-column: 2;
    align-self: start;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: 0.75rem !important; /* text-xs */
    color: #94a3b8 !important; /* text-slate-400 */
    font-weight: 500 !important; /* font-medium */
}
.bgs-d1 table.shop_table td.product-name dl.variation dt,
.bgs-d1 table.shop_table td.product-name dl.variation dd,
.bgs-d1 table.shop_table td.product-name dl.variation p {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}
.bgs-d1 table.shop_table td.product-name dl.variation dt {
    margin-right: 0.25rem;
}
.bgs-d1 table.shop_table td.product-name dl.variation dt::after {
    content: ":";
}

.bgs-d1 table.shop_table td.product-total {
    text-align: right;
    font-size: 0.875rem !important; /* text-sm */
    font-weight: 700 !important; /* font-bold */
    color: #1a1a1a !important;
}

/* ── Cart Subtotal / Total rows ── */
.bgs-d1 table.shop_table tfoot {
    border-top: 1px solid #f1f5f9 !important;
    padding-top: 1.5rem !important;
    margin-top: 1rem !important;
}
.bgs-d1 table.shop_table tr.cart-subtotal,
.bgs-d1 table.shop_table tr.shipping,
.bgs-d1 table.shop_table tr.fee,
.bgs-d1 table.shop_table tr.tax-rate,
.bgs-d1 table.shop_table tr.cart-discount {
    margin-bottom: 1rem;
    font-size: 0.875rem !important; /* text-sm */
    font-weight: 500 !important; /* font-medium */
    color: #64748b !important; /* text-slate-500 */
}
.bgs-d1 table.shop_table tr.cart-subtotal td,
.bgs-d1 table.shop_table tr.shipping td,
.bgs-d1 table.shop_table tr.fee td,
.bgs-d1 table.shop_table tr.tax-rate td,
.bgs-d1 table.shop_table tr.cart-discount td {
    color: #1a1a1a !important; /* text-black */
    font-weight: 700 !important; /* font-bold */
    text-align: right;
}

/* Shipping row text-emerald-600 */
.bgs-d1 table.shop_table tr.shipping td {
    color: #059669 !important; /* text-emerald-600 */
}

/* Cart discount overrides */
.bgs-d1 table.shop_table tr.cart-discount th {
    color: #64748b !important;
    font-weight: 500 !important;
}
.bgs-d1 a.woocommerce-remove-coupon {
    display: inline-block !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
    transition: all 0.2s !important;
}

/* Order Total */
.bgs-d1 table.shop_table tr.order-total {
    align-items: baseline;
    padding-top: 1rem !important;
    border-top: 1px solid #f1f5f9 !important;
    margin-bottom: 0 !important;
}
.bgs-d1 table.shop_table tr.order-total th {
    font-size: 1rem !important; /* text-base */
    font-weight: 700 !important; /* font-bold */
    text-transform: uppercase !important; /* uppercase */
    letter-spacing: 0.05em !important; /* tracking-wider */
    color: #1a1a1a !important;
}
.bgs-d1 table.shop_table tr.order-total td {
    text-align: right;
}
.bgs-d1 table.shop_table tr.order-total td strong {
    font-size: 1.875rem !important; /* text-3xl */
    font-weight: 900 !important; /* font-black */
    color: #1a1a1a !important;
}
.bgs-d1 table.shop_table tr.order-total td small.includes_tax {
    display: block;
    font-size: 0.625rem !important; /* text-[10px] */
    color: #94a3b8 !important; /* text-slate-400 */
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: -0.05em !important; /* tracking-tighter */
    margin-top: 0.25rem;
}

/* ── Privacy Policy Fine Print ── */
.bgs-d1 .woocommerce-terms-and-conditions-wrapper,
.bgs-d1 .woocommerce-privacy-policy-text {
    font-size: 0.6875rem !important; /* text-[11px] */
    color: #94a3b8 !important; /* text-slate-400 */
    line-height: 1.6 !important;
    margin-top: 1.5rem !important;
    text-align: left;
}
.bgs-d1 .woocommerce-privacy-policy-text p {
    margin: 0 !important;
    padding: 0 !important;
}
.bgs-d1 .woocommerce-privacy-policy-text a {
    color: #1a1a1a !important; /* text-black */
    text-decoration: underline !important;
    font-weight: 700 !important;
}

/* Hide default WooCommerce coupon form and toggle */
.bgs-d1 .woocommerce-form-coupon-toggle,
.bgs-d1 form.checkout_coupon {
    display: none !important;
}

/* Order Bumps Styling overrides for Design 1 */
.bgs-d1 .bgs-bump-wrap {
    background: #fff !important;
    border: 2px dashed #000 !important;
    border-radius: 1rem !important;
    padding: 1.5rem !important;
    margin: 2rem 0 !important;
    transition: all 0.2s ease !important;
}
.bgs-d1 .bgs-bump-wrap:hover {
    background: #fafafa !important;
}