/*
  German in Context — Landing Contact, Warm Night V1 (luxury olive + app feel)
  Scope: .contact-panel-landing only, dark/Warm Night only. Additive layer, edits nothing else.
  Needs CSS nesting (Chrome 120+); older browsers keep the current look.
*/

:root{
  --gic-ct-gold:#d6b25a;
  --gic-ct-gold-deep:#b98f35;
  --gic-ct-cream:#f3ecd9;
  --gic-ct-field:#12231d;
  --gic-ct-field-focus:#162a23;
  --gic-ct-line:rgba(201,162,74,.20);
  --gic-ct-ease:cubic-bezier(.2,.8,.2,1);
}

:is(
  html[data-gic-theme="dark"],
  html[data-gic-warm-night-notify="dark"],
  html[data-theme="dark"],
  html.dark,
  html.dark-mode,
  html.night-mode,
  html.gic-dark
) body .contact-panel-landing{
  -webkit-tap-highlight-color:transparent;
  border:1px solid rgba(201,162,74,.22)!important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 18px 44px rgba(0,0,0,.42)!important;

  /* ---------- header icon: gold-ringed glass tile ---------- */
  & .contact-icon{
    background:linear-gradient(160deg,rgba(214,178,90,.16),rgba(214,178,90,.05))!important;
    border:1px solid rgba(214,178,90,.38)!important;
    color:var(--gic-ct-gold)!important;
    -webkit-text-fill-color:var(--gic-ct-gold)!important;
    box-shadow:0 6px 16px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.08) inset!important;
  }

  /* ---------- form card: dark olive glass, not white ---------- */
  & .landing-contact-form{
    background:linear-gradient(180deg,rgba(14,33,27,.78),rgba(10,26,21,.88))!important;
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    border:1px solid var(--gic-ct-line)!important;
    border-radius:24px!important;
    padding:22px 18px 18px!important;
    box-shadow:
      0 1px 0 rgba(255,255,255,.07) inset,
      0 14px 34px rgba(0,0,0,.38)!important;
    display:flex!important;
    flex-direction:column!important;
    gap:16px!important;
  }

  & .landing-contact-form .input{
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
  }

  & .landing-contact-form .input label{
    color:rgba(214,178,90,.92)!important;
    -webkit-text-fill-color:rgba(214,178,90,.92)!important;
    font-size:11.5px!important;
    font-weight:700!important;
    letter-spacing:.12em!important;
    text-transform:uppercase!important;
    margin:0 0 0 4px!important;
  }

  /* ---------- fields ---------- */
  & .landing-contact-form .input :is(input,textarea){
    width:100%!important;
    box-sizing:border-box!important;
    color-scheme:dark;
    background:var(--gic-ct-field)!important;
    color:var(--gic-ct-cream)!important;
    -webkit-text-fill-color:var(--gic-ct-cream)!important;
    caret-color:var(--gic-ct-gold);
    border:1px solid var(--gic-ct-line)!important;
    border-radius:16px!important;
    padding:0 16px!important;
    min-height:54px!important;
    font-family:inherit!important;
    font-size:16px!important;         /* stops mobile zoom-on-focus */
    line-height:1.4!important;
    box-shadow:0 1px 0 rgba(255,255,255,.04) inset!important;
    outline:none!important;
    transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease!important;
  }
  & .landing-contact-form .input textarea{
    min-height:132px!important;
    height:132px;
    padding:14px 16px!important;
    resize:none!important;
  }
  & .landing-contact-form .input :is(input,textarea)::placeholder{
    color:#8d9a90!important;
    -webkit-text-fill-color:#8d9a90!important;
    opacity:1!important;
  }
  & .landing-contact-form .input :is(input,textarea):focus{
    background:var(--gic-ct-field-focus)!important;
    border-color:var(--gic-ct-gold)!important;
    box-shadow:0 0 0 4px rgba(214,178,90,.16)!important;
  }
  /* browser autofill keeps the dark field */
  & .landing-contact-form .input input:-webkit-autofill{
    -webkit-text-fill-color:var(--gic-ct-cream)!important;
    -webkit-box-shadow:0 0 0 100px var(--gic-ct-field) inset!important;
    caret-color:var(--gic-ct-gold);
  }

  /* ---------- send button: gold app CTA ---------- */
  & .landing-send-btn{
    width:100%!important;
    min-height:54px!important;
    margin-top:4px!important;
    border:0!important;
    border-radius:16px!important;
    background:linear-gradient(180deg,#dcb961 0%,#b98f35 100%)!important;
    color:#14291f!important;
    -webkit-text-fill-color:#14291f!important;
    font-family:inherit!important;
    font-size:16px!important;
    font-weight:700!important;
    letter-spacing:.01em!important;
    box-shadow:
      0 1px 0 rgba(255,255,255,.45) inset,
      0 10px 22px rgba(120,88,24,.38)!important;
    cursor:pointer;
    touch-action:manipulation;
    transition:transform .15s var(--gic-ct-ease), box-shadow .2s ease, filter .2s ease!important;
  }
  & .landing-send-btn:active{
    transform:scale(.975);
    filter:brightness(.96);
    box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 4px 10px rgba(120,88,24,.30)!important;
  }

  /* ---------- side notes: quiet glass cards with gold edge ---------- */
  & .landing-contact-side{
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
  }
  & .side-note-card{
    background:rgba(10,26,21,.55)!important;
    border:1px solid rgba(201,162,74,.16)!important;
    border-left:3px solid var(--gic-ct-gold)!important;
    border-radius:16px!important;
    padding:14px 16px!important;
    box-shadow:0 6px 16px rgba(0,0,0,.22)!important;
  }
  & .side-note-card strong{
    color:var(--gic-ct-cream)!important;
    -webkit-text-fill-color:var(--gic-ct-cream)!important;
    font-size:14.5px!important;
    font-weight:650!important;
  }
  & .side-note-card p{
    color:rgba(243,236,217,.68)!important;
    -webkit-text-fill-color:rgba(243,236,217,.68)!important;
    font-size:14px!important;
    line-height:1.5!important;
    margin:4px 0 0!important;
  }
  & .side-note-card a{
    color:var(--gic-ct-gold)!important;
    -webkit-text-fill-color:var(--gic-ct-gold)!important;
    text-underline-offset:3px;
  }
}

@media (prefers-reduced-motion:reduce){
  :is(
    html[data-gic-theme="dark"],
    html[data-gic-warm-night-notify="dark"],
    html[data-theme="dark"],
    html.dark,
    html.dark-mode,
    html.night-mode,
    html.gic-dark
  ) body .contact-panel-landing *{
    transition:none!important;
  }
}