/*
 * Arizona Occul - Misty Jade finishing layer (loaded after every other theme stylesheet).
 * Client lucky colour: Misty Jade. Palette:
 *   Misty Jade   #a8c5b6   (signature)      Jade Mist  #e6efea / #f3f8f5 (surfaces)
 *   Deep Jade    #2d5244 / #1f3a2f (ink, hero, footer)    Champagne gold #c9a85c (accent)
 */

:root {
    --jade-signature: #a8c5b6;
    --jade-soft: #cfe0d6;
    --jade-mist: #e6efea;
    --jade-pale: #f3f8f5;
    --jade-deep: #2d5244;
    --jade-ink: #1f3a2f;
    --jade-mid: #4d806a;
    --champagne: #c9a85c;
    --champagne-deep: #a98a3f;

    --bg-page: var(--jade-mist);
    --bg-dark: var(--jade-mist);
    --ref-bg-dark: var(--jade-mist);
    --mint-primary: var(--jade-signature);
    --border-subtle: var(--jade-soft);
    --border-card: #d7e5dd;
    --text-heading: var(--jade-ink);
    --ref-text-title: var(--jade-ink);
    --gold-gradient: linear-gradient(135deg, #d8bb73 0%, #c9a85c 50%, #b9984c 100%);
}

/* ---------- Page canvas: calm misty jade wash ---------- */
body,
.ref-site-root,
.site-main,
.ref-main-wrapper {
    background-color: var(--jade-mist) !important;
}

.ref-main-wrapper,
.site-main {
    background-image:
        radial-gradient(1100px 520px at 12% 0%, rgba(168, 197, 182, 0.35), transparent 70%),
        radial-gradient(900px 480px at 100% 40%, rgba(168, 197, 182, 0.25), transparent 70%),
        linear-gradient(180deg, #f3f8f5 0%, #e6efea 100%) !important;
}

/* ---------- Hero: misty jade, light falling from the right ---------- */
.ref-hero-section,
.astro-hero-section,
.ref-shop-hero,
.ref-about-hero,
.ref-consult-hero,
.ref-consultation-hero,
.ref-chkout-hero,
.ref-checkout-hero,
.ref-contact-hero,
.ref-auth-hero,
.ref-dash-hero,
.ref-dhero-header,
.consult-hero-wrap,
.services-hero,
.account-hero,
.checkout-hero,
.about-hero,
.contact-hero,
.shop-hero-sec {
    background-color: #2f5547 !important;
    background:
        radial-gradient(620px 520px at 76% 42%, rgba(207, 224, 214, 0.34) 0%, rgba(168, 197, 182, 0.12) 45%, transparent 72%),
        linear-gradient(105deg, #284a3d 0%, #3b6555 48%, #5f8f7b 100%) !important;
    border-bottom: 1px solid rgba(207, 224, 214, 0.35) !important;
}

/* ---------- Type & accents ---------- */
.ref-gold-highlight,
.ref-hero-title span,
.ref-clarity-heading span {
    color: #e3c981 !important;
}

.gold-eyebrow,
.ref-section-eyebrow,
[class*="eyebrow"] {
    color: var(--champagne-deep) !important;
}

.ref-prod-price,
.ref-prod-price .amount,
.price,
.price .amount {
    color: var(--jade-deep) !important;
    font-weight: 700;
}

.price del,
.price del .amount {
    color: #8b9a93 !important;
    font-weight: 400;
}

/* ---------- Cards: white glass on misty jade ---------- */
.ref-trust-bar,
.ref-trust-card,
.ref-service-card,
.ref-prod-card,
.ref-testimonial-card,
.ref-step-card,
.woocommerce ul.products li.product {
    border-color: rgba(168, 197, 182, 0.55) !important;
    box-shadow: 0 10px 30px rgba(45, 82, 68, 0.09) !important;
}

.ref-service-card:hover,
.ref-prod-card:hover,
.ref-testimonial-card:hover,
.woocommerce ul.products li.product:hover {
    box-shadow: 0 18px 42px rgba(45, 82, 68, 0.16) !important;
}

/* Testimonials: jade hairline instead of gold frame */
.ref-testimonial-card {
    border: 1px solid rgba(168, 197, 182, 0.7) !important;
}

/* ---------- Primary jade buttons ---------- */
.ref-service-card .ref-btn,
.ref-service-card a[class*="btn"],
.ref-clarity-content a[class*="btn"] {
    background: linear-gradient(135deg, #3f6d5b, #2d5244) !important;
    color: #ffffff !important;
    border: 0 !important;
}

.ref-service-card .ref-btn:hover,
.ref-service-card a[class*="btn"]:hover,
.ref-clarity-content a[class*="btn"]:hover {
    background: linear-gradient(135deg, #4d806a, #3a6454) !important;
}

/* ---------- Clarity banner: tint artwork into the jade palette ---------- */
.ref-clarity-overlay {
    background:
        linear-gradient(180deg, rgba(31, 58, 47, 0.45), rgba(31, 58, 47, 0.7)),
        radial-gradient(600px 300px at 50% 50%, rgba(168, 197, 182, 0.18), transparent 70%) !important;
}

/* ---------- Footer: deep jade ---------- */
.ref-footer {
    background: linear-gradient(180deg, #2d5244 0%, #1f3a2f 100%) !important;
    color: #dbe8e1 !important;
}

.ref-footer a {
    color: #dbe8e1;
}

.ref-footer a:hover {
    color: #e3c981;
}

/* ---------- Header ---------- */
.ref-header {
    background: rgba(243, 248, 245, 0.92) !important;
    border-bottom: 1px solid rgba(168, 197, 182, 0.6) !important;
    box-shadow: 0 4px 22px rgba(45, 82, 68, 0.08) !important;
}

/* ---------- Keyboard focus: champagne ring ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline-color: var(--champagne) !important;
}

::selection {
    background: var(--jade-signature);
    color: var(--jade-ink);
}

/* ---------- Mobile app-style bottom nav: deep jade ---------- */
.mobile-bottom-nav {
    background: linear-gradient(180deg, #2f5546 0%, #1f3a2f 100%) !important;
    border-top: 1px solid rgba(168, 197, 182, 0.35) !important;
}

/* ---------- Hero trust chips: frosted jade glass instead of near-black ---------- */
.astro-hero-section [class*="trust"],
.astro-hero-section [class*="badge"],
.astro-hero-section [class*="feature-chip"] {
    background: rgba(31, 58, 47, 0.38) !important;
    border-color: rgba(207, 224, 214, 0.28) !important;
}

/* WooCommerce endpoints inside the theme (order-pay / order-received) */
.ref-wc-endpoint { padding: 48px 16px 64px; }
.ref-wc-endpoint-card {
    max-width: 760px;
    margin: 0 auto;
    background: #ffffff;
    color: var(--jade-ink);
    border: 1.5px solid var(--jade-soft);
    border-radius: 20px;
    padding: 32px 28px;
    box-shadow: 0 8px 30px rgba(31, 58, 47, 0.08);
}
.ref-wc-endpoint-card h2, .ref-wc-endpoint-card h3 { color: var(--jade-deep); }
.ref-wc-endpoint-card table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.ref-wc-endpoint-card th, .ref-wc-endpoint-card td { padding: 10px 8px; border-bottom: 1px solid var(--jade-soft); text-align: left; color: var(--jade-ink); }
.ref-wc-endpoint-card .button, .ref-wc-endpoint-card button.button, .ref-wc-endpoint-card #btn-razorpay, .ref-wc-endpoint-card #btn-razorpay-cancel {
    display: inline-block; padding: 12px 28px; border-radius: 9999px; border: 0; cursor: pointer;
    background: linear-gradient(135deg, #be9e4d, #c4943c); color: #2b4f41 !important; font-weight: 700; text-decoration: none; margin: 6px 6px 0 0;
}
@media (max-width: 600px) { .ref-wc-endpoint-card { padding: 22px 16px; } }