/* =========================
 * PERUSASETUKSET
 * ========================= */

/* Nollataan selaimen oletustyylit ja määritellään laatikkomalli */
* {
  margin: 0; /* Poistaa ulkomarginaalit */
  padding: 0; /* Poistaa sisämarginaalit */
  box-sizing: border-box; /* Sisällyttää paddingin ja borderin elementin mittoihin */
}

/* Sivun perusrakenne */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; /* Määrittää fonttiperheen */
  background: #111; /* Tummanharmaa taustaväri */
  color: #fff; /* Valkoinen tekstiväri */
  line-height: 1.6; /* Riviväli */
  min-height: 100vh; /* Sivun vähimmäiskorkeus selainikkunan korkeus */
  display: flex; /* Käytetään flexboxia layoutin hallintaan */
  flex-direction: column; /* Asettaa elementit pystysuunnassa */
  padding: 0 5px; /* Vaakasuuntainen reunus */
  transition: background-color 0.3s; /* Pehmeä taustavärin muutos */
}

/* =========================
 * HEADER
 * ========================= */

/* Kiinteä yläpalkki */
header {
  position: sticky; /* Pysyy yläreunassa scrollatessa */
  top: 0; /* Kiinnityskohta yläreunassa */
  z-index: 1000; /* Näkyy muiden elementtien päällä */
  background: transparent; /* Läpinäkyvä tausta */
  display: flex; /* Flexbox keskitykseen */
  justify-content: center; /* Keskitetään vaakasuunnassa */
  padding: 8px 2px; /* Sisätila headerissa */
   max-width: 800px;        /* Sama leveys kuin sisältöalueella */
  width: 100%;             /* Skaalautuu pienemmille näytöille */
  margin-left: auto;       /* Keskitetään sivulla */
  margin-right: auto;      /* Keskitetään sivulla */
  padding-bottom: 0;
}

/* Headerin sisäinen kortti (blur + varjo) */
.header-inner {
  width: 100%; /* Vie kaiken käytettävissä olevan tilan */
  max-width: 800px; /* Sama leveys kuin sisältöalueella */
  display: flex; /* Flexbox rivittää sisällön */
  align-items: center; /* Keskittää pystysuunnassa */
  justify-content: space-between; /* Jakaa navin ja oikean reunan */
  gap: 12px; /* Väli elementtien välillä */
  padding: 8px 1rem; /* Sisätila */
  background: rgba(0, 0, 0, 0.85); /* Tumma läpinäkyvä tausta */
  backdrop-filter: blur(10px); /* Sumennus taustaan */
  border-radius: 12px; /* Pyöristetyt kulmat */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Kevyt varjo */
}

/* =========================
 * NAVIGAATIO
 * ========================= */

/* Navigointilinkkien rivi */
#main-nav {
  flex-wrap: wrap; /* sallii rivittymisen */
  overflow-x: visible; /* ei leikkaa linkkejä */
  justify-content: center; /* keskittää ne */
   
}

/* Yksittäinen linkki */
#main-nav a {
  color: #fff; /* Valkoinen teksti */
  text-decoration: none; /* Ei alleviivausta */
  padding: 3px 5px; /* Sisämarginaalit */
  border-radius: 6px; /* Pyöristetyt kulmat */
  transition: background 0.2s; /* Pehmeä hover-efekti */
  white-space: nowrap; /* Estetään linkkien sanojen rivitys */

}

/* Hover-efekti */
#main-nav a:hover {
  background: rgba(255, 255, 255, 0.1); /* Vaalea taustakorostus */
}

/* Aktiivinen sivu */
#main-nav a.active,
#main-nav a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.15); /* Korostus taustalle */
  font-weight: 700; /* Lihavoitu fontti */
}
#auth-password-confirm {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* =========================
 * HEADERIN OIKEA REUNA
 * ========================= */

/* Kielivalinta ja hampurilaisvalikko oikealla */
.header-right {
  display: flex; /* Riviin asetettu */
  align-items: center; /* Keskitetään pystysuunnassa */
  gap: 8px; /* Väli elementtien välillä */
}

/* =========================
 * ILMOITUSPISTEET (BADGE)
 * ========================= */

/* Pieni punainen piste linkkien perään */
.badge-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: red;
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
}

/* Hampurilaispainikkeen yläkulmaan punainen piste */
#hamburger-btn {
  position: relative;
}

#hamburger-btn.has-alerts::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 10px;
  height: 10px;
  background: red;
  border-radius: 50%;
}

/* YHTEINÄISET HEADER-NAPIT: FI, Logout, Hamburger */
#language-select,
.hamburger-btn,
.hamburger-btn-out,
#logout-btn-header,
#hamburger-btn {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 30px;           /* 🔥 Kaikille sama korkeus */
  min-width: 50px;        /* 🔥 Kompaktimpi leveys */
  padding: 0 6px;

  background: rgba(255,255,255,0.95);
  border: none;
  border-radius: 8px;

  font-size: 0.9rem;
  font-weight: 600;
  color: #000;

  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease;
}

/* Hover */
#language-select:hover,
.hamburger-btn:hover,
.hamburger-btn-out:hover,
#logout-btn-header:hover,
#hamburger-btn:hover {
  transform: scale(1.05);
}

/* Kielivalinnan nuoli */
#language-select {
  padding-right: 26px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg fill='%23000' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

/* Mobiilissa vielä sirommat */
@media (max-width: 600px) {
  #language-select,
  .hamburger-btn,
  .hamburger-btn-out,
  #logout-btn-header,
  #hamburger-btn {
    height: 32px;
    min-width: 55px;
    padding: 0 8px;
    font-size: 0.85rem;
  }
}


/* =========================
 * HAMPURILAISMENU
 * ========================= */

/* Piilotettu valikko */
.hamburger-menu {
  position: fixed; /* Kiinnitetään näkymään */
  top: 0; right: 0; /* Oikea yläkulma */
  width: 280px; /* Leveys */
  height: 100%; /* Koko korkeus */
  background: rgba(0, 0, 0, 0.95); /* Tumma tausta */
  z-index: 1001; /* Headerin päällä */
  padding: 20px; /* Sisätila */
  overflow-y: auto; /* Vieritys */
  transform: translateX(100%); /* Piilotettu oletuksena */
  transition: transform 0.3s ease-out; /* Liuku näkyviin */
}

/* Näkyvä tila */
.hamburger-menu.show {
  transform: translateX(0); /* Siirretään näkyviin */
}

/* Valikon painikkeet */
.hamburger-menu .menu-items button {
  display: block; /* Jokainen omalla rivillä */
  width: 100%; /* Vie koko leveyden */
  margin-bottom: 12px; /* Väli */
  padding: 10px 15px; /* Sisätila */
  background: rgba(255, 255, 255, 0.05); /* Läpinäkyvä tausta */
  color: #fff; /* Valkoinen teksti */
  border: none; /* Ei reunaa */
  border-radius: 8px; /* Pyöristetyt kulmat */
  text-align: left; /* Teksti vasemmalle */
  cursor: pointer; /* Klikattava */
  transition: background 0.2s, color 0.2s; /* Hoverin pehmennys */
}

/* Hoverefekti */
.hamburger-menu .menu-items button:hover {
  background: rgba(255, 215, 0, 0.1); /* Hieman kultainen tausta */
  color: #ffd700; /* Teksti muuttuu kultaiseksi */
}

#logout-btn,
#delete-btn,
#create-partner-btn,
#invite-nonuser-btn,
#generate-invite-link-btn,
#copy-invite-link-btn,
#generate-referral-btn,
#referral-output {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 30px;             /* sama kuin headerissa */
  min-width: 50px;
  padding: 0 6px;

  background: rgba(255,255,255,0.95);
  border: none;
  border-radius: 8px;

  font-size: 0.9rem;
  font-weight: 600;
  color: #000;

  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease;
}

/* Hover-efekti */
#logout-btn:hover,
#delete-btn:hover,
#create-partner-btn:hover,
#invite-nonuser-btn:hover,
#generate-invite-link-btn,
#copy-invite-link-btn,
#generate-referral-btn,
#referral-output {
  transform: scale(1.05);
}

#delete-btn {
  background: #d9534f !important;
  color: #fff !important;
}
#delete-btn:hover {
  background: #c9302c !important;
}

#create-partner-btn,
#generate-invite-link-btn,
#copy-invite-link-btn {
  background: #2e86de !important;
  color: #fff !important;
}
#create-partner-btn:hover,
#generate-invite-link-btn,
#copy-invite-link-btn {
  background: #1a6ec1 !important;
}
#invite-nonuser-btn {
  background: #2e86de !important;
  color: #fff !important;
}

#invite-nonuser-btn:hover {
  background: #1a6ec1 !important;
}

/* =========================
 * HERO JA VAIHESIVUT
 * ========================= */

/* Eri taustakuvat sivuille */
body.hero-body { background-image: url('../img/Etusivu.jpg'); }
body.phase1 { background-image: url('../img/phase1.jpg'); }
body.phase2 { background-image: url('../img/phase2.jpg'); }
body.phase3 { background-image: url('../img/phase3.jpg'); }
body.phase4 { background-image: url('../img/phase4.jpg'); }
body.phase5 { background-image: url('../img/phase5.jpg'); }
body.phase6 { background-image: url('../img/phase6.jpg'); }
body.phase7 { background-image: url('../img/phase7.jpg'); }
body.phase8 { background-image: url('../img/phase8.jpg'); }
body.premium { background-image: url('../img/Premium.jpg'); }
/* Kirjesivu käyttää samaa taustaa ja skaalausta kuin muut phase-sivut */
body.letters-body {
  background-image: url('../img/phase4.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* Valinnainen: tekee “liikkumattoman” taustan */
}
body.chores-page {
  background-image: url('../img/phase4.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* Valinnainen: tekee “liikkumattoman” taustan */
}


/* Yhteiset tausta-asetukset */
body.hero-body,
body[class^="phase"],
body.premium {
  background-size: cover; /* Kuva peittää koko alueen */
  background-position: center; /* Keskitetään */
  background-repeat: no-repeat; /* Ei toistoa */
  background-attachment: fixed; /* Pysyy paikallaan scrollissa */
}

/* =========================
 * SISÄLTÖALUEET
 * ========================= */

/* Kaikki sisältö keskitetään */
main, section,
.template-container, .hero-content,
.phase1-content, .phase2-content, .phase3-content,
.phase4-content, .phase5-content, .phase6-content,
.phase7-content, .phase8-content, .premium-content {
  max-width: 800px; /* Sama leveys kuin headerilla */
  width: 100%; /* Skaalautuu alle 800px */
  margin: 5px auto 0; /* Keskitetään ja jätetään tilaa headerille */
  padding: 0 1rem; /* Sisätila sivuilla */
  color: #fff; /* Valkoinen teksti */
  text-align: left; /* Tekstit vasemmalle */
}

/* Korttimaiset lohkot */
.paragraphs-container, .task-card, .premium-card,
#premium-paragraphs-container, .content-card {
  background: rgba(0, 0, 0, 0.6); /* Läpinäkyvä tausta */
  backdrop-filter: blur(5px); /* Huurrelasi-efekti */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); /* Varjo */
  padding: 20px 15px; /* Sisätila */
  border-radius: 15px; /* Pyöristetyt kulmat */
  margin-bottom: 25px; /* Väli korttien välillä */
}

/* Kortin otsikko */
.paragraphs-container h1, .content-card h1 {
  font-size: clamp(1.8rem, 5vw, 2.5rem); /* Skaalautuva koko */
  text-align: center; /* Keskitetty otsikko */
  margin-bottom: 20px; /* Väli alaosaan */
  font-weight: 800; /* Lihavoitu */
}

/* =========================
 * TEKSTIT JA TEHTÄVÄT
 * ========================= */

h2 {
  font-size: clamp(1.4rem, 4vw, 1.8rem); /* Skaalautuva koko */
  margin: 25px 0 15px; /* Välit */
  padding-bottom: 8px; /* Väli viivaan */
  border-bottom: 1px solid rgba(255,255,255,0.4); /* Alaviiva */
}
p {
  font-size: clamp(1rem, 3vw, 1.1rem); /* Skaalautuva koko */
  line-height: 1.7; /* Riviväli */
  margin-bottom: 18px; /* Väli kappaleiden välillä */
  margin-left: 10px; /* marginaali teksteille */
}

/* Tehtäväkortit */
.task-card { border-left: 5px solid #2e86de; /* Sininen korostusviiva */ }
.task-title { font-weight: 700; margin-bottom: 6px; } /* Otsikko */
.task-subtitle { color: #bbb; margin-bottom: 4px; } /* Alaotsikko */
.task-desc { color: #ddd; margin-bottom: 10px; } /* Tekstikuvaus */

/* Premium-nappi */
.premium-card button {
  background: #2e86de; /* Sininen tausta */
  color: #fff; /* Valkoinen teksti */
  border: none; /* Ei reunaa */
  border-radius: 8px; /* Pyöristetyt reunat */
  padding: 12px 25px; /* Sisätila */
  font-size: 16px; /* Tekstin koko */
  cursor: pointer; /* Klikattava */
  transition: background 0.2s, transform 0.2s; /* Hover-animaatio */
}
.premium-card button:hover {
  background: #1a6ab5; /* Tummempi hover */
  transform: translateY(-2px); /* Nousee hieman ylös */
}
/* Partner-modaalin napit samaan tyyliin kuin premium-napit */
#partner-actions button,
#buy-premium-btn {
  background: #2e86de;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 25px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

/* Hover myös buy-premium-btn:lle + partner-napeille */
#partner-actions button:hover,
#buy-premium-btn:hover {
  background: #1a6ab5;
  transform: translateY(-2px);
}
#auth-form button,
#reset-request-form button,
#resend-verify-btn {
  background: #2e86de;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 25px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

#auth-form button:hover,
#reset-request-form button:hover,
#resend-verify-btn:hover {
  background: #1a6ab5;
  transform: translateY(-2px);
}


/* =========================
 * MUISTIINPANOT
 * ========================= */
.notes-container { margin-top: 30px; } /* Väli ennen muistiinpanoja */
.notes-container textarea {
  width: 100%; /* Vie koko kortin leveyden */
  min-height: 250px; /* Vähimmäiskorkeus */
  padding: 15px; /* Sisätila */
  font-size: 16px; /* Tekstikoko */
  background: rgba(0, 0, 0, 0.85); /* Tumma tausta */
  border: 1px solid #555; /* Hento reuna */
  border-radius: 10px; /* Pyöristetyt kulmat */
  color: #fff; /* Valkoinen teksti */
  resize: vertical; /* Sallii korkeuden muokkauksen */
}
.notes-container textarea:focus {
  border-color: #2e86de; /* Korostus kun aktiivinen */
  outline: none; /* Poistaa oletuskehykset */
}
/* =========================
 * PUOLISON MUISTIINPANO (vain luku)
 * ========================= */
#partner-note,
.partner-note {
  background: transparent; 
  color: #ddd;
  border: none;
  margin: 0;
  padding: 16px 16px 18px;
  min-height: 200px;
  font-size: 0.95rem;
  line-height: 1.45;
  background-color: rgb(63 70 80 / 31%) !important;
}

.partner-note strong {
  display: block;
  margin-bottom: 8px;
  font-size: 17px;
  color: #9ae19d;
}

.partner-note em {
  color: #aaa;
}


/* =========================
 * MUISTIINPANOT – YHTENÄINEN TYYLI
 * ========================= */
.notes-container textarea,
.task-note {
  display: block;
  width: 100%;
  min-height: 120px;        /* hieman pienempi kuin alkuperäinen 250px */
  padding: 12px 14px;
  font-size: 15px;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid #555;
  border-radius: 8px;
  color: #fff;
  resize: vertical;
  line-height: 1.5;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.notes-container textarea:focus,
.task-note:focus {
  border-color: #2e86de;
  outline: none;
  background: rgba(0, 0, 0, 0.9);
}

.notes-container textarea::placeholder,
.task-note::placeholder {
  color: #aaa;
  font-style: italic;
}

/* =========================
 * FOOTER
 * ========================= */
.site-footer {
  max-width: 800px;         /* sama kuin mainilla */
  width: 100%;
  margin: 8px auto 0;
  padding: 0 1rem;
  background: transparent;
  font-size: 0.85rem;
  color: #fff;              /* sama tekstiväri kuin korteissa */
}

.site-footer .footer-inner {
  width: 100%;
  background: rgba(0, 0, 0, 0.6);          /* sama sävy/läpinäkyvyys kuin korteissa */
  backdrop-filter: blur(5px);              /* huurrelasi kuten tehtäväkorteissa */
  border-top: 1px solid rgba(255,255,255,0.15);
  border-radius: 15px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  padding: 20px 15px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.site-footer .footer-feedback,
.site-footer .footer-meta {
  text-align: center;
}

.site-footer .footer-separator {
  margin: 0 4px;
}

.site-footer .footer-link {
  text-decoration: none;
  color: #f5f5f5;           /* hieman vaaleampi linkkiteksti */
}

.site-footer .footer-link:hover {
  text-decoration: underline;
}


/* =========================
 * COOKIE-BANNER
 * ========================= */
.cookie-banner {
  position: fixed; /* Pysyy alareunassa */
  bottom: 0; left: 0; right: 0; /* Koko leveys */
  background: rgba(0, 0, 0, 0.95); /* Tumma tausta */
  color: #fff; /* Valkoinen teksti */
  padding: 15px; /* Sisätila */
  z-index: 2000; /* Ylimpänä */
  display: none; /* Piilossa oletuksena */
  gap: 20px; /* Väli tekstin ja nappien välillä */
}
.cookie-banner.show { display: flex; } /* Näytetään, kun JS lisää .show */
.cookie-banner p { flex: 1; margin: 0; } /* Tekstiosa */
.cookie-banner .cookie-buttons {
  display: flex; /* Nappulat vierekkäin */
  gap: 10px; /* Väli niiden välillä */
}
.cookie-banner button {
  padding: 8px 15px; /* Sisätila */
  border: none; /* Ei reunaa */
  border-radius: 6px; /* Pyöristetyt kulmat */
  cursor: pointer; /* Klikattava */
  font-weight: 600; /* Korostettu */
  transition: transform 0.2s; /* Hoverin animaatio */
}
#cookie-accept { background: #2ecc71; } /* Vihreä hyväksyntä */
#cookie-more-info { background: #3498db; } /* Sininen lisätieto */
.cookie-banner button:hover { transform: translateY(-1px); } /* Hoverefekti */

/* =========================
 * MODAALIT
 * ========================= */
.modal-box {
  position: relative;
  background: #111;
  color: #fff;
  padding: 24px;
  border-radius: 12px;
  width: 100%;
  max-Width: 420px;
  box-Shadow: 0 20px 60px rgba(0,0,0,0.6);
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  color: #aaa;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}

.modal-overlay {
  position: fixed; /* Pysyy ruudussa */
  inset: 0; /* Täyttää koko ruudun */
  background: rgba(0,0,0,0.7); /* Läpinäkyvä tausta */
  display: flex; /* Keskittää sisällön */
  justify-content: center; /* Vaakasuunnassa */
  align-items: center; /* Pystysuunnassa */
  z-index: 1002; /* Headerin päällä */
  opacity: 0; /* Piilossa oletuksena */
  visibility: hidden; /* Ei näy */
  transition: opacity 0.3s, visibility 0.3s; /* Pehmeä ilmestyminen */
}
.modal-overlay.show {
  opacity: 1; /* Näkyy */
  visibility: visible; /* Tulee näkyviin */
}
.modal-content {
  background: #2b2b2b; /* Tumma laatikko */
  padding: 30px 20px; /* Sisätila */
  border-radius: 12px; /* Pyöristetyt kulmat */
  color: #fff; /* Valkoinen teksti */
  max-width: 550px; /* Enimmäisleveys */
  width: 100%; /* Skaalautuu */
  transform: scale(0.9); /* Pienempi alussa */
  transition: transform 0.3s ease-out; /* Pehmeä sisääntulo */
  padding-bottom: calc(120px + env(safe-area-inset-bottom)); /* 🔥 Nostaa sisällön bannerin yläpuolelle */
}
.modal-overlay.show .modal-content {
  transform: scale(1); /* Kasvaa täyteen kokoon näkyessään */
}
.close-modal {
  position: absolute; /* Sijoitetaan kulmaan */
  top: 10px; right: 10px; /* Ylä- ja oikeareuna */
  background: none; /* Ei taustaa */
  border: none; /* Ei reunaa */
  color: #fff; /* Valkoinen */
  font-size: 24px; /* Isompi koko */
  cursor: pointer; /* Klikattava */
}
.close-modal:hover { color: #f00; } /* Hoverissa punainen */

/* =========================
 * RESPONSIVE
 * ========================= */
@media (max-width: 768px) {
  .header-inner { flex-wrap: wrap; justify-content: center; } /* Header rivittyy */
  #main-nav { font-size: 0.9rem; justify-content: center; } /* Navi pienenee */
  #language-select, .hamburger-btn { font-size: 1rem; padding: 5px 8px; } /* Nappien skaalaus */

  main, section,
  .template-container, .hero-content,
  .phase1-content, .phase2-content,
  .phase3-content, .phase4-content,
  .phase5-content, .phase6-content,
  .phase7-content, .phase8-content, .premium-content {
    max-width: 95%; /* Kapeampi mobiilissa */
    padding: 5px; /* Vähemmän reunoja */
  }

  .paragraphs-container, .task-card, .premium-card,
  #premium-paragraphs-container, .content-card {
    padding: 20px 15px; /* Vähemmän sisätilaa */
  }

  .notes-container textarea {
    min-height: 150px; /* Pienempi korkeus */
    font-size: 14px; /* Pienempi fontti */
  }
}
/* ==========================================
 * OTSIKON JA SISÄLLÖN YLITYS KORJAUS MOBIILISSA
 * ========================================== */
@media (max-width: 768px) {

  /* Korjaa otsikon ylivuodon */
  .hero-content h1,
  .paragraphs-container h1,
  .content-card h1 {
    font-size: clamp(1.4rem, 6vw, 2rem);  /* Skaalaa automaattisesti pienille näytöille */
    line-height: 1.2;                     /* Pienempi riviväli */
    word-wrap: break-word;                /* Katkaisee pitkät sanat riville */
    overflow-wrap: break-word;            /* Sama varmistus moderneille selaimille */
    white-space: normal;                  /* Sallii rivinvaihdot */
    max-width: 100%;                      /* Estää ulosvuodon kortista */
    text-align: center;                   /* Keskittää otsikon */
  }

  /* Korjaa kortin sisällön marginaalit */
  .paragraphs-container,
  .content-card,
  .hero-content {
    width: 100%;                 /* Vie koko leveyden kortin sisällä */
    max-width: 95vw;             /* Ei veny yli ruudun */
    padding-left: 5px;
    padding-right: 5px;
    box-sizing: border-box;      /* Laskee paddingin osaksi leveyttä */
    margin: 0 auto;              /* Keskitetään varmuuden vuoksi */
  }

  /* Estetään koko sivun vaakaskrolli */
  html, body {
    overflow-x: hidden;
  }
}
/* =======================================================
   MODAALIT – toimiva mobiilissa ja desktopissa
   ======================================================= */

/* Overlay (taustakerros) */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;                  /* piilossa oletuksena */
  justify-content: center;
  align-items: flex-start;        /* alkaa ylhäältä mobiilissa */
  padding: 40px 12px;
  overflow-y: auto;               /* sallii rullauksen */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;   /* estää taustan scrollin */
  z-index: 1002;
}

/* Näkyvä tila */
.modal-overlay.show {
  display: flex;
}

/* Piilotus (yhteensopivuus vanhojen luokkien kanssa) */
.modal-overlay.hide,
.modal-overlay.hidden {
  display: none !important;
}

/* Varsinainen modaalilaatikko */
.modal-content {
  background: #2b2b2b;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  max-width: 550px;
  width: 100%;
  padding: 28px 20px;
  padding-bottom: 100px; /* 🔥 TÄMÄ LISÄÄ TILAA ALAREUNAAN */
  max-height: calc(100dvh - 80px);
  overflow-y: auto; 
  -webkit-overflow-scrolling: touch;
  position: relative;

  display: flex;            /* 🔥 LISÄÄ */
  flex-direction: column;   /* 🔥 LISÄÄ */
  gap: 14px;                /* 🔥 LISÄÄ */
}

/* Sulkunappi */
.close-modal {
  position: fixed;          /* pysyy ruudun kulmassa */
  top: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 24px;
  cursor: pointer;
  padding: 6px 10px;
  line-height: 1;
  z-index: 2003;            /* modaalin yläpuolella */
  transition: background 0.2s, color 0.2s;
}

.close-modal:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #f00;
}

/* Mobiilisäädöt */
@media (max-width: 768px) {
  .modal-overlay {
    padding: 20px 10px;
    align-items: flex-start;
  }
  .modal-content {
    width: 92%;
    border-radius: 10px;
    padding: 20px 16px;
  }
  .close-modal {
    font-size: 22px;
    top: 8px;
    right: 8px;
  }
}

/* Ei vaakaskrollausta */
html, body { overflow-x: hidden; }

/* Poistetaan tyhjät divit jos ei premium */
#premium-paragraphs-container:empty,
#premium-tasks-container:empty {
  display: none !important;
}
/* 🔴 UUSIEN KIRJEIDEN ILMAISIN */
.hamburger-btn {
  position: relative;   /* 🔥 tärkeä */
}

.alert-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  background: #ff3333;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255,0,0,0.8);
  z-index: 9999;
}

.alert-dot-small {
  display: inline-block;
  margin-left: 8px;
  width: 8px;
  height: 8px;
  background: #ff3333;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255,0,0,0.8);
}

/* piilotus (käytetään JS:ssä) */
.hide {
  display: none !important;
}
/* -------------------------------
   FIELDSET: korttimäinen tausta
--------------------------------*/
.notes-container fieldset {
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  padding: 0;                 /* legend ja textarea omaan rytmiin */
  margin: 0 0 14px 0;
  overflow: hidden;           /* jotta legend ja sisältö on samassa kortissa */
  backdrop-filter: blur(4px);
}


/* -------------------------------
   LEGEND: Otsikkopalkki
--------------------------------*/
.notes-container fieldset legend {
  width: 100%;
  box-sizing: border-box;

  background: rgb(63 70 80 / 50%);
  color: #fff;
  border-radius: 10px;
  padding: 2px 10px;
  margin: 0;                  /* EI ylimääräistä väliä */
  border-bottom: 1px solid rgba(255,255,255,0.2);

  display: flex;
  flex-direction: column;     /* otsikko ja checkbox omille riveille */
  gap: 6px;

  font-size: 1rem;
  font-weight: 600;
}


/* -------------------------------
   TEXTAREA sisällön alue
--------------------------------*/
.notes-container fieldset textarea {
  width: 100%;
  box-sizing: border-box;

  padding: 16px 16px 18px;
  margin: 0;

  color: #fff;

  border: none;
  resize: vertical;
  outline: none;

  min-height: 200px;
  font-size: 0.95rem;
  line-height: 1.45;
}


/* -------------------------------
   Checkbox rivitetty kauniisti
--------------------------------*/
.notes-container fieldset legend label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  font-size: 0.9rem;
}

.notes-container fieldset legend input[type="checkbox"] {
  transform: scale(1.1);
}
/* -------------------------------
   tehtäväkohtaiset muistiinpanot
--------------------------------*/

/* -----------------------------------------
   TASK FIELDSET: korttimäinen tausta
-----------------------------------------*/
.task-fieldset {
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  padding: 0;                     /* legend ja textarea omaan rytmiin */
  margin: 14px 0;
  overflow: hidden;
  backdrop-filter: blur(4px);
}
/* -----------------------------------------
   LEGEND: otsikkopalkki tehtävissä
-----------------------------------------*/
.task-fieldset legend {
  width: 100%;
  box-sizing: border-box;

  background: rgba(0, 0, 0, 0.85);
  color: #fff;

  border-radius: 10px;
  padding: 2px 10px;
  margin: 0;

  border-bottom: 1px solid rgba(255,255,255,0.2);

  display: flex;
  flex-direction: column;     /* otsikko + checkbox omille riveille */
  gap: 6px;

  font-size: 1rem;
  font-weight: 600;
}

/* Checkbox legendin sisällä */
.task-fieldset legend label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  font-size: 0.9rem;
}

.task-fieldset legend input[type="checkbox"] {
  transform: scale(1.1);
}
/* -----------------------------------------
   TEXTAREA: sisältöalue
-----------------------------------------*/
.task-fieldset textarea.task-note {
  width: 100%;
  box-sizing: border-box;

  padding: 16px 16px 18px;
  margin: 0;

  color: #fff;

  background: rgba(0,0,0,0.35);
  border: none;
  outline: none;
  resize: vertical;

  min-height: 80px;
  font-size: 0.95rem;
  line-height: 1.45;
}
/* -----------------------------------------
   PARTNER fieldset saman näköiseksi
-----------------------------------------*/
.partner-fieldset {
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 12px;
  margin-top: 12px;
  overflow: hidden;
  backdrop-filter: blur(4px);
}

.partner-fieldset legend {
  width: 100%;
  background: rgb(63 70 80 / 50%);
  border-radius: 10px;
  padding: 5px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  color: #fff;
}

.partner-fieldset textarea.partner-note {
  background: rgba(255,255,255,0.07);
  border: none;
  color: #ddd;
  width: 100%;
  padding: 16px;
  resize: none;
  min-height: 80px;
}


/* PREMIUM BADGE */
/* PREMIUM BADGE NAVIN ALLA */
header {
  display: flex;
  flex-direction: column;   /* 🔥 varmistaa että badge tulee ALLE */
  align-items: stretch;     /* täysi leveys */
}

.premium-badge-below {
  width: 98%;
  box-sizing: border-box;
  align-self: center;
  background: linear-gradient(135deg, #e5e4e2, #dcdcdc, #f7f7f7);
  border-bottom: 1px solid rgba(255,255,255,0.35);
  border-top: 1px solid rgba(255,255,255,0.55);

  color: #333;
  padding: 0px 12px;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  border-radius: 5px;
  display: none;            /* JS näyttää */
  align-items: center;       
  justify-content: center;

  letter-spacing: 1px;
  text-transform: uppercase;

  box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
}

/* Mobiilissa hieman kompaktimpi */
@media (max-width: 700px) {
  .premium-badge-below {
    font-size: 0.75rem;
    padding: 0px 10px;
    border-radius: 5px;
  }
}
/* Premium-nappi (modal & kortit) */
.premium-btn {
  background: #2e86de;          /* Sininen tausta */
  color: #fff;                  /* Valkoinen teksti */
  border: none;                 /* Ei reunaa */
  border-radius: 8px;           /* Pyöristetyt reunat */
  padding: 12px 25px;           /* Sisätila */
  font-size: 16px;              /* Tekstin koko */
  cursor: pointer;              /* Klikattava */
  transition: background 0.2s ease, transform 0.2s ease;
}

.premium-btn:hover {
  background: #1a6ab5;          /* Tummempi hover */
  transform: translateY(-2px);  /* Kevyt nosto */
}

/* Halutessa: disabled-tila */
.premium-btn:disabled {
  background: #8fb7e6;
  cursor: not-allowed;
  transform: none;
  opacity: 0.8;
}