/*
Theme Name: RyLi Checkout
Description: Dark commerce theme for cms.rylibusinessgroup.com — checkout, order-pay, cart, and Client Portal surfaces only. Marketing traffic is 301'd to the apex by the RyLi CMS Guard mu-plugin.
Author: RyLi Business Group
Version: 1.2.1
Text Domain: ryli-checkout
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/* ---------------------------------------------------------------------------
   Tokens — Dark Theme Card System + Gold Glassmorphic Buttons
--------------------------------------------------------------------------- */
:root {
    --background: #0F0F0F;
    --foreground: #E8E8E8;
    --border: rgba(255, 255, 255, 0.08);
    --card-bg: rgba(255, 255, 255, 0.03);
    --card-border: rgba(255, 255, 255, 0.06);
    --card-hover: rgba(212, 175, 55, 0.15);
    --radius: 12px;
    --gradient-gold: linear-gradient(135deg, #D4AF37 0%, #E8C966 50%, #C9A432 100%);
    --text-on-gold: #1A1A1A;
    --gold-glow: rgba(212, 175, 55, 0.25);
    --gold: #D4AF37;
    --gold-soft: #E8C966;
    --text-muted: rgba(232, 232, 232, 0.62);
    --input-bg: rgba(255, 255, 255, 0.05);
    --header-height: 72px;
    --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------------------------------------------------------------------------
   Base
--------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--foreground);
    line-height: 1.25;
    margin: 0 0 0.75em;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; font-weight: 600; }

p {
    margin: 0 0 1em;
}

a {
    color: var(--gold-soft);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover,
a:focus {
    color: var(--gold);
}

img {
    max-width: 100%;
    height: auto;
}

::selection {
    background: var(--gold);
    color: var(--text-on-gold);
}

/* ---------------------------------------------------------------------------
   Layout container
--------------------------------------------------------------------------- */
.ryli-container {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4rem;
    min-height: calc(100vh - var(--header-height) - 64px);
}

body.woocommerce-cart .ryli-container {
    max-width: 960px;
}

/* ---------------------------------------------------------------------------
   Header — transcribed from ryli-headless SiteHeader.tsx + globals.css.
   Apex hides the text nav below 768px behind a JS hamburger; this theme
   ports the hidden-nav breakpoint but not the hamburger (no JS).
--------------------------------------------------------------------------- */
body {
    padding-top: 72px;
}

html {
    scroll-padding-top: 80px;
}

.ryli-header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 50;
    height: 72px;
    background: rgba(22, 22, 26, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

.ryli-header-inner {
    max-width: 1290px;
    height: 100%;
    margin-inline: auto;
    padding-inline: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ryli-logo {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
}

.ryli-logo img {
    width: 32px;
    height: 32px;
    border-radius: 0.375rem;
    display: block;
}

.ryli-brand-text {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.025em;
    color: #ffffff;
    white-space: nowrap;
}

.ryli-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.ryli-nav a {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 20px;
    color: #a0a0b0;
    transition: color 0.2s ease;
}

.ryli-nav a:hover,
.ryli-nav a:focus {
    color: #d4af37;
}

.ryli-nav a.ryli-btn-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    padding: 10px 22px;
    border-radius: 8px;
    min-height: 40px;
    border: 1px solid transparent;
    background: #d4af37;
    color: #16161a;
    box-shadow: 0 4px 24px rgba(212, 175, 55, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
    cursor: pointer;
}

.ryli-nav a.ryli-btn-pill:hover,
.ryli-nav a.ryli-btn-pill:focus {
    background: #e8c966;
    color: #16161a;
    box-shadow: 0 6px 28px rgba(212, 175, 55, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

@media (max-width: 768px) {
    .ryli-header-inner {
        padding-inline: 1.5rem;
    }

    .ryli-nav {
        display: none;
    }
}

@media (max-width: 480px) {
    .ryli-header-inner {
        padding-inline: 1rem;
    }
}

/* ---------------------------------------------------------------------------
   Footer
--------------------------------------------------------------------------- */
.ryli-footer {
    border-top: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
    padding: 1rem 1.25rem;
    position: relative;
    z-index: 10;
}

.ryli-footer-inner {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.ryli-footer-links {
    display: flex;
    gap: 1.25rem;
}

.ryli-footer-links a {
    color: var(--text-muted);
}

.ryli-footer-links a:hover,
.ryli-footer-links a:focus {
    color: var(--gold-soft);
}

/* ---------------------------------------------------------------------------
   Gold primary buttons — order-pay, classic Woo, and block components
--------------------------------------------------------------------------- */
#place_order,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button:not(.is-link),
.wc-block-components-checkout-place-order-button,
button.woocommerce-Button,
.woocommerce-Button.button {
    display: inline-block;
    background: var(--gradient-gold);
    color: var(--text-on-gold);
    border: 0;
    border-radius: var(--radius);
    padding: 0.875rem 1.75rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 0.02em;
    line-height: 1.2;
    cursor: pointer;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

#place_order:hover,
#place_order:focus,
.woocommerce button.button:hover,
.woocommerce button.button:focus,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.wc-block-components-button:not(.is-link):hover,
.wc-block-components-button:not(.is-link):focus,
.wc-block-components-checkout-place-order-button:hover,
button.woocommerce-Button:hover,
.woocommerce-Button.button:hover {
    background: var(--gradient-gold);
    color: var(--text-on-gold);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--gold-glow);
    filter: brightness(1.05);
}

#place_order:disabled,
.woocommerce button.button:disabled,
.wc-block-components-button:disabled {
    opacity: 0.55;
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
}

.wc-block-components-button:not(.is-link) .wc-block-components-button__text {
    color: var(--text-on-gold);
}

/* ---------------------------------------------------------------------------
   Form inputs — dark with gold focus ring
--------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="search"],
textarea,
select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-text-input input[type="url"],
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input,
.wc-block-components-select .components-custom-select-control__button,
.wc-block-components-totals-coupon__input input {
    background: var(--input-bg);
    color: var(--foreground);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 4px);
    padding: 0.75rem 0.875rem;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.wc-block-components-text-input input:focus,
.wc-block-components-totals-coupon__input input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-glow);
    background: var(--input-bg);
    color: var(--foreground);
}

label,
.wc-block-components-text-input label,
.wc-block-components-checkbox__label,
.woocommerce form .form-row label {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.wc-block-components-text-input.is-active label,
.wc-block-components-text-input:focus-within label {
    color: var(--gold-soft);
}

select option {
    background: #1a1a1a;
    color: var(--foreground);
}

/* ---------------------------------------------------------------------------
   Card primitive
--------------------------------------------------------------------------- */
.ryli-card,
.woocommerce table.shop_table,
.woocommerce-MyAccount-content table.shop_table,
#order_review,
.woocommerce-order-details,
.woocommerce-customer-details,
.wc-block-components-order-summary,
.wc-block-components-checkout-step,
.wc-block-cart-items,
.wc-block-cart .wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-totals-wrapper {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
}

/* ---------------------------------------------------------------------------
   Order-pay (classic checkout form-pay) + classic Woo tables
--------------------------------------------------------------------------- */
.woocommerce table.shop_table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    padding: 0.5rem 1rem;
    margin: 0 0 1.5rem;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
    border: 0;
    border-bottom: 1px solid var(--border);
    padding: 0.875rem 0.5rem;
    color: var(--foreground);
    background: transparent;
}

.woocommerce table.shop_table thead th {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.woocommerce table.shop_table tbody tr:last-child td,
.woocommerce table.shop_table tfoot tr:last-child th,
.woocommerce table.shop_table tfoot tr:last-child td {
    border-bottom: 0;
}

.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
    font-weight: 700;
}

/* Payment methods stacked beneath the order table */
#payment,
.woocommerce-checkout #payment {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    margin-top: 1.5rem;
}

#payment ul.payment_methods,
.woocommerce-checkout #payment ul.payment_methods {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
}

#payment ul.payment_methods li {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

#payment ul.payment_methods li:last-child {
    border-bottom: 0;
}

#payment ul.payment_methods li label {
    color: var(--foreground);
    font-size: 1rem;
    cursor: pointer;
}

#payment div.payment_box,
.woocommerce-checkout #payment div.payment_box {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    border-radius: calc(var(--radius) - 4px);
    margin-top: 0.75rem;
}

#payment div.payment_box::before {
    border-bottom-color: rgba(255, 255, 255, 0.04);
}

#payment div.form-row.place-order,
.woocommerce-checkout #payment div.form-row {
    padding: 1.25rem;
}

#place_order {
    width: 100%;
}

/* ---------------------------------------------------------------------------
   WooCommerce blocks — checkout + cart on dark
--------------------------------------------------------------------------- */
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart {
    color: var(--foreground);
    /* Block component custom properties */
    --wc-form-border-color: var(--border);
    --wc-form-border-width: 1px;
    --wc-form-text-color: var(--foreground);
    --wc-form-background-color: var(--input-bg);
    --wp--preset--color--black: var(--foreground);
}

.wc-block-components-checkout-step {
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.wc-block-components-checkout-step__title,
.wc-block-components-title,
.wc-block-components-checkout-step__heading {
    color: var(--foreground);
    font-family: var(--font-heading);
}

.wc-block-components-checkout-step__description,
.wc-block-components-checkout-step p,
.wc-block-components-address-card {
    color: var(--text-muted);
}

.wc-block-components-address-card {
    border: 1px solid var(--card-border);
    border-radius: calc(var(--radius) - 4px);
    background: rgba(255, 255, 255, 0.02);
}

.wc-block-components-order-summary,
.wc-block-components-totals-wrapper {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--card-border);
}

.wc-block-components-totals-item,
.wc-block-components-totals-footer-item,
.wc-block-components-order-summary-item,
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-components-formatted-money-amount {
    color: var(--foreground);
}

.wc-block-components-totals-item__description,
.wc-block-components-order-summary-item__quantity,
.wc-block-components-product-metadata {
    color: var(--text-muted);
}

.wc-block-components-divider,
.wc-block-components-order-summary-item::after,
.wc-block-components-totals-wrapper::after {
    border-color: var(--border);
}

.wc-block-components-panel__button,
.wc-block-components-totals-coupon-link {
    color: var(--gold-soft);
}

.wc-block-components-radio-control__option {
    color: var(--foreground);
    border-color: var(--border);
}

.wc-block-components-radio-control .wc-block-components-radio-control__input {
    border: 1px solid var(--border);
    background: var(--input-bg);
}

.wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
    border-color: var(--gold);
    background: var(--gold);
}

.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
    background: var(--input-bg);
    border: 1px solid var(--border);
}

.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
    background: var(--gold);
    border-color: var(--gold);
}

.wc-block-components-checkbox .wc-block-components-checkbox__mark {
    fill: var(--text-on-gold);
}

/* Cart block */
.wc-block-cart-items {
    padding: 0.5rem 1rem;
}

.wc-block-cart-items .wc-block-cart-items__header {
    color: var(--text-muted);
}

.wc-block-cart-item__wrap .wc-block-components-product-name,
.wc-block-cart-items .wc-block-cart-item__prices {
    color: var(--foreground);
}

.wc-block-cart-item__quantity .wc-block-components-quantity-selector {
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 4px);
}

.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input,
.wc-block-components-quantity-selector button {
    color: var(--foreground);
    background: transparent;
}

.wc-block-components-sidebar .wc-block-components-panel {
    padding: 0.75rem 1rem;
}

.wc-block-components-express-payment__title-container .wc-block-components-express-payment__title,
.wc-block-components-express-payment-continue-rule {
    color: var(--text-muted);
}

.wc-block-components-express-payment__title-container .wc-block-components-express-payment__title::before,
.wc-block-components-express-payment__title-container .wc-block-components-express-payment__title::after,
.wc-block-components-express-payment-continue-rule::before,
.wc-block-components-express-payment-continue-rule::after {
    border-color: var(--border);
}

.wc-block-components-loading-mask {
    background: rgba(15, 15, 15, 0.65);
}

.wc-block-components-skeleton__element {
    background: rgba(255, 255, 255, 0.06);
}

/* ---------------------------------------------------------------------------
   Client Portal — my-account
--------------------------------------------------------------------------- */
.woocommerce-MyAccount-navigation {
    margin-bottom: 1.5rem;
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 0.75rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: transparent;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.875rem;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li a:focus {
    border-color: var(--card-hover);
    color: var(--gold-soft);
    background: rgba(212, 175, 55, 0.06);
    transform: translateX(2px);
}

.woocommerce-MyAccount-navigation ul li.is-active a {
    border-color: var(--gold);
    color: var(--gold-soft);
    background: rgba(212, 175, 55, 0.08);
}

.woocommerce-MyAccount-content {
    color: var(--foreground);
}

.woocommerce-MyAccount-content .woocommerce-table--order-details,
.woocommerce-MyAccount-content table.shop_table {
    padding: 0.5rem 1rem;
}

.woocommerce-MyAccount-content mark {
    background: rgba(212, 175, 55, 0.2);
    color: var(--gold-soft);
    padding: 0 0.25em;
    border-radius: 4px;
}

.woocommerce-MyAccount-content .woocommerce-Address,
.woocommerce-Addresses .woocommerce-Address {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
}

.woocommerce-Address header.title h2,
.woocommerce-Address header.title h3 {
    font-size: 1rem;
}

.woocommerce-pagination .page-numbers {
    color: var(--gold-soft);
}

/* ---------------------------------------------------------------------------
   Notices — dark variants
--------------------------------------------------------------------------- */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.wc-block-components-notice-banner {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius);
    color: var(--foreground);
    padding: 1rem 1.25rem 1rem 3rem;
    margin-bottom: 1.5rem;
}

.woocommerce-info::before {
    color: var(--gold);
}

.woocommerce-message {
    border-left-color: #6FCF97;
}

.woocommerce-message::before {
    color: #6FCF97;
}

.woocommerce-error {
    border-left-color: #EB5757;
    list-style: none;
}

.woocommerce-error::before {
    color: #EB5757;
}

.woocommerce-error li {
    margin: 0.25em 0;
}

.wc-block-components-notice-banner.is-error {
    border-left-color: #EB5757;
}

.wc-block-components-notice-banner.is-success {
    border-left-color: #6FCF97;
}

.wc-block-components-notice-banner > .wc-block-components-notice-banner__content {
    color: var(--foreground);
}

.woocommerce-info a,
.woocommerce-message a,
.woocommerce-error a,
.wc-block-components-notice-banner a {
    color: var(--gold-soft);
}

/* ---------------------------------------------------------------------------
   Botanical Animation — transcribed verbatim from ryli-headless
   globals.css:380-590. Theme guarantee kept on top of the source values:
   animation layers (z 1) sit below content (main z 5) and header (z 50)
   with pointer-events:none, so they cannot intercept clicks or cover
   payment iframes.
--------------------------------------------------------------------------- */
main.ryli-container {
    position: relative;
    z-index: 5;
}

.swaying-botanical {
    position: fixed;
    bottom: 0;
    right: -50px;
    width: 450px;
    height: 600px;
    pointer-events: none;
    z-index: 1;
    transform-origin: bottom right;
    animation: botanicalSway 10s ease-in-out infinite;
    will-change: transform;
    opacity: 0.12;
}

.swaying-botanical svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.swaying-botanical path {
    fill: none;
    stroke: #D4AF37;
    stroke-width: 1.2;
    stroke-linecap: round;
}

@keyframes botanicalSway {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-1.2deg); }
}

.swaying-botanical .leaves {
    transform-origin: 100% 50%;
    animation: leafSway 6s ease-in-out infinite;
    will-change: transform;
}

.swaying-botanical .leaves--d1 { animation-delay: 0s; }
.swaying-botanical .leaves--d2 { animation-delay: 0.8s; }
.swaying-botanical .leaves--d3 { animation-delay: 1.6s; }

@keyframes leafSway {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-1.5deg); }
}

/* Floating Leaves */
.floating-leaves {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.floating-leaves .leaf {
    position: absolute;
    width: 20px;
    height: 20px;
    opacity: 0;
    right: 0;
    will-change: transform, opacity;
}

.floating-leaves .leaf-sway {
    display: block;
    width: 100%;
    height: 100%;
    will-change: transform;
    animation: sway 10s ease-in-out infinite;
}

.floating-leaves .leaf-sway::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #d4af37 0%, #e8c966 50%, #c9a432 100%);
    border-radius: 0 70% 0 70%;
    transform: rotate(-45deg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.floating-leaves .leaf--alt .leaf-sway::before {
    background: linear-gradient(135deg, #c9a432 0%, #d4af37 50%, #8c5e22 100%);
}

.floating-leaves .leaf--dark .leaf-sway::before {
    background: linear-gradient(135deg, #8c5e22 0%, #a67c30 50%, #c9a432 100%);
}

.floating-leaves .leaf--blue .leaf-sway::before {
    background: linear-gradient(135deg, #1a3a5c 0%, #2d5a8c 50%, #1a4a6c 100%);
}

@keyframes fall {
    0% {
        opacity: 0;
        transform: translateX(20px) rotate(0deg);
    }
    3% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% {
        opacity: 0;
        transform: translateX(-100vw) rotate(180deg);
    }
}

@keyframes sway {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(15px); }
    50% { transform: translateY(-8px); }
    75% { transform: translateY(10px); }
}

.floating-leaves .leaf:nth-child(1) {
    top: 15%;
    width: 18px;
    height: 18px;
    animation: fall 70s linear infinite;
    animation-delay: 0s;
}
.floating-leaves .leaf:nth-child(1) .leaf-sway {
    animation-duration: 10s;
    animation-delay: 0s;
}

.floating-leaves .leaf:nth-child(2) {
    top: 35%;
    width: 14px;
    height: 14px;
    animation: fall 60s linear infinite;
    animation-delay: 3s;
}
.floating-leaves .leaf:nth-child(2) .leaf-sway {
    animation-duration: 8s;
    animation-delay: 3s;
}

.floating-leaves .leaf:nth-child(3) {
    top: 55%;
    width: 20px;
    height: 20px;
    animation: fall 65s linear infinite;
    animation-delay: 6s;
}
.floating-leaves .leaf:nth-child(3) .leaf-sway {
    animation-duration: 12s;
    animation-delay: 6s;
}

.floating-leaves .leaf:nth-child(4) {
    top: 75%;
    width: 16px;
    height: 16px;
    animation: fall 55s linear infinite;
    animation-delay: 2s;
}
.floating-leaves .leaf:nth-child(4) .leaf-sway {
    animation-duration: 9s;
    animation-delay: 2s;
}

.floating-leaves .leaf:nth-child(5) {
    top: 25%;
    width: 12px;
    height: 12px;
    animation: fall 50s linear infinite;
    animation-delay: 4s;
}
.floating-leaves .leaf:nth-child(5) .leaf-sway {
    animation-duration: 11s;
    animation-delay: 4s;
}

.floating-leaves .leaf:nth-child(6) {
    top: 50%;
    width: 16px;
    height: 16px;
    animation: fall 75s linear infinite;
    animation-delay: 8s;
}
.floating-leaves .leaf:nth-child(6) .leaf-sway {
    animation-duration: 10s;
    animation-delay: 8s;
}

/* Hide on mobile for performance */
@media (max-width: 768px) {
    .swaying-botanical {
        width: 300px;
        height: 400px;
        right: -80px;
        opacity: 0.08;
    }

    .floating-leaves .leaf:nth-child(n+4) {
        display: none;
    }
}

/* Accessibility: respect reduced motion — theme requirement */
@media (prefers-reduced-motion: reduce) {
    .swaying-botanical,
    .floating-leaves {
        display: none !important;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ---------------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------------- */
@media (max-width: 375px) {
    .ryli-container {
        padding: 1.5rem 0.875rem 3rem;
    }

    #place_order,
    .wc-block-components-checkout-place-order-button {
        padding: 0.875rem 1rem;
    }
}

@media (min-width: 768px) {
    .ryli-container {
        padding: 3rem 1.5rem 5rem;
    }

    h1 { font-size: 2rem; }
}

@media (min-width: 1024px) {
    body.woocommerce-cart .ryli-container {
        padding-left: 0;
        padding-right: 0;
    }
}