/* ===========================================================
   MONUMENTAS — membersm.css
   The Members page (members.html) and the card component, which the admin
   dashboard reuses for its preview. Loaded after stylem.css; shares its look
   (light page, black pill buttons, Inter) but nothing of the cube.
=========================================================== */

.membersPage{
    max-width:1100px;
    margin:0 auto;
    padding:140px 25px 120px;
}

.membersHero{
    text-align:center;
    max-width:680px;
    margin:0 auto 56px;
}

.membersEyebrow{
    font-size:13px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#888;
    margin-bottom:14px;
}

.membersHero h1{
    font-size:56px;
    letter-spacing:-2px;
    line-height:1.05;
    margin-bottom:20px;
}

.membersSection{
    scroll-margin-top:100px;
    margin-bottom:72px;
}

.membersSection > h2{
    font-size:24px;
    letter-spacing:-.5px;
    margin-bottom:22px;
}

.wallCount{
    font-size:15px;
    font-weight:500;
    color:#999;
    margin-left:6px;
}

.membersEmpty{
    color:#999;
    font-style:italic;
}

/* ---------- banner ---------- */

.membersBanner{
    background:#111;
    color:#fff;
    border-radius:16px;
    padding:16px 22px;
    margin:0 0 40px;
    font-size:15px;
    line-height:1.5;
    text-align:center;
}

.membersBanner.warn{
    background:#fff4e5;
    color:#8a4b00;
}

/* ---------- plans ---------- */

.planGrid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
    margin-bottom:28px;
}

.planOption{
    position:relative;
    text-align:left;
    background:#fff;
    border:2px solid transparent;
    border-radius:22px;
    padding:26px 24px 24px;
    cursor:pointer;
    font-family:inherit;
    color:#111;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
    transition:transform .2s, border-color .2s, box-shadow .2s;
}

.planOption:hover{
    transform:translateY(-3px);
}

.planOption.selected{
    border-color:#111;
    box-shadow:0 14px 36px rgba(0,0,0,.12);
}

.planName{
    display:block;
    font-size:14px;
    font-weight:600;
    color:#777;
    margin-bottom:10px;
}

.planPrice{
    display:block;
    font-size:38px;
    font-weight:700;
    letter-spacing:-1.5px;
}

.planPrice small{
    font-size:15px;
    font-weight:500;
    letter-spacing:0;
    color:#888;
}

.planPerMonth{
    display:block;
    margin-top:6px;
    font-size:14px;
    color:#888;
}

.planSave{
    position:absolute;
    top:18px;
    right:18px;
    background:#e8f7ee;
    color:#17794a;
    font-size:12px;
    font-weight:700;
    padding:5px 10px;
    border-radius:999px;
}

.joinRow{
    display:flex;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
    margin-bottom:34px;
}

.joinNote{
    font-size:14px;
    color:#888;
    flex:1;
    min-width:220px;
}

.membersSteps{
    list-style:none;
    padding:0;
    margin:0;
    text-align:left;
    counter-reset:step;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
}

.membersSteps li{
    counter-increment:step;
    font-size:14px;
    line-height:1.55;
    color:#666;
    background:#f1f1f1;
    border-radius:16px;
    padding:18px 20px;
}

.membersSteps li::before{
    content:counter(step);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    border-radius:50%;
    background:#111;
    color:#fff;
    font-size:12px;
    font-weight:700;
    margin-right:10px;
}

/* ---------- my card ---------- */

.myCardStatus{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    margin-bottom:22px;
}

.statusChip{
    display:inline-block;
    font-size:13px;
    font-weight:600;
    padding:7px 14px;
    border-radius:999px;
    background:#eee;
    color:#555;
}

.statusChip.good{ background:#e8f7ee; color:#17794a; }
.statusChip.wait{ background:#fff4e5; color:#8a4b00; }
.statusChip.bad{ background:#fbeaea; color:#c0392b; }

.membersSection.centered{
    text-align:center;
}

.membersSection.centered .joinRow{
    justify-content:center;
}

.membersSection.centered .joinNote{
    flex:0 1 auto;
}

.myCardLayout{
    max-width:920px;
    margin:0 auto;
    text-align:left;
    display:grid;
    grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr);
    gap:36px;
    align-items:start;
}

.cardForm{
    background:#fff;
    border-radius:22px;
    padding:28px;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.fieldLabel{
    display:block;
    font-size:13px;
    font-weight:600;
    color:#555;
    margin:0 0 8px;
}

.fieldInput{
    width:100%;
    padding:13px 15px;
    border-radius:12px;
    border:1px solid #ddd;
    font-family:inherit;
    font-size:15px;
    background:#fff;
    margin-bottom:22px;
}

.fieldInput:focus{
    outline:none;
    border-color:#111;
}

.linkRow{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 2fr) auto;
    gap:8px;
    margin-bottom:8px;
}

.linkRow .fieldInput{
    margin-bottom:0;
}

.linkRemove{
    border:none;
    background:#f1f1f1;
    width:44px;
    min-height:44px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    cursor:pointer;
    font-size:18px;
    color:#777;
}

.linkRemove:hover{
    background:#fbeaea;
    color:#c0392b;
}

.formActions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:24px;
}

.formError{
    margin-top:16px;
    color:#c0392b;
    font-size:14px;
}

.fieldHint{
    margin-top:16px;
    font-size:13px;
    color:#999;
    line-height:1.5;
}

.cardPreviewWrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    position:sticky;
    top:100px;
}

.cardPreviewWrap .fieldLabel{
    margin-bottom:0;
}

#cardPreview{
    width:100%;
    max-width:300px;
}

textarea.fieldInput{
    resize:none;
    line-height:1.4;
}

.charCount{
    float:right;
    font-weight:500;
    color:#999;
}

/* ---------- look controls ---------- */

.styleControls{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-bottom:24px;
}

.styleRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
}

.styleLabel{
    font-size:14px;
    color:#444;
}

.swatches{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
}

.swatch{
    min-width:28px;
    height:28px;
    border-radius:50%;
    border:2px solid rgba(0,0,0,.12);
    cursor:pointer;
    padding:0;
    font-family:inherit;
    font-size:10px;
    font-weight:700;
    color:#555;
    background:#fff;
}

.swatch.auto{
    border-radius:999px;
    padding:0 9px;
}

.swatch.selected{
    border-color:#111;
    box-shadow:0 0 0 2px #fff, 0 0 0 4px #111;
}

.swatchPicker{
    width:34px;
    height:28px;
    padding:0;
    border:none;
    background:none;
    cursor:pointer;
}

.styleSelect{
    width:auto;
    min-width:160px;
    margin:0;
    padding:10px 12px;
}

/* ---------- mobile ---------- */

@media(max-width:900px){
    .cardPreviewWrap{ position:static; }
    .membersPage{ padding:110px 18px 90px; }
    .membersHero h1{ font-size:40px; letter-spacing:-1.5px; }
    .planGrid, .membersSteps{ grid-template-columns:1fr; }
    .myCardLayout{ grid-template-columns:1fr; }
    .wallGrid{ grid-template-columns:1fr; }
}

@media(max-width:520px){
    .linkRow{ grid-template-columns:1fr auto; margin-bottom:16px; }
    .linkRow .linkLabelInput{ grid-column:1 / -1; }
    .joinRow .membersPrimary{ width:100%; }
}

/* ---------- admin dashboard: member review cards ---------- */

.adminMemberCard{
    display:block;
}

.adminMemberHead{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px 16px;
    margin-bottom:6px;
}

.adminMemberHead strong{
    font-size:18px;
    margin:0;
}

.adminMemberHead .myCardStatus{
    margin:0;
}

.adminMemberMeta{
    display:block;
    color:#888;
    font-size:13px;
    margin-bottom:18px;
}

.adminMemberCard .fieldInput{
    margin-bottom:14px;
}

.adminLinkRow{
    grid-template-columns:minmax(0, 1fr) minmax(0, 2fr) auto auto;
    align-items:center;
}

.adminLinkRow .fieldInput{
    margin-bottom:0;
}

.adminLinkOpen{
    text-decoration:none;
    color:#111;
    white-space:nowrap;
}

.adminLinkOpen.hidden{
    display:none;
}

.adminMemberCard .adminCardActions{
    margin:16px 0 10px;
}

@media(max-width:700px){
    .adminLinkRow{ grid-template-columns:1fr auto; }
    .adminLinkRow .linkLabelInput, .adminLinkRow .linkUrlInput{ grid-column:1 / -1; }
}

.adminLookRow{
    display:flex;
    flex-wrap:wrap;
    gap:10px 22px;
    align-items:center;
    margin-bottom:16px;
}

.adminLookField{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:#555;
}

.adminLookField input[type=color]{
    width:34px;
    height:28px;
    padding:0;
    border:none;
    background:none;
    cursor:pointer;
}

/* ---------- admin dashboard: Site content editor ---------- */

.siteGroup{
    background:#fff;
    border-radius:20px;
    padding:24px 26px;
    margin-bottom:20px;
    box-shadow:0 8px 25px rgba(0,0,0,.05);
}

.siteGroup > h3{
    font-size:18px;
    margin-bottom:18px;
}

.siteSection{
    border-top:1px solid #eee;
    padding:16px 0 4px;
    margin-top:8px;
}

.siteSectionHead{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:12px;
}

.siteField{
    margin-bottom:12px;
}

.siteField .fieldInput{
    margin-bottom:6px;
}

.siteToggle{
    display:inline-block;
    margin:0 18px 10px 0;
    font-size:13px;
    color:#555;
    cursor:pointer;
}

.siteLinks, .siteCustom{
    margin-top:16px;
}

.siteLinkRow{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 2fr) auto;
    gap:8px;
    margin-bottom:8px;
}

.siteLinkRow .fieldInput{
    margin-bottom:0;
}

.siteCustomCard{
    background:#f7f7f8;
    border-radius:16px;
    padding:16px;
    margin-bottom:12px;
}

.siteCustomCard .fieldInput, .siteCustomCard .adminSelect{
    margin-bottom:10px;
}

.siteCustomCard .siteLinkRow{
    grid-template-columns:minmax(0, 1fr) minmax(0, 2fr);
    margin-bottom:12px;
}

.siteOpenLink{
    text-decoration:none;
    color:#111;
    display:inline-flex;
    align-items:center;
}

.siteActions{
    position:sticky;
    bottom:12px;
    background:rgba(250,250,250,.9);
    padding:12px;
    border-radius:14px;
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
}

.siteSave{
    background:#111;
    color:#fff;
}

@media(max-width:700px){
    .siteLinkRow{ grid-template-columns:1fr auto; }
    .siteLinkRow .fieldInput:first-child{ grid-column:1 / -1; }
    .siteCustomCard .siteLinkRow{ grid-template-columns:1fr; }
}


/* ---------- the two steps ---------- */

.stepper{
    list-style:none;
    padding:0;
    margin:0 auto 44px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    font-size:14px;
    font-weight:600;
    color:#999;
}

.stepper li{
    display:flex;
    align-items:center;
    gap:10px;
}

.stepDot{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border-radius:50%;
    background:#e6e6e6;
    color:#777;
    font-size:13px;
}

.stepper li.active{ color:#111; }
.stepper li.active .stepDot{ background:#111; color:#fff; }
.stepper li.done .stepDot{ background:#17794a; color:#fff; }

.stepLine{
    width:56px;
    height:2px;
    background:#ddd;
}

.signinText{
    max-width:480px;
    margin:0 auto 26px;
    color:#555;
    line-height:1.6;
}

.backStep{
    margin-bottom:26px;
}

@media(max-width:520px){
    .stepLine{ width:24px; }
}

.stepper.hidden{
    display:none;
}

/* ---------- admin dashboard: Design tab ---------- */

.designLayout{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr);
    gap:28px;
    align-items:start;
}

.designControls, .designPreviewWrap{
    background:#fff;
    border-radius:20px;
    padding:24px;
    box-shadow:0 8px 25px rgba(0,0,0,.05);
}

.designPreviewWrap{
    position:sticky;
    top:80px;
}

.templateGrid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(110px, 1fr));
    gap:10px;
    margin-bottom:22px;
}

.templateCard{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:10px;
    border:2px solid #e6e6e6;
    border-radius:14px;
    background:#fff;
    cursor:pointer;
    font-family:inherit;
    text-align:left;
}

.templateCard.selected{
    border-color:#111;
}

.templateStrip{
    display:flex;
    height:26px;
    border-radius:8px;
    overflow:hidden;
}

.templateSwatch{
    flex:1;
}

.templateName{
    font-size:13px;
    font-weight:600;
    color:#111;
}

.templateCustom{
    grid-column:1 / -1;
    font-size:13px;
    color:#888;
}

.designTabs{
    display:flex;
    gap:8px;
    margin-bottom:18px;
}

.designTab{
    border:none;
    padding:9px 18px;
    border-radius:999px;
    background:#f0f0f0;
    font-family:inherit;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
}

.designTab.active{
    background:#111;
    color:#fff;
}

.designRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 0;
    border-bottom:1px solid #f0f0f0;
}

.designColor{
    display:inline-flex;
    align-items:center;
    gap:10px;
}

.designColor input[type=color]{
    width:44px;
    height:30px;
    padding:0;
    border:none;
    background:none;
    cursor:pointer;
}

.designColor code{
    font-size:12px;
    color:#888;
}

.designControls .adminCardActions{
    margin-top:22px;
}

.designNote{
    margin-top:12px;
    font-size:12px;
    color:#999;
}

/* the preview: a small copy of the page, themed through the same variables */
.dp{
    --hdr-bg:#fff; --hdr-fg:#111; --hdr-font:'Inter', sans-serif;
    --body-bg:#fafafa; --body-fg:#111; --body-surface:#fff; --accent:#111; --accent-fg:#fff; --body-font:'Inter', sans-serif;
    --ftr-bg:#fafafa; --ftr-fg:#888; --ftr-font:'Inter', sans-serif;
    border:1px solid #e0e0e0;
    border-radius:14px;
    overflow:hidden;
}

.dp [data-area]{
    outline:3px solid transparent;
    outline-offset:-3px;
    transition:outline-color .2s;
}

.dp [data-area].editing{
    outline-color:#3b82f6;
}

.dpHeader{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 18px;
    background:var(--hdr-bg);
    color:var(--hdr-fg);
    font-family:var(--hdr-font);
}

.dpBrand{
    font-size:16px;
    font-weight:700;
    letter-spacing:-.5px;
}

.dpPills{
    display:flex;
    gap:6px;
}

.dpPill, .dpAccent{
    font-size:11px;
    padding:6px 12px;
    border-radius:999px;
}

.dpPill{
    border:1px solid color-mix(in srgb, var(--hdr-fg) 28%, transparent);
}

.dpHeader .dpAccent{
    background:var(--accent);
    color:var(--accent-fg);
}

.dpBody{
    padding:30px 18px 26px;
    background:var(--body-bg);
    color:var(--body-fg);
    font-family:var(--body-font);
    text-align:center;
}

.dpTitle{
    font-size:30px;
    letter-spacing:-1px;
    margin-bottom:8px;
}

.dpText{
    font-size:13px;
    opacity:.7;
    margin-bottom:16px;
}

.dpBig{
    display:inline-block;
    background:var(--accent);
    color:var(--accent-fg);
    font-size:12px;
    padding:9px 20px;
}

.dpCards{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
    margin-top:24px;
}

.dpCard{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    padding:14px 8px;
    border-radius:12px;
    background:var(--body-surface);
    font-size:12px;
}

.dpNum{
    width:22px;
    height:22px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--accent);
    color:var(--accent-fg);
}

.dpSmall{
    font-size:10px;
    opacity:.7;
}

.dpFooter{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    padding:16px;
    background:var(--ftr-bg);
    color:var(--ftr-fg);
    font-family:var(--ftr-font);
    font-size:12px;
    border-top:1px solid color-mix(in srgb, var(--ftr-fg) 25%, transparent);
}

@media(max-width:900px){
    .designLayout{ grid-template-columns:1fr; }
    .designPreviewWrap{ position:static; }
}

/* ---------- admin dashboard: Martin tab ---------- */

.martinH{
    margin-top:40px;
}

.martinEditorLink{
    text-decoration:none;
    display:inline-flex;
    padding:12px 22px;
    font-size:14px;
}

.martinMsg.isRead{
    opacity:.6;
}

.martinMsgText{
    white-space:pre-wrap;
    color:#111 !important;
    font-size:14px !important;
    margin:6px 0 !important;
}


/* ---------- admin dashboard: membership prices ---------- */

.pricingBox{
    background:#fff;
    border-radius:20px;
    padding:24px 26px;
    margin-bottom:28px;
    box-shadow:0 8px 25px rgba(0,0,0,.05);
}

.pricingBox h3{
    font-size:18px;
    margin-bottom:8px;
}

#memberPricingRows{
    margin:18px 0 6px;
}

.pricingRow{
    display:grid;
    grid-template-columns:120px 170px 1fr;
    align-items:center;
    gap:14px;
    padding:10px 0;
    border-bottom:1px solid #f0f0f0;
}

.pricingName{
    font-weight:600;
}

.pricingInput{
    display:flex;
    align-items:center;
    gap:6px;
    font-weight:600;
}

.pricingInput .fieldInput{
    margin:0;
    width:110px;
    padding:10px 12px;
}

.pricingPer{
    font-size:13px;
    color:#888;
}

@media(max-width:700px){
    .pricingRow{ grid-template-columns:1fr; gap:6px; }
}

/* admin: the examples under the cube pricing fields */
.pricingExample{
    margin:14px 0 4px;
    padding:14px 16px;
    background:#f6f6f7;
    border-radius:12px;
    font-size:13px;
    color:#444;
    line-height:1.8;
}

.pricingExample:empty{
    display:none;
}