/*
 * LIVAGOO reference design rollout
 * Visual-only layer for all inner pages. Existing search, filters, APIs and JavaScript remain unchanged.
 */
:root{
  --lv-navy:#082b64;
  --lv-navy-2:#0a376f;
  --lv-blue:#1593ea;
  --lv-cyan:#16c9c4;
  --lv-ink:#0a2a59;
  --lv-muted:#61758f;
  --lv-line:#d7e7f4;
  --lv-soft:#f3f9ff;
  --lv-soft-2:#edf7ff;
  --lv-white:#fff;
  --lv-radius:22px;
  --lv-radius-sm:15px;
  --lv-shadow:0 20px 55px rgba(16,73,128,.12);
  --lv-shadow-soft:0 10px 28px rgba(16,73,128,.08);
}

html{background:#edf7ff}
body{background:linear-gradient(180deg,#eef8ff 0,#fff 320px,#fff 100%);color:var(--lv-ink)}
body.reference-subpage main{min-height:55vh}

/* Floating white navigation, matching the approved design. */
.site-header{
  position:sticky!important;
  top:12px!important;
  width:min(1240px,calc(100% - 28px))!important;
  margin:12px auto 0!important;
  border:1px solid rgba(211,229,242,.92)!important;
  border-radius:20px!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 14px 42px rgba(13,73,126,.10)!important;
  backdrop-filter:blur(18px)!important;
  overflow:visible!important;
}
.site-header>.wrap{width:100%!important;max-width:none!important;padding:0 24px!important}
.header-row{min-height:68px!important}
.brand img{width:148px!important;max-height:45px!important;object-fit:contain!important}
.main-nav a{color:var(--lv-ink)!important;font-weight:800!important}
.main-nav a:after{background:linear-gradient(90deg,var(--lv-blue),var(--lv-cyan))!important}
.lang-select{background:#f3f8fc!important;color:var(--lv-ink)!important;border:1px solid #e2edf5!important}
.btn,.btn-green{
  background:linear-gradient(100deg,#138fe8,#16c8c2)!important;
  color:#fff!important;
  border:0!important;
  box-shadow:0 10px 24px rgba(18,151,215,.19)!important;
}
.btn:hover,.btn-green:hover{filter:saturate(1.04);transform:translateY(-1px)}
.btn-outline,.btn-secondary,.btn-ghost{
  background:#fff!important;
  color:var(--lv-navy)!important;
  border:1px solid var(--lv-line)!important;
  box-shadow:none!important;
}

/* Inner-page hero family: airy blue/white rather than the former dark banner. */
body.reference-subpage .page-hero,
body.reference-subpage .compact-page-hero,
body.reference-subpage .travel-search-hero,
body.reference-subpage .service-hero,
body.reference-subpage .faq-hero,
body.reference-subpage .install-hero{
  position:relative!important;
  margin:16px auto 0!important;
  width:min(1240px,calc(100% - 28px))!important;
  border:1px solid rgba(208,229,244,.9)!important;
  border-radius:28px!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 82% 20%,rgba(27,199,199,.22),transparent 30%),
    radial-gradient(circle at 64% 110%,rgba(36,145,235,.16),transparent 42%),
    linear-gradient(118deg,#f9fdff 0%,#ecf7ff 52%,#e5f7fb 100%)!important;
  color:var(--lv-ink)!important;
  box-shadow:var(--lv-shadow-soft)!important;
  padding:68px 0!important;
}
body.reference-subpage .page-hero:after,
body.reference-subpage .compact-page-hero:after,
body.reference-subpage .travel-search-hero:after,
body.reference-subpage .service-hero:after,
body.reference-subpage .faq-hero:after,
body.reference-subpage .install-hero:after{
  content:"";position:absolute;right:-80px;top:-100px;width:380px;height:380px;border-radius:50%;
  border:62px solid rgba(255,255,255,.42);pointer-events:none
}
body.reference-subpage .page-hero .wrap,
body.reference-subpage .compact-page-hero .wrap,
body.reference-subpage .service-hero .wrap{position:relative;z-index:2}
body.reference-subpage .page-hero h1,
body.reference-subpage .compact-page-hero h1,
body.reference-subpage .travel-search-hero h1,
body.reference-subpage .service-hero h1,
body.reference-subpage .faq-hero h1,
body.reference-subpage .install-hero h1,
body.reference-subpage .install-title{
  color:var(--lv-navy)!important;
  font-size:clamp(38px,5vw,64px)!important;
  line-height:1.02!important;
  letter-spacing:-.045em!important;
  max-width:820px!important;
}
body.reference-subpage .page-hero p,
body.reference-subpage .compact-page-hero p,
body.reference-subpage .travel-search-hero p,
body.reference-subpage .service-hero p,
body.reference-subpage .faq-hero p,
body.reference-subpage .install-hero p,
body.reference-subpage .install-lead{
  color:var(--lv-muted)!important;
  font-size:16px!important;
  line-height:1.65!important;
  max-width:760px!important;
}
body.reference-subpage .crumb,
body.reference-subpage .breadcrumbs,
body.reference-subpage .eyebrow,
body.reference-subpage .section-kicker,
body.reference-subpage .guide-kicker{
  color:var(--lv-blue)!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
}

/* Main spacing and cards. */
body.reference-subpage .section,
body.reference-subpage .smart-search-section,
body.reference-subpage .faq-content{padding:58px 0!important}
body.reference-subpage .soft{background:linear-gradient(180deg,#f6fbff,#eef8ff)!important}
body.reference-subpage .section-head h2,
body.reference-subpage .planner-title h2,
body.reference-subpage .faq-group-title h2{
  color:var(--lv-navy)!important;
  letter-spacing:-.035em!important;
}
body.reference-subpage .service-card,
body.reference-subpage .info-card,
body.reference-subpage .smart-search-shell,
body.reference-subpage .planner-panel,
body.reference-subpage .legal,
body.reference-subpage .legal-card,
body.reference-subpage .device-card,
body.reference-subpage .device-checker,
body.reference-subpage .success-card,
body.reference-subpage .error-card,
body.reference-subpage .faq-answer,
body.reference-subpage .faq-search-box,
body.reference-subpage .warning,
body.reference-subpage .guide-card,
body.reference-subpage .post-purchase,
body.reference-subpage .partner-compare,
body.reference-subpage .partner-note-grid article,
body.reference-subpage .external-embed,
body.reference-subpage .recommendation-box,
body.reference-subpage .option-details{
  border:1px solid var(--lv-line)!important;
  border-radius:var(--lv-radius)!important;
  background:rgba(255,255,255,.98)!important;
  box-shadow:var(--lv-shadow-soft)!important;
}
body.reference-subpage .service-card,
body.reference-subpage .info-card,
body.reference-subpage .device-card{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
body.reference-subpage .service-card:hover,
body.reference-subpage .info-card:hover,
body.reference-subpage .device-card:hover{transform:translateY(-3px);border-color:#b9ddf5!important;box-shadow:var(--lv-shadow)!important}
body.reference-subpage .service-icon,
body.reference-subpage .device-platform-icon,
body.reference-subpage .warning-icon,
body.reference-subpage .success-mark{
  background:linear-gradient(135deg,#e9f5ff,#e4fffb)!important;
  color:var(--lv-blue)!important;
  border:1px solid #d8edf7!important;
}

/* eSIM catalog: design only. No selectors affecting filter state, data or scripts. */
body.esim-catalog-page .compact-page-hero{padding:52px 0!important}
body.esim-catalog-page .esim-planner-section{padding-top:30px!important}
body.esim-catalog-page .pro-planner{
  background:linear-gradient(135deg,#fff,#f1f9ff)!important;
  border-radius:24px!important;
  box-shadow:var(--lv-shadow)!important;
}
body.esim-catalog-page .input-shell,
body.esim-catalog-page .catalog-days-buttons{
  border-color:var(--lv-line)!important;
  background:#fff!important;
}
body.esim-catalog-page .catalog-day-filter{border-radius:12px!important}
body.esim-catalog-page .catalog-day-filter.active,
body.esim-catalog-page .catalog-day-filter[aria-pressed="true"]{
  background:linear-gradient(100deg,var(--lv-blue),var(--lv-cyan))!important;color:#fff!important
}
body.esim-catalog-page .catalog-card,
body.esim-catalog-page .modern-plan-card{
  background:linear-gradient(160deg,#fff 0%,#f8fcff 100%)!important;
  border:1px solid var(--lv-line)!important;
  border-radius:20px!important;
  box-shadow:0 9px 25px rgba(16,73,128,.075)!important;
}
body.esim-catalog-page .catalog-card:hover,
body.esim-catalog-page .modern-plan-card:hover{transform:translateY(-2px);box-shadow:var(--lv-shadow)!important}
body.esim-catalog-page .catalog-card:nth-child(4n+1){background:linear-gradient(145deg,#fff7f2,#fff)!important}
body.esim-catalog-page .catalog-card:nth-child(4n+2){background:linear-gradient(145deg,#eff8ff,#fff)!important}
body.esim-catalog-page .catalog-card:nth-child(4n+3){background:linear-gradient(145deg,#edfffb,#fff)!important}
body.esim-catalog-page .catalog-card:nth-child(4n+4){background:linear-gradient(145deg,#f4f0ff,#fff)!important}
body.esim-catalog-page .package-data,
body.esim-catalog-page .package-price b,
body.esim-catalog-page .modern-plan-price strong{color:var(--lv-navy)!important}
body.esim-catalog-page .consent-card{border-radius:24px!important}

/* Travel-service pages. */
body.reference-subpage .travel-search-hero-grid,
body.reference-subpage .service-hero-grid{position:relative;z-index:2;align-items:center!important}
body.reference-subpage .travel-hero-art,
body.reference-subpage .service-hero-grid>img{
  filter:drop-shadow(0 24px 35px rgba(9,59,104,.18));
}
body.reference-subpage .travel-art-card{
  background:rgba(255,255,255,.92)!important;
  border:1px solid #d6e9f6!important;
  color:var(--lv-navy)!important;
  box-shadow:var(--lv-shadow-soft)!important;
  border-radius:18px!important;
}
body.reference-subpage .smart-search-shell{background:linear-gradient(145deg,#fff,#f1f9ff)!important;padding:30px!important}
body.reference-subpage .smart-field input,
body.reference-subpage .smart-field select,
body.reference-subpage .smart-field textarea{
  background:#fff!important;border:1px solid var(--lv-line)!important;border-radius:14px!important;color:var(--lv-ink)!important
}
body.reference-subpage .smart-search-results{border-radius:20px!important}
body.reference-subpage .dark-section{
  background:linear-gradient(105deg,#083575,#0a72bd 55%,#16bbb9)!important;
  border-radius:28px!important;
  width:min(1240px,calc(100% - 28px))!important;
  margin:0 auto 44px!important;
  overflow:hidden!important;
}

/* Help center, FAQ and installation. */
body.livagoo-help-page .container{width:min(1120px,calc(100% - 32px))!important;margin-inline:auto!important}
body.reference-subpage .faq-hero-grid{position:relative;z-index:2}
body.reference-subpage .faq-search-box{padding:10px!important;background:#fff!important}
body.reference-subpage .faq-search{background:#fff!important;border:0!important}
body.reference-subpage .faq-controls{background:#fff!important;border-bottom:1px solid var(--lv-line)!important;box-shadow:0 8px 24px rgba(20,80,132,.05)!important}
body.reference-subpage .faq-chip,
body.reference-subpage .tab-btn,
body.reference-subpage .device-tag{border-radius:999px!important;border:1px solid var(--lv-line)!important;background:#fff!important;color:var(--lv-navy)!important}
body.reference-subpage .faq-chip.active,
body.reference-subpage .tab-btn.active{background:linear-gradient(100deg,var(--lv-blue),var(--lv-cyan))!important;color:#fff!important;border-color:transparent!important}
body.reference-subpage .faq-answer{overflow:hidden!important;margin-bottom:12px!important}
body.reference-subpage .faq-answer summary{color:var(--lv-navy)!important;font-weight:850!important}
body.reference-subpage .install-steps{gap:16px!important}
body.reference-subpage .install-step{border:1px solid var(--lv-line)!important;border-radius:18px!important;background:#fff!important;box-shadow:var(--lv-shadow-soft)!important}
body.reference-subpage .install-number{background:linear-gradient(135deg,var(--lv-blue),var(--lv-cyan))!important;color:#fff!important}
body.reference-subpage .full-guide-image{border-radius:20px!important;border:1px solid var(--lv-line)!important;box-shadow:var(--lv-shadow-soft)!important}

/* Legal, success and error pages. */
body.reference-subpage .legal{padding:clamp(24px,4vw,48px)!important}
body.reference-subpage .legal h2,
body.reference-subpage .legal h3{color:var(--lv-navy)!important}
body.reference-subpage .success-section,
body.reference-subpage .error-page{padding:72px 0!important;background:linear-gradient(180deg,#eef8ff,#fff)!important}
body.reference-subpage .success-card,
body.reference-subpage .error-card{max-width:860px!important;margin-inline:auto!important;padding:clamp(28px,5vw,58px)!important}

/* Footer mirrors the light footer of the approved screenshot. */
.site-footer{
  width:min(1240px,calc(100% - 28px))!important;
  margin:30px auto 14px!important;
  padding:48px 0 20px!important;
  border:1px solid var(--lv-line)!important;
  border-radius:28px!important;
  background:linear-gradient(180deg,#f8fcff,#eef7ff)!important;
  color:var(--lv-ink)!important;
  box-shadow:var(--lv-shadow-soft)!important;
}
.site-footer .wrap{width:100%!important;padding:0 34px!important}
.footer-grid{gap:36px!important}
.footer-brand img{
  width:150px!important;height:auto!important;max-height:48px!important;object-fit:contain!important;
  filter:none!important;background:transparent!important;padding:0!important;border-radius:0!important
}
.footer-brand p,.affiliate-strip,.footer-bottom{color:var(--lv-muted)!important}
.footer-col b{color:var(--lv-navy)!important}
.footer-col a,.footer-link-button{color:#516d8d!important}
.footer-col a:hover,.footer-link-button:hover{color:var(--lv-blue)!important}
.footer-badges span{border:1px solid var(--lv-line)!important;background:#fff!important;color:#52708e!important}
.affiliate-strip{border:1px solid var(--lv-line)!important;background:rgba(255,255,255,.72)!important}
.footer-bottom{border-top:1px solid var(--lv-line)!important;align-items:center!important}
.payment-logos{
  display:flex;align-items:center;justify-content:center;margin:26px 0 0;padding:10px 0 2px;
  border-top:1px solid var(--lv-line)
}
.payment-logos img{display:block;width:240px;max-width:100%;height:auto;mix-blend-mode:multiply}

.float-wa{background:linear-gradient(135deg,#13bb74,#19d089)!important;border:4px solid #fff!important}
.privacy-banner{background:rgba(255,255,255,.98)!important;border:1px solid var(--lv-line)!important;box-shadow:var(--lv-shadow)!important}

@media(max-width:1100px){
  .site-header{top:8px!important}
  .site-header>.wrap{padding:0 16px!important}
  .main-nav{top:86px!important;width:auto!important}
}
@media(max-width:820px){
  .site-header,.site-footer,body.reference-subpage .page-hero,body.reference-subpage .compact-page-hero,
  body.reference-subpage .travel-search-hero,body.reference-subpage .service-hero,
  body.reference-subpage .faq-hero,body.reference-subpage .install-hero,
  body.reference-subpage .dark-section{width:calc(100% - 18px)!important;border-radius:22px!important}
  .site-header{margin-top:8px!important}
  .brand img{width:126px!important}
  body.reference-subpage .page-hero,body.reference-subpage .compact-page-hero,
  body.reference-subpage .travel-search-hero,body.reference-subpage .service-hero,
  body.reference-subpage .faq-hero,body.reference-subpage .install-hero{padding:48px 0!important}
  body.reference-subpage .page-hero h1,body.reference-subpage .compact-page-hero h1,
  body.reference-subpage .travel-search-hero h1,body.reference-subpage .service-hero h1,
  body.reference-subpage .faq-hero h1,body.reference-subpage .install-title{font-size:clamp(34px,10vw,48px)!important}
  .site-footer .wrap{padding:0 22px!important}
}
@media(max-width:560px){
  body{background:linear-gradient(180deg,#eef8ff 0,#fff 220px)}
  .site-header{border-radius:17px!important}
  .site-header>.wrap{padding:0 10px!important}
  .header-row{min-height:62px!important}
  .brand img{width:112px!important}
  body.reference-subpage .section,body.reference-subpage .smart-search-section,body.reference-subpage .faq-content{padding:42px 0!important}
  body.reference-subpage .smart-search-shell{padding:18px!important}
  body.reference-subpage .legal{padding:22px!important}
  .site-footer{padding-top:34px!important}
  .site-footer .wrap{padding:0 16px!important}
  .payment-logos img{width:220px}
}