/* ============================================================
   AFLM — ČLANSTVO — page-specific styles
   ============================================================ */

/* ---------- Hero ---------- */
.mem-hero { position: relative; background: radial-gradient(ellipse at 15% 0%, #12233b 0%, var(--navy-950) 62%); color: var(--text-light); padding: 60px 0 70px; overflow: hidden; }
.mem-hero .wrap { display: grid; grid-template-columns: 1fr 1.05fr; gap: 46px; align-items: center; }
.mem-hero h1 { font-size: clamp(2rem, 4vw, 2.9rem); }
.mem-hero .tagline { margin-top: 14px; font-size: 1.15rem; font-weight: 700; color: var(--gold-300); line-height: 1.5; }
.mem-hero p.desc { margin-top: 18px; color: var(--text-muted-onnavy); line-height: 1.75; font-size: 0.95rem; max-width: 480px; }
.mem-hero p.tagline2 { margin-top: 14px; color: var(--text-light); font-weight: 600; font-size: 0.92rem; line-height: 1.7; }
.mem-hero .cta-row { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.mem-hero-visual { position: relative; aspect-ratio: 16/10; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(135deg, var(--navy-800), var(--navy-950)); display: flex; align-items: center; justify-content: center; }
.mem-hero-visual img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .mem-hero .wrap { grid-template-columns: 1fr; } .mem-hero-visual { order: -1; } }

/* ---------- Why membership: 6 icon row ---------- */
.mem-why-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; margin-top: 40px; }
.mem-why-item { text-align: center; }
.mem-why-icon { width: 58px; height: 58px; border-radius: 50%; background: var(--navy-950); color: var(--gold-400); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.mem-why-item h4 { font-size: 0.86rem; letter-spacing: 0.02em; margin-bottom: 8px; }
.mem-why-item p { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }
@media (max-width: 900px) { .mem-why-grid { grid-template-columns: repeat(3, 1fr); row-gap: 30px; } }
@media (max-width: 560px) { .mem-why-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Pricing tiers ---------- */
.mem-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; align-items: stretch; }
.mem-tier { position: relative; border-radius: var(--radius-lg); padding: 30px 26px; border: 1.5px solid var(--border-soft); background: #fff; display: flex; flex-direction: column; }
.mem-tier.popular { border-color: var(--gold-500); box-shadow: 0 14px 34px -14px rgba(207,157,79,0.4); }
.mem-tier.premium { background: var(--navy-950); color: var(--text-light); border-color: var(--navy-800); }
.mem-tier-badge { position: absolute; top: -13px; left: 26px; background: var(--gold-500); color: var(--navy-950); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.mem-tier-icon { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 6px auto 18px; background: var(--bg-alt); color: var(--navy-900); border: 1.5px solid var(--border-soft); }
.mem-tier.premium .mem-tier-icon { background: transparent; color: var(--gold-400); border-color: var(--gold-500); }
.mem-tier h3 { text-align: center; font-size: 1.15rem; }
.mem-tier .price { text-align: center; font-weight: 700; color: var(--gold-600); margin-top: 6px; font-size: 0.95rem; }
.mem-tier.premium .price { color: var(--gold-400); }
.mem-tier .desc { text-align: center; font-size: 0.84rem; color: var(--text-muted); margin: 14px 0 18px; line-height: 1.55; }
.mem-tier.premium .desc { color: var(--text-muted-onnavy); }
.mem-tier ul { display: flex; flex-direction: column; gap: 10px; flex: 1; margin-bottom: 22px; }
.mem-tier li { display: flex; gap: 9px; align-items: flex-start; font-size: 0.83rem; line-height: 1.5; }
.mem-tier li svg { color: var(--gold-500); flex-shrink: 0; margin-top: 3px; }
.mem-tier li.highlight { color: var(--gold-600); font-weight: 700; }
.mem-tier.premium li.highlight { color: var(--gold-400); }
@media (max-width: 900px) { .mem-tiers { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; } }

/* ---------- Benefits band (navy, 8 icons) ---------- */
.mem-benefits-band { text-align: center; }
.mem-benefits-band h2 { color: var(--text-light); margin-bottom: 34px; }
.mem-benefits-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; }
.mem-benefit-item { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mem-benefit-item .ic { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(224,181,104,0.4); color: var(--gold-400); display: flex; align-items: center; justify-content: center; }
.mem-benefit-item span { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted-onnavy); line-height: 1.4; }
.mem-benefits-footer { margin-top: 34px; color: var(--gold-300); font-weight: 700; font-size: 0.98rem; }
@media (max-width: 900px) { .mem-benefits-grid { grid-template-columns: repeat(4, 1fr); row-gap: 26px; } }
@media (max-width: 560px) { .mem-benefits-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Info 4-column section ---------- */
.mem-info-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1.2fr; gap: 28px; align-items: start; }
.mem-info-col h4 { font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 18px; color: var(--ink); }

/* member card visual */
.mem-card-visual {
  border-radius: var(--radius-lg); padding: 20px; color: var(--text-light); position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-950) 70%);
  border: 1px solid rgba(224,181,104,0.3); aspect-ratio: 1.58/1; display: flex; flex-direction: column; justify-content: space-between;
}
.mem-card-visual .top { display: flex; justify-content: space-between; align-items: flex-start; }
.mem-card-visual .brand-mini { display: flex; align-items: center; gap: 6px; font-family: var(--font-head); font-size: 1rem; }
.mem-card-visual .brand-mini svg { color: var(--gold-400); }
.mem-card-visual .qr { width: 34px; height: 34px; border: 1px solid rgba(224,181,104,0.5); border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--gold-400); }
.mem-card-visual .name { font-weight: 700; font-size: 0.92rem; margin-top: 10px; }
.mem-card-visual .member-id { font-size: 0.68rem; color: var(--text-muted-onnavy); margin-top: 3px; letter-spacing: 0.03em; }
.mem-card-visual .status { display: inline-flex; align-items: center; gap: 5px; font-size: 0.64rem; font-weight: 700; color: #7fd99a; margin-top: 8px; letter-spacing: 0.04em; text-transform: uppercase; }
.mem-card-visual .status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #7fd99a; }
.mem-card-visual .valid { font-size: 0.62rem; color: var(--text-muted-onnavy); margin-top: 10px; }
.mem-card-checks { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.mem-card-checks li { display: flex; gap: 8px; font-size: 0.8rem; align-items: flex-start; }
.mem-card-checks li svg { color: var(--gold-500); flex-shrink: 0; margin-top: 3px; }

/* steps */
.mem-steps { display: flex; flex-direction: column; gap: 16px; }
.mem-step { display: flex; gap: 12px; align-items: flex-start; }
.mem-step .num { width: 26px; height: 26px; border-radius: 50%; background: var(--navy-950); color: var(--gold-400); font-size: 0.72rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mem-step strong { display: block; font-size: 0.84rem; }
.mem-step p { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }

/* pricing table */
.mem-price-table { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.mem-price-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg-alt); border-radius: var(--radius-sm); }
.mem-price-row .ic { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid var(--border-soft); color: var(--gold-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mem-price-row strong { display: block; font-size: 0.82rem; }
.mem-price-row span { font-size: 0.78rem; color: var(--text-muted); }
.mem-bank-note { font-size: 0.78rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 14px; }
.mem-bank-account { background: var(--navy-950); color: var(--text-light); border-radius: var(--radius-sm); padding: 12px 14px; font-weight: 700; font-size: 0.92rem; margin-bottom: 14px; }
.mem-bank-account span { display: block; font-size: 0.7rem; font-weight: 400; color: var(--text-muted-onnavy); margin-top: 3px; }

/* application form */
.mem-form { display: flex; flex-direction: column; gap: 12px; }
.mem-form input[type="text"], .mem-form input[type="tel"], .mem-form input[type="email"], .mem-form select {
  width: 100%; padding: 11px 13px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-soft); font-size: 0.86rem; font-family: inherit;
}
.mem-form input:focus, .mem-form select:focus { outline: none; border-color: var(--gold-500); }
.mem-form-row { display: flex; gap: 10px; }
.mem-form-row > * { flex: 1; }
.mem-radio-row { display: flex; gap: 18px; margin-top: 2px; }
.mem-radio { display: flex; align-items: center; gap: 7px; font-size: 0.82rem; cursor: pointer; }
.mem-radio input[type="radio"] { width: 15px; height: 15px; flex-shrink: 0; accent-color: var(--gold-500); }
.mem-checkbox { display: flex; align-items: flex-start; gap: 8px; font-size: 0.76rem; color: var(--text-muted); line-height: 1.5; cursor: pointer; }
.mem-checkbox input[type="checkbox"] { width: 15px; height: 15px; flex-shrink: 0; margin-top: 3px; accent-color: var(--gold-500); }

@media (max-width: 980px) { .mem-info-grid { grid-template-columns: 1fr 1fr; row-gap: 40px; } }
@media (max-width: 620px) { .mem-info-grid { grid-template-columns: 1fr; } }

/* ---------- FAQ accordion ---------- */
.mem-faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 26px; }
.mem-faq-item { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: #fff; overflow: hidden; }
.mem-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; background: none; border: none; text-align: left; font-size: 0.82rem; font-weight: 700; color: var(--ink); cursor: pointer; }
.mem-faq-q .plus { flex-shrink: 0; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; color: var(--gold-600); transition: transform 0.2s ease; }
.mem-faq-item.open .mem-faq-q .plus { transform: rotate(45deg); }
.mem-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.mem-faq-item.open .mem-faq-a { max-height: 240px; }
.mem-faq-a p { padding: 0 16px 16px; font-size: 0.8rem; color: var(--text-muted); line-height: 1.6; }

/* ---------- Confirmation toast for the application form ---------- */
.mem-form-success { background: #eef7ee; border: 1px solid #bfe3bf; color: #2b6b2b; border-radius: var(--radius-sm); padding: 14px 16px; font-size: 0.84rem; display: none; }
.mem-form-success.show { display: block; }