/* =========================================================================
   Sunrise theme — Landing & auth stylesheet
   CSS custom properties are injected from admin settings at runtime
   (see themes/sunrise/views/blocks/head.blade.php). Fallbacks below.
   ========================================================================= */

:root {
  --sun-primary:       #ea580c;
  --sun-primary-hover: #c2410c;
  --sun-primary-soft:  #f97316;
  --sun-accent:        #FFD700;
  --sun-ink:           #0B0F14;
  --sun-bg-warm:       #f8fafc;
  --sun-surface:       #FFFFFF;

  /* WCAG AA on white: ink-soft #374151 ≈ 9.4:1, ink-muted #4B5563 ≈ 7.3:1 */
  --sun-ink-soft:      #374151;
  --sun-ink-muted:     #4B5563;
  --sun-border:        rgba(11, 15, 20, 0.08);
  --sun-shadow-card:   0 20px 40px -20px rgba(234, 88, 12, 0.22), 0 6px 16px -6px rgba(11, 15, 20, 0.06);
  --sun-radius:        18px;
  --sun-radius-sm:     12px;
  --sun-radius-pill:   999px;
}

/* ---------- Sunrise gradient utilities (Godofpanel-inspired) ------------ */
.sun-gradient-sunrise {
  background: linear-gradient(135deg, var(--sun-primary) 0%, var(--sun-accent) 100%);
}
.sun-gradient-cta {
  background: linear-gradient(135deg, var(--sun-primary-soft) 0%, var(--sun-primary) 100%);
}

/* ---------- Base ---------------------------------------------------------- */
html, body {
  background: var(--sun-bg-warm);
  color: var(--sun-ink);
  font-family: 'Poppins', 'Source Sans Pro', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.theme-sunrise-landing {
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(255, 215, 0, 0.22), transparent 60%),
    radial-gradient(900px 500px at 10% 100%, rgba(234, 88, 12, 0.14), transparent 60%),
    var(--sun-bg-warm) !important;
  min-height: 100vh;
  color: var(--sun-ink);
}

a { color: var(--sun-primary); }
a:hover { color: var(--sun-primary-hover); text-decoration: none; }

/* ---------- Header / Nav -------------------------------------------------- */
/* Defensive fallback — applies even if body class is missing OR --sun-primary
   CSS variable resolves empty (which happens when admin option exists but is
   blank, making `var(--sun-primary)` invalid and falling back to transparent). */
.header.fixed-top,
#headerNav {
  background: #ea580c;
  background: var(--sun-primary, #ea580c);
}
body.theme-sunrise-landing .header,
body.theme-sunrise-landing .header.fixed-top,
body.theme-sunrise-landing #headerNav {
  background: #ea580c !important;
  background: var(--sun-primary, #ea580c) !important;
  background-color: #ea580c !important;
  background-color: var(--sun-primary, #ea580c) !important;
  border-bottom: 0 !important;
  box-shadow: 0 4px 20px -10px rgba(234, 88, 12, 0.5);
  padding: 10px 0;
}
body.theme-sunrise-landing .header .navbar { padding: 0; }
body.theme-sunrise-landing .header .navbar-brand img {
  max-height: 44px;
  width: auto;
}
body.theme-sunrise-landing .header .navbar-nav .nav-link,
body.theme-sunrise-landing .header a.link,
body.theme-sunrise-landing .header .navbar .nav-link { color: #fff !important; font-weight: 500; }
body.theme-sunrise-landing .header .navbar-toggler { color: #fff; border: none; }
body.theme-sunrise-landing .header .navbar-toggler i { color: #fff; font-size: 22px; }

body.theme-sunrise-landing .btn-login,
body.theme-sunrise-landing a.btn-login { color: #fff !important; padding: 8px 16px; }
body.theme-sunrise-landing .btn-login-signup .sign-up,
body.theme-sunrise-landing .btn-login-signup .btn-statistics,
body.theme-sunrise-landing .btn.sign-up,
body.theme-sunrise-landing a.sign-up,
body.theme-sunrise-landing .btn.btn-statistics {
  background: #0B0F14 !important;
  background-color: #0B0F14 !important;
  border: 2px solid #0B0F14 !important;
  color: #fff !important;
  border-radius: var(--sun-radius-pill);
  padding: 10px 22px;
  font-weight: 600;
}
body.theme-sunrise-landing .btn-login-signup .sign-up:hover,
body.theme-sunrise-landing .btn.sign-up:hover {
  background: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
}

/* ---------- Moon/Sun theme toggle (header right cluster) ------------------ */
body.theme-sunrise-landing .sunrise-theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 14px;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
body.theme-sunrise-landing .sunrise-theme-toggle:hover {
  background: rgba(255, 255, 255, 0.24);
  transform: rotate(-12deg);
}
body.theme-sunrise-landing .sunrise-theme-toggle i { color: #fff; font-size: 16px; }
body.theme-sunrise-landing .btn-ink {
  background: #0B0F14 !important;
  color: #fff !important;
  padding: 14px 28px;
  border-radius: var(--sun-radius-sm);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
body.theme-sunrise-landing .btn-ink:hover { background: #000 !important; color: #fff !important; }

/* ---------- Hero (index) -------------------------------------------------- */
.header-top.mheader {
  padding: 140px 0 120px;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.header-top.mheader::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/bg-shape.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  opacity: 0.6;
  pointer-events: none;
}
.intro_wrapper { position: relative; z-index: 1; width: 100%; }

.sunrise-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--sun-radius-pill);
  background: var(--sun-surface);
  border: 1px solid var(--sun-border);
  color: var(--sun-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 28px;
  box-shadow: 0 8px 16px -12px rgba(11, 15, 20, 0.15);
}
.sunrise-hero-badge .bolt {
  color: var(--sun-accent);
}

.sunrise-hero-headline {
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
}
.sunrise-hero-headline .line { display: block; }
.sunrise-hero-headline .line-1 { color: var(--sun-ink); }
.sunrise-hero-headline .line-2 { color: var(--sun-primary); }
.sunrise-hero-headline .line-3 {
  background: linear-gradient(90deg, var(--sun-primary) 0%, var(--sun-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.sunrise-hero-sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--sun-ink-soft);
  max-width: 520px;
  margin-bottom: 36px;
}

.sunrise-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
}
.sunrise-hero-actions .btn-ink {
  background: #0B0F14;
  color: #fff;
  padding: 14px 28px;
  border-radius: var(--sun-radius-sm);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.sunrise-hero-actions .btn-ink:hover { background: #000; color: #fff; }

.sunrise-hero-proof {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--sun-ink-soft);
  font-weight: 500;
}
.sunrise-hero-proof .dots {
  display: inline-flex;
}
.sunrise-hero-proof .dots span {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-block;
  border: 2px solid var(--sun-surface);
  margin-left: -6px;
}
.sunrise-hero-proof .dots span:first-child { margin-left: 0; background: var(--sun-accent); }
.sunrise-hero-proof .dots span:last-child { background: var(--sun-primary); }

/* ---------- Inline sign-in card on landing -------------------------------- */
.sunrise-login-card {
  background: var(--sun-surface);
  border-radius: var(--sun-radius);
  box-shadow: var(--sun-shadow-card);
  padding: 36px 36px 32px;
  max-width: 440px;
  margin-left: auto;
}
.sunrise-login-card .title {
  font-size: 28px;
  font-weight: 800;
  text-align: center;
  color: var(--sun-ink);
  margin: 0 0 4px;
}
.sunrise-login-card .subtitle {
  text-align: center;
  color: var(--sun-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 28px;
}
.sunrise-login-card label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--sun-ink-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.sunrise-login-card .input-icon {
  position: relative;
  margin-bottom: 18px;
}
.sunrise-login-card .input-icon .icon {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  color: var(--sun-ink-muted);
  pointer-events: none;
}
.sunrise-login-card .input-icon input.form-control {
  background: #F5F3F0;
  border: 1px solid #EAE5DF;
  border-radius: var(--sun-radius-sm);
  padding: 14px 16px 14px 42px;
  font-size: 15px;
  color: var(--sun-ink);
  width: 100%;
  height: auto;
}
.sunrise-login-card .input-icon input.form-control:focus {
  outline: none;
  border-color: var(--sun-primary);
  background: var(--sun-surface);
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
}
.sunrise-login-card .forgot-link {
  float: right;
  color: var(--sun-primary);
  font-size: 12px;
  font-weight: 600;
}
.sunrise-login-card .remember-row {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  color: var(--sun-ink-soft);
  font-size: 14px;
}
.sunrise-login-card .remember-row input[type=checkbox] { margin-right: 8px; }
body.theme-sunrise-landing .sunrise-login-card .btn-submit,
body.theme-sunrise-landing .btn-submit {
  width: 100%;
  background: var(--sun-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--sun-radius-sm);
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
}
body.theme-sunrise-landing .sunrise-login-card .btn-submit:hover,
body.theme-sunrise-landing .btn-submit:hover { background: var(--sun-primary-hover) !important; }
.sunrise-login-card .divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 18px;
  color: var(--sun-ink-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.sunrise-login-card .divider::before,
.sunrise-login-card .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sun-border);
}
.sunrise-login-card .btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: var(--sun-surface);
  border: 1px solid var(--sun-border);
  color: var(--sun-ink);
  border-radius: var(--sun-radius-sm);
  padding: 12px 18px;
  font-weight: 500;
}
.sunrise-login-card .signup-link {
  text-align: center;
  margin-top: 18px;
  font-size: 14px;
  color: var(--sun-ink-soft);
}
.sunrise-login-card .signup-link a {
  color: var(--sun-primary);
  font-weight: 700;
  text-decoration: underline;
}

/* ---------- Shared section patterns --------------------------------------- */
.section-title .line {
  /* Legacy orange underline above section headings — replaced by the hero
     scroll-cue arrow as the primary "more content below" signal. */
  display: none;
}
.section-title h1,
.section-title h3 {
  font-size: 36px;
  font-weight: 800;
  color: var(--sun-ink);
  margin-bottom: 10px;
}
.section-title span,
.section-title p { color: var(--sun-ink-soft); font-size: 16px; }

.services,
.our-features,
.how-it-works,
.section-1 {
  padding: 80px 0;
}

.sigle-service,
.feature-content {
  background: var(--sun-surface);
  border-radius: var(--sun-radius);
  padding: 32px 24px;
  box-shadow: var(--sun-shadow-card);
  height: 100%;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.sigle-service:hover,
.feature-content:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 56px -24px rgba(234, 88, 12, 0.26), 0 10px 22px -8px rgba(11, 15, 20, 0.08);
}

.services-icon,
.features-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--sun-radius-sm);
  background: linear-gradient(135deg, var(--sun-primary), var(--sun-accent));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 18px;
}
.services-icon i,
.features-icon i { color: #fff; }

.services-title,
.feature-content h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--sun-ink);
  margin-bottom: 8px;
}
.feature-content p,
.services-content p {
  color: var(--sun-ink-soft);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* ---------- How it works -------------------------------------------------- */
.how-it-works .step {
  background: var(--sun-surface);
  border-radius: var(--sun-radius);
  padding: 28px 24px;
  box-shadow: var(--sun-shadow-card);
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
}
.how-it-works .step .bg-number {
  position: absolute;
  right: 16px;
  top: 8px;
  font-size: 72px;
  font-weight: 900;
  color: rgba(234, 88, 12, 0.12);
  line-height: 1;
}
.how-it-works .step h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--sun-ink);
  margin-bottom: 6px;
}
.how-it-works .step .desc {
  color: var(--sun-ink-soft);
  font-size: 14px;
  margin: 0;
}

/* ---------- Footer -------------------------------------------------------- */
body.theme-sunrise-landing .footer,
body.theme-sunrise-landing .footer.footer_top,
body.theme-sunrise-landing .footer.footer_bottom,
body.theme-sunrise-landing .footer.footer_top.dark,
body.theme-sunrise-landing .footer.footer_bottom.dark {
  background: var(--sun-ink) !important;
  background-color: var(--sun-ink) !important;
  color: #D1D5DB !important;
  border-top: 0 !important;
}
body.theme-sunrise-landing .footer .title { color: #fff !important; font-weight: 700; }
body.theme-sunrise-landing .footer,
body.theme-sunrise-landing .footer a:not(.btn) { color: #D1D5DB !important; }
body.theme-sunrise-landing .footer .quick-link li a {
  color: #D1D5DB !important;
  line-height: 2;
}
body.theme-sunrise-landing .footer .quick-link li a:hover { color: var(--sun-accent) !important; }
body.theme-sunrise-landing .footer .btn-icon {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.theme-sunrise-landing .footer .btn-icon:hover {
  background: var(--sun-primary);
  color: #fff;
}
body.theme-sunrise-landing .footer-lang-selector {
  background-color: rgba(255, 255, 255, 0.05);
  color: #D1D5DB;
  border-color: rgba(255, 255, 255, 0.2);
}

/* ---------- Standalone auth pages (sign_in.php etc.) ---------------------- */
.auth-login-form {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
}
.auth-login-form .card {
  background: var(--sun-surface);
  border-radius: var(--sun-radius);
  box-shadow: var(--sun-shadow-card);
  border: 0;
  overflow: hidden;
}
.auth-login-form .card-body { padding: 36px 36px 32px; }
.auth-login-form .card-title { text-align: center; margin-bottom: 24px; }
/* Dark band behind site-logo — the admin-uploaded logo is white, so we need
   a dark strip across the top of the card for it to be readable. Negative
   margins cancel the card-body padding so the band stretches to card edges;
   the parent .card has overflow:hidden so corners clip cleanly. */
.auth-login-form .card-title .site-logo {
  background: var(--sun-ink);
  padding: 28px 16px 24px;
  margin: -36px -36px 20px;
  text-align: center;
}
.auth-login-form .site-logo img { max-height: 48px; }
.auth-login-form .card-title h4,
.auth-login-form .card-title h5 {
  font-weight: 700;
  color: var(--sun-ink);
  margin-top: 16px;
}
.auth-login-form .input-icon {
  position: relative;
  margin-bottom: 18px;
}
.auth-login-form .input-icon-addon {
  position: absolute;
  top: 50%;
  left: 14px;
  right: auto;
  width: auto;
  height: auto;
  display: block;
  transform: translateY(-50%);
  color: var(--sun-ink-muted);
  pointer-events: none;
}
.auth-login-form .form-control {
  background: #F5F3F0;
  border: 1px solid #EAE5DF;
  border-radius: var(--sun-radius-sm);
  padding: 14px 16px 14px 42px;
  height: auto;
  color: var(--sun-ink);
}
.auth-login-form .form-control:focus {
  outline: none;
  border-color: var(--sun-primary);
  background: var(--sun-surface);
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
}
body.theme-sunrise-landing .auth-login-form .btn-primary,
body.theme-sunrise-landing .auth-login-form .btn-pill.btn-primary,
body.theme-sunrise-landing .btn-primary,
body.theme-sunrise-landing .btn-pill.btn-primary,
body.theme-sunrise-landing .btn-outline-primary,
body.theme-sunrise-landing .btn.btn-outline-primary {
  background: var(--sun-primary) !important;
  background-color: var(--sun-primary) !important;
  border-color: var(--sun-primary) !important;
  color: #fff !important;
  border-radius: var(--sun-radius-sm);
  padding: 14px 20px;
  font-weight: 600;
}
body.theme-sunrise-landing .auth-login-form .btn-primary:hover,
body.theme-sunrise-landing .btn-primary:hover,
body.theme-sunrise-landing .btn-outline-primary:hover,
body.theme-sunrise-landing .btn.btn-outline-primary:hover {
  background: var(--sun-primary-hover) !important;
  border-color: var(--sun-primary-hover) !important;
  color: #fff !important;
}
.auth-login-form .custom-control-label,
.auth-login-form .text-muted { color: var(--sun-ink-soft); }
.auth-login-form a { color: var(--sun-primary); font-weight: 600; }

.text-pink {
  background: linear-gradient(90deg, var(--sun-primary), var(--sun-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 800;
}

/* ---------- Modal / notifications ----------------------------------------- */
.modal-content {
  border-radius: var(--sun-radius);
  border: 0;
  box-shadow: 0 32px 64px -16px rgba(11, 15, 20, 0.25);
}

/* ---------- Services preview (platform tiles) ---------------------------- */
.sunrise-services-preview { padding: 80px 0; }
.sunrise-services-preview .tile {
  background: var(--sun-surface);
  border-radius: var(--sun-radius);
  padding: 24px;
  box-shadow: var(--sun-shadow-card);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.sunrise-services-preview .tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 56px -24px rgba(234, 88, 12, 0.26), 0 10px 22px -8px rgba(11, 15, 20, 0.08);
}
.sunrise-services-preview .tile-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sunrise-services-preview .tile-icon {
  width: 44px; height: 44px;
  border-radius: var(--sun-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--sun-primary), var(--sun-accent));
  color: #fff;
  font-size: 20px;
}
.sunrise-services-preview .tile-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--sun-ink);
}
.sunrise-services-preview .tile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sunrise-services-preview .tile-badges span {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--sun-radius-pill);
  background: rgba(234, 88, 12, 0.1);
  color: var(--sun-primary);
}
.sunrise-services-preview .tile-price {
  margin-top: auto;
  font-size: 14px;
  color: var(--sun-ink-soft);
}
.sunrise-services-preview .tile-price strong {
  color: var(--sun-ink);
  font-weight: 800;
  font-size: 16px;
}

/* ---------- Stats bar ---------------------------------------------------- */
.sunrise-stats-bar {
  background: var(--sun-ink);
  border-radius: var(--sun-radius);
  padding: 36px 24px;
  margin: 40px 0;
  color: #fff;
}
.sunrise-stats-bar .row { align-items: center; }
.sunrise-stats-bar .stat { text-align: center; }
.sunrise-stats-bar .stat .num {
  display: block;
  font-size: 34px;
  font-weight: 900;
  color: var(--sun-primary);
  line-height: 1;
}
.sunrise-stats-bar .stat .label {
  display: block;
  font-size: 13px;
  color: #D1D5DB;
  margin-top: 6px;
  letter-spacing: 0.04em;
}

/* ---------- Testimonials ------------------------------------------------- */
.sunrise-testimonials { padding: 80px 0; }
.sunrise-testimonials .card {
  background: var(--sun-surface);
  border-radius: var(--sun-radius);
  border: 0;
  padding: 28px 26px;
  box-shadow: var(--sun-shadow-card);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sunrise-testimonials .quote {
  font-size: 15px;
  line-height: 1.6;
  color: var(--sun-ink);
  margin: 0;
  flex: 1;
}
.sunrise-testimonials .quote::before {
  content: "\201C";
  font-size: 36px;
  font-weight: 900;
  color: var(--sun-primary);
  line-height: 0;
  margin-right: 4px;
  vertical-align: -0.3em;
}
.sunrise-testimonials .who { display: flex; align-items: center; gap: 12px; }
.sunrise-testimonials .avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sun-primary), var(--sun-accent));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
}
.sunrise-testimonials .name {
  font-weight: 700;
  color: var(--sun-ink);
  font-size: 14px;
  line-height: 1.2;
}
.sunrise-testimonials .role {
  color: var(--sun-ink-soft);
  font-size: 12px;
}

/* ---------- FAQ (native <details>) --------------------------------------- */
.sunrise-faq { padding: 80px 0; }
.sunrise-faq details {
  background: var(--sun-surface);
  border-radius: var(--sun-radius-sm);
  border: 1px solid var(--sun-border);
  padding: 18px 22px;
  margin-bottom: 12px;
  transition: box-shadow 0.18s ease;
}
.sunrise-faq details[open] {
  box-shadow: var(--sun-shadow-card);
  border-color: rgba(234, 88, 12, 0.25);
}
.sunrise-faq summary {
  font-weight: 700;
  color: var(--sun-ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.sunrise-faq summary::-webkit-details-marker { display: none; }
.sunrise-faq summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 400;
  color: var(--sun-primary);
  line-height: 1;
}
.sunrise-faq details[open] summary::after { content: "–"; }
.sunrise-faq .answer {
  color: var(--sun-ink-soft);
  font-size: 14px;
  line-height: 1.6;
  margin-top: 14px;
}

/* ---------- Responsive tweaks -------------------------------------------- */
@media (max-width: 991px) {
  /* Drop min-height:100vh and the desktop align-items:center so the hero
     sizes to content. The "login form arada kalıyor" complaint is exactly
     what happens when a 100vh row centers a tall hero text + a short form
     in a stacked column — the form floats mid-viewport with empty padding
     above and below it. */
  .header-top.mheader {
    padding: 90px 0 60px;
    min-height: auto;
  }
  .header-top.mheader .row {
    align-items: flex-start !important;
  }
  .sunrise-login-card {
    margin: 24px auto 0;
    max-width: 520px;
  }
  .sunrise-hero-headline { font-size: clamp(40px, 10vw, 64px); }
  .sunrise-stats-bar { padding: 24px 16px; }
  .sunrise-stats-bar .stat { margin-bottom: 18px; }

  /* Header navbar: when the burger is tapped, the collapsed menu drops
     down. Give it breathing room and put the auth-button cluster
     (Login / Sign Up / dark toggle) at the bottom with a top divider so
     it visually separates from the nav links. */
  header .navbar-collapse {
    padding: 12px 0 4px;
  }
  header .btn-login-signup {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 4px 0;
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }
  header .btn-login-signup .btn-login,
  header .btn-login-signup .sign-up,
  header .btn-login-signup .btn-statistics {
    width: auto;
  }
  header .navbar-toggler {
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
  header .navbar-toggler:focus {
    outline: 2px solid rgba(255, 255, 255, 0.4);
    outline-offset: 2px;
  }
}
@media (max-width: 575px) {
  .header-top.mheader { padding: 70px 0 40px; }
  .auth-login-form .card-body { padding: 28px 22px 24px; }
  .sunrise-login-card { padding: 28px 22px; }
  .sunrise-hero-headline { font-size: clamp(32px, 9vw, 44px); }
  .sunrise-hero-actions .btn-ink {
    width: 100%;
    justify-content: center;
  }
  /* Prevent iOS Safari auto-zoom on input focus — any form-control under
     16px triggers the zoom-and-pan behaviour. */
  .sunrise-login-card .input-icon .form-control {
    font-size: 16px;
  }
}

/* ---------- Dark mode (landing) ------------------------------------------
   Godofpanel formula: surfaces go cool slate, ORANGE HEADER STAYS ORANGE.
   This is what makes the brand "pop" on a dark canvas — don't warm the
   neutrals. */
body.theme-sunrise-landing.theme-dark {
  --sun-bg-warm: #0f172a;
  --sun-surface: #1e293b;
  --sun-ink: #F3F4F6;
  --sun-ink-soft: #D1D5DB;
  --sun-ink-muted: #9CA3AF;
  --sun-border: rgba(148, 163, 184, 0.15);
  --sun-shadow-card: 0 20px 40px -20px rgba(0, 0, 0, 0.6), 0 6px 16px -6px rgba(0, 0, 0, 0.4);
  color: var(--sun-ink);
}
body.theme-sunrise-landing.theme-dark {
  /* Split `background-color` from `background-image` — a `background`
     shorthand silently resets background-color back to the shorthand's
     color component, which is var(--sun-bg-warm). That variable is
     re-declared by sunrise_css_vars.php from the admin option
     `sun_bg_warm_dark`; if that option is blank or accidentally set to
     a light hex, `var(--sun-bg-warm, #0f172a)` resolves to the light
     value (the fallback only fires on INVALID values, not "valid but
     wrong" ones), and the section area below the hero renders cream
     instead of slate. Keeping them separate pins the floor to #0f172a
     no matter what the variable resolves to. */
  background-color: #0f172a !important;
  background-image:
    radial-gradient(1200px 600px at 85% -10%, rgba(255, 215, 0, 0.10), transparent 60%),
    radial-gradient(900px 500px at 10% 100%, rgba(234, 88, 12, 0.12), transparent 60%) !important;
}
/* <html> also needs dark paint — the `html, body { background: var(--sun-bg-warm) }`
   rule at the top of this file resolves --sun-bg-warm from :root (light) for the
   html element, because the `.theme-dark` class sits on body and CSS variable
   scope doesn't climb. Without this, iOS overscroll and any sub-viewport gap
   flashes cream below the hero even when body is correctly dark.
   Using :has() instead of a mirrored html.theme-dark class keeps body as the
   single source of truth — stale cached JS that only toggles body can no
   longer leave html stuck in the wrong mode. */
html:has(body.theme-sunrise-landing.theme-dark) {
  background-color: #0f172a !important;
}
body.theme-sunrise-landing.theme-dark .header,
body.theme-sunrise-landing.theme-dark .header.fixed-top,
body.theme-sunrise-landing.theme-dark #headerNav {
  background: var(--sun-primary) !important;
  background-color: var(--sun-primary) !important;
  box-shadow: 0 4px 20px -10px rgba(234, 88, 12, 0.6);
}
body.theme-sunrise-landing.theme-dark .sunrise-login-card {
  background: var(--sun-surface);
  border: 1px solid var(--sun-border);
}
body.theme-sunrise-landing.theme-dark .sunrise-login-card input.form-control {
  background: #334155;
  border-color: #475569;
  color: var(--sun-ink);
}
body.theme-sunrise-landing.theme-dark .sunrise-hero-badge {
  background: var(--sun-surface);
  border-color: var(--sun-border);
  color: var(--sun-ink);
}
body.theme-sunrise-landing.theme-dark .feature-content,
body.theme-sunrise-landing.theme-dark .sigle-service,
body.theme-sunrise-landing.theme-dark .how-it-works .step,
body.theme-sunrise-landing.theme-dark .sunrise-services-preview .tile,
body.theme-sunrise-landing.theme-dark .sunrise-testimonials .card,
body.theme-sunrise-landing.theme-dark .sunrise-faq details {
  background: var(--sun-surface);
  border: 1px solid var(--sun-border);
}
body.theme-sunrise-landing.theme-dark .section-title h1,
body.theme-sunrise-landing.theme-dark .section-title h3,
body.theme-sunrise-landing.theme-dark .feature-content h3,
body.theme-sunrise-landing.theme-dark .sunrise-services-preview .tile-name,
body.theme-sunrise-landing.theme-dark .sunrise-testimonials .name,
body.theme-sunrise-landing.theme-dark .sunrise-faq summary {
  color: var(--sun-ink);
}
body.theme-sunrise-landing.theme-dark .footer,
body.theme-sunrise-landing.theme-dark .footer.footer_top,
body.theme-sunrise-landing.theme-dark .footer.footer_bottom,
body.theme-sunrise-landing.theme-dark .footer.footer_top.dark,
body.theme-sunrise-landing.theme-dark .footer.footer_bottom.dark {
  background: #0f172a !important;
  background-color: #0f172a !important;
}

/* Stats bar — in dark mode, `var(--sun-ink)` (used as the light-mode
   background) flips to near-white, so the baseline rule collapses to
   white-on-white. Reseat it on the slate surface tier. */
body.theme-sunrise-landing.theme-dark .sunrise-stats-bar {
  background: var(--sun-surface);
  border: 1px solid var(--sun-border);
  color: var(--sun-ink);
}
body.theme-sunrise-landing.theme-dark .sunrise-stats-bar .stat .label {
  color: var(--sun-ink-soft);
}

/* ---------- Hero scroll-down cue ----------------------------------------- */
/* Circular chevron at the bottom centre of the hero that signals "more
   content below". Anchored to #features so clicking scrolls there smoothly. */
.sunrise-hero-scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sun-primary);
  background: rgba(255, 255, 255, 0.04);
  border: 2px solid var(--sun-primary);
  border-radius: 50%;
  font-size: 18px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
  animation: sunriseHeroBounce 2.2s ease-in-out infinite;
  z-index: 5;
}
.sunrise-hero-scroll-cue:hover,
.sunrise-hero-scroll-cue:focus {
  background: var(--sun-primary);
  color: #fff;
  text-decoration: none;
  outline: none;
}
@keyframes sunriseHeroBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .sunrise-hero-scroll-cue { animation: none; }
}