/* /assets/css/pages/support.css */
/* RTL support (shared across base + theme overrides) */
[dir="rtl"] .rtl-flip        { transform: scaleX(-1); }
/* Only side by side: on a phone the help-desk buttons stack, and reversing
   a column would flip their order instead of their sides. */
@media (min-width: 640px) {
  [dir="rtl"] .rtl-row-reverse { flex-direction: row-reverse; }
}
[dir="rtl"] .rtl-text-right  { text-align: right; }

/* Subtle entrance animation */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-in   { animation: fadeSlideUp 0.55s ease-out both; }
.anim-in-1 { animation-delay: 0.05s; }
.anim-in-2 { animation-delay: 0.12s; }
.anim-in-3 { animation-delay: 0.19s; }
.anim-in-4 { animation-delay: 0.26s; }

/* Neutral base card + badge + stat (theme overrides define their own scoped classes) */
.support-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.support-card:hover {
  border-color: var(--ink);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.14);
  transform: translateY(-2px);
}
.support-icon-badge {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  color: var(--theme-600);
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.support-card:hover .support-icon-badge {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.stat-num {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-variation-settings: "opsz" 144;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .anim-in { animation: none; }
}

/* /assets/themes/bazaar/assets/css/components/support/hero.css */
    .bz-sup-hero{position:relative;background:linear-gradient(180deg,var(--paper-2),var(--paper));border:1px solid var(--rule);
      box-shadow:inset 0 0 0 1px rgba(var(--bz-gold-rgb,184,134,47),.10),var(--shadow,0 10px 30px -12px rgba(36,16,22,.14))}
    /* Gilt rail + ◆ corner pips */
    .bz-sup-rail{position:absolute;top:0;inset-inline:18px;height:2px;z-index:3;pointer-events:none;
      background:linear-gradient(90deg,transparent,var(--bz-gold),transparent);opacity:.7}
    .bz-sup-pip{position:absolute;top:9px;z-index:3;color:var(--bz-gold);font-size:10px;line-height:1;opacity:.55;pointer-events:none}
    .bz-sup-pip--l{inset-inline-start:24px}.bz-sup-pip--r{inset-inline-end:24px}
    .bz-sup-eyebrow{display:inline-flex;align-items:center;gap:.55rem;color:var(--bz-gold);letter-spacing:.2em}
    .bz-sup-eyebrow::after{content:'\25C6';font-size:6px;opacity:.85}
    .bz-sup-eyebrow i{color:var(--bz-gold)}
    .bz-sup-title{font-family:var(--font-display,'Inter',sans-serif);color:var(--ink);letter-spacing:-.02em}
    .bz-sup-accent{color:var(--bz-primary)}

    .bz-sup-btn{
      display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
      padding:.8rem 1.5rem;border-radius:12px;font-weight:600;font-size:.95rem;
      transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .bz-sup-btn--primary{background:var(--bz-primary);color:#fff;box-shadow:0 8px 20px -8px var(--bz-primary)}
    .bz-sup-btn--primary:hover{background:var(--bz-gold);transform:translateY(-2px)}
    .bz-sup-btn--ghost{background:var(--paper-2);color:var(--ink);border:1px solid var(--rule)}
    .bz-sup-btn--ghost:hover{border-color:var(--bz-gold);color:var(--bz-primary);transform:translateY(-2px)}

    .bz-sup-mail{background:var(--paper-2);border:1px solid var(--rule)}
    .bz-sup-mail__badge{
      width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
      background:radial-gradient(120% 120% at 50% 0%,rgba(var(--bz-gold-rgb,184,134,47),.16),var(--paper-2) 72%);
      border:1px solid var(--bz-gold);color:var(--bz-primary);font-size:1.1rem;flex-shrink:0;
      box-shadow:inset 0 1px 0 rgba(217,168,60,.45)}
    .bz-sup-mail__label{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.15rem}
    .bz-sup-mail__addr{font-size:.9rem;font-weight:600;color:var(--bz-primary)}
    .bz-sup-mail__addr:hover{text-decoration:underline}

    .bz-sup-stage{background:linear-gradient(160deg, var(--paper-2), var(--paper));position:relative}
    .bz-chat{position:relative;width:220px;height:190px}
    .bz-chat__bubble{position:absolute;padding:14px 16px;border-radius:16px;box-shadow:0 12px 28px -14px rgba(17,24,39,.35)}
    .bz-chat__bubble--in{
      left:6px;top:18px;background:#fff;border:1px solid var(--rule);border-bottom-left-radius:4px;
      display:flex;gap:6px;align-items:center;animation:bz-pop .5s .15s both;
    }
    .bz-chat__bubble--out{
      right:6px;top:88px;background:var(--bz-primary);border-bottom-right-radius:4px;
      display:flex;flex-direction:column;gap:7px;width:120px;animation:bz-pop .5s .45s both;
    }
    .bz-chat__dot{width:8px;height:8px;border-radius:50%;background:var(--bz-gold);animation:bz-typing 1.4s 4}
    .bz-chat__dot:nth-child(2){animation-delay:.2s}
    .bz-chat__dot:nth-child(3){animation-delay:.4s}
    .bz-chat__line{height:8px;border-radius:4px;background:rgba(255,255,255,.9)}
    .bz-chat__line--short{width:60%}
    .bz-chat__headset{
      position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
      width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
      background:#fff;border:1px solid var(--rule);color:var(--bz-primary);font-size:1.2rem;
      box-shadow:0 10px 24px -10px rgba(17,24,39,.4);
    }
    html.dark .bz-chat__headset{background:var(--paper-2)}
    @keyframes bz-typing{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
    @keyframes bz-pop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
    @media (prefers-reduced-motion: reduce){
      .bz-chat__dot,.bz-chat__bubble{animation:none}
    }

/* /assets/themes/bazaar/assets/css/components/support/channels.css */
  .bz-sup-card{position:relative;overflow:hidden;padding:1.75rem 1.5rem;border-radius:18px;
    background:linear-gradient(180deg,var(--paper-2),var(--paper));border:1px solid var(--rule);
    box-shadow:inset 0 0 0 1px rgba(184,134,47,.10),var(--shadow,0 6px 18px -10px rgba(17,24,39,.15));
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
  .bz-sup-card::before{content:'\25C6\00a0\25C6';position:absolute;top:8px;left:0;right:0;text-align:center;
    font-size:6px;letter-spacing:1em;color:var(--bz-gold);opacity:.5;pointer-events:none}
  .bz-sup-card::after{content:'';position:absolute;top:0;bottom:0;left:-65%;width:50%;
    background:linear-gradient(105deg,transparent,rgba(217,168,60,.28),transparent);
    transform:skewX(-20deg);pointer-events:none;transition:left .55s ease}
  .bz-sup-card:hover::after{left:130%}
  .bz-sup-card:hover{transform:translateY(-3px);border-color:var(--bz-gold);
    box-shadow:inset 0 0 0 1px rgba(184,134,47,.26),var(--shadow-md,0 18px 34px -16px rgba(17,24,39,.28))}
  .bz-sup-card__badge{position:relative;width:58px;height:58px;margin-bottom:1.1rem;border-radius:9999px;
    display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:var(--bz-primary);
    background:radial-gradient(120% 120% at 50% 0%,rgba(184,134,47,.22),rgba(184,134,47,.05) 70%);
    border:1px solid var(--bz-gold);box-shadow:inset 0 1px 0 rgba(217,168,60,.5);
    transition:background .2s ease,color .2s ease}
  .bz-sup-card:hover .bz-sup-card__badge{background:var(--bz-primary);color:#fff}
  .bz-sup-card__title{font-family:var(--font-display,'Inter',serif);font-weight:400;font-size:1.15rem;
    color:var(--ink);margin-bottom:.5rem;letter-spacing:.005em}
  .bz-sup-card__desc{font-size:.875rem;line-height:1.6;color:var(--ink-soft)}

/* /assets/themes/bazaar/assets/css/components/support/stats.css */
  .bz-sup-stats{border-radius:20px;position:relative;overflow:hidden;
    background:linear-gradient(180deg,var(--paper-2),var(--paper));border:1px solid var(--rule);
    box-shadow:inset 0 0 0 1px rgba(184,134,47,.10),var(--shadow,0 8px 24px -14px rgba(17,24,39,.15))}
  .bz-sup-stats::before{content:'';position:absolute;top:0;left:14px;right:14px;height:2px;
    background:linear-gradient(90deg,transparent,var(--bz-gold),transparent);opacity:.7;pointer-events:none}
  .bz-sup-stats__rule{display:inline-flex;align-items:center;gap:.6rem;
    font-weight:700;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bz-gold)}
  .bz-sup-stats__rule i{color:var(--bz-primary);font-size:.85rem}
  .bz-sup-stats__rule::before,.bz-sup-stats__rule::after{content:'\25C6';font-size:8px;color:var(--bz-gold);opacity:.7}
  .bz-sup-stat{position:relative;padding:.85rem .2rem;border-radius:16px;overflow:hidden;min-width:0;
    background:radial-gradient(120% 120% at 50% 0%,rgba(184,134,47,.14),rgba(184,134,47,.03) 70%),var(--paper-2);
    border:1px solid var(--bz-gold);
    box-shadow:inset 0 1px 0 rgba(217,168,60,.4);transition:transform .2s ease}
  .bz-sup-stat:hover{transform:translateY(-2px)}
  .bz-sup-stat__num{font-family:var(--font-display,'Inter',serif);font-weight:400;font-size:clamp(.7rem,4.5vw,1.1rem);line-height:1.1;
    color:var(--bz-primary);letter-spacing:.005em;overflow-wrap:break-word;word-break:break-word}
  .bz-sup-stat__label{font-size:clamp(.42rem,1.9vw,.6rem);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    color:var(--ink-soft);margin-top:.35rem;overflow-wrap:break-word;word-break:normal;hyphens:manual}
  /* Four coins to a row leave a label ~60px at 360, too little for
     "Zufriedenheitsrate": phones stack them two by two. */
  @media (max-width:767px){
    .bz-sup-stats .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
    .bz-sup-stat__num{font-size:clamp(1.05rem,5.6vw,1.4rem)}
    .bz-sup-stat__label{font-size:.62rem;letter-spacing:.06em}
  }
  @media (min-width:768px){
    .bz-sup-stat{padding:1.5rem 1rem}
    .bz-sup-stat__num{font-size:2.1rem}
    .bz-sup-stat__label{font-size:.68rem;letter-spacing:.12em}
  }