/* ═══════════════════════════════════════════
   myFAIR — Main Stylesheet
   by ipcm® / EOS Mktg&Communication Srl
═══════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --red: #c0392b;
  --red-dark: #96281b;
  --bg: #e5e5e5;
  --row-bg: #efefef;
  --row-bg-alt: #e8e8e8;
  --text: #1a1a1a;
  --text-sub: #555;
  --border: #d5d5d5;

  /* Base content heights */
  --topbar-h: 48px;
  --bottombar-h: 60px;

  /* iOS safe area insets (Dynamic Island / notch) */
  --sat: env(safe-area-inset-top,    0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left,   0px);
  --sar: env(safe-area-inset-right,  0px);

  /* Total bar heights including safe area */
  --topbar:    calc(var(--topbar-h)    + var(--sat));
  --bottombar: calc(var(--bottombar-h) + var(--sab));
}

html {
  width: 100%;
  height: 100%;
  /* iOS PWA: html background = red, fills any pixel gap above/below fixed bars */
  background: var(--red);
  overflow: hidden;
}
body {
  width: 100%;
  height: 100%;
  font-family: 'Roboto', sans-serif;
  background: transparent; /* let html red show through any gaps */
  color: var(--text);
  overflow: hidden;
}
/* Restore bg color on the scroll area only (not on body edges) */
#main {
  background: var(--bg);
}

/* ── PRELOADER ── */
#preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--red);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 20px;
  transition: opacity .4s;
  padding: var(--sat) var(--sar) var(--sab) var(--sal);
}
#preloader.hide { opacity: 0; pointer-events: none; }
.pre-logo { font-size: 2.8rem; font-weight: 300; color: #fff; font-style: italic; }
.pre-logo span { font-weight: 700; font-style: normal; }
.pre-sub { font-size: .75rem; color: rgba(255,255,255,.65); letter-spacing: .12em; text-transform: uppercase; }
.pre-spinner {
  width: 34px; height: 34px;
  border: 3px solid rgba(255,255,255,.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── TOP BAR ── */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--topbar);
  background: var(--red);
  /* Two-row flex: safe-area spacer on top, content row on bottom */
  display: flex;
  flex-direction: column;
}
/* Spacer that fills exactly the safe area (Dynamic Island / notch) */
#topbar::before {
  content: '';
  height: var(--sat);
  flex-shrink: 0;
}
/* Inner row holds logo + icons, always 48px tall */
.topbar-inner {
  height: var(--topbar-h);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(14px + var(--sal)) 0 calc(14px + var(--sal));
  padding-right: calc(14px + var(--sar));
}
.logo { font-size: 1.3rem; font-weight: 300; color: #fff; font-style: italic; }
.logo span { font-weight: 700; font-style: normal; }
.topbar-icons { display: flex; gap: 16px; align-items: center; }
.topbar-icons button {
  background: none; border: none; cursor: pointer;
  color: #fff; display: flex; align-items: center;
  width: 36px; height: 36px; justify-content: center;
  border-radius: 50%;
}

/* ── SEARCH BAR ── */
#searchBar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--topbar);
  background: var(--red-dark);
  display: none;
  flex-direction: column;
}
#searchBar::before {
  content: '';
  height: var(--sat);
  flex-shrink: 0;
}
.searchbar-inner {
  height: var(--topbar-h);
  flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 0 calc(14px + var(--sar)) 0 calc(14px + var(--sal));
}
#searchBar.open { display: flex; }
#searchInput {
  flex: 1; background: rgba(255,255,255,.15); border: none; outline: none;
  color: #fff; padding: 7px 12px; border-radius: 4px;
  font-size: 16px; /* >= 16px prevents iOS auto-zoom */
  font-family: 'Roboto', sans-serif;
  line-height: 1.2;
}
#searchInput::placeholder { color: rgba(255,255,255,.55); }
.search-close {
  background: none; border: none; color: #fff;
  font-size: 1.1rem; cursor: pointer;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ── FILTER PANEL ── */
#filterPanel {
  position: fixed; top: var(--topbar); left: 0; right: 0; z-index: 90;
  background: #fff; border-bottom: 1px solid var(--border);
  padding: 12px 14px 14px;
  display: none; flex-direction: column; gap: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
#filterPanel.open { display: flex; }
.filter-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #888; font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.chip {
  padding: 4px 12px; border-radius: 20px; font-size: .78rem;
  background: #ebebeb; color: #444; cursor: pointer; border: 1px solid #ccc;
  transition: background .15s, color .15s;
  font-family: 'Roboto', sans-serif; user-select: none;
}
.chip.active { background: var(--red); color: #fff; border-color: var(--red); }
.filter-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.filter-btn { padding: 7px 18px; border-radius: 4px; font-size: .82rem; font-family: 'Roboto', sans-serif; cursor: pointer; border: none; }
.filter-btn.reset { background: #eee; color: #555; }
.filter-btn.apply { background: var(--red); color: #fff; }

/* ── SUPPLIER CATEGORY TABS ── */
#supplierTabs {
  position: fixed; top: var(--topbar); left: 0; right: 0; z-index: 85;
  background: var(--red);
  display: none;
  overflow-x: auto; white-space: nowrap;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding: 8px 10px; gap: 8px;
}
#supplierTabs::-webkit-scrollbar { display: none; }
#supplierTabs.visible { display: flex; align-items: center; }
.sup-tab {
  display: inline-flex; align-items: center;
  padding: 5px 14px; border-radius: 20px;
  font-size: .78rem; color: rgba(255,255,255,.85);
  cursor: pointer; font-family: 'Roboto', sans-serif;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3);
  white-space: nowrap; user-select: none; flex-shrink: 0;
  transition: background .15s, color .15s;
}
.sup-tab.active { background: #fff; color: var(--red); border-color: #fff; font-weight: 500; }

/* ── SCHEDULE MONTH TABS ── */
#scheduleTabs {
  position: fixed; top: var(--topbar); left: 0; right: 0; z-index: 80;
  background: var(--red);
  display: none; overflow-x: auto; white-space: nowrap;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  border-bottom: 2px solid var(--red-dark);
}
#scheduleTabs::-webkit-scrollbar { display: none; }
#scheduleTabs.visible { display: block; }
.stab {
  display: inline-block; padding: 12px 18px;
  font-size: .82rem; color: rgba(255,255,255,.65);
  cursor: pointer; font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color .15s; user-select: none;
}
.stab.active { color: #fff; border-bottom-color: #fff; }

/* ── MAIN SCROLL AREA ── */
#main {
  position: fixed; top: var(--topbar); bottom: var(--bottombar); left: 0; right: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
#main.with-sched-tabs { top: calc(var(--topbar) + 42px); }
#main.with-sup-tabs   { top: calc(var(--topbar) + 46px); }

/* ── LIST ROWS ── */
.list-letter-header {
  background: var(--bg); padding: 5px 14px 3px;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: #888; font-weight: 500;
  position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--border);
}
.fair-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: var(--row-bg);
  border-bottom: 1px solid var(--border); cursor: pointer; transition: background .1s;
}
.fair-row:nth-child(even) { background: var(--row-bg-alt); }
.fair-row:active { background: #d5d5d5; }
.fair-associated-star { margin-left: auto; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .95rem; line-height: 1; }

.row-logo {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 6px; background: #fff; border: 1px solid #ddd;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.row-logo img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.row-logo .logo-placeholder {
  font-size: .55rem; font-weight: 700; color: var(--red);
  text-align: center; padding: 4px; line-height: 1.2; text-transform: uppercase;
}
.fair-info { flex: 1; min-width: 0; }
.fair-name  { font-size: .92rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fair-loc   { font-size: .78rem; color: var(--text-sub); margin-top: 1px; }
.fair-dates { font-size: .73rem; color: #888; margin-top: 2px; }

.supplier-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; background: var(--row-bg);
  border-bottom: 1px solid var(--border); cursor: pointer; transition: background .1s;
}
.supplier-row:nth-child(even) { background: var(--row-bg-alt); }
.supplier-row:active { background: #d5d5d5; }
.supplier-name { font-size: .92rem; font-weight: 700; }
.supplier-svc  { font-size: .78rem; color: var(--text-sub); margin-top: 2px; }

/* ── LOAD MORE ── */
.load-sentinel { height: 40px; display: flex; align-items: center; justify-content: center; }
.load-spinner  {
  width: 22px; height: 22px;
  border: 2px solid #ccc; border-top-color: var(--red);
  border-radius: 50%; animation: spin .7s linear infinite;
}

/* ── EMPTY STATE ── */
.empty-state { text-align: center; padding: 60px 20px; color: #aaa; }
.empty-icon  { font-size: 2.5rem; margin-bottom: 10px; }

/* ── DETAIL VIEW ── */
#detailView {
  position: fixed; inset: 0; z-index: 300;
  background: #fff; display: none; flex-direction: column;
}
#detailView.open { display: flex; animation: slideIn .2s ease; }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

.detail-topbar {
  height: var(--topbar);
  background: var(--red);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
.detail-topbar::before {
  content: '';
  height: var(--sat);
  flex-shrink: 0;
}
.detail-topbar-inner {
  height: var(--topbar-h);
  display: flex; align-items: center;
  padding-left: calc(4px + var(--sal));
  padding-right: calc(14px + var(--sar));
}
.detail-back {
  background: none; border: none; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  -webkit-tap-highlight-color: rgba(255,255,255,.15);
}
.detail-back:active { background: rgba(255,255,255,.15); }
.detail-body { flex: 1; overflow-y: auto; }

/* Fair detail content */
.detail-content { padding: 24px 20px 48px; max-width: 860px; }
.dc-logo {
  width: 90px; height: 68px;
  border: 1px solid #ddd; border-radius: 6px; background: #f9f9f9;
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px; overflow: hidden;
}
.dc-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.dc-logo .logo-placeholder { font-size: .65rem; font-weight: 700; color: var(--red); text-align: center; padding: 6px; }
.dc-name    { font-size: 1.3rem; font-weight: 700; line-height: 1.25; margin-bottom: 8px; }
.dc-venue   { font-size: .88rem; font-weight: 700; margin-bottom: 3px; }
.dc-dates   { font-size: .84rem; color: #444; margin-bottom: 16px; }
.dc-desc    { font-size: .82rem; color: #444; line-height: 1.75; margin-bottom: 20px; }
.dc-desc p  { margin-bottom: 8px; }
.dc-link    { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--red); font-weight: 500; text-decoration: none; margin-bottom: 12px; }
.dc-tag     { display: inline-block; background: #e0e0e0; color: #444; padding: 4px 14px; border-radius: 20px; font-size: .78rem; margin-top: 10px; margin-bottom: 22px; }
.dc-highlighted { display: flex; align-items: center; gap: 10px; background: var(--red); color: #fff; font-size: .84rem; font-weight: 500; padding: 10px 16px; border-radius: 6px; margin-bottom: 20px; }
.dc-hl-star { font-size: 1rem; flex-shrink: 0; }
.dc-hl-text { flex: 1; }
.dc-hl-text p { margin: 0; }
.dc-media-partner { font-size: .78rem; color: #666; margin-top: 4px; margin-bottom: 16px; }
.dc-divider { border: none; border-top: 2px solid var(--red); margin-bottom: 20px; }
.dc-related-title { font-size: .92rem; font-weight: 700; margin-bottom: 12px; }
.related-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #eee; cursor: pointer; }
.related-row:last-child { border-bottom: none; }
.related-logo {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 6px; background: #f5f5f5; border: 1px solid #eee;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.related-logo img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.related-logo .logo-placeholder { font-size: .52rem; font-weight: 700; color: var(--red); text-align: center; padding: 4px; }
.related-name  { font-size: .88rem; font-weight: 700; }
.related-loc   { font-size: .78rem; color: var(--text-sub); margin-top: 1px; }
.related-dates { font-size: .73rem; color: #888; margin-top: 1px; }

/* Supplier detail */
.sup-detail { padding: 24px 20px 48px; max-width: 860px; }
.sup-d-logo {
  width: 120px; height: 80px;
  border: 1px solid #ddd; border-radius: 6px; background: #f9f9f9;
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px; overflow: hidden;
}
.sup-d-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.sup-d-logo .logo-placeholder { font-size: .65rem; font-weight: 700; color: var(--red); text-align: center; padding: 6px; }
.sup-d-name  { font-size: 1.3rem; font-weight: 700; margin-bottom: 10px; }
.sup-d-tag   { display: inline-block; background: #e0e0e0; color: #444; padding: 4px 14px; border-radius: 20px; font-size: .78rem; margin-bottom: 18px; }
.sup-d-desc  { font-size: .82rem; color: #444; line-height: 1.75; margin-bottom: 20px; }
.sup-d-link  { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--red); font-weight: 500; text-decoration: none; margin-bottom: 12px; }

/* ── ABOUT PAGE ── */
.about-page { background: var(--bg); }

.about-publisher-card {
  background: #fff;
  margin: 16px 16px 0;
  border-radius: 12px;
  padding: 20px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
.about-pub-logo   { max-width: 160px; max-height: 60px; object-fit: contain; }
.about-pub-label  { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: #999; font-weight: 500; }
.about-pub-name   { font-size: .92rem; font-weight: 700; color: var(--text); text-align: center; }
.about-pub-desc   { font-size: .8rem; color: #666; line-height: 1.65; text-align: center; }

.about-divider-label {
  padding: 20px 16px 8px;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: #999; font-weight: 600;
}
.about-magazines {
  display: flex; flex-direction: column; gap: 0;
  margin: 0 16px; border-radius: 12px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
.about-mag-item {
  background: #fff; padding: 15px 18px;
  border-bottom: 1px solid #f0f0f0;
  display: flex; gap: 14px; align-items: flex-start;
}
.about-mag-item:last-child { border-bottom: none; }
.about-mag-dot  { width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex-shrink: 0; margin-top: 5px; }
.about-mag-title { font-size: .86rem; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.about-mag-desc  { font-size: .78rem; color: #666; line-height: 1.55; }

.about-footer {
  margin: 16px 16px 24px;
  background: #fff; border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.about-footer-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: #999; font-weight: 500; margin-bottom: 2px; }
.about-footer-val   { font-size: .85rem; font-weight: 600; color: var(--text); }
.about-footer-link  { font-size: .82rem; color: var(--red); text-decoration: none; font-weight: 500; display: flex; align-items: center; gap: 5px; }

/* ── BOTTOM NAV ── */
#bottomNav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--bottombar);
  background: var(--red);
  display: flex;
  padding-bottom: var(--sab);
  padding-left: var(--sal);
  padding-right: var(--sar);
}
/* Fills any physical gap between bottom:0 and the screen edge on iOS PWA */
#bottomNav::after {
  content: '';
  position: fixed;
  bottom: calc(-1 * var(--sab) - 40px);
  left: 0; right: 0;
  height: calc(var(--sab) + 40px);
  background: var(--red);
  pointer-events: none;
  z-index: 99;
}
.nav-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  cursor: pointer; border: none; background: none;
  color: rgba(255,255,255,.55); font-family: 'Roboto', sans-serif;
  font-size: .62rem; font-weight: 500; text-transform: uppercase; letter-spacing: .04em;
  transition: color .15s, background .15s;
}
.nav-tab.active { color: #fff; background: rgba(0,0,0,.18); }
.nav-tab .ti { margin-bottom: 1px; }

/* ── TOAST ── */
#toast {
  position: fixed; bottom: calc(var(--bottombar) + 14px); left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #333; color: #fff; padding: 9px 18px; border-radius: 20px;
  font-size: .82rem; z-index: 500; opacity: 0;
  transition: opacity .25s, transform .25s;
  white-space: nowrap; pointer-events: none;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── ADV BANNER (list / detail) ── */
.adv-banner {
  display: flex; justify-content: center; align-items: center;
  padding: 8px 0; background: #fff;
  border-top: 1px solid #eee; border-bottom: 1px solid #eee;
}
.adv-banner-img {
  max-width: 100%; max-height: 100px; object-fit: contain; display: block;
}

/* ── ADV INTERSTITIAL ── */
#advInterstitial {
  display: none; position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.85);
  align-items: center; justify-content: center;
}
#advInterstitial.open { display: flex; }
.adv-int-img-wrap {
  max-width: 500px; width: 90%; position: relative;
}
.adv-int-img-wrap img {
  width: 100%; display: block; border-radius: 4px;
}
.adv-int-close {
  position: fixed; top: 16px; right: 16px;
  background: transparent; border: 2px solid #fff; color: #fff;
  width: 36px; height: 36px; border-radius: 50%; font-size: 16px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  z-index: 9001;
}
.adv-int-close.counting {
  cursor: default; opacity: .7; font-size: 14px; font-weight: 700;
}