/* =========================================================
   Ticarium Business Tycoon - main.css
   Brand palette: deep navy, electric blue, turquoise, gold accent.
   Built on top of Bootstrap 5.3 utility classes.
   ========================================================= */

:root{
  --tc-navy-950: #060b1a;
  --tc-navy-900: #0a1230;
  --tc-navy-800: #101a44;
  --tc-navy-700: #16225c;
  --tc-blue-500: #2f6bff;
  --tc-blue-400: #4f8bff;
  --tc-turquoise: #1fd1c9;
  --tc-gold-500: #ffb300;
  --tc-gold-300: #ffd873;
  --tc-text: #eaf0ff;
  --tc-text-muted: #9fb0d9;
  --tc-radius-lg: 20px;
  --tc-radius-md: 14px;
  --tc-shadow-card: 0 20px 45px rgba(4, 10, 30, .45);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

html{ scroll-behavior: smooth; }

body{
  background: var(--tc-navy-950);
  color: var(--tc-text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

a{ color: var(--tc-turquoise); text-decoration: none; }
a:hover{ color: var(--tc-gold-300); }

.skip-link{ position:absolute; top:-40px; left:0; background:#fff; color:#000; padding:8px 12px; z-index:2000; }
.skip-link:focus{ top:0; }

/* ---------- Navbar ---------- */
.site-navbar{
  background: rgba(6, 11, 26, .85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav-links .nav-link{ color: var(--tc-text); font-weight: 600; padding: .5rem .75rem; }
.nav-links .nav-link.active,
.nav-links .nav-link:hover{ color: var(--tc-gold-300); }
.btn-account{ background: rgba(255,255,255,.08); color: var(--tc-text); border: 1px solid rgba(255,255,255,.15); }
.btn-account:hover{ background: rgba(255,255,255,.16); color: #fff; }

.btn-cta-download{
  background: linear-gradient(135deg, var(--tc-blue-500), var(--tc-turquoise));
  color: #fff; font-weight: 700; border: none; border-radius: 999px;
  padding: .45rem 1.1rem;
}
.btn-cta-download:hover{ filter: brightness(1.1); color:#fff; }

/* ---------- Language switcher (flag + code pill) ---------- */
.lang-switcher-toggle{
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  color: var(--tc-text); border-radius: 999px; padding: .4rem .8rem;
  font-weight: 700; font-size: .85rem; line-height: 1;
}
.lang-switcher-toggle:hover{ background: rgba(255,255,255,.16); color: #fff; }
.lang-switcher-toggle .lang-flag{ font-size: 1.05rem; line-height: 1; }
.lang-switcher-toggle::after{ margin-left: .15rem; }
.lang-switcher-menu{
  background: var(--tc-navy-800); border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: .4rem; min-width: 180px;
  box-shadow: var(--tc-shadow-card);
}
.lang-switcher-item{
  display: flex; align-items: center; gap: .6rem; border-radius: 10px;
  padding: .5rem .65rem; color: var(--tc-text); font-weight: 600; font-size: .9rem;
}
.lang-switcher-item .lang-flag{ font-size: 1.15rem; }
.lang-switcher-item .lang-name{ flex: 1 1 auto; }
.lang-switcher-item .lang-check{ color: var(--tc-turquoise); font-weight: 800; }
.lang-switcher-item:hover,
.lang-switcher-item:focus{ background: rgba(255,255,255,.08); color: #fff; }
.lang-switcher-item.active{ background: rgba(31,209,201,.14); color: #fff; }

/* ---------- Login button (logged-out CTA) ---------- */
.btn-login{
  display: inline-flex; align-items: center; gap: .4rem;
  background: linear-gradient(135deg, var(--tc-turquoise), var(--tc-blue-500));
  color: #fff; font-weight: 700; font-size: .85rem; line-height: 1;
  border: none; border-radius: 999px; padding: .5rem 1.1rem;
  box-shadow: 0 8px 18px rgba(47,107,255,.35);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-login:hover{
  filter: brightness(1.08); color: #fff; transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(47,107,255,.45);
}

/* ---------- Persistent right-edge badges (Daily Rewards / Point Store) ---------- */
/* Sits below the sticky navbar (z-index 1020) and below Bootstrap modals
   (z-index 1050+), so it never blocks a dialog. */
.side-badges{
  position: fixed; right: 12px; top: 50%; transform: translateY(-50%);
  z-index: 900; display: flex; flex-direction: column; gap: .7rem;
}
.side-badge{
  display: flex; align-items: center; gap: .5rem;
  background: linear-gradient(135deg, var(--tc-navy-800), var(--tc-navy-700));
  border: 1px solid rgba(255,255,255,.15); color: var(--tc-text);
  font-weight: 700; font-size: .82rem; padding: .65rem 1rem;
  border-radius: 999px; box-shadow: var(--tc-shadow-card);
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.side-badge:hover{
  transform: translateX(-4px) scale(1.03); color: #fff;
  background: linear-gradient(135deg, var(--tc-blue-500), var(--tc-turquoise));
}
.side-badge .side-badge-icon{ font-size: 1.15rem; line-height: 1; }

@media (max-width: 767.98px){
  .side-badges{ right: 10px; gap: .55rem; }
  .side-badge{
    padding: .6rem; border-radius: 50%; width: 46px; height: 46px;
    justify-content: center;
  }
  .side-badge .side-badge-label{ display: none; }
}

/* ---------- Buttons (gold, game-like) ---------- */
.btn-gold{
  background: linear-gradient(180deg, var(--tc-gold-300), var(--tc-gold-500));
  color: #241800; font-weight: 800; border: none; border-radius: 14px;
  padding: .85rem 1.75rem; box-shadow: 0 10px 25px rgba(255,179,0,.35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-gold:hover{ transform: translateY(-2px); box-shadow: 0 16px 32px rgba(255,179,0,.45); color:#241800; }
.btn-outline-brand{
  border: 2px solid rgba(255,255,255,.35); color: var(--tc-text); border-radius: 14px;
  padding: .8rem 1.6rem; font-weight: 700; background: rgba(255,255,255,.04);
}
.btn-outline-brand:hover{ border-color: var(--tc-turquoise); color: var(--tc-turquoise); }

/* ---------- Hero ---------- */
.hero-section{
  position: relative;
  padding: 6.5rem 0 5rem;
  background:
    radial-gradient(circle at 15% 20%, rgba(47,107,255,.35), transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(31,209,201,.25), transparent 40%),
    linear-gradient(180deg, var(--tc-navy-900) 0%, var(--tc-navy-950) 100%);
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.hero-skyline{
  position:absolute; inset:auto 0 0 0; height: 140px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55));
  pointer-events:none;
}
.hero-eyebrow{
  display:inline-block; letter-spacing:.08em; text-transform:uppercase;
  color: var(--tc-turquoise); font-weight:700; font-size:.85rem; margin-bottom:.75rem;
}
.hero-title{ font-weight: 900; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height:1.08; text-shadow: 0 6px 0 rgba(0,0,0,.25); }
.hero-subtitle{ color: var(--tc-text-muted); font-size: clamp(1rem, 2vw, 1.25rem); max-width: 620px; }
.hero-media-frame{
  border-radius: var(--tc-radius-lg); overflow:hidden; box-shadow: var(--tc-shadow-card);
  border: 1px solid rgba(255,255,255,.12); aspect-ratio: 16/10; background: linear-gradient(135deg, var(--tc-navy-800), var(--tc-navy-700));
  display:flex; align-items:center; justify-content:center;
}
.hero-media-frame img{ width:100%; height:100%; object-fit: cover; }
.hero-cta-row .btn{ min-width: 210px; }

/* Floating "+5% bonus" badge used to draw attention to Gold Bar Store CTAs
   (hero + store teaser section). Wraps the button so the badge can float
   over its top-right corner without affecting layout/click area. */
.cta-bonus-wrap{ position: relative; display: flex; width: 100%; }
@media (min-width: 576px){
  .cta-bonus-wrap{ width: auto; }
}
.cta-bonus-badge{
  position: absolute; top: -14px; right: -8px; z-index: 3;
  background: linear-gradient(180deg, #ff5b5b, #c62828); color: #fff;
  font-weight: 800; font-size: .72rem; letter-spacing: .02em;
  padding: .3rem .6rem; border-radius: 999px;
  box-shadow: 0 8px 18px rgba(198,40,40,.45);
  white-space: nowrap; pointer-events: none;
  animation: bonusBadgePulse 1.6s ease-in-out infinite;
}
@keyframes bonusBadgePulse{
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

/* Hero download badges are the single primary CTA now, so give them a bit
   more presence than the footer-sized ones. */
.store-badge-link-lg img{ height: 54px; }

/* Gold Bar Store / Gift Center: its own centered block right under the app
   badges, set apart by a short divider so it reads as a second, distinct
   focus rather than crowding the primary download CTA above it. */
.hero-secondary-cta{ max-width: 480px; }
.hero-secondary-cta-divider{
  width: 64px; height: 3px; margin: 0 auto 1.5rem;
  background: linear-gradient(90deg, var(--tc-turquoise), var(--tc-gold-300));
  border-radius: 999px;
}
.btn-hero-lg{ padding: 1.05rem 2.1rem; font-size: 1.05rem; min-width: 240px; }
@media (max-width: 576px){
  .btn-hero-lg{ min-width: 0; width: 100%; }
}
.hero-quicklink-sep{ color: var(--tc-text-muted); }

/* ---------- Section shells ---------- */
.section{ padding: 4.5rem 0; }
.section-kicker{ color: var(--tc-gold-300); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.85rem; }
.section-title{ font-weight: 900; font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.section-body{ color: var(--tc-text-muted); max-width: 720px; }
.section-alt{ background: linear-gradient(180deg, rgba(255,255,255,.02), transparent); }

.pill{
  display:inline-flex; align-items:center; gap:.4rem; background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12); border-radius: 999px; padding:.4rem .9rem;
  font-weight:600; font-size:.9rem; color: var(--tc-text);
}

/* ---------- Cards ---------- */
.tc-card{
  background: linear-gradient(180deg, var(--tc-navy-800), var(--tc-navy-900));
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--tc-radius-md);
  box-shadow: var(--tc-shadow-card); padding: 1.6rem; height: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}
.tc-card:hover{ transform: translateY(-4px); box-shadow: 0 26px 55px rgba(4,10,30,.55); }
.tc-card .tc-card-icon{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--tc-blue-500), var(--tc-turquoise)); font-size:1.5rem; margin-bottom: 1rem;
}
.tc-card h3{ font-size:1.1rem; font-weight:800; margin-bottom:.5rem; }
.tc-card p{ color: var(--tc-text-muted); font-size:.92rem; margin-bottom:0; }

/* ---------- Media / screenshots ---------- */
.media-shot{
  border-radius: var(--tc-radius-md); overflow:hidden; border: 1px solid rgba(255,255,255,.1);
  box-shadow: var(--tc-shadow-card); background: var(--tc-navy-800); aspect-ratio: 9/16;
}
.media-shot img{ width:100%; height:100%; object-fit: cover; display:block; }
.media-video-placeholder{
  aspect-ratio: 16/9; border-radius: var(--tc-radius-lg); border: 1px dashed rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center; color: var(--tc-text-muted);
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 12px, rgba(255,255,255,.06) 12px 24px);
  font-weight:700;
}
/* Real trailer embed (YouTube iframe inside a Bootstrap `.ratio` box) */
.media-video-frame{
  border-radius: var(--tc-radius-lg); overflow:hidden; box-shadow: var(--tc-shadow-card);
  border: 1px solid rgba(255,255,255,.12);
}
.media-video-frame iframe{ border: 0; pointer-events: none; } /* controls=0 chrome-less player - clicks pass through to the page */

/* Custom sound toggle overlay - the player itself has controls=0 (no YouTube
   chrome/branding), so this is the only way users can hear/mute the trailer. */
.trailer-sound-toggle{
  position: absolute; right: 14px; bottom: 14px; z-index: 5;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25); background: rgba(6,11,26,.65);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; font-size: 1.2rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.trailer-sound-toggle:hover{ background: rgba(6,11,26,.85); transform: scale(1.05); }

/* ---------- Teaser blocks (store/gift/benefits/points) ---------- */
.teaser-block{
  border-radius: var(--tc-radius-lg); padding: 2.5rem; position:relative; overflow:hidden;
  border: 1px solid rgba(255,255,255,.08); box-shadow: var(--tc-shadow-card);
}
.teaser-store{ background: linear-gradient(135deg, rgba(47,107,255,.18), rgba(6,11,26,.9)); }
.teaser-gift{ background: linear-gradient(135deg, rgba(31,209,201,.18), rgba(6,11,26,.9)); }
.teaser-benefits{ background: linear-gradient(135deg, rgba(255,179,0,.18), rgba(6,11,26,.9)); }
.teaser-points{ background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(6,11,26,.9)); }
.teaser-point-list{ list-style:none; padding:0; margin: 1.25rem 0; }
.teaser-point-list li{ padding-left:1.7rem; position:relative; margin-bottom:.5rem; color: var(--tc-text); }
.teaser-point-list li::before{ content:"✓"; position:absolute; left:0; color: var(--tc-turquoise); font-weight:900; }

/* ---------- Benefits 7-day timeline ---------- */
.benefit-day-card{
  border-radius: var(--tc-radius-md); border:1px solid rgba(255,255,255,.1); background: var(--tc-navy-800);
  padding: 1.1rem .9rem; text-align:center; height:100%; position:relative;
}
.benefit-day-card.is-claimed{ border-color: rgba(31,209,201,.5); }
.benefit-day-card.is-available{ border-color: var(--tc-gold-500); box-shadow: 0 0 0 3px rgba(255,179,0,.25); animation: benefitPulse 1.8s ease-in-out infinite; }
.benefit-day-card.is-locked{ opacity:.55; }
.benefit-day-card.is-grand{ background: linear-gradient(180deg, rgba(255,179,0,.22), var(--tc-navy-800)); border-color: var(--tc-gold-500); }
@keyframes benefitPulse{ 0%,100%{ box-shadow: 0 0 0 3px rgba(255,179,0,.25);} 50%{ box-shadow: 0 0 0 7px rgba(255,179,0,.12);} }
.benefit-badge{ position:absolute; top:-10px; right:-6px; font-size:1.2rem; }

/* ---------- Point store / reward cards ---------- */
.reward-card{
  border-radius: var(--tc-radius-md); border:1px solid rgba(255,255,255,.1); background: var(--tc-navy-800);
  padding: 1.2rem; text-align:center; height:100%;
}
.reward-card img{ width:72px; height:72px; object-fit:contain; margin: 0 auto .75rem; }
.reward-cost{ color: var(--tc-gold-300); font-weight:800; }

/* ---------- News ---------- */
.news-card{ border-radius: var(--tc-radius-md); overflow:hidden; border:1px solid rgba(255,255,255,.08); background: var(--tc-navy-800); height:100%; cursor:pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.news-card:hover, .news-card:focus-visible{ transform: translateY(-4px); box-shadow: var(--tc-shadow-card); border-color: rgba(31,209,201,.35); outline:none; }
.news-card-body{ padding: 1.25rem; }
.news-card-thumb{ aspect-ratio: 16/9; background: linear-gradient(135deg, var(--tc-navy-700), var(--tc-navy-800)); background-size:cover; background-position:center; }
.news-card-thumb.is-placeholder{ display:flex; align-items:center; justify-content:center; }
.news-card-thumb.is-placeholder img{ width:25%; max-width:64px; opacity:.5; object-fit:contain; filter:grayscale(1) brightness(2); }

/* News read-more modal - reuses the site's dark modal look. */
.news-read-modal .modal-content{
  background: linear-gradient(180deg, var(--tc-navy-800), var(--tc-navy-900));
  color: var(--tc-text); border-radius: var(--tc-radius-lg); border: 1px solid rgba(255,255,255,.12);
}
.news-read-modal .modal-header, .news-read-modal .modal-footer{ border-color: rgba(255,255,255,.12); }
.news-modal-image{ width:100%; max-height:280px; object-fit:cover; border-radius: var(--tc-radius-md); margin-bottom:1rem; }
.news-modal-date{ margin-bottom:.75rem; }
.news-modal-body p{ margin-bottom:1rem; }
.news-modal-body ul, .news-modal-body ol{ margin-bottom:1rem; padding-left:1.25rem; }
.news-modal-body img{ max-width:100%; }

/* ---------- FAQ ---------- */
.accordion-item{ background: var(--tc-navy-800); border-color: rgba(255,255,255,.08); }
.accordion-button{ background: var(--tc-navy-800); color: var(--tc-text); font-weight:700; }
.accordion-button:not(.collapsed){ background: var(--tc-navy-700); color: var(--tc-gold-300); }
.accordion-button::after{ filter: invert(1); }
.accordion-body{ color: var(--tc-text-muted); }

/* ---------- Footer ---------- */
.site-footer{ background: var(--tc-navy-900); border-top: 1px solid rgba(255,255,255,.08); }
.footer-heading{ color: var(--tc-text); font-weight:800; font-size:.95rem; margin-bottom: .9rem; }
.footer-links{ display:flex; flex-direction:column; gap:.5rem; }
.footer-links a{ color: var(--tc-text-muted); font-size:.92rem; }
.footer-links a:hover{ color: var(--tc-gold-300); }
/* Official App Store / Google Play badge artwork (SVG) - no extra button
   chrome, the badges are already self-contained brand assets. */
.store-badge-link{ display: inline-flex; transition: transform .15s ease, opacity .15s ease; }
.store-badge-link:hover{ transform: translateY(-2px); opacity: .9; }
.store-badge-link img{ display: block; height: 40px; width: auto; }
.hero-cta-row .store-badge-link img{ height: 48px; }
.social-links a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:800; color: var(--tc-text);
}
.social-links a:hover{ background: rgba(255,255,255,.08); color: var(--tc-turquoise); }

/* ---------- Skeleton loading ---------- */
.skeleton{ position:relative; overflow:hidden; background: rgba(255,255,255,.06); border-radius: 10px; }
.skeleton::after{
  content:""; position:absolute; inset:0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  animation: skeletonShine 1.4s infinite;
}
@keyframes skeletonShine{ 100%{ transform: translateX(100%); } }

/* ---------- Spinner ---------- */
.tc-spinner{ width:2.2rem; height:2.2rem; border-radius:50%; border:3px solid rgba(255,255,255,.2); border-top-color: var(--tc-turquoise); animation: tcSpin .8s linear infinite; }
@keyframes tcSpin{ to{ transform: rotate(360deg); } }

/* ---------- Login card (used by /pay/login.php) ---------- */
.auth-shell{
  min-height: 100vh; display:flex; align-items:center; justify-content:center; padding: 2rem 1rem;
  background:
    radial-gradient(circle at 20% 20%, rgba(47,107,255,.35), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(31,209,201,.25), transparent 45%),
    var(--tc-navy-950);
}
.auth-card{
  width: min(480px, 100%); background: var(--tc-navy-800); border:1px solid rgba(255,255,255,.1);
  border-radius: var(--tc-radius-lg); box-shadow: var(--tc-shadow-card); padding: 2rem;
}

/* utility */
.text-gold{ color: var(--tc-gold-300) !important; }
.text-turquoise{ color: var(--tc-turquoise) !important; }
.bg-navy-800{ background: var(--tc-navy-800) !important; }

@media (max-width: 576px){
  .section{ padding: 3rem 0; }
  .hero-section{ padding: 4.5rem 0 3rem; }
  .hero-cta-row .btn{ min-width: 0; width:100%; }
}