/* =========================================================
   January Optical - Fresh Blue Theme Override
   วางไฟล์นี้หลัง app.css หรือวางท้าย /assets/css/app.css
   เปลี่ยนโทนทั้งเว็บเป็นสีฟ้าสดใส เหมาะกับร้านแว่นตา
   ========================================================= */

/* 1) Global Color Tokens */
:root {
    --jo-espresso: #073B5C;
    --jo-brown: #0284C7;
    --jo-caramel: #22C7E8;
    --jo-cocoa: #0E7490;
    --jo-cream: #E0F7FF;
    --jo-warm: #F4FBFF;
    --jo-card: #FFFFFF;
    --jo-text: #073B5C;
    --jo-muted: #587286;
    --jo-border: rgba(14, 116, 144, .16);
    --jo-shadow: 0 18px 46px rgba(7, 59, 92, .10);
}

/* 2) Base */
body,
.jo-ee-page {
    background: var(--jo-warm);
    color: var(--jo-text);
}

a {
    color: var(--jo-brown);
}

a:hover {
    color: var(--jo-cocoa);
}

/* 3) Buttons */
.jo-btn-primary,
.btn.jo-btn-primary {
    color: #fff !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, #0284C7 0%, #22C7E8 100%) !important;
    box-shadow: 0 16px 34px rgba(2, 132, 199, .24) !important;
}

.jo-btn-primary:hover,
.btn.jo-btn-primary:hover {
    color: #fff !important;
    background: linear-gradient(135deg, #0369A1 0%, #0891B2 100%) !important;
    box-shadow: 0 20px 42px rgba(2, 132, 199, .32) !important;
    transform: translateY(-1px);
}

.jo-btn-outline,
.btn.jo-btn-outline {
    color: var(--jo-brown) !important;
    border-color: rgba(2, 132, 199, .34) !important;
    background: rgba(255, 255, 255, .72) !important;
}

.jo-btn-outline:hover,
.btn.jo-btn-outline:hover {
    color: #fff !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, #0284C7 0%, #22C7E8 100%) !important;
    box-shadow: 0 16px 34px rgba(2, 132, 199, .22) !important;
}

/* 4) Common Badges / Kicker */
.jo-kicker,
.jo-ee-eyebrow,
.jo-promo-content .jo-kicker {
    color: #0369A1 !important;
    background: rgba(224, 247, 255, .88) !important;
    border-color: rgba(34, 199, 232, .34) !important;
}

.jo-section-head h2,
.jo-review-head h2,
.jo-news-head h2,
.jo-realwork-head h2,
.jo-ee-section-head h2,
.jo-ee-title,
.jo-ee-title span,
.jo-ee-hero-card h2,
.jo-ee-lens-panel h2,
.jo-ee-note-panel h2,
.jo-ee-faq-item h3,
.jo-ee-cta h2 {
    color: var(--jo-espresso) !important;
}

.jo-section-head p,
.jo-review-head p,
.jo-news-head p,
.jo-realwork-head p,
.jo-ee-section-head p,
.jo-ee-lead,
.jo-ee-lens-panel p,
.jo-ee-note-panel p,
.jo-ee-faq-item p,
.jo-ee-cta p {
    color: var(--jo-muted) !important;
}

/* 5) Header / Navigation */
.jo-header,
.site-header,
.navbar {
    background: rgba(255, 255, 255, .88);
    border-bottom-color: rgba(14, 116, 144, .14) !important;
    backdrop-filter: blur(14px);
}

.navbar .nav-link,
.jo-header .nav-link {
    color: #0F4C75 !important;
}

.navbar .nav-link:hover,
.navbar .nav-link.active,
.jo-header .nav-link:hover,
.jo-header .nav-link.active {
    color: #0284C7 !important;
}

/* 6) Hero Sections */
.jo-hero,
.jo-ee-hero {
    background:
        radial-gradient(circle at 8% 12%, rgba(34, 199, 232, .24), transparent 32%),
        radial-gradient(circle at 88% 18%, rgba(2, 132, 199, .16), transparent 34%),
        linear-gradient(180deg, #FFFFFF 0%, #EAF9FF 100%) !important;
    border-bottom-color: rgba(14, 116, 144, .16) !important;
}

.jo-hero-card,
.jo-ee-hero-card,
.jo-product-card,
.jo-service-card,
.jo-why-card,
.jo-ee-suitable-card,
.jo-ee-step-card,
.jo-ee-lens-panel,
.jo-ee-lens-item,
.jo-ee-note-panel,
.jo-ee-note-item,
.jo-ee-faq-panel,
.jo-ee-faq-item,
.jo-ee-cta,
.jo-realwork-card,
.jo-news-feature-compact,
.jo-news-list-panel,
.jo-news-list-item,
.jo-review-card {
    background: #FFFFFF !important;
    border-color: rgba(14, 116, 144, .16) !important;
    box-shadow: 0 16px 40px rgba(7, 59, 92, .08) !important;
}

/* 7) Service / Product / Icon Cards */
.jo-service-icon,
.jo-news-mini-icon,
.jo-ee-feature-no,
.jo-ee-suitable-no,
.jo-ee-note-icon,
.jo-review-avatar,
.jo-review-count-pill {
    color: #0284C7 !important;
    background: linear-gradient(135deg, #E0F7FF 0%, #CFFAFE 100%) !important;
    border-color: rgba(34, 199, 232, .24) !important;
}

.jo-ee-step-no {
    color: #fff !important;
    background: linear-gradient(135deg, #0284C7 0%, #06B6D4 100%) !important;
}

.jo-service-card:hover,
.jo-product-card:hover,
.jo-why-card:hover,
.jo-ee-suitable-card:hover,
.jo-ee-step-card:hover,
.jo-realwork-card:hover,
.jo-news-list-item:hover,
.jo-news-feature-compact:hover,
.jo-review-card:hover {
    border-color: rgba(2, 132, 199, .38) !important;
    box-shadow: 0 24px 60px rgba(2, 132, 199, .14) !important;
}

/* 8) Premium Blue Bands */
.jo-promo-box,
.jo-review-summary,
.jo-news-feature-card,
.jo-ee-band,
.jo-cta-box {
    background:
        radial-gradient(circle at right top, rgba(165, 243, 252, .34), transparent 34%),
        radial-gradient(circle at left bottom, rgba(255, 255, 255, .14), transparent 32%),
        linear-gradient(135deg, #063A5B 0%, #075985 44%, #0284C7 78%, #22C7E8 100%) !important;
    border-color: rgba(165, 243, 252, .54) !important;
    box-shadow: 0 32px 80px rgba(7, 89, 133, .24) !important;
}

.jo-promo-box h2,
.jo-promo-box p,
.jo-review-summary h3,
.jo-review-summary p,
.jo-news-feature-card h3,
.jo-news-feature-card p,
.jo-ee-band h2,
.jo-ee-band p,
.jo-cta-box h2,
.jo-cta-box p {
    color: #fff !important;
}

.jo-promo-pill,
.jo-promo-meta,
.jo-home-promo-date-card,
.jo-ee-band-item,
.jo-review-google-badge,
.jo-review-stat {
    background: rgba(255, 255, 255, .15) !important;
    border-color: rgba(255, 255, 255, .24) !important;
    color: #fff !important;
}

/* 9) Sections Background */
.jo-services,
.jo-products,
.jo-news,
.jo-realwork,
.jo-reviews,
.jo-why,
.jo-ee-section {
    background:
        radial-gradient(circle at 12% 10%, rgba(34, 199, 232, .10), transparent 30%),
        linear-gradient(180deg, #F4FBFF 0%, #FFFFFF 100%) !important;
}

.jo-promo,
.jo-ee-band-section {
    background:
        radial-gradient(circle at 10% 18%, rgba(34, 199, 232, .14), transparent 28%),
        radial-gradient(circle at 88% 14%, rgba(2, 132, 199, .12), transparent 32%),
        linear-gradient(180deg, #EAF9FF 0%, #FFFFFF 100%) !important;
}

/* 10) News */
.jo-news-filter {
    color: #0369A1 !important;
    background: #fff !important;
    border-color: rgba(14, 116, 144, .18) !important;
}

.jo-news-filter:hover,
.jo-news-filter.is-active,
.jo-news-badge {
    color: #fff !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, #0284C7 0%, #22C7E8 100%) !important;
}

.jo-news-link,
.jo-news-list-more,
.jo-link-more,
.jo-review-source-link {
    color: #0284C7 !important;
}

.jo-news-link:hover,
.jo-news-list-more:hover,
.jo-link-more:hover,
.jo-review-source-link:hover {
    color: #0E7490 !important;
}

/* 11) Real Store Gallery */
.jo-realwork-badge,
.jo-promo-media-badge,
.jo-news-feature-ribbon {
    color: #fff !important;
    background: linear-gradient(135deg, #0284C7 0%, #22C7E8 100%) !important;
    box-shadow: 0 12px 24px rgba(2, 132, 199, .22) !important;
}

.jo-realwork-zoom {
    color: #0369A1 !important;
    background: rgba(255, 255, 255, .92) !important;
}

/* 12) Reviews */
.jo-review-stars {
    color: #FACC15 !important;
}

.jo-review-control,
.jo-review-indicators .active {
    color: #fff !important;
    background: linear-gradient(135deg, #0284C7 0%, #22C7E8 100%) !important;
    box-shadow: 0 12px 26px rgba(2, 132, 199, .22) !important;
}

.jo-review-indicators [data-bs-target] {
    background: rgba(2, 132, 199, .24) !important;
}

/* 13) Forms / Inputs */
.form-control,
.form-select,
textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"] {
    border-color: rgba(14, 116, 144, .18) !important;
}

.form-control:focus,
.form-select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus {
    border-color: #22C7E8 !important;
    box-shadow: 0 0 0 .22rem rgba(34, 199, 232, .18) !important;
}

/* 14) Footer */
.jo-footer,
.site-footer,
footer {
    background:
        radial-gradient(circle at 12% 10%, rgba(34, 199, 232, .16), transparent 28%),
        linear-gradient(135deg, #052E48 0%, #073B5C 100%) !important;
    color: rgba(255, 255, 255, .84) !important;
}

.jo-footer a,
.site-footer a,
footer a {
    color: #A5F3FC !important;
}

.jo-footer a:hover,
.site-footer a:hover,
footer a:hover {
    color: #FFFFFF !important;
}

/* 15) Dark Theme - Blue Version */
html[data-jo-theme="dark"] {
    --jo-espresso: #E0F7FF;
    --jo-brown: #38BDF8;
    --jo-caramel: #67E8F9;
    --jo-cocoa: #22D3EE;
    --jo-cream: rgba(56, 189, 248, .12);
    --jo-warm: #061723;
    --jo-card: #0B2233;
    --jo-text: #E0F7FF;
    --jo-muted: #A9C5D6;
    --jo-border: rgba(125, 211, 252, .18);
    --jo-shadow: 0 20px 52px rgba(0, 0, 0, .34);
}

html[data-jo-theme="dark"] body,
html[data-jo-theme="dark"] .jo-ee-page,
html[data-jo-theme="dark"] .jo-services,
html[data-jo-theme="dark"] .jo-products,
html[data-jo-theme="dark"] .jo-news,
html[data-jo-theme="dark"] .jo-realwork,
html[data-jo-theme="dark"] .jo-reviews,
html[data-jo-theme="dark"] .jo-why,
html[data-jo-theme="dark"] .jo-ee-section {
    background:
        radial-gradient(circle at 12% 10%, rgba(56, 189, 248, .12), transparent 30%),
        linear-gradient(180deg, #061723 0%, #081C2B 100%) !important;
}

html[data-jo-theme="dark"] .jo-hero,
html[data-jo-theme="dark"] .jo-ee-hero {
    background:
        radial-gradient(circle at 8% 10%, rgba(56, 189, 248, .16), transparent 32%),
        linear-gradient(180deg, #081C2B 0%, #061723 100%) !important;
}

html[data-jo-theme="dark"] .jo-hero-card,
html[data-jo-theme="dark"] .jo-ee-hero-card,
html[data-jo-theme="dark"] .jo-product-card,
html[data-jo-theme="dark"] .jo-service-card,
html[data-jo-theme="dark"] .jo-why-card,
html[data-jo-theme="dark"] .jo-ee-suitable-card,
html[data-jo-theme="dark"] .jo-ee-step-card,
html[data-jo-theme="dark"] .jo-ee-lens-panel,
html[data-jo-theme="dark"] .jo-ee-lens-item,
html[data-jo-theme="dark"] .jo-ee-note-panel,
html[data-jo-theme="dark"] .jo-ee-note-item,
html[data-jo-theme="dark"] .jo-ee-faq-panel,
html[data-jo-theme="dark"] .jo-ee-faq-item,
html[data-jo-theme="dark"] .jo-ee-cta,
html[data-jo-theme="dark"] .jo-realwork-card,
html[data-jo-theme="dark"] .jo-news-feature-compact,
html[data-jo-theme="dark"] .jo-news-list-panel,
html[data-jo-theme="dark"] .jo-news-list-item,
html[data-jo-theme="dark"] .jo-review-card {
    background: var(--jo-card) !important;
    border-color: var(--jo-border) !important;
}

html[data-jo-theme="dark"] .jo-section-head h2,
html[data-jo-theme="dark"] .jo-review-head h2,
html[data-jo-theme="dark"] .jo-news-head h2,
html[data-jo-theme="dark"] .jo-realwork-head h2,
html[data-jo-theme="dark"] .jo-ee-section-head h2,
html[data-jo-theme="dark"] .jo-ee-title,
html[data-jo-theme="dark"] .jo-ee-title span,
html[data-jo-theme="dark"] h1,
html[data-jo-theme="dark"] h2,
html[data-jo-theme="dark"] h3,
html[data-jo-theme="dark"] strong {
    color: var(--jo-text) !important;
}

/* 16) Contrast Theme - keep readable */
html[data-jo-theme="contrast"] .jo-btn-primary,
html[data-jo-theme="contrast"] .jo-btn-outline:hover,
html[data-jo-theme="contrast"] .jo-news-filter.is-active,
html[data-jo-theme="contrast"] .jo-review-control,
html[data-jo-theme="contrast"] .jo-realwork-badge,
html[data-jo-theme="contrast"] .jo-promo-media-badge,
html[data-jo-theme="contrast"] .jo-news-feature-ribbon {
    background: #FFFF00 !important;
    color: #000 !important;
    border-color: #FFFF00 !important;
    box-shadow: none !important;
}

/* 17) Mobile Polish */
@media (max-width: 767.98px) {
    .jo-hero,
    .jo-ee-hero {
        background:
            radial-gradient(circle at 20% 8%, rgba(34, 199, 232, .22), transparent 34%),
            linear-gradient(180deg, #FFFFFF 0%, #EAF9FF 100%) !important;
    }

    .jo-btn-primary,
    .btn.jo-btn-primary,
    .jo-btn-outline,
    .btn.jo-btn-outline {
        min-height: 48px;
    }
}