/**
 * VIRTUS Signing Page Styles
 */
:root {
    --vs-gold: #c9a84c;
    --vs-gold-bright: #f0d080;
    --vs-gold-dim: #7a5e2a;
    --vs-bg: #0a0815;
    --vs-surface: rgba(255,255,255,0.04);
    --vs-surface-hover: rgba(255,255,255,0.08);
    --vs-border: rgba(201,168,76,0.2);
    --vs-text: #e8dfc8;
    --vs-text-dim: #9a917d;
    --vs-error: #d4534b;
    --vs-success: #5cb85c;
    --vs-heading: 'Cinzel', serif;
    --vs-body: 'Cormorant Garamond', serif;
    --vs-radius: 8px;
}

.vs-page { min-height:100vh; background:var(--vs-bg); color:var(--vs-text); font-family:var(--vs-body); font-size:18px; line-height:1.6; display:flex; flex-direction:column; align-items:center; padding:2rem 1rem 4rem; }
.vs-container { width:100%; max-width:600px; }

/* Card */
.vs-card { background:var(--vs-surface); border:1px solid var(--vs-border); border-radius:var(--vs-radius); padding:2rem; margin-bottom:1.5rem; }

/* Medal Info */
.vs-medal-label { font-family:var(--vs-heading); font-size:0.75rem; letter-spacing:0.35em; text-transform:uppercase; color:var(--vs-gold-dim); text-align:center; margin-bottom:0.3rem; }
.vs-virtue-name { font-family:var(--vs-heading); font-size:2.2rem; color:var(--vs-gold); margin:0; text-align:center; line-height:1.2; }
.vs-recipient { text-align:center; font-size:1.15rem; color:var(--vs-text); margin:0.5rem 0 0; font-style:italic; }
.vs-occasion { text-align:center; font-size:0.85rem; color:var(--vs-gold-dim); margin:0.5rem 0 0; }
.vs-counter { text-align:center; margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--vs-border); font-size:0.9rem; color:var(--vs-text-dim); }
.vs-count-num { font-family:var(--vs-heading); font-size:1.4rem; color:var(--vs-gold); display:inline-block; margin-right:0.3rem; }

/* Form */
.vs-form-title { font-family:var(--vs-heading); font-size:1.1rem; color:var(--vs-gold); text-align:center; margin:0 0 1.2rem; letter-spacing:0.08em; }
.vs-field { margin-bottom:1.2rem; }
.vs-field label { display:block; font-size:0.9rem; color:var(--vs-text-dim); margin-bottom:0.4rem; }
.vs-field input[type="text"], .vs-field input[type="email"], .vs-field textarea { width:100%; padding:0.7rem 0.8rem; background:rgba(0,0,0,0.3); border:1px solid var(--vs-border); border-radius:var(--vs-radius); color:var(--vs-text); font-family:var(--vs-body); font-size:0.95rem; outline:none; transition:border-color 0.2s; }
.vs-field input:focus, .vs-field textarea:focus { border-color:var(--vs-gold); }
.vs-field input::placeholder, .vs-field textarea::placeholder { color:var(--vs-text-dim); opacity:0.5; }
.vs-hint { font-size:0.75rem; color:var(--vs-text-dim); margin-top:0.3rem; opacity:0.7; }
.vs-char-counter { font-size:0.75rem; color:var(--vs-text-dim); text-align:right; margin-top:0.2rem; }

/* Photo Upload */
.vs-photo-upload { border:2px dashed var(--vs-border); border-radius:var(--vs-radius); overflow:hidden; cursor:pointer; transition:border-color 0.2s; }
.vs-photo-upload:hover { border-color:var(--vs-gold-dim); }
.vs-photo-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2rem 1rem; color:var(--vs-text-dim); }
.vs-photo-icon { font-size:2rem; color:var(--vs-gold-dim); margin-bottom:0.3rem; }
.vs-photo-text { font-size:0.9rem; }
.vs-photo-hint { font-size:0.7rem; margin-top:0.3rem; opacity:0.6; }
.vs-photo-preview { position:relative; }
.vs-photo-preview img { width:100%; height:200px; object-fit:cover; display:block; }
.vs-photo-remove { position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:50%; border:none; background:rgba(0,0,0,0.7); color:#fff; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; }

/* Buttons */
.vs-btn { display:block; width:100%; padding:0.9rem; border:none; border-radius:var(--vs-radius); font-family:var(--vs-heading); font-size:0.95rem; letter-spacing:0.08em; cursor:pointer; text-align:center; text-decoration:none; transition:all 0.2s; }
.vs-btn-gold { background:linear-gradient(135deg,var(--vs-gold),var(--vs-gold-bright)); color:var(--vs-bg); }
.vs-btn-gold:hover:not(:disabled) { filter:brightness(1.15); }
.vs-btn-gold:disabled { opacity:0.5; cursor:not-allowed; }
.vs-btn-ghost { background:transparent; border:1px solid var(--vs-border); color:var(--vs-text-dim); display:inline-block; width:auto; padding:0.7rem 1.5rem; }
.vs-btn-ghost:hover { border-color:var(--vs-gold-dim); color:var(--vs-gold-dim); }

/* Status */
.vs-status { padding:0.75rem 1rem; border-radius:var(--vs-radius); font-size:0.9rem; text-align:center; margin-bottom:1rem; }
.vs-status--error { background:rgba(212,83,75,0.1); border:1px solid rgba(212,83,75,0.3); color:var(--vs-error); }
.vs-status--success { background:rgba(92,184,92,0.1); border:1px solid rgba(92,184,92,0.3); color:var(--vs-success); }

/* Success */
.vs-success { text-align:center; padding:1.5rem 0; }
.vs-success-icon { font-size:2.5rem; color:var(--vs-gold); margin-bottom:0.5rem; }
.vs-success h3 { font-family:var(--vs-heading); color:var(--vs-gold); font-size:1.3rem; margin:0 0 0.5rem; }
.vs-success p { color:var(--vs-text-dim); margin:0.3rem 0; }
.vs-count-update { font-family:var(--vs-heading); color:var(--vs-gold-dim); font-size:0.9rem; margin-top:1rem !important; }

/* Already Signed / Closed */
.vs-already-signed, .vs-closed { text-align:center; padding:1rem 0; }
.vs-already-signed h3, .vs-closed h3 { font-family:var(--vs-heading); color:var(--vs-gold); font-size:1.1rem; }
.vs-already-signed p, .vs-closed p { color:var(--vs-text-dim); }

/* Signers List */
.vs-signers-title { font-family:var(--vs-heading); font-size:0.9rem; color:var(--vs-gold-dim); letter-spacing:0.1em; text-align:center; margin:0 0 1.2rem; }
.vs-signers-list { display:flex; flex-direction:column; gap:1rem; }
.vs-signer { display:flex; gap:0.8rem; align-items:flex-start; padding-bottom:0.8rem; border-bottom:1px solid var(--vs-border); }
.vs-signer:last-child { border-bottom:none; padding-bottom:0; }
.vs-signer-photo { width:56px; height:56px; border-radius:var(--vs-radius); overflow:hidden; flex-shrink:0; }
.vs-signer-photo img { width:100%; height:100%; object-fit:cover; }
.vs-signer-info { flex:1; }
.vs-signer-name { display:block; font-weight:500; color:var(--vs-text); font-size:0.95rem; }
.vs-signer-msg { display:block; font-size:0.8rem; color:var(--vs-text-dim); font-style:italic; margin-top:0.2rem; }

/* Memorial Page Signers (shortcode output) */
.vs-signers-section { margin:2rem 0; padding:2rem 0; border-top:1px solid var(--vs-border); }
.vs-signers-heading { font-family:var(--vs-heading); color:var(--vs-gold); font-size:1.1rem; text-align:center; margin-bottom:1.5rem; letter-spacing:0.1em; }
.vs-signers-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1rem; }
.vs-signer-card { background:var(--vs-surface); border:1px solid var(--vs-border); border-radius:var(--vs-radius); padding:1rem; text-align:center; }
.vs-signer-card .vs-signer-photo { width:80px; height:80px; border-radius:50%; margin:0 auto 0.8rem; }
.vs-signer-card .vs-signer-name { font-family:var(--vs-heading); font-size:0.9rem; color:var(--vs-gold); }
.vs-signer-card .vs-signer-msg { font-size:0.8rem; color:var(--vs-text-dim); font-style:italic; margin-top:0.4rem; }

/* CTA */
.vs-cta { text-align:center; margin:2rem 0 1rem; }
.vs-cta p { color:var(--vs-text-dim); font-size:0.9rem; margin-bottom:0.8rem; }
.vs-memorial-link { text-align:center; margin-top:1rem; font-size:0.85rem; }
.vs-memorial-link a { color:var(--vs-gold-dim); text-decoration:none; }
.vs-memorial-link a:hover { color:var(--vs-gold); }
.vs-error-page { text-align:center; padding:2rem 0; }
.vs-error-page h2 { font-family:var(--vs-heading); color:var(--vs-error); font-size:1.3rem; }
.vs-error-page p { color:var(--vs-text-dim); }

/* Responsive */
@media (max-width:480px) {
    .vs-page { padding:1rem 0.75rem 3rem; }
    .vs-card { padding:1.5rem 1.2rem; }
    .vs-virtue-name { font-size:1.8rem; }
    .vs-signers-grid { grid-template-columns:1fr; }
}