@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=DM+Serif+Display&display=swap');

/* ─── Tokens ─────────────────────────────────────────────────────────────── */
:root {
    --fb-blue: #2563eb;
    --fb-blue-dark: #1d4ed8;
    --fb-blue-tint: #eff6ff;
    --fb-blue-light: #dbeafe;
    --fb-red: #dc2626;
    --fb-gray-50: #f9fafb;
    --fb-gray-100: #f3f4f6;
    --fb-gray-200: #e5e7eb;
    --fb-gray-300: #d1d5db;
    --fb-gray-400: #9ca3af;
    --fb-gray-500: #6b7280;
    --fb-gray-700: #374151;
    --fb-gray-900: #111827;
    --fb-white: #ffffff;
    --fb-shadow-sm: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .06);
    --fb-shadow-blue: 0 4px 20px rgba(37, 99, 235, .20);
    --fb-shadow-hover: 0 6px 24px rgba(37, 99, 235, .30);
    --fb-focus-ring: 0 0 0 3px rgba(37, 99, 235, .12);
    --fb-radius: 10px;
    --fb-radius-lg: 16px;
    --fb-radius-full: 9999px;
    --fb-font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --fb-font-display: 'DM Serif Display', Georgia, serif;
    --fb-transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Page title ─────────────────────────────────────────────────────────── */
h1.wp-block-post-title {
    font-family: var(--fb-font-display) !important;
    font-weight: 400 !important;
    letter-spacing: -0.02em !important;
    text-align: left !important;
}

/* ─── Global font ────────────────────────────────────────────────────────── */
.wc-block-checkout,
.wc-block-checkout * {
    font-family: var(--fb-font-sans) !important;
}

/* ─── Section headings ───────────────────────────────────────────────────── */
.wc-block-checkout__step-heading,
.wc-block-components-checkout-step__title {
    font-family: var(--fb-font-display) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    color: var(--fb-gray-900) !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 16px !important;
}

/* ─── Text inputs ────────────────────────────────────────────────────────── */
.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-blocks-components-select select,
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-checkout input[type="text"],
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="tel"],
.wc-block-checkout select {
    font-family: var(--fb-font-sans) !important;
    font-size: 14px !important;
    color: var(--fb-gray-900) !important;
    border: 1.5px solid var(--fb-gray-200) !important;
    border-radius: var(--fb-radius) !important;
    padding: 12px 16px !important;
    background: var(--fb-white) !important;
    box-shadow: var(--fb-shadow-sm) !important;
    transition: border-color var(--fb-transition), box-shadow var(--fb-transition) !important;
    outline: none !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus,
.wc-blocks-components-select select:focus,
.wc-blocks-components-select .wc-blocks-components-select__select:focus,
.wc-block-checkout input[type="text"]:focus,
.wc-block-checkout input[type="email"]:focus,
.wc-block-checkout input[type="tel"]:focus,
.wc-block-checkout select:focus {
    border-color: var(--fb-blue) !important;
    box-shadow: var(--fb-focus-ring) !important;
}

.wc-block-components-text-input label,
.wc-block-components-select label,
.wc-blocks-components-select label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--fb-gray-700) !important;
    letter-spacing: 0.02em !important;
}

/* ─── Floating label style ───────────────────────────────────────────────── */
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:not(:placeholder-shown)+label,
.wc-block-components-text-input input:focus+label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #2563eb !important;
}

/* ─── Checkbox ───────────────────────────────────────────────────────────── */
.wc-block-checkout input[type="checkbox"] {
    accent-color: var(--fb-blue) !important;
    width: 16px !important;
    height: 16px !important;
}

/* ─── Radio buttons (payment options) ───────────────────────────────────── */
.wc-block-components-radio-control__input {
    accent-color: var(--fb-blue) !important;
}

.wc-block-components-radio-control-accordion-content,
.wc-block-components-payment-method-label {
    font-family: var(--fb-font-sans) !important;
    font-size: 14px !important;
    color: var(--fb-gray-700) !important;
}

/* ─── Payment method container ───────────────────────────────────────────── */
.wc-block-components-radio-control-accordion-option {
    border: 1.5px solid var(--fb-gray-200) !important;
    border-radius: var(--fb-radius) !important;
    margin-bottom: 8px !important;
    transition: border-color var(--fb-transition) !important;
    overflow: hidden !important;
}

.wc-block-components-radio-control-accordion-option:has(input:checked) {
    border-color: var(--fb-blue) !important;
    background: var(--fb-blue-tint) !important;
}

/* ─── Stripe card fields ─────────────────────────────────────────────────── */
.wc-block-gateway-container {
    background: var(--fb-white) !important;
    border: 1.5px solid var(--fb-gray-200) !important;
    border-radius: var(--fb-radius) !important;
    padding: 16px !important;
    box-shadow: var(--fb-shadow-sm) !important;
}

/* ─── Order summary sidebar ──────────────────────────────────────────────── */
.wc-block-checkout__sidebar .wc-block-components-order-summary,
.wp-block-woocommerce-checkout-order-summary-block {
    background: var(--fb-white) !important;
    border: 1px solid var(--fb-gray-200) !important;
    border-radius: var(--fb-radius-lg) !important;
    box-shadow: var(--fb-shadow-sm) !important;
    padding: 20px !important;
    font-family: var(--fb-font-sans) !important;
}

.wc-block-components-order-summary__button-text {
    font-family: var(--fb-font-display) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: var(--fb-gray-900) !important;
    letter-spacing: -0.01em !important;
}

/* ─── Order summary product ──────────────────────────────────────────────── */
.wc-block-components-order-summary-item__image img {
    border-radius: var(--fb-radius) !important;
    border: 1px solid var(--fb-gray-200) !important;
    object-fit: cover !important;
}

.wc-block-components-order-summary-item__full-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--fb-gray-900) !important;
}

.wc-block-components-order-summary-item__individual-prices {
    font-size: 13px !important;
    color: var(--fb-gray-500) !important;
}

.wc-block-components-order-summary-item__total-price {
    font-weight: 700 !important;
    color: var(--fb-blue) !important;
}

/* ─── Totals ─────────────────────────────────────────────────────────────── */
.wc-block-components-totals-item {
    font-family: var(--fb-font-sans) !important;
    font-size: 14px !important;
    color: var(--fb-gray-700) !important;
    padding: 10px 0 !important;
    border-top: 1px solid var(--fb-gray-100) !important;
}

.wc-block-components-totals-footer-item {
    border-top: 2px solid var(--fb-gray-200) !important;
    padding-top: 14px !important;
    margin-top: 4px !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--fb-gray-900) !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--fb-blue) !important;
}

/* ─── Coupon ─────────────────────────────────────────────────────────────── */
.wc-block-components-panel__button {
    font-family: var(--fb-font-sans) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--fb-gray-500) !important;
}

.wc-block-components-coupon .wc-block-components-text-input input {
    border: 1.5px solid var(--fb-gray-200) !important;
    border-radius: var(--fb-radius) !important;
    padding: 11px 16px !important;
    font-size: 14px !important;
}

/* ─── Place Order button ─────────────────────────────────────────────────── */
.wc-block-components-checkout-place-order-button,
.wc-block-checkout__place-order button {
    font-family: var(--fb-font-sans) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    background: var(--fb-blue) !important;
    border-color: var(--fb-blue) !important;
    color: var(--fb-white) !important;
    border-radius: var(--fb-radius) !important;
    padding: 14px 28px !important;
    box-shadow: var(--fb-shadow-blue) !important;
    transition: all var(--fb-transition) !important;
    letter-spacing: 0.01em !important;
    width: 100% !important;
}

.wc-block-components-checkout-place-order-button:hover,
.wc-block-checkout__place-order button:hover {
    background: var(--fb-blue-dark) !important;
    border-color: var(--fb-blue-dark) !important;
    box-shadow: var(--fb-shadow-hover) !important;
    transform: translateY(-1px) !important;
}

/* ─── Return to cart link ────────────────────────────────────────────────── */
.wc-block-checkout__return-to-cart-link {
    font-family: var(--fb-font-sans) !important;
    font-size: 13px !important;
    color: var(--fb-gray-500) !important;
    text-decoration: none !important;
    transition: color var(--fb-transition) !important;
}

.wc-block-checkout__return-to-cart-link:hover {
    color: var(--fb-blue) !important;
}

/* ─── Terms & conditions ─────────────────────────────────────────────────── */
.wc-block-checkout__terms {
    font-size: 12px !important;
    color: var(--fb-gray-400) !important;
}

.wc-block-checkout__terms a {
    color: var(--fb-blue) !important;
}

/* ─── Trust signal below place order ─────────────────────────────────────── */
.wc-block-checkout__place-order::after {
    content: '🔒 Secure checkout · SSL encrypted · 256-bit encryption';
    display: block;
    text-align: center;
    font-family: var(--fb-font-sans);
    font-size: 12px;
    color: var(--fb-gray-400);
    margin-top: 10px;
}

/* ─── Notices ────────────────────────────────────────────────────────────── */
.wc-block-components-notice-banner,
.wc-block-components-validation-error {
    font-family: var(--fb-font-sans) !important;
    font-size: 13px !important;
    border-radius: var(--fb-radius) !important;
}

.wc-block-components-validation-error p {
    color: var(--fb-red) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    margin: 4px 0 0 !important;
}

/* ─── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

    .wc-block-components-checkout-place-order-button,
    .wc-block-checkout__place-order button {
        padding: 13px 20px !important;
        font-size: 14px !important;
    }

    .wc-block-checkout__sidebar .wc-block-components-order-summary {
        padding: 16px !important;
    }
}

.wc-block-components-text-input label,
.wc-block-components-address-form__email label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #374151 !important;
}

/* ─── Floating label size fix (highest specificity) ─────────────────────── */
.wc-block-components-text-input>label,
.wc-block-components-text-input.is-active>label,
.wc-block-components-text-input.has-value>label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    transform-origin: left top !important;
}

.wc-block-components-text-input.is-active>label,
.wc-block-components-text-input.has-value>label {
    font-size: 11px !important;
    color: #2563eb !important;
}

.wc-block-components-text-input input,
.wc-block-checkout input[type="text"],
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="tel"] {
    padding: 22px 16px 10px !important;
    height: 56px !important;
}

.wc-block-components-text-input>label {
    top: 16px !important;
}

.wc-block-components-text-input.is-active>label,
.wc-block-components-text-input.has-value>label {
    top: 8px !important;
}

.wc-block-components-select select,
.wc-blocks-components-select select,
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-checkout select {
    color: var(--fb-gray-900) !important;
    background-color: var(--fb-white) !important;
    padding: 22px 16px 10px !important;
    height: 56px !important;
}

.wc-block-components-select label,
.wc-blocks-components-select label,
.wc-block-components-country-input label {
    top: 8px !important;
    font-size: 11px !important;
    color: var(--fb-blue) !important;
}