/* Cayanide Labs palette.
 *
 * The site previously ran three unrelated blues (#0071e3, #3b82f6, #1f73b7) plus an
 * orange button, which is what made pages read as mismatched rather than merely plain.
 * This is one blue hue with a neutral ramp built around it, and a single warm accent
 * used sparingly for emphasis.
 *
 * Neutrals are very slightly blue rather than pure grey so they sit with the brand
 * instead of looking dirty next to it. Text is #111827, not #000: pure black on pure
 * white haloes at small sizes and is tiring over a long page.
 *
 * Contrast against --ui-surface (#ffffff), WCAG 2.1:
 *   --ui-ink    18.1:1  AAA    --ui-text   16.1:1  AAA
 *   --ui-body    7.6:1  AAA    --ui-muted   5.0:1  AA
 *   --ui-brand   5.2:1  AA (and 5.2:1 for white text on a brand fill)
 * Nothing here is below AA, so body copy stays legible for older eyes and on the cheap
 * high-glare phone screens a lot of Indian traffic arrives on.
 *
 * Token names are unchanged from the previous palette; every other stylesheet keeps
 * working, it just inherits better values.
 */
:root {
  /* Surfaces, lightest to most recessed */
  --ui-surface: #ffffff;
  --ui-surface-soft: #f8fafc;
  --ui-bg: #f4f6fb;
  --ui-line: #e5e9f0;
  --ui-line-strong: #d4dae5;

  /* Text, strongest to weakest. Pair --ui-ink with headings and --ui-body with prose. */
  --ui-ink: #0b1220;
  --ui-text: #111827;
  --ui-body: #4b5563;
  /* #656d7c rather than the more conventional #6b7280: the latter measures 4.47:1 on
     --ui-bg, which fails AA by a hair. Muted text lands on the canvas often enough
     (form hints, captions, the trust strip) that the tint has to clear on the darkest
     surface it can appear on, not just on white. */
  --ui-muted: #656d7c;
  --ui-on-brand: #ffffff;

  /* One brand hue. --ui-brand-soft is the only tinted fill; it keeps callouts on-palette
     instead of introducing a second colour every time something needs emphasis. */
  --ui-brand: #2563eb;
  --ui-brand-hover: #1d4ed8;
  --ui-brand-deep: #1e3a8a;
  --ui-brand-soft: #eef4ff;
  --ui-brand-ring: rgba(37, 99, 235, 0.32);

  /* Warm counterpoint. Deliberately rationed — badges and single highlighted words. */
  --ui-accent: #f59e0b;
  --ui-accent-soft: #fff7e6;

  --ui-success: #047857;
  --ui-danger: #b91c1c;
  --ui-warn: #b45309;

  /* Shadows are tinted with the brand hue rather than neutral black, which reads as
     depth instead of grime. */
  --ui-shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.05);
  --ui-shadow-md: 0 4px 16px rgba(11, 18, 32, 0.07);
  --ui-shadow-lg: 0 18px 48px rgba(15, 33, 74, 0.1);

  --ui-radius-sm: 8px;
  --ui-radius-md: 14px;
  --ui-radius-lg: 22px;
}

html, body {
  scroll-behavior: smooth;
}

body.apple-ui {
  /* A near-flat canvas. The old radial gradient shifted tone down the page, so a card
     that looked white at the top looked grey against the footer. */
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
  font-family: "Montserrat", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.apple-ui::before,
body.apple-ui::after {
  background: transparent !important;
  animation: none !important;
  box-shadow: none !important;
}

body.apple-ui,
body.apple-ui p,
body.apple-ui li,
body.apple-ui span,
body.apple-ui label,
body.apple-ui input,
body.apple-ui select,
body.apple-ui textarea {
  color: var(--ui-text);
}

/* `button` is deliberately not in the list above.
   Buttons do not inherit colour, so the theme has to name them — but at `body.apple-ui
   button` the selector scores 0-1-2, which outranks the single-class rule a component
   uses to style itself. Every page that defined its own filled button therefore kept its
   dark fill and lost its white text: `.builder-cta-btn` on the catalogue and `.wt-btn` on
   the template checkout both rendered near-black ink on a near-black pill. The anchors
   beside them looked right, which is the tell — `a` was never in this list.
   `:where()` contributes nothing to specificity, so this scores 0-0-1: a bare button still
   picks up theme ink rather than the browser's default, and any component class wins. */
:where(body.apple-ui) button {
  color: var(--ui-text);
}

body.apple-ui p,
body.apple-ui .subtitle,
body.apple-ui .hero-subtitle,
body.apple-ui .privacy-note,
body.apple-ui .product-compatibility,
body.apple-ui .item-meta,
body.apple-ui .shipping-item {
  color: var(--ui-muted) !important;
}

body.apple-ui h1,
body.apple-ui h2,
body.apple-ui h3,
body.apple-ui .hero-title,
body.apple-ui .section-title,
body.apple-ui .title,
body.apple-ui .product-name,
body.apple-ui .item-name {
  color: var(--ui-text) !important;
  letter-spacing: -0.02em !important;
}

body.apple-ui .hero-section,
body.apple-ui .hero-dashboard,
body.apple-ui .hero-products {
  position: relative;
  max-width: 1240px;
  margin: 92px auto 24px !important;
  border-radius: 24px !important;
  border: 1px solid var(--ui-line) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(247,247,250,0.78)) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.07) !important;
  overflow: hidden;
}

body.apple-ui .hero-section::before,
body.apple-ui .hero-products::before,
body.apple-ui .hero-dashboard::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(0,113,227,0.12), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(0,113,227,0.08), transparent 40%);
  z-index: 0;
}

body.apple-ui .hero-content {
  position: relative;
  z-index: 1;
}

body.apple-ui .container,
body.apple-ui .section-container,
body.apple-ui .spec-card,
body.apple-ui .product-card,
body.apple-ui .category-section,
body.apple-ui .dashboard-container,
body.apple-ui .tab-content,
body.apple-ui .card,
body.apple-ui .user-info,
body.apple-ui .product-list,
body.apple-ui .summary,
body.apple-ui .custom-builder {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.05) !important;
}

body.apple-ui .section-container,
body.apple-ui .dashboard-container,
body.apple-ui .container {
  padding: 18px !important;
}

body.apple-ui .spec-card,
body.apple-ui .product-card,
body.apple-ui .card,
body.apple-ui .category-section,
body.apple-ui .tab-content {
  transition: transform 240ms ease, box-shadow 240ms ease;
}

body.apple-ui .spec-card:hover,
body.apple-ui .product-card:hover,
body.apple-ui .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.08) !important;
}

body.apple-ui .featured-products,
body.apple-ui .info-section {
  color: var(--ui-text) !important;
}

body.apple-ui .product-item,
body.apple-ui .cart-item {
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 14px !important;
}

body.apple-ui .specs li,
body.apple-ui .review-card,
body.apple-ui .hardware-item,
body.apple-ui .downloads li {
  background: #f8f8fb !important;
  border: 1px solid var(--ui-line) !important;
  color: var(--ui-text) !important;
  border-radius: 12px !important;
}

body.apple-ui .tabs {
  background: #f1f1f4 !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 12px 12px 0 0 !important;
}

body.apple-ui .tab-link {
  color: #1d1d1f !important;
}

body.apple-ui .tab-link.active {
  background: var(--ui-brand) !important;
  color: #fff !important;
}

body.apple-ui .btn,
body.apple-ui button,
body.apple-ui .cta-button,
body.apple-ui .btn-add-cart,
body.apple-ui .btn-view-details,
body.apple-ui .buy-now,
body.apple-ui .add-to-cart,
body.apple-ui .wishlist,
body.apple-ui .buy-bundle {
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  transition: all 180ms ease !important;
}

body.apple-ui .btn,
body.apple-ui .btn-view-details {
  background: #fff !important;
  color: #111 !important;
  border-color: #d7d7dd !important;
}

body.apple-ui .btn:hover,
body.apple-ui .btn-view-details:hover {
  background: #f1f1f4 !important;
}

/* Filled buttons that should carry the brand colour rather than their own. This list is a
   palette choice, not a correctness requirement: since the blanket ink rule moved behind
   :where(), a button styled only in its page stylesheet keeps both its fill and its text. */
body.apple-ui .btn-primary,
body.apple-ui .cta-button,
body.apple-ui .btn-add-cart,
body.apple-ui #save-profile-btn,
body.apple-ui #send-otp-btn,
body.apple-ui .buy-now,
body.apple-ui .add-to-cart,
body.apple-ui .builder-cta-btn,
body.apple-ui #payNowBtn {
  background: var(--ui-brand) !important;
  color: #fff !important;
  border-color: var(--ui-brand) !important;
}

/* Secondary action sitting beside a primary one. Neutral rather than a second colour: the
   palette carries one brand hue, so a filled dark button next to a filled blue one reads
   as two competing primaries. */
body.apple-ui .builder-cta-btn--secondary {
  background: #fff !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-line-strong) !important;
}

body.apple-ui .builder-cta-btn--secondary:hover {
  background: #f1f4f9 !important;
  border-color: var(--ui-brand) !important;
  color: var(--ui-brand) !important;
}

body.apple-ui .btn-primary:hover,
body.apple-ui .cta-button:hover,
body.apple-ui .btn-add-cart:hover,
body.apple-ui #save-profile-btn:hover,
body.apple-ui #send-otp-btn:hover,
body.apple-ui .buy-now:hover,
body.apple-ui .add-to-cart:hover,
body.apple-ui .builder-cta-btn:hover,
body.apple-ui #payNowBtn:hover {
  background: var(--ui-brand-hover) !important;
  border-color: var(--ui-brand-hover) !important;
}

body.apple-ui .btn-danger,
body.apple-ui .wishlist,
body.apple-ui .buy-bundle {
  background: #fff4f3 !important;
  color: var(--ui-danger) !important;
  border-color: rgba(198, 41, 27, 0.3) !important;
}

body.apple-ui .btn-danger:hover,
body.apple-ui .wishlist:hover,
body.apple-ui .buy-bundle:hover {
  background: #ffe9e7 !important;
}

body.apple-ui input,
body.apple-ui textarea,
body.apple-ui select,
body.apple-ui .search-box,
body.apple-ui .qty-input {
  background: #fff !important;
  color: var(--ui-text) !important;
  border: 1px solid #d3d3d8 !important;
  border-radius: 12px !important;
}

body.apple-ui input:focus,
body.apple-ui textarea:focus,
body.apple-ui select:focus {
  border-color: #8ab8ef !important;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12) !important;
  outline: none !important;
}

/* Product listing and landing specific */
body.apple-ui .top-filters,
body.apple-ui .filters-wrapper,
body.apple-ui .category-filters,
body.apple-ui .more-categories,
body.apple-ui .categories-content,
body.apple-ui .categories-modal .categories-content {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.05) !important;
}

body.apple-ui .category-title,
body.apple-ui .categories-title,
body.apple-ui .specs h3,
body.apple-ui .custom-builder h2 {
  color: var(--ui-text) !important;
}

body.apple-ui .category-filter-link,
body.apple-ui .more-btn,
body.apple-ui .more-dropdown a {
  color: var(--ui-text) !important;
  background: #fff !important;
  border: 1px solid #d7d7dd !important;
  border-radius: 999px !important;
}

body.apple-ui .more-dropdown,
body.apple-ui .categories-modal {
  background: rgba(0, 0, 0, 0.22) !important;
}

body.apple-ui .product-images,
body.apple-ui .product-details,
body.apple-ui .review-form,
body.apple-ui .custom-builder {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05) !important;
}

body.apple-ui .product-details h1,
body.apple-ui .price {
  color: var(--ui-text) !important;
}

body.apple-ui .price {
  font-weight: 700 !important;
}

body.apple-ui .thumbnail {
  border-color: #d8d8de !important;
}

body.apple-ui .thumbnail.active {
  border-color: var(--ui-brand) !important;
}

body.apple-ui #mainImage {
  border: 1px solid var(--ui-line) !important;
  background: #fff !important;
}

/* Checkout and account polish */
body.apple-ui .checkout-wrap,
body.apple-ui .products-main {
  max-width: 1220px;
}

body.apple-ui .summary-row span,
body.apple-ui .summary-row strong,
body.apple-ui .summary-total span {
  color: var(--ui-text) !important;
}

body.apple-ui .site-footer,
body.apple-ui footer {
  background: #f7f7f9 !important;
  color: var(--ui-muted) !important;
  border-top: 1px solid var(--ui-line) !important;
}

body.apple-ui #orders {
  background: #fafafd !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  color: var(--ui-text) !important;
}

/* Legal pages */
body.apple-ui > header[style*="max-width: 1100px"] {
  max-width: 980px !important;
  margin: 20px auto 0 !important;
  padding: 0 16px !important;
}

/* Apps page */
body.apple-ui .apps-hero,
body.apple-ui .app-content,
body.apple-ui .nas-cta,
body.apple-ui .app-section {
  color: var(--ui-text) !important;
}

body.apple-ui .apps-hero {
  background: linear-gradient(180deg, #f8f9fd 0%, #eef3fb 100%) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 22px !important;
  max-width: 1240px;
  margin: 90px auto 20px !important;
}

body.apple-ui .apps-hero::before {
  background: radial-gradient(circle at 20% 20%, rgba(0,113,227,0.12), transparent 45%) !important;
}

body.apple-ui .hero-content,
body.apple-ui .app-content,
body.apple-ui .nas-cta,
body.apple-ui .contact-container,
body.apple-ui .contact-info {
  background: #fff !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05) !important;
  color: var(--ui-text) !important;
}

/* Index hero should not render as an inner white card. */
body.apple-ui .hero-content.hero-content-plain {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

body.apple-ui .tech-partners {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 14px !important;
  display: flex;
  /* Six logos on one unwrappable line overflow a 375px screen. The row is decorative,
     so wrapping it costs nothing and stops the page scrolling sideways. */
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px !important;
  align-items: center;
}

body.apple-ui .partner-logo {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  height: 44px !important;
  max-width: 148px !important;
  object-fit: contain !important;
}

body.apple-ui .app-content p,
body.apple-ui .nas-cta p,
body.apple-ui .contact-info p {
  color: var(--ui-muted) !important;
}

body.apple-ui .app-content a.btn,
body.apple-ui .nas-cta .btn,
body.apple-ui button[type="submit"] {
  background: var(--ui-brand) !important;
  border: 1px solid var(--ui-brand) !important;
  color: #fff !important;
  border-radius: 999px !important;
}

body.apple-ui .app-content a.btn:hover,
body.apple-ui .nas-cta .btn:hover,
body.apple-ui button[type="submit"]:hover {
  background: var(--ui-brand-hover) !important;
  border-color: var(--ui-brand-hover) !important;
}

body.apple-ui .site-footer,
body.apple-ui footer {
  background: transparent !important;
  color: var(--ui-muted) !important;
  border-top: 0 !important;
}

.ticker-stack {
  position: fixed;
  top: 88px;
  right: 16px;
  width: min(380px, calc(100vw - 32px));
  display: grid;
  gap: 10px;
  z-index: 5000;
}

.ticker-item {
  border-radius: 12px;
  padding: 11px 12px;
  font-size: 13px;
  line-height: 1.45;
  border: 1px solid transparent;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  background: #fff;
  color: var(--ui-text);
  opacity: 0;
  transform: translateY(-8px);
  animation: tickerIn 220ms ease forwards;
}

.ticker-item.success { border-color: rgba(16,138,74,0.25); background: #edfff4; color: #145637; }
.ticker-item.error { border-color: rgba(198,41,27,0.25); background: #fff2f0; color: #7d1f1a; }
.ticker-item.warn { border-color: rgba(157,90,0,0.28); background: #fff8ec; color: #734406; }
.ticker-item.info { border-color: rgba(0,113,227,0.25); background: #edf6ff; color: #1a4f8f; }

.ticker-item.hiding { animation: tickerOut 220ms ease forwards; }

.ticker-action-link {
  margin-left: 8px;
  border: 1px solid rgba(0, 113, 227, 0.35);
  background: rgba(255, 255, 255, 0.92);
  color: #0b63ce;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}

.ticker-action-link:hover {
  background: #fff;
  color: #084f9f;
}

@keyframes tickerIn { to { opacity: 1; transform: translateY(0); } }
@keyframes tickerOut { to { opacity: 0; transform: translateY(-10px); } }

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 420ms ease, transform 420ms ease;
}

.reveal.show {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 980px) {
  body.apple-ui .hero-section,
  body.apple-ui .hero-dashboard,
  body.apple-ui .hero-products {
    margin: 82px 12px 18px !important;
  }
}

@media (max-width: 780px) {
  .ticker-stack {
    top: 74px;
    right: 10px;
    left: 10px;
    width: auto;
  }
}

/* iOS Safari zooms the viewport whenever a focused form control renders below 16px, and
   it does not zoom back out on blur — the user is left on a page scaled up with content
   running off the side. Several pages set 13-14px inputs in their own inline styles, so
   this is a floor applied once here rather than a fix repeated per page. The
   `body.apple-ui` prefix outranks those inline-block rules on specificity, so it holds
   regardless of stylesheet order. */
@media (max-width: 900px) {
  body.apple-ui input:not([type='checkbox']):not([type='radio']),
  body.apple-ui select,
  body.apple-ui textarea {
    font-size: 16px;
  }
}