/*
 * simple.css - loaded last on every page. One plain font and one plain button
 * style for the whole site: flat colours, no gradients, glows or hover lift.
 */

/* MARK: Font - Geist everywhere, normal letter spacing */
:root {
  --sans: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --display: var(--sans);
}
body, button, input, select, textarea { font-family: var(--sans); }
h1, h2, h3, h4,
.hero h1, .section-heading h2, .panel h1, .panel h2,
.devices-copy h2, .proof-copy h2, .faq-intro h2, .closing-inner h2, .dash-feature-copy h2 {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -.02em;
  text-shadow: none;
}
.price strong, .stats-grid dd, .stat strong { font-family: var(--sans); letter-spacing: -.02em; }
.brand-word { font-family: var(--sans); font-weight: 700; letter-spacing: -.03em; }
[dir="rtl"] .brand-word, [dir="rtl"] .brand-word * { letter-spacing: -.03em !important; }
[dir="rtl"] body, [dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { font-family: 'IBM Plex Sans Arabic', var(--sans); letter-spacing: 0; }

/* MARK: Buttons - one shape, two looks (solid / outline) */
.button,
.site-nav .button-nav,
.price-card .button-outline,
.price-card .price-cta,
.home-light .plan-card > .button,
.flow-form > .button,
.pay-option .button,
.add-device-card .button,
.support-card .button,
.back-btn,
.line-renew-btn,
.newsletter-form button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 15px !important;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: none !important;
  text-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  cursor: pointer;
}
/* Full-width buttons keep their width, but centre the label. */
.price-card .button-outline, .price-card .price-cta, .flow-form > .button, .pay-option .button { justify-content: center; }
/* Decorative symbols (✦ ↗ →) inside buttons are hidden: label only. */
.button > span[aria-hidden="true"], .newsletter-form button > span[aria-hidden="true"] { display: none; }

/* Solid: the main action */
.button-primary,
.site-nav .button-nav,
.price-card .price-cta,
.home-light .plan-card.is-popular > .button,
.newsletter-form button {
  background: #7c4ddb !important;
  border-color: #7c4ddb !important;
  color: #fff !important;
}
.button-primary:hover,
.site-nav .button-nav:hover,
.price-card .price-cta:hover,
.home-light .plan-card.is-popular > .button:hover,
.newsletter-form button:hover {
  background: #6a3cc8 !important;
  border-color: #6a3cc8 !important;
}

/* Outline: secondary actions */
.button-quiet,
.button-outline,
.hero-actions .hero-plans,
.price-card .button-outline,
.home-light .price-card .button-outline {
  background: transparent !important;
  border-color: rgba(214,197,255,.45) !important;
  color: #fff !important;
}
.button-quiet:hover,
.button-outline:hover,
.hero-actions .hero-plans:hover,
.price-card .button-outline:hover {
  background: rgba(155,105,255,.12) !important;
  border-color: rgba(214,197,255,.7) !important;
}
/* Outline on light backgrounds (light theme pages, plan cards) */
:root:not([data-theme="dark"]) .page-frame .button-quiet,
.home-light .price-card .button-outline,
:root:not([data-theme="dark"]) .home-light .plan-card > .button:not(.button-primary) {
  background: #fff !important;
  border-color: rgba(124,77,219,.4) !important;
  color: #5b34b0 !important;
}
:root:not([data-theme="dark"]) .page-frame .button-quiet:hover,
.home-light .price-card .button-outline:hover {
  background: #f4eeff !important;
  border-color: #7c4ddb !important;
}
[data-theme="dark"] .home-light .price-card .button-outline {
  background: transparent !important;
  border-color: rgba(214,197,255,.45) !important;
  color: #fff !important;
}
/* Closing band: white button on the purple band */
.home-light .closing-section .button-primary {
  background: #fff !important;
  border-color: #fff !important;
  color: #4b2a92 !important;
}
/* Crypto pay button keeps its orange accent, flat */
.pay-crypto .button-quiet { background: transparent !important; border-color: rgba(247,170,70,.55) !important; color: #ffe2b8 !important; }
:root:not([data-theme="dark"]) .page-frame .pay-crypto .button-quiet { background: #fff !important; color: #8a4c06 !important; }

.button[disabled] { opacity: .5; cursor: not-allowed; }
.button:focus-visible, .site-nav .button-nav:focus-visible, .newsletter-form button:focus-visible {
  outline: 2px solid #b892ff;
  outline-offset: 2px;
}

/* Small buttons (admin, copy) - same flat look, smaller */
.mini-btn, .copy-btn {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}

/* Header button: same look, a little smaller than page buttons */
.site-nav .button-nav { min-height: 40px; padding: 0 16px; font-size: 14px !important; }

@media (max-width: 720px) {
  .site-nav .button-nav { min-height: 38px; padding: 0 14px; font-size: 14px !important; }
  .hero-actions .button { min-height: 44px; padding: 0 16px; }
}
@media (max-width: 430px) {
  .site-nav .button-nav { min-height: 34px; padding: 0 12px; font-size: 13px !important; }
}