/* TL_UI_ACTION_STANDARD_V1_20260916
   Canonical action dock/button contract. Add these classes to future actions;
   values are supplied by the runtime UI settings. */
.tl-action-dock,
body.storefront-body.checkout-route .checkout-flow-actions.tl-action-dock,
html.checkout-address-editor-open body.storefront-body.checkout-route .checkout-address-editor--flow .tl-address-editor .tl-address-editor__actions.tl-action-dock {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--tl-action-dock-gap, 8px) !important;
    padding: var(--tl-action-dock-padding, 6px) !important;
    border: var(--tl-action-dock-border-width, 1px) solid var(--tl-action-dock-border, #d6e1eb) !important;
    border-radius: var(--tl-action-dock-radius, 20px) !important;
    background: var(--tl-action-dock-bg, #fff) !important;
    box-shadow: 0 8px calc(18px + var(--tl-action-shadow-strength, 12px))
        color-mix(in srgb, #183b61 14%, transparent) !important;
}

/* TL_UI_ACTION_DOCK_MOBILE_GEOMETRY_V1_20260916
   Checkout navigation and address editor consume the exact same outer geometry.
   This block intentionally owns every size/spacing property previously supplied
   by route-specific styles. */
@media (max-width: 620px) {
    body.storefront-body.checkout-route .checkout-flow-actions.tl-action-dock,
    html.checkout-address-editor-open body.storefront-body.checkout-route
    .checkout-address-editor--flow .tl-address-editor .tl-address-editor__actions.tl-action-dock {
        position: fixed !important;
        z-index: 100020 !important;
        right: 10px !important;
        left: 10px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        width: auto !important;
        max-width: none !important;
        min-height: 62px !important;
        height: 62px !important;
        margin: 0 !important;
        padding: var(--tl-action-dock-padding, 6px) !important;
        transform: none !important;
    }
}

.tl-action-dock > .tl-action-button,
body.storefront-body.checkout-route .checkout-flow-actions.tl-action-dock > .tl-action-button,
html.checkout-address-editor-open body.storefront-body.checkout-route .checkout-address-editor--flow .tl-address-editor .tl-address-editor__actions.tl-action-dock > .tl-action-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: var(--tl-action-button-height, 50px) !important;
    height: var(--tl-action-button-height, 50px) !important;
    margin: 0 !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: var(--tl-action-button-radius, 14px) !important;
    font-family: inherit !important;
    font-size: var(--tl-action-font-size, 14px) !important;
    font-weight: var(--tl-action-font-weight, 800) !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer;
}

.tl-action-dock > .tl-action-button--primary,
body.storefront-body.checkout-route .checkout-flow-actions.tl-action-dock > .tl-action-button--primary,
html.checkout-address-editor-open body.storefront-body.checkout-route .checkout-address-editor--flow .tl-address-editor .tl-address-editor__actions.tl-action-dock > .tl-action-button--primary {
    border: 1px solid var(--tl-action-primary-bg, #173f69) !important;
    color: var(--tl-action-primary-text, #fff) !important;
    background: var(--tl-action-primary-bg, #173f69) !important;
}

.tl-action-dock > .tl-action-button--secondary,
body.storefront-body.checkout-route .checkout-flow-actions.tl-action-dock > .tl-action-button--secondary,
html.checkout-address-editor-open body.storefront-body.checkout-route .checkout-address-editor--flow .tl-address-editor .tl-address-editor__actions.tl-action-dock > .tl-action-button--secondary {
    border: 1px solid var(--tl-action-secondary-border, #b8cadb) !important;
    color: var(--tl-action-secondary-text, #173f69) !important;
    background: var(--tl-action-secondary-bg, #f4f7fa) !important;
}

.tl-action-dock > .tl-action-button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--tl-action-primary-bg, #173f69) 24%, transparent) !important;
    outline-offset: 2px !important;
}

.tl-action-dock > .tl-action-button:disabled {
    opacity: .55 !important;
    cursor: not-allowed !important;
}

@media (max-width: 380px) {
    .tl-action-dock > .tl-action-button {
        padding-inline: 10px !important;
    }
}

/* TL_CHECKOUT_DARK_ACTION_CONTRACT_V1_20260917
   Keep both checkout action docks and their secondary actions inside the same
   existing dark theme surface/text/border token system. */
html[data-theme="dark"] {
    --tl-action-dock-bg: var(--tl-color-surface, #101b2a);
    --tl-action-dock-border: var(--tl-color-line-strong, #314760);
    --tl-action-secondary-bg: var(--tl-color-surface-soft, #132238);
    --tl-action-secondary-text: var(--tl-color-text, #edf5fd);
    --tl-action-secondary-border: var(--tl-color-line-strong, #314760);
}