/**
 * GIREMRUS UI Component Library
 * Single component system used across all pages.
 *
 * Components:
 *   .g-btn       — Buttons
 *   .g-card      — Cards
 *   .g-input     — Form inputs
 *   .g-badge     — Badges
 *   .g-chip      — Chips / filter tags
 *   .g-section   — Section wrapper
 *   .g-shell     — Content shell (max-width)
 *   .g-eyebrow   — Section label above heading
 *   .g-faq       — FAQ accordion
 *   .g-cta-strip — CTA banner
 */

/* ═══════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════
   Usage:
     <a class="g-btn g-btn--primary">Отправить заявку</a>
     <button class="g-btn g-btn--outline g-btn--sm">Подробнее</button>
*/

.g-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--btn-h);
  padding: 0 var(--btn-px);
  border-radius: var(--btn-r);
  border: 1.5px solid transparent;
  font-family: var(--font);
  font-size: var(--btn-fs);
  font-weight: var(--btn-fw);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--ease),
    border-color var(--ease),
    color var(--ease),
    box-shadow var(--ease),
    transform var(--ease);
  -webkit-font-smoothing: antialiased;
}

.g-btn:hover  { transform: translateY(-1px); }
.g-btn:active { transform: translateY(0); }

.g-btn:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* Primary */
.g-btn--primary {
  background: var(--brand-primary);
  color: var(--on-brand);
  border-color: var(--brand-primary);
  box-shadow: var(--sh-brand);
}
.g-btn--primary:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  box-shadow: var(--sh-brand-hover);
  color: var(--on-brand);
}

/* Secondary (white with border) */
.g-btn--secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
.g-btn--secondary:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  background: var(--brand-soft);
}

/* Outline (transparent bg) */
.g-btn--outline {
  background: transparent;
  color: var(--brand-primary);
  border-color: var(--brand-border-color);
}
.g-btn--outline:hover {
  background: var(--brand-soft);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

/* Ghost (on dark backgrounds) */
.g-btn--ghost {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.35);
}
.g-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.70);
  color: #ffffff;
}

/* Ghost on light backgrounds */
.g-btn--ghost-light {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
}
.g-btn--ghost-light:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

/* Sizes */
.g-btn--sm {
  height: var(--btn-h-sm);
  padding: 0 var(--btn-px-sm);
  font-size: var(--btn-fs-sm);
  border-radius: 8px;
}
.g-btn--lg {
  height: var(--btn-h-lg);
  padding: 0 var(--btn-px-lg);
  font-size: 16px;
}

/* Modifiers */
.g-btn--block  { width: 100%; }
.g-btn--icon   { padding: 0; width: var(--btn-h); }
.g-btn--icon.g-btn--sm { width: var(--btn-h-sm); }

/* ═══════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════
   Usage:
     <div class="g-card">...</div>
     <div class="g-card g-card--dark">...</div>
*/

.g-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-r);
  box-shadow: var(--card-sh);
  transition:
    border-color var(--ease),
    box-shadow var(--ease),
    transform var(--ease);
}

.g-card--hoverable:hover {
  border-color: var(--card-hover-border);
  box-shadow: var(--card-hover-sh);
  transform: translateY(-2px);
}

/* Padding variants */
.g-card--padded  { padding: var(--card-p); }
.g-card--compact { padding: var(--card-p-sm); }

/* Dark card (for dark section contexts) */
.g-card--dark {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  color: var(--text-on-dark);
}
.g-card--dark:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(73, 51, 209, 0.35);
  box-shadow: 0 6px 20px rgba(73, 51, 209, 0.15);
}

/* Brand tint card */
.g-card--tint {
  background: var(--brand-soft);
  border-color: var(--brand-border-color);
}
.g-card--tint:hover {
  background: var(--brand-soft-2);
  border-color: rgba(73, 51, 209, 0.25);
}

/* Elevated */
.g-card--elevated { box-shadow: var(--sh-lg); }

/* ═══════════════════════════════════════════════════
   FORM INPUTS
   ═══════════════════════════════════════════════════ */

.g-input,
.g-textarea,
.g-select {
  display: block;
  width: 100%;
  padding: var(--input-pad);
  background: var(--input-bg);
  border: 1.5px solid var(--input-border);
  border-radius: var(--input-r);
  font-family: var(--font);
  font-size: var(--input-fs);
  color: var(--text);
  line-height: var(--lh-normal);
  outline: none;
  transition: border-color var(--ease), box-shadow var(--ease);
  appearance: none;
  box-sizing: border-box;
}

.g-input,
.g-select   { height: var(--input-h); }
.g-textarea { min-height: 96px; resize: vertical; }

.g-input:focus,
.g-textarea:focus,
.g-select:focus {
  border-color: var(--input-focus);
  box-shadow: 0 0 0 3px rgba(73, 51, 209, 0.15);
}

.g-input::placeholder,
.g-textarea::placeholder { color: var(--text-soft); }

.g-label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  color: var(--text-secondary);
}

.g-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.g-checkbox-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--text-base);
  color: var(--text-muted);
  cursor: pointer;
}

.g-checkbox {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--brand-primary);
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════ */

.g-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semi);
  line-height: 1.3;
  white-space: nowrap;
}

.g-badge--brand {
  background: var(--brand-soft-2);
  color: var(--brand-primary);
}
.g-badge--success {
  background: var(--success-bg);
  color: var(--success);
}
.g-badge--warning {
  background: var(--warning-bg);
  color: var(--warning);
}
.g-badge--danger {
  background: var(--danger-bg);
  color: var(--danger);
}
.g-badge--neutral {
  background: var(--surface-100);
  color: var(--text-muted);
}
.g-badge--dark {
  background: rgba(255, 255, 255, 0.12);
  color: var(--brand-accent-light);
}

/* ═══════════════════════════════════════════════════
   CHIPS (filter tags, navigation pills)
   ═══════════════════════════════════════════════════ */

.g-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease), color var(--ease);
  white-space: nowrap;
}

.g-chip:hover {
  border-color: var(--brand-primary);
  background: var(--brand-soft);
  color: var(--brand-primary);
}

.g-chip--active {
  background: var(--brand-soft-2);
  border-color: var(--brand-border-color);
  color: var(--brand-primary);
  font-weight: var(--fw-bold);
}

.g-chip--dark {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--text-on-dark-muted);
}
.g-chip--dark:hover {
  background: rgba(73, 51, 209, 0.18);
  border-color: rgba(73, 51, 209, 0.40);
  color: var(--brand-accent-light);
}

/* ═══════════════════════════════════════════════════
   SECTION LAYOUT
   ═══════════════════════════════════════════════════ */

.g-section {
  padding-block: var(--section-y);
}
.g-section--sm { padding-block: var(--block-y); }
.g-section--dark {
  background: var(--surface-900);
  color: var(--text-on-dark);
}

.g-shell {
  width: min(100% - 32px, var(--shell));
  margin-inline: auto;
}
.g-shell--wide {
  width: min(100% - 32px, var(--shell-wide));
}

/* ═══════════════════════════════════════════════════
   EYEBROW (section label above headings)
   ═══════════════════════════════════════════════════ */

.g-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-primary);
}
.g-eyebrow--dark { color: var(--brand-accent-light); }

/* ═══════════════════════════════════════════════════
   FAQ ACCORDION
   ═══════════════════════════════════════════════════ */

.g-faq-list {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.g-faq-item {
  border-bottom: 1px solid var(--border);
}
.g-faq-item:last-child { border-bottom: none; }

.g-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: var(--surface);
  border: 0;
  font-family: var(--font);
  font-size: var(--text-md);
  font-weight: var(--fw-semi);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  line-height: var(--lh-snug);
  transition: background var(--ease);
}
.g-faq-q:hover { background: var(--surface-50); }
.g-faq-q[aria-expanded="true"] {
  background: #ede9ff;
  color: var(--brand-primary);
}

.g-faq-chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--brand-primary);
  transition: transform var(--ease-med);
}
.g-faq-q[aria-expanded="true"] .g-faq-chevron { transform: rotate(180deg); }

.g-faq-a {
  padding: 0 20px 16px;
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--lh-body);
  background: #ede9ff;
}
.g-faq-a p { margin: 0; }

/* ═══════════════════════════════════════════════════
   CTA STRIP
   ═══════════════════════════════════════════════════ */

.g-cta-strip {
  padding: 36px 32px;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 60%, #3b27b8 100%);
  color: #ffffff;
}

.g-cta-strip__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.g-cta-strip__title {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: var(--fw-bold);
  margin: 0 0 6px;
  line-height: var(--lh-snug);
  color: #ffffff;
}

.g-cta-strip__text {
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.80);
  margin: 0;
}

.g-cta-strip__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .g-cta-strip { padding: 28px 20px; }
  .g-cta-strip__inner { flex-direction: column; align-items: flex-start; }
  .g-cta-strip__actions { width: 100%; }
}

/* ═══════════════════════════════════════════════════
   UPLOAD AREA
   ═══════════════════════════════════════════════════ */

.g-upload {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 20px;
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface-50);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease);
  font-size: var(--text-base);
  color: var(--text-soft);
}
.g-upload:hover {
  border-color: var(--brand-primary);
  background: var(--brand-soft);
}
.g-upload__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════
   Usage: a hidden .g-modal-overlay in the page, toggled via
   the `hidden` attribute by JS (see girem-ai-widget.js
   initPrivacyModal — reused by every form's privacy-policy link).
*/

body.g-modal-open { overflow: hidden; }

.g-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.g-modal-overlay[hidden] { display: none; }

.g-modal-overlay__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: rgba(15, 23, 42, 0.55);
  cursor: pointer;
}

.g-modal {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(100%, 860px);
  height: min(86vh, 900px);
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  overflow: hidden;
}

.g-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.g-modal__title {
  font-size: var(--text-lg);
  font-weight: var(--fw-semi);
  color: var(--text);
}

.g-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color var(--ease), color var(--ease);
}
.g-modal__close:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.g-modal__body {
  flex: 1;
  min-height: 0;
}

.g-modal__body iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ═══════════════════════════════════════════════════
   CAROUSEL
   ═══════════════════════════════════════════════════
   Usage: wrap a horizontally-scrolling track in [data-carousel];
   prev/next buttons and a dots container are optional and wired up
   generically by initCarousels() in girem-ai-widget.js (loaded on
   every page). Modeled on the homepage brand-logo carousel
   (.girem-home__brands-carousel) so new instances (e.g. reviews)
   don't invent a second visual language for the same interaction.
     <div class="g-carousel" data-carousel>
       <div class="g-carousel__track" data-carousel-track>
         <div class="g-carousel__item">...</div>
       </div>
       <div class="g-carousel__nav">
         <button class="g-carousel__nav-btn" data-carousel-prev>‹</button>
         <div class="g-carousel__dots" data-carousel-dots></div>
         <button class="g-carousel__nav-btn" data-carousel-next>›</button>
       </div>
     </div>
*/

.g-carousel { position: relative; }

.g-carousel__track {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  margin: 0 -2px;
  padding: 2px;
}
.g-carousel__track::-webkit-scrollbar { display: none; }

.g-carousel__item {
  scroll-snap-align: start;
  flex-shrink: 0;
}

.g-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.g-carousel__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  min-height: 0;
  padding: 0;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.g-carousel__nav-btn:hover {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}
.g-carousel__nav-btn svg { width: 16px; height: 16px; }

.g-carousel__dots { display: flex; gap: 8px; }

.g-carousel__dot {
  width: 8px;
  height: 8px;
  min-height: 0;
  border-radius: var(--r-pill);
  background: var(--border-strong);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background var(--ease), transform var(--ease);
}
.g-carousel__dot.is-active {
  background: var(--brand-primary);
  transform: scale(1.2);
}

/* ═══════════════════════════════════════════════════
   GRID HELPERS
   ═══════════════════════════════════════════════════ */

.g-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.g-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.g-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.g-grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--gap); }

@media (max-width: 768px) {
  .g-grid-2,
  .g-grid-3,
  .g-grid-4 { grid-template-columns: 1fr 1fr; }
  .g-cta-strip__actions .g-btn { flex: 1; justify-content: center; }
}

@media (max-width: 480px) {
  .g-grid-2,
  .g-grid-3,
  .g-grid-4 { grid-template-columns: 1fr; }
}