/* ==========================================================================
   Site UI: header, menu, footer, newsletter, PWA
   Colours come from CSS variables printed by includes/header.php / footer.php
   ========================================================================== */

/* ---------- Header shell ---------- */
.ui-header { position: relative; z-index: 1100; background: var(--ui-header-bg, #fff); color: var(--ui-header-text, #111827);
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 8px 24px rgba(15,23,42,.05); font-family: inherit; display: block; padding: 0; }
.ui-header.is-sticky { position: sticky; top: 0; }
.ui-header a { color: inherit; text-decoration: none; }
.ui-top-inner { max-width: 1500px; margin: 0 auto; padding: 14px 28px; display: flex; align-items: center; gap: 18px; }
.ui-slot { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ui-slot-left, .ui-slot-right { flex: 1 1 0; }
.ui-slot-right { justify-content: flex-end; }
.ui-slot-center { flex: 0 0 auto; justify-content: center; }
.header-left { display: flex; align-items: center; min-width: 0; }
.header-right { display: flex; align-items: center; gap: 12px; }
.ui-logo-right .ui-slot-right { gap: 22px; }
/* centred logo: three columns that never overlap (side columns grow to fit their content) */
.ui-logo-center .ui-top-inner { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); }
.ui-logo-center .ui-slot-left, .ui-logo-center .ui-slot-right { flex: none; }
@media (max-width: 1400px) { .ui-logo-center .ui-site-btn span { display: none; } .ui-logo-center .ui-site-btn { padding: 9px 12px; } }

.brand-link { display: inline-flex; align-items: center; gap: 12px; min-width: 0; color: inherit; }
.header-logo { max-width: var(--ui-logo-width, 176px); max-height: 74px; width: auto; height: auto; object-fit: contain; display: block; }
.brand-copy { display: grid; gap: 2px; min-width: 0; }
.has-header-logo .brand-copy { display: none; }
.header-title { margin: 0; font-size: 1.3rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-tagline { font-size: 12px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* hamburger (only used on mobile; desktop uses the menu bar) */
.mobile-menu-toggle { display: none; width: 42px; height: 42px; padding: 0; border-radius: 12px; border: 1px solid rgba(0,0,0,.1);
  background: transparent; color: inherit; font-size: 1.1rem; cursor: pointer; align-items: center; justify-content: center; flex-shrink: 0; }
.ui-theme-brand .mobile-menu-toggle { border-color: rgba(255,255,255,.25); }
.mobile-menu-toggle i { pointer-events: none; display: block; line-height: 1; }

/* date chip + calendar */
.ui-date-wrap { position: relative; }
.ui-date-btn { display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px; border-radius: 10px; border: 1px solid rgba(0,0,0,.1);
  background: rgba(0,0,0,.02); color: inherit; font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; }
.ui-theme-brand .ui-date-btn { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.08); }
.ui-date-btn:hover { border-color: var(--ui-accent); }
.ui-date-caret { font-size: 11px; opacity: .7; }
.ui-calendar { position: absolute; top: calc(100% + 10px); left: 0; width: 304px; background: #fff; color: #111827; border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15,23,42,.22); border: 1px solid rgba(15,23,42,.08); padding: 14px; z-index: 1300; }
.ui-calendar[hidden] { display: none; }
.ui-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-weight: 700; }
.ui-cal-head button { width: 32px; height: 32px; border: 0; border-radius: 8px; background: #f3f4f6; cursor: pointer; color: #111827; }
.ui-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: 13px; }
.ui-cal-dow { font-size: 11px; font-weight: 700; color: #6b7280; padding: 4px 0; }
.ui-cal-day { aspect-ratio: 1; border: 0; border-radius: 8px; background: transparent; color: #9ca3af; font: inherit; cursor: default; }
.ui-cal-day.has-ed { background: #fdecee; color: var(--ui-accent); font-weight: 700; cursor: pointer; }
.ui-cal-day.has-ed:hover { background: var(--ui-accent); color: #fff; }
.ui-cal-day.is-today { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
.ui-cal-list { margin-top: 10px; display: grid; gap: 6px; }
.ui-cal-list a { display: block; padding: 9px 12px; border-radius: 10px; background: #f9fafb; color: #111827 !important; font-size: 13px; font-weight: 600; }
.ui-cal-list a:hover { background: #fdecee; }
.ui-cal-msg { margin-top: 8px; font-size: 12px; color: #6b7280; text-align: center; }

/* social icons */
.ui-social { display: flex; align-items: center; gap: 8px; }
.ui-social-btn { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
  background: transparent; color: inherit; transition: transform .2s, background .2s, color .2s; }
.ui-social-btn:hover { transform: translateY(-2px); }
/* "a.ui-social-*" keeps these above the generic ".ui-header a { color: inherit }" rule */
.ui-header a.ui-social-whatsapp { color: #25d366; } .ui-header a.ui-social-whatsapp:hover { background: #25d366; }
.ui-header a.ui-social-facebook:hover { background: #1877f2; } .ui-header a.ui-social-twitter:hover { background: #000; }
.ui-header a.ui-social-instagram:hover { background: linear-gradient(45deg,#f09433,#dc2743,#bc1888); }
.ui-header a.ui-social-youtube:hover { background: #f00; } .ui-header a.ui-social-telegram:hover { background: #0088cc; } .ui-header a.ui-social-linkedin:hover { background: #0a66c2; }
.ui-header a.ui-social-btn:hover { color: #fff; }

/* buttons */
.ui-subscribe-btn, .ui-site-btn, .login-btn, .header-download-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px;
  border-radius: 999px; font-weight: 700; font-size: 14px; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: all .2s; }
.ui-subscribe-btn { background: var(--ui-accent); color: #fff !important; border: 1px solid var(--ui-accent); }
.ui-subscribe-btn:hover { filter: brightness(.92); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.18); }
.ui-site-btn, .login-btn, .header-download-btn { background: transparent; color: inherit; border: 1px solid rgba(0,0,0,.18); }
.ui-theme-brand .ui-site-btn, .ui-theme-brand .login-btn, .ui-theme-brand .header-download-btn { border-color: rgba(255,255,255,.35); }
.ui-site-btn:hover, .login-btn:hover, .header-download-btn:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
.ui-site-btn i { font-size: 12px; }

/* user dropdown (unchanged behaviour) */
.user-menu { position: relative; }
.user-menu-toggle { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.04); border: 1px solid rgba(0,0,0,.12); color: inherit; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.user-avatar, .user-avatar-placeholder { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; background: rgba(0,0,0,.12); display: flex; align-items: center; justify-content: center; }
.user-name { font-weight: 600; font-size: 14px; }
.user-dropdown { position: absolute; top: calc(100% + 10px); right: 0; background: #fff; color: #111827; border-radius: 16px; box-shadow: 0 24px 44px rgba(10,24,48,.18); min-width: 250px; display: none; z-index: 1400; border: 1px solid rgba(196,208,228,.55); }
.user-dropdown.active { display: block; }
.dropdown-header { padding: 16px; }
.dropdown-user-info strong { display: block; margin-bottom: 4px; } .dropdown-user-info small { display: block; color: #666; margin-bottom: 8px; }
.user-role-badge { display: inline-block; padding: 3px 10px; background: var(--ui-accent); color: #fff; border-radius: 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.dropdown-divider { height: 1px; background: #eee; margin: 5px 0; }
.dropdown-item { display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: #333 !important; }
.dropdown-item:hover { background: #f3f7fc; } .dropdown-item i { width: 20px; color: var(--ui-accent); }

/* ---------- Menu bar (below header) ---------- */
.ui-menubar { position: relative; border-top: 1px solid rgba(0,0,0,.07); background: var(--ui-header-bg, #fff); display: block; padding: 0; }
.ui-theme-brand .ui-menubar { border-top-color: rgba(255,255,255,.14); }
.ui-menubar-inner { max-width: 1500px; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; gap: 8px; }
.ui-menu-scroll { flex: 1; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
.ui-menu-scroll::-webkit-scrollbar { display: none; }
.nav-menu { display: flex; list-style: none; margin: 0; padding: 0; gap: 6px; align-items: center; justify-content: center; min-width: max-content; margin-inline: auto; }
.nav-link { display: block; padding: 15px 16px; font-size: 18px; font-weight: 500; white-space: nowrap; color: inherit; position: relative; transition: color .2s; border-radius: 0; background: none; border: 0; }
.nav-link i { margin-right: 6px; font-size: .9em; }
.nav-link:hover { color: var(--ui-accent); }
.ui-menu-tabs .nav-link.is-active, .ui-menu-tabs .nav-link[aria-current="page"] { font-weight: 700; }
.ui-menu-tabs .nav-link.is-active::after, .ui-menu-tabs .nav-link[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 3px; border-radius: 3px; background: var(--ui-accent); }
.ui-menu-pills .nav-link { margin: 8px 0; padding: 9px 16px; border-radius: 999px; font-size: 15px; font-weight: 600; }
.ui-menu-pills .nav-link:hover { background: rgba(0,0,0,.06); }
.ui-menu-pills .nav-link.is-active, .ui-menu-pills .nav-link[aria-current="page"] { background: var(--ui-accent); color: #fff; }
.ui-menu-arrow { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); background: transparent; color: inherit; cursor: pointer; font-size: 12px; }
.ui-menu-arrow[hidden] { display: none; }
.ui-menu-arrow:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
.ui-menu-handle { position: absolute; left: 50%; bottom: -17px; transform: translateX(-50%); width: 132px; height: 18px; border: 0; background: var(--ui-header-bg, #fff); color: inherit;
  border-radius: 0 0 14px 14px; box-shadow: 0 6px 12px rgba(15,23,42,.1); cursor: pointer; font-size: 12px; line-height: 1; z-index: 3; }
.ui-menu-handle i { transition: transform .2s; }
.ui-menubar.is-expanded .ui-menu-handle i { transform: rotate(180deg); }
.ui-menubar.is-expanded .ui-menu-scroll { overflow: visible; }
.ui-menubar.is-expanded .nav-menu { flex-wrap: wrap; min-width: 0; justify-content: center; padding: 6px 0 12px; }
.ui-menubar.is-expanded .ui-menu-arrow { display: none; }
.ui-menubar.is-expanded .nav-link.is-active::after { display: none; }

/* ---------- Header: responsive ---------- */
@media (min-width: 769px) { .mobile-menu-toggle { display: none !important; } }
@media (max-width: 1100px) {
  .ui-site-btn span { display: none; } .ui-site-btn { padding: 9px 12px; }
  .ui-top-inner { padding: 12px 18px; gap: 12px; }
}
@media (max-width: 900px) { .ui-social-btn:not(.ui-social-whatsapp) { display: none; } }
@media (max-width: 768px) {
  .ui-top-inner { padding: 8px 12px; gap: 8px; min-height: 62px; position: relative; }
  .mobile-menu-toggle { display: inline-flex; }
  .ui-slot { gap: 8px; }
  .ui-slot-left { flex: 0 0 auto; }
  .ui-slot-right { flex: 1 1 auto; }
  .header-logo { max-width: min(46vw, var(--ui-logo-width-compact, 132px)); max-height: 52px; }
  /* logo always centred on phones for left/center; "right" keeps the right edge */
  .ui-logo-left .ui-slot-left .header-left,
  .ui-logo-center .ui-slot-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; }
  .ui-logo-left .ui-slot-left .header-left { margin: 0; }
  .ui-date-text { display: none; } .ui-date-btn { padding: 9px 11px; } .ui-date-caret { display: none; }
  .ui-calendar { position: fixed; left: 12px; right: 12px; top: 70px; width: auto; }
  .header-right .ui-social, .header-right .ui-site-btn { display: none; }
  .ui-subscribe-btn { padding: 8px 12px; font-size: 13px; }
  .login-btn span, .user-name { display: none; } .login-btn { padding: 9px 12px; }
  /* phones: the menu lives in the hamburger sidebar (same as before) */
  .ui-menubar { display: none; }
  .nav-link { font-size: 16px; padding: 12px 12px; }
}

/* ---------- Mobile sidebar (re-used from public-ui.js) ---------- */
.mobile-sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 9500; opacity: 0; transition: opacity .18s ease; }
.mobile-sidebar-backdrop[hidden] { display: none; }
.mobile-sidebar-backdrop.open { opacity: 1; }
.mobile-sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: min(360px, 86vw); background: #fff; color: #111827; z-index: 9501; transform: translateX(-100%);
  transition: transform .22s ease; box-shadow: 0 20px 60px rgba(0,0,0,.35); display: flex; flex-direction: column; }
.mobile-sidebar.open { transform: translateX(0); }
.mobile-sidebar[aria-hidden="true"] { pointer-events: none; } .mobile-sidebar.open { pointer-events: auto; }
.mobile-sidebar-header { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(0,0,0,.08); }
.mobile-sidebar-title { font-weight: 800; font-size: 16px; }
.mobile-sidebar-close { width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(0,0,0,.08); background: #fff; color: #111827; cursor: pointer; }
.mobile-sidebar-content { padding: 14px 16px 20px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
.mobile-sidebar-section { background: #f9fafb; border: 1px solid rgba(0,0,0,.06); border-radius: 14px; padding: 12px; }
.mobile-sidebar-section[hidden] { display: none; }
.mobile-sidebar-section-title { font-size: 12px; font-weight: 800; letter-spacing: .6px; color: #4b5563; text-transform: uppercase; margin-bottom: 10px; }
.mobile-sidebar .nav-menu { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.mobile-sidebar .nav-menu > li { width: 100%; }
.mobile-sidebar .nav-link, .mobile-sidebar .header-download-btn, .mobile-sidebar .login-btn, .mobile-sidebar .user-menu-toggle, .mobile-sidebar .ui-subscribe-btn, .mobile-sidebar .ui-site-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; min-height: 52px; padding: 12px 18px; border-radius: 14px; color: #111827 !important; background: #fff; border: 1px solid rgba(0,0,0,.08); font-size: 15px; font-weight: 600; }
.mobile-sidebar .nav-link::after { display: none !important; }
.mobile-sidebar .nav-link.is-active { border-color: var(--ui-accent); color: var(--ui-accent) !important; }
.mobile-sidebar .ui-subscribe-btn { background: var(--ui-accent); color: #fff !important; border-color: var(--ui-accent); justify-content: center; }
.mobile-sidebar .header-right { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.mobile-sidebar .ui-social { display: flex !important; flex-wrap: wrap; gap: 10px; }
.mobile-sidebar .ui-social-btn { display: inline-flex !important; width: 44px; height: 44px; background: #f3f4f6; border-radius: 12px; }
.mobile-sidebar .ui-site-btn span, .mobile-sidebar .login-btn span, .mobile-sidebar .user-name { display: inline !important; }
.mobile-sidebar .ui-subscribe-btn, .mobile-sidebar .ui-site-btn { display: flex !important; }
.mobile-sidebar .header-right .ui-social { order: 3; }
.mobile-sidebar a { text-decoration: none; }
.mobile-sidebar a.ui-social-whatsapp { color: #25d366 !important; } .mobile-sidebar a.ui-social-facebook { color: #1877f2 !important; } .mobile-sidebar a.ui-social-twitter { color: #000 !important; }
.mobile-sidebar a.ui-social-instagram { color: #e1306c !important; } .mobile-sidebar a.ui-social-youtube { color: #f00 !important; } .mobile-sidebar a.ui-social-telegram { color: #0088cc !important; } .mobile-sidebar a.ui-social-linkedin { color: #0a66c2 !important; }
.mobile-sidebar .user-dropdown { position: static; display: block; min-width: 0; margin-top: 10px; box-shadow: none; }

/* ==========================================================================
   Footer (modern)
   ========================================================================== */
.ui-footer { background: var(--ui-footer-bg, #1b1b1b); color: #fff; margin-top: auto; padding: 56px 28px 22px; font-family: inherit; }
.ui-footer a { color: inherit; text-decoration: none; }
.ui-footer-inner { max-width: 1500px; margin: 0 auto; }
.ui-footer-grid { display: grid; grid-template-columns: 1.15fr 1fr .8fr .9fr; gap: 44px; align-items: start; }
.ui-footer-title { margin: 0 0 22px; padding-bottom: 14px; font-size: 24px; font-weight: 800; position: relative; color: #fff; }
.ui-footer-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--ui-accent) 0 38%, rgba(255,255,255,.14) 38% 100%); }
.ui-footer-about summary { list-style: none; cursor: default; font-size: 20px; font-weight: 600; margin-bottom: 14px; }
.ui-footer-about summary::-webkit-details-marker { display: none; }
.ui-footer-about summary::before { content: "\25B8"; margin-right: 8px; font-size: 14px; }
.ui-footer-logo { max-height: 56px; max-width: 220px; object-fit: contain; margin-bottom: 14px; display: block; }
.ui-footer-about p { margin: 0 0 12px; line-height: 1.8; font-size: 16px; opacity: .92; }
.ui-footer-about strong { font-weight: 800; }

.ui-links-card { background: #fff; color: #111827; border-radius: 18px; padding: 16px; box-shadow: 0 18px 40px rgba(0,0,0,.3); }
.ui-links-card .ui-links-title { margin: 4px 0 14px; padding-left: 12px; border-left: 4px solid var(--ui-accent); font-size: 18px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #111827; }
.ui-link-row { display: flex; align-items: center; gap: 14px; padding: 14px 12px; border: 1px solid #eee; border-radius: 14px; margin-bottom: 10px; color: #111827 !important; transition: border-color .2s, transform .2s; }
.ui-link-row:last-child { margin-bottom: 0; }
.ui-link-row:hover { border-color: var(--ui-accent); transform: translateX(3px); }
.ui-link-ico { width: 44px; height: 44px; border-radius: 12px; background: #fdecee; color: var(--ui-accent); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; }
.ui-link-copy { flex: 1; min-width: 0; display: grid; }
.ui-link-copy strong { font-size: 16px; } .ui-link-copy small { color: #6b7280; font-size: 13px; }
.ui-link-chev { color: var(--ui-accent); }

.ui-footer-social { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
.ui-footer-social a { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: #111; font-size: 18px; transition: transform .2s; }
.ui-footer-social a:hover { transform: translateY(-3px); }
.ui-footer-social .s-facebook { background: #1877f2; color: #fff; } .ui-footer-social .s-twitter { background: #000; color: #fff; border: 1px solid #333; }
.ui-footer-social .s-instagram { background: linear-gradient(45deg,#f09433,#dc2743,#bc1888); color: #fff; } .ui-footer-social .s-youtube { background: #f00; color: #fff; }
.ui-footer-social .s-whatsapp { background: #25d366; color: #fff; } .ui-footer-social .s-telegram { background: #0088cc; color: #fff; } .ui-footer-social .s-linkedin { background: #0a66c2; color: #fff; }
.ui-install-btn { display: none; align-items: center; gap: 10px; background: #0b0b0b; color: #fff; border: 1px solid #2a2a2a; border-radius: 12px; padding: 12px 18px; font: inherit; font-weight: 700; cursor: pointer; }
.ui-install-btn.is-visible { display: inline-flex; }
.ui-install-btn:hover { border-color: var(--ui-accent); }

.ui-contact h4 { margin: 0 0 10px; font-size: 17px; font-weight: 800; }
.ui-contact-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; line-height: 1.6; font-size: 16px; }
.ui-contact-row i { color: var(--ui-accent); width: 18px; margin-top: 5px; flex: 0 0 18px; text-align: center; }
.ui-contact-row a:hover { text-decoration: underline; }

.ui-footer-bottom { margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); text-align: left; font-size: 15px; opacity: .85; }
.ui-footer-bottom a { color: var(--ui-accent); }
.ui-footer-bottom a:hover { text-decoration: underline; }
@media (max-width: 1100px) { .ui-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .ui-footer { padding: 40px 18px 18px; } .ui-footer-grid { grid-template-columns: 1fr; gap: 34px; } .ui-footer-title { font-size: 22px; } }

/* ---------- Install help modal + banner ---------- */
.ui-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); padding: 18px; }
.ui-modal[hidden] { display: none; }
.ui-modal-card { background: #fff; color: #111827; border-radius: 18px; padding: 24px; max-width: 420px; width: 100%; box-shadow: 0 30px 70px rgba(0,0,0,.4); }
.ui-modal-card h3 { margin: 0 0 10px; } .ui-modal-card ol { padding-left: 20px; line-height: 1.8; } .ui-modal-card button { margin-top: 10px; padding: 10px 18px; border: 0; border-radius: 999px; background: var(--ui-accent); color: #fff; font-weight: 700; cursor: pointer; }
.ui-pwa-banner { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 9990; background: #111827; color: #fff; border-radius: 16px; padding: 12px 14px 12px 18px;
  display: flex; align-items: center; gap: 14px; box-shadow: 0 18px 44px rgba(0,0,0,.35); max-width: calc(100vw - 24px); }
.ui-pwa-banner[hidden] { display: none; }
.ui-pwa-banner strong { display: block; font-size: 14px; } .ui-pwa-banner span { font-size: 12px; opacity: .75; }
.ui-pwa-banner button { border: 0; border-radius: 999px; padding: 9px 16px; font-weight: 700; cursor: pointer; }
.ui-pwa-banner .ui-pwa-yes { background: var(--ui-accent); color: #fff; } .ui-pwa-banner .ui-pwa-no { background: transparent; color: #fff; opacity: .7; }

/* ==========================================================================
   Newsletter page
   ========================================================================== */
.ui-nl-page { background: #f3f4f6; padding: 28px 16px 60px; }
.ui-nl-wrap { max-width: 1400px; margin: 0 auto; }
.ui-nl-card { background: #fff; border-radius: 28px; padding: 28px 28px 40px; box-shadow: 0 18px 50px rgba(15,23,42,.07); }
.ui-nl-back { display: inline-flex; align-items: center; gap: 8px; color: var(--ui-accent) !important; font-weight: 700; font-size: 20px; text-decoration: none; margin: 8px 0 30px 40px; }
.ui-nl-form { max-width: 400px; margin: 0 auto; }
.ui-nl-form h2 { font-size: 26px; line-height: 1.3; margin: 0 0 12px; color: #111; }
.ui-nl-form p.lead { color: #6b7280; line-height: 1.8; margin: 0 0 22px; font-size: 16px; }
.ui-nl-form label { display: block; font-weight: 700; font-size: 14px; margin: 14px 0 8px; color: #111; }
.ui-nl-form label .req { color: var(--ui-accent); }
.ui-nl-form input[type=email], .ui-nl-form input[type=text] { width: 100%; box-sizing: border-box; padding: 16px 16px; border: 1px solid #e5e7eb; border-radius: 12px; font: inherit; font-size: 16px; background: #fff; }
.ui-nl-form input:focus { outline: 2px solid var(--ui-accent); outline-offset: -1px; border-color: transparent; }
.ui-nl-form label.ui-nl-check { display: flex; gap: 10px; align-items: center; margin: 22px 0; font-size: 12px; font-weight: 400; color: #374151; }
.ui-nl-check input { width: 20px; height: 20px; accent-color: var(--ui-accent); }
.ui-nl-check a { color: var(--ui-accent); }
.ui-nl-submit { display: block; margin: 0 auto; padding: 16px 34px; border: 0; border-radius: 10px; background: var(--ui-accent); color: #fff; font: inherit; font-weight: 800; font-size: 16px; cursor: pointer; transition: opacity .2s; }
.ui-nl-submit:disabled { opacity: .45; cursor: not-allowed; }
.ui-nl-msg { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; font-size: 14px; }
.ui-nl-msg.ok { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; } .ui-nl-msg.err { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.ui-nl-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.ui-nl-about { margin: 54px 8px 0; color: #6b7280; font-size: 15px; line-height: 1.9; }
.ui-nl-about b { color: #111; }
@media (max-width: 640px) { .ui-nl-card { padding: 18px 16px 30px; border-radius: 20px; } .ui-nl-back { margin-left: 4px; font-size: 18px; } }