/* Info pages (About, Contact, FAQ, Privacy, Terms, How to buy) in the app's look
   (Roz/lib/features/info, shared/info_design.dart): light-blue page, a soft hero card,
   flat white cards (radius 16, #E2E8F0), round icon bubbles, primary buttons (radius 12).
   CSS only: the app reads these pages with CSS selectors, so no markup changes. */
body { background: #F3F8FE; }

/* Hero: a soft tinted card, dark title, muted subtitle — no decorative gradients. */
.about-hero, .contact-hero, .privacy-hero, .faq-header, .terms-page-header {
  background: #E3F2FD !important; color: #0F172A; box-shadow: none;
}
.about-hero::before, .faq-header-shape { display: none; }
.about-title, .contact-title, .privacy-title, .faq-header h1, .terms-page-header h1 { color: #0F172A !important; font-weight: 800; }
.about-subtitle, .contact-subtitle, .privacy-subtitle, .faq-header .lead, .terms-page-header .lead { color: #475569 !important; }

/* Cards */
.stat-card, .story-card, .team-card, .value-card, .timeline-content,
.contact-card, .contact-form-card, .faq-card,
.accordion-item, .faq-categories, .faq-search .search-wrapper,
.privacy-card, .privacy-nav, .data-type-item, .usage-item, .sharing-item, .security-item, .right-item, .cookie-item,
.terms-card, .terms-nav, .terms-section, .faq-section,
.how-to-buy-card, .company-card, .video-container {
  background: #FFFFFF; border: 1px solid #E2E8F0 !important; border-radius: 16px !important; box-shadow: none !important;
}
.stat-card:hover, .team-card:hover, .value-card:hover, .contact-card:hover, .faq-card:hover,
.privacy-card:hover, .terms-card:hover, .terms-section:hover, .how-to-buy-card:hover, .company-card:hover {
  transform: none; box-shadow: 0 4px 18px rgba(21, 101, 192, .08) !important;
}
.stat-card::before, .story-card::before, .value-card::before, .team-image::before { display: none; }
.privacy-card-header { background: #FFFFFF !important; color: #0F172A !important; border-bottom: 1px solid #E2E8F0; }
.highlight-box { background: #E3F2FD !important; border-color: #1E88E5 !important; border-radius: 12px; color: #0F172A; }

/* Round icon bubbles: tint background, primary icon. */
.stat-icon, .value-icon, .contact-icon, .faq-icon, .map-icon, .privacy-icon, .data-type-icon, .security-icon, .terms-icon,
.step-number, .company-step-number {
  background: #E3F2FD !important; color: #1E88E5 !important; box-shadow: none !important; border-radius: 999px;
}
.stat-number, .value-title, .team-name, .timeline-title, .contact-method-title, .faq-title, .form-title { color: #0F172A; }
.stat-label, .value-description, .team-position, .team-description, .timeline-description, .form-subtitle { color: #475569; }
.timeline::before, .timeline-dot { background: #1E88E5 !important; }

/* Side menus (FAQ categories, privacy/terms contents). */
.category-item, .terms-nav .nav-link, .privacy-nav .nav-link { border-radius: 12px; color: #0F172A; }
.category-item.active, .category-item:hover,
.terms-nav .nav-link.active, .terms-nav .nav-link:hover,
.privacy-nav .nav-link.active, .privacy-nav .nav-link:hover { background: #E3F2FD !important; color: #1E88E5 !important; }

/* Buttons and fields */
.cta-section { background: #1E88E5 !important; border-radius: 16px; }
.cta-btn, .submit-btn, .back-to-top-btn { border-radius: 12px !important; box-shadow: none !important; transform: none !important; }
.submit-btn, .back-to-top-btn { background: #1E88E5 !important; border: 0; color: #FFFFFF !important; }
.submit-btn:hover, .back-to-top-btn:hover { background: #1565C0 !important; }
.contact-form-card .form-control, .contact-form-card .form-select, .faq-search input {
  border: 1px solid #E2E8F0; border-radius: 12px;
}
.contact-form-card .form-control:focus, .contact-form-card .form-select:focus, .faq-search input:focus {
  border-color: #1E88E5; box-shadow: 0 0 0 3px rgba(30, 136, 229, .15);
}
.accordion-button:not(.collapsed) { background: #E3F2FD; color: #1565C0; box-shadow: none; }
.accordion-button:focus { box-shadow: 0 0 0 3px rgba(30, 136, 229, .15); }

/* How to buy: flat title colour instead of gradient text. */
.how-to-buy-section .text-gradient, .company-section .text-gradient, section.bg-light .text-gradient {
  background: none !important; -webkit-text-fill-color: currentColor; color: #0F172A !important; animation: none !important;
}
.how-to-buy-section, .company-section { background: #F3F8FE !important; }
section.bg-light { background: #E3F2FD !important; }
.video-play-btn { background: #1E88E5 !important; box-shadow: none !important; animation: none !important; }

/* 7p: About's links section, like the app (about_page.dart:291-332, _ListTileCard and _ContactCard):
   a centred heading, white cards with an icon bubble and a chevron in the reading direction, then the
   contact card with the app's own gradient (DDEBFF → white, end → start). */
.about-links { padding: 0 0 48px; }
.about-links__inner { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.about-links__heading { text-align: center; margin-bottom: 4px; }
.about-links__heading h2 { margin: 0; font-size: 1.15rem; font-weight: 900; color: #0F172A; }
.about-links__heading p { margin: 4px 0 0; font-size: .8rem; color: #475569; line-height: 1.5; }
.about-links__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.about-link { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 16px; color: #0F172A; text-decoration: none; }
.about-link:hover { border-color: #1E88E5; color: #0F172A; }
.about-link__bubble { width: 48px; height: 48px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #FFFFFF; border: 3px solid #E3F2FD; color: #1E88E5; font-size: 1.1rem; }
.about-link__bubble--lg { width: 54px; height: 54px; font-size: 1.25rem; }
.about-link__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.about-link__text strong { font-size: .9rem; font-weight: 900; }
.about-link__text small { font-size: .78rem; color: #475569; line-height: 1.5; }
.about-link__chevron { flex: none; font-size: .8rem; color: #475569; }
[dir="rtl"] .about-link__chevron { transform: scaleX(-1); }
.about-link--contact { padding: 16px; background: linear-gradient(to left, #DDEBFF, #FFFFFF); }
[dir="rtl"] .about-link--contact { background: linear-gradient(to right, #DDEBFF, #FFFFFF); }
.about-link--contact strong { font-size: .95rem; }
.about-link--contact .about-link__chevron { color: #1E88E5; }

/* 7p: FAQ category chips like the app (faq_page.dart:297-403) instead of the side list. The list stays in the
   markup (the app reads .category-list), hidden here; the questions take the full width. The selected chip has
   the app's gradient (4A95FF → 1B5ED6, left → right). */
.faq-wrapper > .container > .row > .col-lg-3 { display: none; }
.faq-wrapper > .container > .row > .col-lg-9 { flex: 0 0 100%; max-width: 100%; }
.faq-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin-bottom: 4px; scrollbar-width: thin; }
.faq-chip { flex: none; height: 38px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 20px;
    border: 1px solid #E2E8F0; background: #FFFFFF; color: #1565C0; font-size: .78rem; font-weight: 700; box-shadow: 0 4px 10px rgba(43, 123, 240, .10); }
.faq-chip i { font-size: .95rem; }
.faq-chip:hover { border-color: #1E88E5; }
.faq-chip.is-selected { border-color: transparent; color: #FFFFFF; background: linear-gradient(to right, #4A95FF, #1B5ED6); }
.faq-section.is-chip-off { display: none !important; }