/**
 * Allopro — Design tokens + global styles (pixel-perfect from template)
 * Primary: VIOLET #7C3AED. Fonts: Plus Jakarta Sans (headings), Manrope (body).
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  /* Colors */
  --ap-bg: #F9F9F7;
  --ap-surface: #FFF;
  --ap-surface-alt: #F4F3F0;
  --ap-border: #E8E6E1;
  --ap-border-light: #F0EEE9;
  --ap-text: #1A1918;
  --ap-text-sec: #65625B;
  --ap-text-ter: #9E9A92;
  --ap-primary: #7C3AED;
  --ap-primary-dark: #6D28D9;
  --ap-primary-deep: #5B21B6;
  --ap-primary-light: #F5F0FF;
  --ap-primary-soft: #EDE9FE;
  --ap-primary-muted: #DDD6FE;
  --ap-primary-extra: #C4B5FD;
  --ap-secondary: #5B21B6;
  --ap-secondary-dark: #4C1D95;
  --ap-secondary-light: #EDE9FE;
  --ap-primary-rgb: 124 58 237;
  --ap-secondary-rgb: 91 33 182;
  --ap-green: #16A34A;
  --ap-green-light: #F0FDF4;
  --ap-gold: #D97706;
  --ap-gold-light: #FFFBEB;
  --ap-rose: #E11D48;
  --ap-rose-light: #FFF1F2;
  --ap-teal: #0D9488;
  --ap-teal-light: #F0FDFA;
  --ap-navy: #1E1B2E;
  --ap-hero-mid: #2A1F4E;

  /* Radius */
  --ap-radius-sm: 10px;
  --ap-radius: 14px;
  --ap-radius-lg: 20px;
  --ap-radius-xl: 24px;

  /* Shadows */
  --ap-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.03);
  --ap-shadow-m: 0 4px 20px rgba(0,0,0,.06);
  --ap-shadow-l: 0 8px 40px rgba(0,0,0,.08);

  /* Fonts */
  --ap-font-heading: 'Plus Jakarta Sans', sans-serif;
  --ap-font-body: 'Manrope', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}
html.ap-nav-locked,
html.ap-nav-locked body {
  overflow: hidden;
  touch-action: none;
  height: 100%;
}
body {
  font-family: var(--ap-font-body);
  background: var(--ap-bg);
  color: var(--ap-text);
  -webkit-font-smoothing: antialiased;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}
::selection { background: var(--ap-primary-soft); color: var(--ap-primary-deep); }

/* Animations (from template) */
@keyframes ap-fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ap-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes ap-slideIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes ap-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes ap-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

input:focus, select:focus, textarea:focus { outline: none; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: var(--ap-border); border-radius: 3px; }

@media (max-width: 768px) {
  .ap-hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .ap-hide-desktop { display: none !important; }
}

/* Typography */
h1, h2, h3, h4, .ap-heading { font-family: var(--ap-font-heading); }
.ap-heading-xl { font-family: var(--ap-font-heading); font-weight: 800; font-size: clamp(30px, 5vw, 56px); line-height: 1.08; letter-spacing: -.03em; }
.ap-heading-lg { font-family: var(--ap-font-heading); font-weight: 800; font-size: clamp(20px, 2.5vw, 28px); letter-spacing: -.02em; }
.ap-heading-md { font-family: var(--ap-font-heading); font-weight: 700; font-size: 15px; }
.ap-label { font-family: var(--ap-font-heading); font-size: 12.5px; font-weight: 600; color: var(--ap-text); }
.ap-muted { color: var(--ap-text-sec); }
.ap-tertiary { color: var(--ap-text-ter); }

/* Buttons */
.ap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  font-family: var(--ap-font-heading);
  font-weight: 600;
  border-radius: var(--ap-radius-sm);
  transition: all .2s;
  font-size: 13px;
  padding: 10px 20px;
  text-decoration: none;
}
.ap-btn:disabled { opacity: .5; cursor: not-allowed; }
.ap-btn-primary {
  background: linear-gradient(135deg, var(--ap-primary), var(--ap-primary-dark));
  color: #fff;
  box-shadow: 0 2px 12px rgb(var(--ap-primary-rgb) / 30%);
}
.ap-btn-primary:hover:not(:disabled) { filter: brightness(1.05); }
.ap-btn-secondary {
  background: var(--ap-surface);
  color: var(--ap-text);
  border: 1.5px solid var(--ap-border);
}
.ap-btn-ghost { background: transparent; color: var(--ap-text-sec); }
.ap-btn-outline {
  background: transparent;
  color: var(--ap-primary);
  border: 1.5px solid var(--ap-primary);
}
.ap-btn-success { background: var(--ap-green); color: #fff; }
.ap-btn-danger { background: var(--ap-rose); color: #fff; }
.ap-btn-sm { font-size: 12px; padding: 7px 12px; }
.ap-btn-lg { font-size: 15px; padding: 14px 28px; }

/* Badges */
.ap-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--ap-font-heading);
  letter-spacing: .02em;
}
.ap-badge-sponsored {
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  color: #92400E;
}
.ap-badge-verified { background: var(--ap-green-light); color: var(--ap-green); }
.ap-badge-urgent { background: rgba(217, 119, 6, .12); color: var(--ap-gold); }
.ap-badge-featured { background: var(--ap-primary-soft); color: var(--ap-primary-deep); }
.ap-badge-pack-base { background: rgba(13, 148, 136, .08); color: var(--ap-teal); }
.ap-badge-pack-pro { background: var(--ap-primary-light); color: var(--ap-primary); }
.ap-badge-pack-master { background: var(--ap-gold-light); color: var(--ap-gold); }
.ap-badge-dispo { background: var(--ap-green); color: #fff; border-radius: 16px; padding: 2px 7px; font-size: 10px; font-weight: 700; }

/* Cards */
.ap-card {
  background: var(--ap-surface);
  border-radius: var(--ap-radius-lg);
  border: 1px solid var(--ap-border-light);
  overflow: hidden;
  transition: all .25s;
}
.ap-card:hover { transform: translateY(-3px); box-shadow: var(--ap-shadow-m); }
.ap-card-no-hover:hover { transform: none; box-shadow: none; }

/* Inputs */
.ap-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ap-surface);
  border: 1.5px solid var(--ap-border);
  border-radius: var(--ap-radius-sm);
  padding: 0 14px;
  transition: border-color .2s;
}
.ap-input-wrap:focus-within { border-color: var(--ap-primary); }
.ap-input, .ap-select {
  width: 100%;
  border: none;
  background: none;
  font-family: var(--ap-font-body);
  font-size: 14px;
  color: var(--ap-text);
  padding: 12px 0;
}
.ap-select { cursor: pointer; color: var(--ap-text-ter); }
.ap-select option { color: var(--ap-text); }
.ap-label-block { display: block; margin-bottom: 6px; font-family: var(--ap-font-heading); font-size: 12.5px; font-weight: 600; color: var(--ap-text); }
.ap-required { color: var(--ap-rose); }

/* Stars */
.ap-stars { display: inline-flex; gap: 1px; }
.ap-stars svg { fill: var(--ap-gold); }
.ap-stars .ap-star-empty { fill: transparent; stroke: var(--ap-gold); stroke-width: 1.5; }

/* Container */
.ap-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.ap-container-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.ap-container-pricing { max-width: 1100px; margin: 0 auto; padding: 0 24px; }