/* =====================================================================
   Meet Greek Singles - the Premium membership page (upgrade.php), milestone 3.
   One file for both templates: the Impact template links it from upgrade.html, and so does the phone template
   ({url_tmpl}main/mgs_impact/css/mgs-premium.css). Everything is scoped under .mgs-prem.
   Colours and fonts are the member area's (--mgs-* in css/mgs-member.css); the page's own names are --mp-*.
   Markup: upgrade.html and mgs_pricing.html (terms, boxes), MgsPremiumPage (hero, notice, cards, secure payments, features, "more than", points).
   The page runs the full width of the screen, for her banner; the sections under it keep to 1072px (.mgs-prem-plans and the rule after it).
   ===================================================================== */

.mgs-prem {
  --mp-navy: #002954;
  --mp-navy-deep: #001a3a;
  --mp-blue: #083068;
  --mp-gold: #e3b559;
  --mp-gold-deep: #d4a548;
  --mp-gold-text: #8f6420;
  --mp-cream: #fefcf8;
  --mp-cream-2: #f8f3ea;
  --mp-line: #e6dcc6;
  --mp-ink: #26303f;
  --mp-sky: #e6f0fb;
  --mp-serif: var(--mgs-serif, "Noto Serif Display", Georgia, "Times New Roman", serif);
  --mp-sans: var(--mgs-sans, "Manrope", "Segoe UI", Roboto, Arial, sans-serif);
  box-sizing: border-box;
  padding: 0 0 40px;
  font-family: var(--mp-sans);
  color: var(--mp-ink);
  line-height: 1.5;
}
.mgs-prem *, .mgs-prem *::before, .mgs-prem *::after { box-sizing: border-box; }
.mgs-prem :where(h1, h2, h3, p, ul, li) { margin: 0; padding: 0; list-style: none; }
.mgs-prem :where(h1, h2, h3) { font-family: var(--mp-serif); font-weight: 700; color: var(--mp-blue); letter-spacing: 0; }
.mgs-prem .mgs-prem-vendor { display: none !important; }
.mgs-prem svg { display: block; flex: none; }

/* ---------- the central column (desktop): the full width and plain on this page; upgrade.html adds the two classes with a line of script ---------- */
body.mgs-area .content .cont_w.mgs-prem-full { width: auto; max-width: none; margin: 0; }
body.mgs-area .column_main.mgs-prem-wide {
  width: auto; max-width: none; margin: 0; background: transparent !important; border: 0; box-shadow: none; border-radius: 0;
}
body.mgs-area .column_main.mgs-prem-wide .col_center { padding: 0; }
body.mgs-area .column_main.mgs-prem-wide .col_center .cont.mgs-prem { padding: 0 0 40px; background: none; border: 0; box-shadow: none; }
/* the two 193px side columns have no place beside a page of the full width: it stands on its own (the top bar holds the way back) */
body.mgs-area .column_main.mgs-prem-wide .col.left,
body.mgs-area .column_main.mgs-prem-wide .col.right { display: none !important; }

/* the order summary beside the payment card: Impact leaves it without a background (made for a dark overlay), so over the photo it could not be read */
body.mgs-area #pp_payment .info_profile_upgraded { background: #002954; border-radius: 0 3px 3px 0; color: #fff; }
body.mgs-area #pp_payment .info_profile_upgraded .bl { padding: 24px 20px; }
body.mgs-area #pp_payment .info_profile_upgraded .bl .name span,
body.mgs-area #pp_payment .info_profile_upgraded .bl p { color: #d6dfeb; }
body.mgs-area #pp_payment .info_profile_upgraded .bl p { font-size: 12px; line-height: 1.5; }
body.mgs-area #pp_payment .info_profile_upgraded .bl .price { font-size: 14px; }

/* ---------- the express request: the tick box of the payment pop-up (desktop, outside .mgs-prem) and of the sheet before payment (phone) ---------- */
.mgs-prem-express { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 8px; text-align: left; font-size: 13px; line-height: 1.45; font-weight: 500; color: #26303f; cursor: pointer; }
.mgs-prem-express input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #002954; cursor: pointer; }
a.mgs-prem-express-link { display: block; margin: 0 0 14px 28px; text-align: left; font-size: 13px; font-weight: 700; color: #0a4a92; text-decoration: underline; text-underline-offset: 3px; }
#pp_payment .mgs-prem-express { margin: 14px 26px 6px; }
#pp_payment a.mgs-prem-express-link { margin: 0 26px 14px 54px; }
#pp_payment .mgs-prem-express span, .mgs-prem-express span { display: block; width: auto; height: auto; margin: 0; padding: 0; font: inherit; color: inherit; text-align: left; }
#pp_payment #pp_payment_proceed:disabled { opacity: .55; cursor: default; }
.mgs-prem-sheet[hidden] { display: none; }
.mgs-prem-sheet { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 26, 58, .6); }
.mgs-prem-sheet__box { width: 100%; max-width: 380px; padding: 22px 20px 16px; background: var(--mp-cream); border: 1.5px solid var(--mp-gold); border-radius: 14px; box-shadow: 0 10px 28px rgba(0, 26, 58, .3); }
.mgs-prem-sheet__plan { font-family: var(--mp-serif); font-weight: 700; font-size: 20px; line-height: 1.25; color: var(--mp-blue); }
.mgs-prem-sheet__total { margin-top: 4px; font-weight: 700; font-size: 16px; color: var(--mp-navy); }
.mgs-prem-sheet__renew { margin: 6px 0 14px; font-size: 14px; color: var(--mp-navy); }
.mgs-prem .mgs-prem-choose-go { display: block; width: 100%; padding: 14px 18px; border: 0; border-radius: 999px; cursor: pointer; background: var(--mp-navy); color: #fff; font: 700 16px/1.2 var(--mp-sans); box-shadow: inset 0 0 0 2px var(--mp-gold); }
.mgs-prem .mgs-prem-choose-go:disabled { opacity: .5; cursor: default; }
.mgs-prem .mgs-prem-sheet__no { display: block; width: 100%; margin-top: 6px; padding: 10px; border: 0; background: none; color: var(--mp-navy); font: 600 15px/1.2 var(--mp-sans); cursor: pointer; }

/* ---------- hero ---------- */
/* Her photo (Sunset Romance Over the Acropolis, 1881x836, its sunset softened by _local/pages/grade_premium_hero.py) from edge to edge: the couple stays on
   the left, the text sits on the sky on the right, as in her design. The photo is held by its top, so the whole sky shows; the cards start under it (her
   PDF of 2026-11-06). The text box carries its own soft glow (::before): it stays inside the box at every width, the couple and the Acropolis stay clear;
   the text is navy on it (contrast checked, see test_public_pages.py). */
.mgs-prem-hero {
  position: relative;
  min-height: clamp(440px, 33vw, 620px);
  overflow: hidden;
  background: #eebfa8;
  display: flex;
  align-items: flex-start;
}
.mgs-prem-hero-bg, .mgs-prem-hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.mgs-prem-hero-bg img { object-fit: cover; object-position: 30% 0; }
.mgs-prem-hero-text { position: relative; z-index: 1; width: 41.5%; min-width: 400px; max-width: 580px; margin-left: 58.5%; padding: 28px 24px 44px 0; color: var(--mp-navy-deep); }
.mgs-prem-hero-text::before {
  content: ""; position: absolute; z-index: -1; top: 6px; right: -18px; bottom: 14px; left: -44px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 247, 233, .82) 0%, rgba(255, 247, 233, .68) 58%, rgba(255, 247, 233, 0) 100%);
}
.mgs-prem-eyebrow { font-size: 14px; font-weight: 800; letter-spacing: .14em; color: #2f1e05; text-transform: uppercase; }
.mgs-prem-hero h1 { margin: 6px 0 12px; font-size: clamp(34px, 3.2vw, 44px); line-height: 1.1; color: var(--mp-blue); }
.mgs-prem-divider { display: flex; align-items: center; gap: 8px; color: var(--mp-gold-deep); width: 150px; margin: 0 0 16px; }
.mgs-prem-divider i { flex: 1; height: 1.5px; background: var(--mp-gold-deep); }
.mgs-prem-subtitle { font-family: var(--mp-serif); font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--mp-navy-deep); margin-bottom: 10px; }
/* a glow around the letters themselves: on narrower screens the last lines reach the hills, and the big veil is not to spread there */
.mgs-prem-eyebrow, .mgs-prem-intro { text-shadow: 0 0 5px rgba(255, 247, 233, .95), 0 0 12px rgba(255, 247, 233, .85); }
.mgs-prem-intro { font-size: 16px; line-height: 1.55; font-weight: 500; color: #14213a; }

/* ---------- notice ---------- */
.mgs-prem-plans { position: relative; z-index: 2; margin-top: 44px; }
.mgs-prem-plans, .mgs-prem-features, .mgs-prem-more, .mgs-prem-points, .mgs-prem-boxes { width: min(1072px, calc(100% - 48px)); margin-left: auto; margin-right: auto; }
.mgs-prem-notice {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px;
  margin: 0 auto 22px; max-width: 760px; padding: 12px 20px;
  background: var(--mp-cream); border: 1.5px solid var(--mp-gold); border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 26, 58, .22); text-align: center; color: var(--mp-navy);
  font-weight: 600; font-size: 15px;
}
.mgs-prem .mgs-prem-manage {
  display: inline-block; padding: 8px 20px; border-radius: 999px; background: var(--mp-navy); color: #fff;
  font-weight: 700; font-size: 14px; text-decoration: none; border: 2px solid var(--mp-gold);
}
.mgs-prem .mgs-prem-manage:hover { background: var(--mgs-blue-600, #0a4a92); color: #fff; }

/* ---------- plan cards ---------- */
.mgs-prem-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.mgs-prem-card {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 30px 22px 24px; background: var(--mp-cream); border: 1.5px solid var(--mp-gold); border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0, 26, 58, .2);
}
.mgs-prem-badge {
  position: absolute; top: -17px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  padding: 7px 28px; background: linear-gradient(180deg, var(--mgs-gold-300, #f3c054), var(--mp-gold-deep));
  color: #fff; font-weight: 800; font-size: 14px; letter-spacing: .08em; border-radius: 6px; text-transform: uppercase;
  box-shadow: 0 3px 8px rgba(143, 100, 32, .35);
}
.mgs-prem-plan { font-variant-numeric: lining-nums; font-size: 24px; line-height: 1.2; text-transform: uppercase; }
.mgs-prem-tag { margin: 6px 0 12px; font-size: 16px; line-height: 1.4; color: var(--mp-navy); min-height: 2.8em; }
.mgs-prem-price { font-family: var(--mp-serif); font-weight: 700; font-size: 58px; line-height: 1.05; font-variant-numeric: lining-nums; color: var(--mp-blue); }
.mgs-prem-month { margin: 4px 0 18px; font-size: 15px; line-height: 1.35; color: var(--mp-navy); }
.mgs-prem-month span { display: block; font-size: 14px; color: #5a6475; }
.mgs-prem .mgs-prem-choose {
  display: block; width: 100%; margin-top: auto; padding: 14px 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--mp-navy); color: #fff; font: 700 16px/1.2 var(--mp-sans); text-transform: capitalize; box-shadow: inset 0 0 0 2px var(--mp-gold);
  transition: background .15s;
}
.mgs-prem .mgs-prem-choose:hover { background: var(--mgs-blue-600, #0a4a92); }
.mgs-prem .mgs-prem-choose:disabled { opacity: .6; cursor: default; }
.mgs-prem-terms { margin: 22px auto 0; max-width: 760px; text-align: center; font-size: 13px; line-height: 1.55; color: #5a6475; }

/* ---------- secure payments: directly under the plans ---------- */
.mgs-prem-secure { display: flex; align-items: center; gap: 18px; margin-top: 26px; padding: 16px 24px; background: var(--mp-cream); border: 1px solid var(--mp-line); border-radius: 14px; }
.mgs-prem-secure-text { flex: 1; min-width: 0; }
.mgs-prem-secure h2 { font-size: 19px; line-height: 1.25; margin-bottom: 2px; }
.mgs-prem-secure p { font-size: 14.5px; line-height: 1.45; color: var(--mp-navy); }
.mgs-prem-secure-logos { flex: none; display: flex; align-items: center; gap: 18px; }
.mgs-prem-secure-logos img { display: block; width: auto; height: 40px; }
.mgs-prem-secure-logos img + img { height: 32px; }

/* ---------- features ---------- */
.mgs-prem-features { margin-top: 44px; text-align: center; }
.mgs-prem-features h2, .mgs-prem-more h2 { font-size: 34px; line-height: 1.2; }
.mgs-prem-lead { margin: 8px auto 28px; max-width: 640px; font-size: 16px; color: var(--mp-navy); }
.mgs-prem-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; text-align: left; }
.mgs-prem-feature { display: flex; align-items: flex-start; gap: 18px; padding: 12px 0 14px; }
.mgs-prem-ico, .mgs-prem-pico { color: var(--mp-navy); }
.mgs-prem-ico {
  flex: none; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #fdf3dc; border: 2px solid var(--mp-gold);
}
.mgs-prem-feature h3 { font-size: 19px; line-height: 1.25; margin-bottom: 3px; }
.mgs-prem-feature p { font-size: 15.5px; line-height: 1.45; color: var(--mp-navy); }

/* ---------- more than a Premium membership ---------- */
.mgs-prem-more {
  display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); margin-top: 40px;
  background: var(--mp-cream); border: 1px solid var(--mp-line); border-radius: 14px; overflow: hidden;
}
.mgs-prem-more-img { position: relative; min-height: 300px; }
.mgs-prem-more-img picture, .mgs-prem-more-img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.mgs-prem-more-img img { object-fit: cover; }
.mgs-prem-more-text { padding: 30px 32px 30px; }
.mgs-prem-more h2 { font-size: 30px; }
.mgs-prem-more .mgs-prem-divider { color: var(--mp-gold); margin: 10px 0 14px; }
.mgs-prem-more-text > p { font-size: 15px; line-height: 1.55; color: var(--mp-ink); margin-bottom: 12px; }
.mgs-prem-callout {
  display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 18px; background: var(--mp-sky); border-radius: 8px;
}
.mgs-prem-callout p { font-family: var(--mp-serif); font-weight: 700; font-size: 17px; line-height: 1.4; color: var(--mp-blue); }

/* ---------- three points ---------- */
.mgs-prem-points { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 28px; padding: 22px 8px; background: var(--mp-sky); border-radius: 14px; }
.mgs-prem-point { display: flex; align-items: flex-start; gap: 14px; padding: 4px 24px; }
.mgs-prem-point + .mgs-prem-point { border-left: 1px solid #c5d8ee; }
.mgs-prem-pico { flex: none; color: var(--mp-blue); }
.mgs-prem-pico svg { stroke-width: 1.4; }   /* at this size the icons' usual line looks heavy */
.mgs-prem-point h3 { font-family: var(--mp-sans); font-size: 16px; line-height: 1.3; font-weight: 700; margin-bottom: 3px; }
.mgs-prem-point p { font-size: 13.5px; line-height: 1.45; color: var(--mp-navy); }

/* ---------- narrower screens ---------- */
/* under 1300px the photo is smaller and the text box reaches the hills: smaller type, and the glow stays in the box but is firmer */
@media (max-width: 1300px) {
  .mgs-prem-hero-text { padding-top: 20px; }
  .mgs-prem-hero-text::before { top: 0; background: radial-gradient(closest-side, rgba(255, 247, 233, .92) 0%, rgba(255, 247, 233, .86) 66%, rgba(255, 247, 233, 0) 100%); }
  .mgs-prem-subtitle { font-size: 18px; margin-bottom: 8px; }
  .mgs-prem-intro { font-size: 15px; line-height: 1.5; }
  .mgs-prem-divider { margin-bottom: 12px; }
}
/* under 1200px the last lines lie on the hills and the Acropolis: a soft-edged panel covers the whole text, corners too; the photo moves left, off the box */
@media (max-width: 1200px) {
  .mgs-prem-hero-bg img { object-position: 60% 0; }
  .mgs-prem-hero-text::before { top: 14px; right: 6px; bottom: 36px; left: -8px; border-radius: 40px; background: rgba(255, 247, 233, .72); filter: blur(20px); }
}
@media (max-width: 1060px) {
  .mgs-prem-plans, .mgs-prem-features, .mgs-prem-more, .mgs-prem-points, .mgs-prem-boxes { width: calc(100% - 32px); }
  .mgs-prem-hero-text { margin-left: auto; }
  .mgs-prem-cards { gap: 16px; }
  .mgs-prem-card { padding-left: 14px; padding-right: 14px; }
  .mgs-prem-cols { gap: 0 32px; }
  .mgs-prem-point { padding: 4px 14px; }
}
@media (max-width: 760px) {
  .mgs-prem { padding-bottom: 24px; }
  /* phone: the photo on top, in full colour; the text on navy under it (white on navy), the cards under the banner */
  .mgs-prem-hero { min-height: 0; border-radius: 0 0 14px 14px; display: block; background: var(--mp-navy-deep); }
  .mgs-prem-plans, .mgs-prem-features, .mgs-prem-more, .mgs-prem-points, .mgs-prem-boxes { width: auto; }
  .mgs-prem-hero-bg { position: relative; display: block; aspect-ratio: 1000 / 619; }
  .mgs-prem-hero-bg img { object-position: 30% 50%; }
  .mgs-prem-hero-text::before { display: none; }
  .mgs-prem-hero-text { width: auto; min-width: 0; max-width: none; margin-left: 0; padding: 22px 20px 26px; color: #fff; }
  .mgs-prem-eyebrow { color: var(--mp-gold); }
  .mgs-prem-eyebrow, .mgs-prem-intro { text-shadow: none; }
  .mgs-prem-hero h1 { font-size: 32px; color: #fff; }
  .mgs-prem-divider { color: var(--mp-gold); }
  .mgs-prem-divider i { background: var(--mp-gold); }
  .mgs-prem-subtitle { color: #fff; }
  .mgs-prem-intro { color: rgba(255, 255, 255, .92); }
  .mgs-prem-subtitle { font-size: 17px; }
  .mgs-prem-intro { font-size: 15px; }
  .mgs-prem-plans { margin: 34px 14px 0; }
  .mgs-prem-cards { grid-template-columns: 1fr; gap: 28px; }
  .mgs-prem-card--badge { margin-top: 0; }
  .mgs-prem-tag { min-height: 0; }
  .mgs-prem-price { font-size: 48px; }
  .mgs-prem-secure { flex-wrap: wrap; gap: 12px 14px; padding: 16px; }
  .mgs-prem-secure-text { flex-basis: calc(100% - 74px); }
  .mgs-prem-secure-logos { width: 100%; justify-content: center; }
  .mgs-prem-features { margin: 34px 16px 0; }
  .mgs-prem-features h2, .mgs-prem-more h2 { font-size: 27px; }
  .mgs-prem-cols { grid-template-columns: 1fr; }
  .mgs-prem-more { grid-template-columns: 1fr; margin: 28px 14px 0; }
  .mgs-prem-more-img { min-height: 0; aspect-ratio: 1200 / 614; }
  .mgs-prem-more-text { padding: 22px 18px; }
  .mgs-prem-callout p { font-size: 16px; }
  .mgs-prem-points { grid-template-columns: 1fr; margin: 22px 14px 0; padding: 12px 6px; }
  .mgs-prem-point { padding: 12px 14px; }
  .mgs-prem-point + .mgs-prem-point { border-left: 0; border-top: 1px solid #c5d8ee; }
}

/* ---------- phone template ---------- */
.mgs-prem-phone { max-width: none; width: 100vw; margin: 0; padding-bottom: 16px; }   /* the phone shell is 27px wider than the screen (.main margin-right) */
.mgs-prem-phone + .bl_txt_power { display: none; }
.mgs-prem-form { margin-top: 18px; }
.mgs-prem-form #frm_upgrade_plan .bl:first-child, .mgs-prem-form #bl_btn_action_upgrade { display: none; }
.mgs-prem-form .bl label { display: block; margin-bottom: 6px; font-weight: 700; color: var(--mp-navy); }

/* ---------- the public pricing page (/pricing, a standalone page: mgs_pricing.html, the Premium page's sections plus two boxes) and the cards' extras ---------- */
.mgs-prem .mgs-prem-term { margin: -10px 0 18px; font-size: 14px; color: #5a6475; }
.mgs-prem a.mgs-prem-choose { text-align: center; text-decoration: none; color: #fff; }
.mgs-prem a.mgs-prem-choose:hover { color: #fff; }
.mgs-prem .mgs-prem-currency { margin-top: 12px; }
.mgs-prem-public { padding: 0 0 72px; }
.mgs-prem-public__lead { max-width: 680px; margin: 24px auto 0; text-align: center; font-size: 17px; line-height: 1.6; color: var(--mp-navy); }
.mgs-prem-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 32px; }
.mgs-prem-box { padding: 26px 30px; background: var(--mp-cream); border: 1px solid var(--mp-line); border-radius: 14px; }
.mgs-prem-box h2 { font-size: 26px; line-height: 1.2; margin-bottom: 12px; }
.mgs-prem-list li { position: relative; padding: 0 0 8px 26px; font-size: 16px; line-height: 1.55; color: var(--mp-ink); }
.mgs-prem-list li::before { content: ""; position: absolute; left: 4px; top: .5em; width: 9px; height: 9px; border-radius: 50%; background: var(--mp-gold-deep); }
.mgs-prem-public__links { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--mp-ink); }
.mgs-prem-public__links a { color: var(--mgs-blue-700, #0a4a92); font-weight: 700; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .mgs-prem-public { padding: 0 0 48px; }
  .mgs-prem-public__lead { margin-top: 20px; font-size: 16px; }
  .mgs-prem-boxes { grid-template-columns: 1fr; gap: 20px; margin: 28px 14px 0; }
  .mgs-prem-box { padding: 20px 18px; }
  .mgs-prem-box h2 { font-size: 23px; }
  .mgs-prem-list li { font-size: 15.5px; }
}