/* =============== BASE =============== */
:root{
  /* design tokens */
  --bg: #fefae0;
  --ink: #223;
  --brand: #0077aa;
  --brand-dk:#005f8a;
  --accent:#ff9900;          /* legacy accent (not used for buy btn) */
  --line:#e7e3d5;
  --card-shadow: 0 1px 6px rgba(0,0,0,0);

  /* shared button height */
  --btn-h: 40px;

  /* unified card width for the catalog */
  --card-w: 320px;

  /* nav variables (also used by domed tabs) */
  --nav-pad-y: 0rem;
  --nav-gap: 14px;
  --nav-pill-radius: 0px;             /* unused by domed variant */
  --nav-active-bg: var(--bg);
  --nav-active-ink: var(--brand);
  --nav-border: rgba(255,255,255,.25);

  /* domed tabs knobs */
  --nav-dome-radius: 20px;
  --nav-tab-highlight: rgba(255,255,255,.18);
  --nav-tab-shadow: rgba(0,0,0,.12);
}

body{
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: #333;
}

header{ background:#99FFFF; text-align:center; }

/* Banner */
header img{
  max-width: 1200px !important;
  width: 100%;
  height: auto;
  display: block;
  margin: 0rem auto 0rem !important;
}

/* Optional tagline */
header p.tagline{
  font-size: clamp(18px, 1.9vw, 22px);
  font-weight: 700;
  line-height: 1.25;
  margin: .25rem 0 .6rem;
  color: #264653;
  max-width: 1200px;            /* match banner width */
  margin-inline: auto;
  text-wrap: balance;
}

/* Header H2 (if used) */
header h2{
  font-size: clamp(20px, 2.6vw, 28px) !important;
  font-weight: 600 !important;
  margin: .25rem 0 .4rem !important;
  color: var(--ink) !important;
}

/* Nav (base) */
nav ul{
  list-style: none;
  margin: 0;
  padding: .55rem;
  display: flex;
  justify-content: center;
  gap: 12px;
  background: var(--brand);
}
nav ul li a{
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  padding: .45rem .85rem;
  background: transparent;               /* keep transparent so dome shows */
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 0;                       /* top-only radius added later */
}
nav ul li a:hover{ background: rgba(255,255,255,.12); }

/* Section spacing */
section{ padding: 1.25rem 1.25rem; max-width: 1200px; margin: auto; }  /* 1200 like banner */
section:first-of-type{ padding-top:.5rem !important; }

/* Page headings (if used) */
section > h1,
section > h2 {
  font-size: clamp(18px, 2vw, 22px) !important;
  font-weight: 600 !important;
  margin: 1rem 0 .8rem !important;
  padding-bottom: .3rem !important;
  border-bottom: 1px solid #264653 !important;
  color: #264653 !important;
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Kill gap under nav */
#global-header nav,
header nav { margin-bottom: 0rem !important; }

/* First heading closer to nav */
section:first-of-type > h1:first-child,
section:first-of-type > h2:first-child { margin-top: 0.4rem !important; }

/* ======= BOOK GRID (auto-fit columns) ======= */
.book-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-w), 1fr)) !important;
  gap: 10px !important;                  /* 10px gap */
  justify-items: center;
}
/* keep catalog container aligned with banner width */
section:has(.book-grid){ max-width: 1200px; }

/* ======= BOOK CARD ======= */
.book-card{
  width: 100%;
  max-width: var(--card-w);
  padding: .6rem;
  border-radius: 12px;
  border: 1.5px solid #ddd;              /* visible white card edge */
  background: #fff;
  font-size: .95rem;
  box-shadow: var(--card-shadow);
}
.book-card h3{ font-size: 1.08rem; margin: 0 0 0.15rem; }
.book-card p{ margin: 5px 0 5px; line-height: 1.4; }

/* Cover frame */
.book-card img{
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  box-sizing: border-box;
  background:#fff;
  border: 1px solid #ddd;                /* frame around cover */
  border-radius: 10px;
  padding: 0;
  aspect-ratio: 768 / 985;        /* target ratio for all covers */
}

/* ======= BUTTONS (SEE + BUY) ======= */
.book-card .see-inside,
.book-card .buy-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding: 0 .90rem;
  line-height: 1.6;
  box-sizing: border-box;
}
/* Adjust only the See Sample Pages button */
.book-card .see-inside {
  font-size: 1.3rem;      /* text size (default ~16px, you can try 0.95rem–1.2rem) */
  height: 38px;         /* taller button if needed */
  padding: 0 1rem;      /* adjust side padding */
  font-weight: 400;     /* optional: semi-bold */
}
/* See sample */
.book-card .see-inside{
  width: 100%;
  margin-top: 0rem;
  border: 1.5px solid #727171;
  border-radius: 5px;
  background: #fff;
  color: #111;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease;
}
.book-card .see-inside:hover{
  background:#f6f6f6;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.book-card .see-inside,
.book-card .see-inside[type="button"],
.book-card .see-inside[type="submit"]{
  -webkit-appearance: none;
  appearance: none;
}

/* Buy row + select (compact side-by-side) */
.buy-row{
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-wrap: nowrap;
  margin-top: .25rem;
}
.buy-row.top{ margin: 0 0 .5rem; }
.buy-row .az-select,
.buy-row .store-select{
  flex: 0 0 auto;         /* keep compact */
  min-width: 140px;
  width: auto;
  max-width: none;
  margin: 0;
  align-self: stretch;
}

/* Styled select to match buttons */
.store-select{
  height: var(--btn-h);
  padding: 0 .75rem;
  border: 1.5px solid #727171;
  border-radius: 5px;
  background: #fff;
  color: #111;
  font-size: 1rem;
  line-height: 1;
}

/* ======= BUY BUTTON — AMAZON-LIKE (NO ARROW) ======= */
.book-card .buy-btn{
  /* sizing/typography */
  height: var(--btn-h);
  padding: 0 .9rem;
  line-height: 1.2;
  font-size: 15px;
  font-weight: 700;
  border-radius: 3px;
  text-decoration: none !important;
  color: #111 !important;

  /* visuals: Amazon-style gold */
  background: linear-gradient(to bottom, #f7dfa5, #f0c14b);
  border: 1px solid #a88734;
  box-shadow:
    inset 0 1px 0 #fff,                 /* inner highlight */
    0 1px 0 rgba(0,0,0,.15);            /* subtle outer shadow */

  /* behavior */
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.book-card .buy-btn:hover{
  background: linear-gradient(to bottom, #f5d78e, #eeb933);
  border-color: #a88734 #9c7e31 #846a29; /* Amazon-like darker border */
}

.book-card .buy-btn:active{
  background: #eeb933;
  border-color: #a88734;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.2);      /* pressed look */
}

.book-card .buy-btn:focus{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(228, 121, 17, .4),    /* Amazon orange glow */
    inset 0 1px 0 #fff;
}

/* disabled before JS sets href */
.book-card .buy-btn.is-disabled{
  opacity: .65;
  pointer-events: none;
  filter: saturate(85%);
}

/* absolutely no arrow */
.book-card .buy-btn::after{ content:none !important; }


/* ======= FOOTER ======= */
footer{
  background: #264653;
  color: #fff;
  padding: 1rem;
  text-align: center;
}
.footer-links{
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
}
.footer-links a{ color: #fff; text-decoration: underline; }

/* ======= LIGHTBOX ======= */
.lb-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.lb-wrap{
  max-width: 95vw; max-height: 90vh;
  position: relative;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
}
.lb-img{
  display: block;
  max-width: 95vw; max-height: 90vh;
  margin: 0 auto;
  object-fit: contain;
  background:#000;
}
.lb-close, .lb-prev, .lb-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,.5);
  color:#fff;
  border:none;
  cursor:pointer;
  width:44px; height:44px;
  border-radius:50%;
  font-size:20px;
  display:flex; align-items:center; justify-content:center;
}
.lb-close{ top: 8px; right: 8px; transform:none; }
.lb-prev{ left: 8px; }
.lb-next{ right: 8px; }
.lb-counter{
  position:absolute; bottom:8px; left:50%;
  transform:translateX(-50%);
  color:#fff; font-weight:600;
  background: rgba(0,0,0,.4);
  padding:4px 10px; border-radius:12px; font-size:.9rem;
}

/* ======= MOBILE SMALL ======= */
@media (max-width: 500px){
  nav ul{ gap: 8px; padding: .45rem; }
  nav ul li a{ font-size: .9rem; padding: .45rem .7rem; }

  /* book cards bigger + centered */
  .book-card{
    width: min(94vw, 460px);  /* γεμίζει σχεδόν όλη την οθόνη */
    max-width: none;          /* override var(--card-w) */
  }

  .book-grid{
    justify-items: center;
    gap: 14px;
  }

  /* λίγο μεγαλύτερο text & κουμπιά για αναγνωσιμότητα */
  .book-card h3{ font-size: 1.2rem; }
  .book-card .see-inside,
  .book-card .buy-btn{
    height: 44px;
    font-size: 1.1rem;
  }
}


/* ======= NAV OVERRIDES (global) ======= */
#global-header nav,
header nav{ background: var(--brand); }

#global-header nav ul,
header nav ul{ padding: var(--nav-pad-y) 12px; gap: var(--nav-gap); }

/* keep these minimal; dome overrides come later */
#global-header nav ul li a,
header nav ul li a{
  display: inline-block;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  padding: .55rem 1.05rem;
  border: 1px solid var(--nav-border);
  border-radius: 0;              /* top radius added in dome block */
  background: transparent;       /* let gradients show */
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
#global-header nav ul li a:hover,
header nav ul li a:hover{ background: rgba(255,255,255,.12); }

/* Reserve space so header doesn't jump */
#global-header{
  display:block;
  min-height: clamp(180px, 28vw, 280px);
  background:#99FFFF;
}

/* current tab (no click) */
#global-header nav a[aria-current="page"],
header nav a[aria-current="page"]{
  pointer-events: none;
  cursor: default;
}

/* ===== Domed/arched nav tabs — keep this at the very end ===== */
#global-header nav ul li a,
header nav ul li a{
  border-radius: var(--nav-dome-radius) var(--nav-dome-radius) 0 0; /* top corners only */
  border-bottom-width: 0;                                           /* sit flush with bar */
  background:
    linear-gradient(to bottom, var(--nav-tab-highlight), rgba(255,255,255,0));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35), /* top highlight */
    0 1px 2px var(--nav-tab-shadow);     /* subtle lift */
}

/* hover sheen on dome */
#global-header nav ul li a:hover,
header nav ul li a:hover{
  background:
    linear-gradient(to bottom, rgba(255,255,255,.28), rgba(255,255,255,.06));
}

/* active/current tab: blends into page bg like a selected folder tab */
#global-header nav ul li a[aria-current="page"],
header nav ul li a[aria-current="page"],
#global-header nav ul li a.active,
header nav ul li a.active{
  background: var(--nav-active-bg);
  color: var(--nav-active-ink);
  border-color: var(--nav-active-bg);
  margin-bottom: -1px; /* overlap 1px for a seamless edge */
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.06),   /* gentle inner dome */
    0 1px 0 rgba(0,0,0,0);             /* no outer bottom shadow */
}

/* Domed/arched nav tabs — adjusted so blue bar shows above */
#global-header nav ul li a,
header nav ul li a{
  border-radius: var(--nav-dome-radius) var(--nav-dome-radius) 0 0;
  border-bottom-width: 0;
  background:
    linear-gradient(to bottom, var(--nav-tab-highlight), rgba(255,255,255,0));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 1px 2px var(--nav-tab-shadow);

  /* NEW: shift tabs down a bit */
  margin-top: 4px;          /* adjust to taste: 2–6px */
  padding-top: .45rem;      /* keep the text centered nicely */
}

/* Active/current tab still overlaps 1px for flush look */
#global-header nav ul li a[aria-current="page"],
header nav ul li a[aria-current="page"],
#global-header nav ul li a.active,
header nav ul li a.active{
  background: var(--nav-active-bg);
  color: var(--nav-active-ink);
  border-color: var(--nav-active-bg);
  margin-bottom: -1px;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.06),
    0 1px 0 rgba(0,0,0,0);
}

/* ========== MOBILE-SPECIFIC ADDITIONS (SAFE, SCOPED) ========== */
/* 1) MOBILE BANNER: keep small and consistent */
@media (max-width: 768px){
  #ml-banner img{
    height: 50px !important;   /* δοκίμασε με 40px */
    width: auto !important;
    max-width: 100vw !important;
    display: inline-block !important;
  }
}
/* Extra small phones */
@media (max-width: 380px){
  #ml-banner img{ height: 36px; }
}

/* 2) MOBILE BUY ROW (alongside) — bigger BUY text + narrower select */
@media (max-width: 768px){
  #mobile-page .buy-row{
    display:flex;
    flex-direction: row;   /* alongside again */
    gap: 8px;
    align-items: stretch;
    flex-wrap: nowrap;
  }
  #mobile-page .buy-btn{
    height: 80px  !important;         /* taller button */
    font-size: 2rem  !important;   /* bigger text */
    padding: 0 18px;
    border-radius: 12px;
    flex: 1 1 auto;        /* take remaining width */
  }
  #mobile-page .store-select{
    height: 48px;
    font-size: 1rem;
    border-radius: 10px;
    min-width: 120px;      /* narrower than desktop */
    width: 42%;
    max-width: 180px;
    align-self: stretch;
  }
}
/* ===== MOBILE FIX: no horizontal scroll + tighten banner gap ===== */
html, body { overflow-x: hidden; }

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

@media (max-width: 768px){

  /* Make sure nothing can exceed viewport width */
  #ml-banner,
  #mobile-page,
  #ml-footer { max-width: 100vw; overflow-x: hidden; }

  /* Mobile banner size (hard cap) */
  #ml-banner{ padding: 2px 0 !important; }
  #ml-banner img{
    height: 50px !important;   /* ← change this number if you want smaller/bigger */
    width: auto !important;
    max-width: 86vw !important;
    display: inline-block !important;
  }
@media (max-width: 768px) {
  #ml-footer,
  #mobile-page {
    display: none; /* ή visibility: hidden */
  }
}

  /* Remove the “mystery” gap under banner */
  #mobile-page{ padding-top: 0 !important; }
  #mobile-page .book-card.mobile-card{ 
    margin-top: 6px !important; 
    width: 92vw !important;     /* stay inside the viewport */
    max-width: 460px !important;
    margin-left: auto; margin-right: auto;
  }
  #mobile-page .book-card.mobile-card h3{ margin-top: 8px !important; }

  /* Prevent the buy row from pushing width > 100% */
  #mobile-page .buy-row{
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: stretch;
  }
  #mobile-page .buy-btn{
    flex: 1 1 auto; 
    min-width: 0;              /* allow shrinking instead of overflowing */
    height: 52px;              /* bigger button as requested */
    font-size: 1.12rem;        /* bigger text as requested */
    border-radius: 12px;
    padding: 0 18px;
  }
  #mobile-page .store-select{
    flex: 0 0 40px;           /* narrower dropdown alongside the button */
    width: 140px !important;
    max-width: 150px !important;
    height: 20px !important;
    font-size: 1.2rem;
    border-radius: 10px;
    align-self: stretch;
  }

  /* Safety: images never exceed viewport */
  img { max-width: 100%; height: auto; }
}

@media (max-width: 768px){
  #ml-banner .ml-tagline{
    margin: 6px 0 0;
    padding: 0 12px;
    font-family: "Baloo 2", Arial, sans-serif;
    font-size: 1.3rem;    /* small but readable */
    font-weight: 600;
    color: #222;
    text-align: center;
    line-height: 1.3;
  }


/* ================= TAVRAKI: FORCE GOLD STARS ================= */
html body .book-stars {
  display: inline-flex !important;
  align-items: center;
  gap: 4px !important;
  margin: .35rem 0 !important;
  padding: 0 !important;
}

html body .book-stars a {
  font-size: 2rem !important; /* μικρότερα αστέρια */
  color: hwb(54 37% 9%) !important; /* χρυσά αστέρια */
  text-decoration: none;
}

html body .book-stars .rating-score {
  color: black !important;
  font-size: 0.5rem !important;
  font-weight: normal;
  margin-right: 3px;
  display: inline-flex;
  align-items: center;
}

/* mobile only */
@media (max-width: 768px) {
  #ml-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1rem;
    padding: 1rem;
    text-align: center;
  }

  #ml-footer a {
    display: inline-block;
    background: #f3f3f3;
    color: #000;
    padding: 0.5rem 0.8rem;
    border-radius: 0.3rem;
    text-decoration: none;
    font-size: 0.9rem;
  }

  #ml-footer a:hover {
    background: #e0d700;
    color: #000;
  }

  #mobile-page {
    display: block; /* εμφανίζεται μόνο σε mobile */
    padding: 0.5rem;
  }
}

/* desktop only */
@media (min-width: 769px) {
  #mobile-page {
    display: none; /* κρύβεται πλήρως σε desktop */
  }
}



}