/* =========================================================
   SHRED.SAFE APP-GRADE UI SYSTEM
   Premium mobile-first PWA layer
   ========================================================= */

:root{
  --app-bg:#050505;
  --app-ink:#f4f0e8;
  --app-muted:#a59b91;
  --app-dim:#6d665f;
  --app-line:rgba(255,255,255,.105);
  --app-line-strong:rgba(255,255,255,.18);
  --app-orange:#ff6500;
  --app-orange-2:#d94b00;
  --app-panel:rgba(13,13,12,.82);
  --app-panel-solid:#10100f;
  --app-card:rgba(18,17,16,.88);
  --app-green:#48c46a;
  --app-amber:#ffad2f;
  --app-red:#ee4a3c;
  --app-radius:22px;
  --app-radius-sm:14px;
  --app-shadow:0 28px 90px rgba(0,0,0,.48);
}

html{
  background:var(--app-bg)!important;
  -webkit-text-size-adjust:100%;
}

body{
  background:
    radial-gradient(circle at 78% 8%,rgba(255,101,0,.16),transparent 30%),
    linear-gradient(180deg,#050505 0%,#090807 42%,#050505 100%)!important;
  color:var(--app-ink)!important;
  font-family:'Barlow',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  min-height:100vh;
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  background:
    linear-gradient(90deg,rgba(0,0,0,.92),rgba(0,0,0,.52),rgba(0,0,0,.95)),
    url("shredsafe-bg-only-1400.webp"),
    url("assets/shredsafe-bg-only-1400.webp");
  background-size:cover;
  background-position:center top;
  opacity:.28;
}

body:after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.015) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.45),transparent 72%);
}

/* Global premium shell */
.wrap,
main.wrap,
.container,
.page-wrap,
.app-wrap,
.content-wrap,
.dashboard,
.tools,
.filters-wrap,
.hero-grid{
  width:min(1600px,calc(100vw - 72px))!important;
  max-width:1600px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

body:has(#gen-btn) .wrap,
body:has(#results) .wrap,
body:has(.field-grid) .wrap,
body:has(.fg) .wrap{
  width:min(1180px,calc(100vw - 72px))!important;
  max-width:1180px!important;
}

/* App header / navbar */
.topbar,
nav:not(.bottom-nav),
.ob-header{
  background:rgba(5,5,5,.72)!important;
  backdrop-filter:blur(22px)!important;
  -webkit-backdrop-filter:blur(22px)!important;
  border-bottom:1px solid var(--app-line)!important;
  box-shadow:0 18px 60px rgba(0,0,0,.24)!important;
}

.brand,
.mobile-logo,
.nav-logo,
.ob-logo{
  letter-spacing:.09em!important;
}

.brand img,
.mobile-logo img,
.nav-logo:before,
.ob-logo:before{
  filter:drop-shadow(0 0 22px rgba(255,101,0,.20))!important;
}

.nav a,
.topbar a,
.side-nav a,
.bottom-nav a{
  transition:color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease!important;
}

.nav a:hover,
.topbar a:hover{
  color:var(--app-orange)!important;
}

/* Hero treatment */
.hero{
  position:relative!important;
  border-bottom:0!important;
  background:transparent!important;
}

.hero:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg,#050505 0%,rgba(5,5,5,.88) 34%,rgba(5,5,5,.30) 72%,#050505 100%),
    url("assets/shredsafe-bg-only-1400.webp") center/cover no-repeat;
  opacity:.75;
}

.hero-title,
.hero h1,
.hero-h1,
.modal-title,
.country-head h2,
.panel h2,
.fuel-panel h2,
.submit-title,
.route-head,
.tool h3,
.trail-body h3,
.vcard h3{
  text-wrap:balance;
}

.hero h1,
.hero-h1{
  letter-spacing:.025em!important;
  text-shadow:0 18px 70px rgba(0,0,0,.55)!important;
}

.hero-sub,
.hero p,
.panel-sub{
  color:#d6cec4!important;
}

/* Premium cards */
.panel,
.card,
.tool,
.vcard,
.home-vcard,
.trail-card,
.field,
.submit-section,
.hero-card,
.modal-card,
.country-section,
.filters,
.timeline,
.products-section,
.share-card,
.target-card,
.already-premium,
.premium-card,
.result,
.results,
.wrap > section,
.wrap > div:not(#list):not(.count){
  background:
    linear-gradient(180deg,rgba(23,22,20,.88),rgba(7,7,7,.92))!important;
  border:1px solid var(--app-line)!important;
  box-shadow:var(--app-shadow)!important;
}

.panel,
.card,
.tool,
.vcard,
.home-vcard,
.trail-card,
.submit-section,
.hero-card,
.country-section,
.filters,
.modal-card{
  border-radius:var(--app-radius)!important;
}

.field,
.result,
.results,
.timeline,
.products-section,
.share-card,
.target-card{
  border-radius:var(--app-radius-sm)!important;
}

.tool,
.vcard,
.home-vcard,
.trail-card{
  position:relative!important;
  overflow:hidden!important;
}

.tool:after,
.vcard:after,
.home-vcard:after,
.trail-card:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(255,101,0,.12),transparent 32%,rgba(255,255,255,.035));
  opacity:.65;
}

.tool:hover,
.vcard:hover,
.home-vcard:hover,
.trail-card:hover{
  border-color:rgba(255,101,0,.42)!important;
  transform:translateY(-3px)!important;
}

/* Buttons */
button,
.btn,
.nav-cta,
.gen-btn,
.submit-btn,
.full-btn,
.pay-btn,
.cta-primary,
.share-primary,
.map-actions a.primary{
  border-radius:12px!important;
}

.gen-btn,
.submit-btn,
.full-btn,
.pay-btn,
.nav-cta,
.btn.primary,
.cta-primary,
.share-primary,
.map-actions a.primary,
button[type="submit"]{
  background:linear-gradient(135deg,var(--app-orange),var(--app-orange-2))!important;
  color:white!important;
  border:1px solid rgba(255,101,0,.55)!important;
  box-shadow:0 18px 44px rgba(255,101,0,.22)!important;
  font-family:'Barlow Condensed',sans-serif!important;
  font-weight:900!important;
  letter-spacing:.075em!important;
  text-transform:uppercase!important;
}

.back-btn,
.btn.secondary,
.cta-secondary,
.share-secondary,
.map-actions a,
.map-actions button{
  background:rgba(255,255,255,.045)!important;
  border:1px solid var(--app-line-strong)!important;
  color:var(--app-ink)!important;
}

/* Inputs */
input,
select,
textarea,
.fi{
  background:rgba(0,0,0,.34)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  color:var(--app-ink)!important;
  border-radius:12px!important;
  min-height:46px;
}

input:focus,
select:focus,
textarea:focus,
.fi:focus{
  outline:none!important;
  border-color:rgba(255,101,0,.62)!important;
  box-shadow:0 0 0 4px rgba(255,101,0,.13)!important;
}

/* Labels and body text */
label,
.field-lbl,
.section-head,
.hero-eyebrow,
.eyebrow,
.kicker,
.vcard-topline,
.home-topline,
.modal-kicker,
.prod-head{
  color:var(--app-orange)!important;
}

p,
small,
.vcard-loc,
.trail-body small,
.route-note,
.submit-desc,
.prod-detail,
.tl-desc{
  color:var(--app-muted)!important;
}

/* App-grade bottom navigation */
.bottom-nav{
  background:rgba(5,5,5,.86)!important;
  backdrop-filter:blur(22px)!important;
  -webkit-backdrop-filter:blur(22px)!important;
  border-top:1px solid var(--app-line)!important;
  box-shadow:0 -18px 50px rgba(0,0,0,.40)!important;
}

.bottom-nav a{
  border-radius:999px!important;
  padding:10px 14px!important;
}

.bottom-nav a.active,
.bottom-nav a:hover{
  color:#fff!important;
  background:rgba(255,101,0,.14)!important;
}

/* Directory polish */
.vcard-media,
.home-card-media,
.trail-img{
  border-bottom:1px solid rgba(255,255,255,.08)!important;
}

.vcard-risk,
.risk,
.home-country-label,
.vcard:before{
  border:1px solid rgba(255,255,255,.14)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}

/* Modal */
.modal.show{
  animation:appFadeIn .16s ease-out;
}

.modal-card{
  animation:appModalIn .18s ease-out;
}

@keyframes appFadeIn{
  from{opacity:0}
  to{opacity:1}
}

@keyframes appModalIn{
  from{opacity:0;transform:translateY(18px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Mobile app feel */
@media(max-width:760px){
  body{
    padding-bottom:82px!important;
  }

  .wrap,
  main.wrap,
  .container,
  .page-wrap,
  .app-wrap,
  .content-wrap,
  .dashboard,
  .tools,
  .filters-wrap,
  .hero-grid{
    width:calc(100vw - 24px)!important;
    max-width:calc(100vw - 24px)!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  .topbar{
    min-height:64px!important;
    padding:10px 12px!important;
  }

  .hero{
    padding-top:30px!important;
    padding-bottom:24px!important;
  }

  .hero:before{
    background:
      linear-gradient(180deg,rgba(5,5,5,.62),rgba(5,5,5,.98) 82%),
      url("assets/shredsafe-bg-only-1000.webp") 58% top/cover no-repeat;
    opacity:.82;
  }

  .hero h1,
  .hero-h1{
    font-size:clamp(46px,15vw,64px)!important;
  }

  .hero p,
  .hero-sub{
    font-size:16px!important;
  }

  .panel,
  .card,
  .tool,
  .vcard,
  .home-vcard,
  .trail-card,
  .submit-section,
  .hero-card,
  .country-section,
  .filters{
    border-radius:18px!important;
  }

  .country-tabs{
    display:flex!important;
    overflow-x:auto!important;
    flex-wrap:nowrap!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }

  .country-tabs::-webkit-scrollbar{
    display:none!important;
  }

  .ctab{
    flex:0 0 auto!important;
  }

  .bottom-nav{
    height:70px!important;
    justify-content:flex-start!important;
    overflow-x:auto!important;
    gap:8px!important;
    padding:0 12px!important;
    scrollbar-width:none!important;
  }

  .bottom-nav::-webkit-scrollbar{
    display:none!important;
  }

  .bottom-nav a{
    flex:0 0 auto!important;
    font-size:12px!important;
  }

  .modal{
    padding:10px!important;
  }

  .modal-card{
    border-radius:18px!important;
  }
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}