/*!
 * Mashhor Hub — global UI/UX polish & responsive layer.
 * Additive only: improves cross-device display & accessibility without overriding
 * brand colors/fonts. Loaded after the main stylesheet on every public page.
 */

/* ── 1. Never allow accidental horizontal scrolling on any device ───────────── */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }

/* ── 2. Media always stays within its container ─────────────────────────────── */
img, svg, video, iframe, canvas, embed, object { max-width: 100%; }
img, video { height: auto; }

/* ── 3. Long words / URLs wrap instead of pushing the layout sideways ───────── */
p, li, span, a, h1, h2, h3, h4, h5, h6, td, th, dd, blockquote, figcaption {
  overflow-wrap: break-word;
}

/* ── 4. Comfortable, tappable controls on touch devices ─────────────────────── */
@media (hover: none) and (pointer: coarse) {
  button, .button, [role="button"], input[type="submit"], input[type="button"], select {
    min-height: 44px;
  }
}

/* ── 5. Prevent iOS auto-zoom when focusing a field (needs >=16px on phones) ─── */
@media (max-width: 640px) {
  input, select, textarea { font-size: 16px; }
}

/* ── 6. Data tables scroll horizontally instead of breaking the layout ──────── */
@media (max-width: 760px) {
  table:not([data-noscroll]) {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── 7. Accessibility: visible keyboard focus + honor reduced-motion ─────────── */
:focus-visible { outline: 2px solid rgba(139, 92, 246, .75); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 8. Smooth in-page anchor scrolling ─────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ── 9. Subtle, on-brand scrollbar (desktop only) ───────────────────────────── */
@media (min-width: 768px) {
  * { scrollbar-width: thin; scrollbar-color: rgba(139, 92, 246, .4) transparent; }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-track { background: transparent; }
  *::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, .35); border-radius: 8px; }
  *::-webkit-scrollbar-thumb:hover { background: rgba(139, 92, 246, .55); }
}

/* ── 10. On-brand text selection ────────────────────────────────────────────── */
::selection { background: rgba(139, 92, 246, .35); color: #fff; }

/* ── 11. Crisper rendering for headings ─────────────────────────────────────── */
h1, h2, h3 { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ── 12. Mobile account chip — boxed pill EQUAL to the language button ──────────
   The signed-in name sat unboxed next to the bordered language toggle. We box it
   as a matching pill AND make both halves equal width/height. !important is
   required because auth-state.js injects its <style> at runtime (after ui-polish
   loads), so its equal-specificity rules (e.g. the widget border-top line) would
   otherwise win. */
@media (max-width: 959px) {
  .mobile-actions { display: flex !important; align-items: stretch !important; gap: 12px !important; }
  .mobile-actions .mobile-lang { flex: 1 1 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; }
  .mobile-actions #mobile-auth-container { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; display: flex !important; }
  #mobile-auth-container .auth-user-widget { width: 100% !important; padding: 0 !important; margin: 0 !important; border: none !important; border-top: none !important; justify-content: flex-start !important; flex-wrap: nowrap !important; align-items: stretch !important; }
  #mobile-auth-container .auth-avatar-btn {
    flex: 1 1 auto !important;
    justify-content: center !important;
    background: rgba(139, 92, 246, .12) !important;
    border: 1px solid rgba(139, 92, 246, .35) !important;
    border-radius: 14px !important;
    padding: 10px 14px !important;
    gap: 10px !important;
    min-width: 0 !important;
  }
  #mobile-auth-container .auth-avatar-img,
  #mobile-auth-container .auth-avatar-placeholder { width: 30px !important; height: 30px !important; font-size: .95rem !important; border-width: 2px !important; flex-shrink: 0 !important; }
  #mobile-auth-container .auth-user-name {
    display: block !important; color: #fff !important; font-weight: 700 !important; font-size: .92rem !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; min-width: 0 !important;
  }
  #mobile-auth-container .auth-caret { display: inline-block !important; color: #c4b5fd !important; flex-shrink: 0 !important; }
}

/* ── 13. Keep circular UI elements perfectly round on every device ──────────────
   Theme swatches + carousel/testimonial dots set width=height but had no
   flex-shrink:0, so on narrow phones the flex parent squashed their WIDTH into
   vertical ovals (iOS & Android). flex-shrink:0 keeps them circles; aspect-ratio
   is a belt-and-suspenders for any single-dimension cases. */
.color-dot,
.testimonial-dot,
.carousel-dot,
.hero-carousel-dot,
.console-dots > * {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  aspect-ratio: 1 / 1 !important;
}
.color-picker-menu { flex-wrap: nowrap !important; }
.color-picker-menu .color-dot { flex: 0 0 auto !important; }

/* ── 14. Softer, on-brand tap feedback instead of the default grey/blue flash ─── */
a, button, .button, [role="button"], input, select, textarea, label, summary {
  -webkit-tap-highlight-color: rgba(139, 92, 246, .18);
}

/* ── 15. Sticky announcement/top bar respects the iOS notch (safe-area) ───────── */
@supports (padding: max(0px)) {
  .announcement {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
}

/* ── 16. On small phones, let button/action rows wrap instead of overflowing ──── */
@media (max-width: 480px) {
  .hero-actions, .wizard-actions, .cta-actions, .subhero-panel .hero-actions { flex-wrap: wrap; }
  h1 { line-height: 1.15; }
  /* Content-card grids collapse to one clean column … */
  .grid-3, .pricing-grid, .apps-grid { grid-template-columns: 1fr !important; }
}

/* ── 16b. … but the stat/number grids stay a compact 2×2 on phones ────────────── */
@media (max-width: 640px) {
  .stats-showcase, .geo-stats-panel { grid-template-columns: 1fr 1fr !important; }
  .geo-stats-panel .geo-portfolio-card { grid-column: 1 / -1 !important; }
}

/* ── 17. Momentum scrolling for any horizontally-scrollable strip ─────────────── */
.clients-track-wrapper, .tech-marquee-section, [data-scroll-x] {
  -webkit-overflow-scrolling: touch;
}

/* ── 18. Media never spills out of rounded parents; picture behaves like img ──── */
picture { display: inline-block; max-width: 100%; }

/* ── 19. Homepage hero banner: hide the prev/next arrows, keep the dots ───────── */
.hero-carousel-prev, .hero-carousel-next { display: none !important; }

/* ── 20. Consistent form controls everywhere ──────────────────────────────────── */
input, select, textarea, button { font-family: inherit; }
input, select, textarea { max-width: 100%; }

/* ── 21. Modals / dialogs / popups never exceed the viewport ──────────────────── */
.modal, .modal-container, [role="dialog"], .popup, .lightbox, .mh-modal {
  max-width: min(96vw, 720px); max-height: 92vh;
}

/* ── 22. Long emails / links / IDs wrap inside cells & cards ──────────────────── */
td, th, .content-card, .card, .stat-item, .geo-point { overflow-wrap: anywhere; }

/* ── 23. Comfortable reading rhythm on phones ─────────────────────────────────── */
@media (max-width: 640px) {
  p, li { line-height: 1.75; }
  .page-title, h1 { font-size: clamp(1.4rem, 6vw, 2rem); }
}

/* ── 24. Subtle placeholder for images while they decode (no layout jump) ─────── */
img[loading="lazy"] { background: rgba(255, 255, 255, .02); }

/* ── 25. Bigger, easier hit areas for icon-only buttons on touch ──────────────── */
@media (hover: none) and (pointer: coarse) {
  .msg-attach-btn, .msg-menu-btn, .msg-back, [aria-label] { min-height: 42px; }
}


/* v277 Lighthouse/mobile polish: keep visual dots small, but expose a larger tap area. */
.testimonial-dot,
.carousel-dot,
.hero-carousel-dot {
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  min-height: 10px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  position: relative !important;
  display: inline-flex !important;
}
.testimonial-dot::after,
.carousel-dot::after,
.hero-carousel-dot::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 999px;
}
@media (hover: none) and (pointer: coarse) {
  .testimonial-dot,
  .carousel-dot,
  .hero-carousel-dot { min-height: 10px !important; }
  a, button, [role="button"], summary { touch-action: manipulation; }
}
img:not([width]):not(.sp-bg):not(.hero-slide img) { height: auto; }

/* v277 home heading-order helper: result title is a paragraph semantically, styled as the prior subheading. */
.wizard-result-title {
  margin: 0 0 10px;
  color: var(--gold, #f4cd55);
  font-weight: 800;
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  line-height: 1.35;
}

/* ── Blog category badge — branded pill (was unstyled plain text). Distinct from
   the white body copy. Colour driven by --cat-color (set inline by the dynamic
   renderer from the backend-managed category config); falls back to per-[data-cat]
   palette for static pages, then on-brand gold. ── */
.blog-category {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 999px;
  color: var(--cat-color, #f4cd55);
  background: rgba(244, 205, 85, 0.12); /* fallback for browsers without color-mix */
  background: color-mix(in srgb, var(--cat-color, #f4cd55) 14%, transparent);
  border: 1px solid rgba(244, 205, 85, 0.30); /* fallback */
  border: 1px solid color-mix(in srgb, var(--cat-color, #f4cd55) 32%, transparent);
  margin-bottom: 12px;
  line-height: 1.2;
  transition: transform .2s ease, background .2s ease;
}
.blog-card:hover .blog-category { transform: translateY(-1px); }
/* Static-page fallback palette — applies ONLY when the renderer did NOT set an
   inline --cat-color (so an admin's custom colour always wins on dynamic cards). */
.blog-category[data-cat="messaging"]:not([style*="--cat-color"]), .blog-category[data-cat="whatsapp"]:not([style*="--cat-color"]) { color:#25d366; background:rgba(37,211,102,.12); border-color:rgba(37,211,102,.30); }
.blog-category[data-cat="social-media"]:not([style*="--cat-color"]), .blog-category[data-cat="social"]:not([style*="--cat-color"]) { color:#a855f7; background:rgba(168,85,247,.12); border-color:rgba(168,85,247,.30); }
.blog-category[data-cat="platform"]:not([style*="--cat-color"]) { color:#00d4ff; background:rgba(0,212,255,.12); border-color:rgba(0,212,255,.30); }
.blog-category[data-cat="ai"]:not([style*="--cat-color"]), .blog-category[data-cat="automation"]:not([style*="--cat-color"]) { color:#22d3ee; background:rgba(34,211,238,.12); border-color:rgba(34,211,238,.30); }
.blog-category[data-cat="advertising"]:not([style*="--cat-color"]), .blog-category[data-cat="ads"]:not([style*="--cat-color"]) { color:#f97316; background:rgba(249,115,22,.12); border-color:rgba(249,115,22,.30); }

/* ── Blog card body: excerpt in a branded tone (was flat white), Read More on-brand
   gold, author line subtle. Clearer hierarchy: white title → lavender excerpt →
   gold CTA. ── */
.blog-card .blog-card-excerpt { color: #c4b5fd; opacity: .92; }
.blog-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.blog-card .read-more {
  color: #f4cd55; font-weight: 800; text-decoration: none; letter-spacing: .3px;
  display: inline-flex; align-items: center; gap: 6px; transition: gap .2s ease, color .2s ease;
}
.blog-card .read-more:hover { color: #ffd766; gap: 11px; }
.blog-card-author { font-size: .8rem; color: #94a3b8; text-decoration: none; font-weight: 600; transition: color .2s ease; }
.blog-card-author:hover { color: #f4cd55; }

/* ── Numbered blog pager (6 per page). ── */
.blog-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 34px auto 8px; }
.blog-pager-btn {
  min-width: 42px; height: 42px; padding: 0 12px; border-radius: 11px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
  color: #cbd5e1; font-weight: 800; font-size: .95rem; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.blog-pager-btn:hover:not([disabled]):not(.is-current) { background: rgba(244,205,85,.10); border-color: rgba(244,205,85,.45); color: #f4cd55; transform: translateY(-1px); }
.blog-pager-btn.is-current { background: linear-gradient(135deg,#f4cd55,#e0b843); border-color: #f4cd55; color: #10192e; cursor: default; }
.blog-pager-btn[disabled] { opacity: .4; cursor: not-allowed; }
.blog-pager-gap { color: #64748b; padding: 0 4px; font-weight: 700; }
/* Phones: a compact pager so it never dominates the screen (was 42px tiles). */
@media (max-width: 600px) {
  .blog-pager { gap: 5px; margin: 22px auto 4px; }
  .blog-pager-btn { min-width: 32px; height: 32px; padding: 0 6px; border-radius: 9px; font-size: .78rem; }
  .blog-pager-gap { padding: 0 2px; font-size: .8rem; }
}

/* ── Brand-harmonised chips for creator fields/interests (Discover cards +
   creator profiles). Cycles through the site palette so tags feel designed,
   not grey. Pure CSS (nth-of-type), no JS. ── */
.creator-tag:nth-of-type(6n+1), .profile-tag:nth-of-type(6n+1) { background: rgba(244,205,85,.12); border-color: rgba(244,205,85,.32); color: #f4cd55; }
.creator-tag:nth-of-type(6n+2), .profile-tag:nth-of-type(6n+2) { background: rgba(34,211,238,.12); border-color: rgba(34,211,238,.32); color: #22d3ee; }
.creator-tag:nth-of-type(6n+3), .profile-tag:nth-of-type(6n+3) { background: rgba(168,85,247,.14); border-color: rgba(168,85,247,.32); color: #c084fc; }
.creator-tag:nth-of-type(6n+4), .profile-tag:nth-of-type(6n+4) { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.32); color: #4ade80; }
.creator-tag:nth-of-type(6n+5), .profile-tag:nth-of-type(6n+5) { background: rgba(251,113,133,.12); border-color: rgba(251,113,133,.32); color: #fb7185; }
.creator-tag:nth-of-type(6n+6), .profile-tag:nth-of-type(6n+6) { background: rgba(96,165,250,.12); border-color: rgba(96,165,250,.32); color: #60a5fa; }

/* ═══ Day / light theme — brand BLUE + GREEN accent (never yellow/gold) ═══════
   The white "day mode" (data-color=light) must use our identity blue + green
   instead of the dark-mode gold. Redefining --gold/--gold-soft recolours every
   var(--gold) accent (stats, links, numbers); the .button-gold override catches
   the hardcoded-yellow CTA gradient (Login, Start Your Project, Book a Call…). */
:root[data-color="light"],
[data-color="light"] {
  --gold: #2563eb;              /* primary accent → brand blue  */
  --gold-soft: #059669;         /* hover / secondary → brand green */
  --gold-strong: #1d4ed8;
  --line-strong: rgba(37, 99, 235, 0.28);
}
[data-color="light"] .button-gold,
[data-color="light"] .btn-gold {
  background: linear-gradient(135deg, #2563eb, #059669) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.22) !important;
}
[data-color="light"] .button-gold:hover,
[data-color="light"] .btn-gold:hover {
  filter: brightness(1.05);
  box-shadow: 0 12px 32px rgba(5, 150, 105, 0.30) !important;
}
/* Bespoke pages that hardcode the brand yellow (#f4cd55) — recolour in day mode. */
[data-color="light"] .exp-stat b,
[data-color="light"] .exp-hero-badge,
[data-color="light"] [style*="#f4cd55"] {
  color: #2563eb !important;
}

/* ── Checkboxes & radios: undo the blanket appearance reset ──────────────────
   mashhor-platform's reset applies `appearance:none` to EVERY input. On a
   checkbox that strips the box and the tick, leaving an invisible ~18px gap that
   can never show a checkmark — the reported onboarding bug where "I agree to the
   Terms" looked dead (the click did register; nothing was ever drawn).
   Safe to restore globally: components that draw their own control (e.g.
   .service-check on the contact pages) declare `appearance:none` themselves at
   higher specificity and keep winning. */
input[type="checkbox"],
input[type="radio"] {
    appearance: auto;
    -webkit-appearance: auto;
    cursor: pointer;
}
input[type="checkbox"] { -webkit-appearance: checkbox; }
input[type="radio"]    { -webkit-appearance: radio; }

/* ── Mobile polish: shared sub-hero used by /portfolio + /services/* ──────────
   These pages (portfolio, influencer-marketing, and the templated service pages)
   share .subhero-panel / .trust-badge-row / .subhero-metrics / .hero-actions.
   On phones the badges stacked one-per-line and the CTAs/metrics felt cramped —
   this tidies all of them at once. Additive, mobile-only. */
@media (max-width: 768px) {
  .subhero-panel { padding: 24px 18px !important; }
  .subhero-panel h1 { font-size: clamp(1.5rem, 6vw, 1.9rem) !important; line-height: 1.28 !important; }
  .subhero-panel .lead { font-size: 0.95rem !important; line-height: 1.7 !important; }

  /* Trust badges wrap inline (chips), never one-per-row. */
  .trust-badge-row { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
  .trust-badge { width: auto !important; max-width: none !important; flex: 0 0 auto !important;
    font-size: 0.76rem !important; padding: 7px 13px !important; white-space: nowrap !important; }

  /* Metrics: clean single-column list with comfortable spacing. */
  .subhero-metrics { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; margin-top: 20px !important; }
  .subhero-metric { display: flex !important; align-items: baseline !important; gap: 10px !important; text-align: start !important; }
  .subhero-metric b { font-size: 1.55rem !important; flex: 0 0 auto !important; }
  .subhero-metric span { font-size: 0.86rem !important; }

  /* Hero CTAs: full-width, stacked, easy to tap. */
  .hero-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; width: 100% !important; }
  .hero-actions > a, .hero-actions .button, .hero-actions .ghost-button, .hero-actions .button-gold {
    width: 100% !important; text-align: center !important; justify-content: center !important; }
}

/* On the influencer-marketing / discover-style pages the three metrics are short
   (500+ / 7 / 50M+) and read best as a compact 3-up row — like the Discover stats. */
@media (max-width: 768px) {
  .subhero-metrics.metrics-3up { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; text-align: center !important; }
  .subhero-metrics.metrics-3up .subhero-metric { flex-direction: column !important; align-items: center !important; gap: 2px !important; }
  .subhero-metrics.metrics-3up .subhero-metric b { font-size: 1.35rem !important; }
  .subhero-metrics.metrics-3up .subhero-metric span { font-size: 0.72rem !important; }
}

/* ── Blog (/blog/insights) filter chips: a single swipeable row on mobile ─────
   They previously wrapped into a crowded, center-aligned block. One horizontal
   scroll row reads far cleaner and matches the academy filter tabs. */
@media (max-width: 768px) {
  .new-page-scope .filters {
    flex-wrap: nowrap !important; justify-content: flex-start !important;
    max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important;
    padding: 2px 2px 8px !important; margin-bottom: 30px !important; scroll-snap-type: x proximity !important;
  }
  .new-page-scope .filters::-webkit-scrollbar { display: none !important; }
  .new-page-scope .filter-btn { flex: 0 0 auto !important; white-space: nowrap !important; scroll-snap-align: start !important; }
}

/* ── Seller service cards (/influencers/celebrity-services) ───────────────────
   Guard against the 300px min-track overflowing very narrow phones. */
@media (max-width: 768px) {
  .services-grid { grid-template-columns: 1fr !important; }
  .service-card { min-width: 0 !important; }
}

/* ── Consultation booking wizard (/book-call, rendered by consultation-booking.js) ─
   Tidy the type options + duration buttons on phones: full-width stacked options,
   equal-width duration pills, and horizontally-scrollable day/time strips. */
@media (max-width: 560px) {
  .cb-wrap { padding: 18px 14px !important; }
  .cb-steps { gap: 8px !important; }
  .cb-modes { grid-template-columns: 1fr !important; gap: 12px !important; }
  .cb-durs { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .cb-durs .cb-pill, .cb-durs .cb-opt, .cb-durs button { width: 100% !important; text-align: center !important; }
  .cb-days, .cb-times { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; gap: 8px !important; padding-bottom: 6px !important; }
  .cb-days::-webkit-scrollbar, .cb-times::-webkit-scrollbar { display: none !important; }
  .cb-day, .cb-times > * { flex: 0 0 auto !important; }
  .cb-actions { flex-direction: column-reverse !important; gap: 10px !important; }
  .cb-actions .cb-btn, .cb-actions .cb-next, .cb-actions .cb-back, .cb-actions .cb-submit { width: 100% !important; }
}