/* ============================================================
   TributePoint — Memory Wall (unified, Phase 1A)
   Shared style for: condolence wall + memorial interactions
   (candles / flowers). Tokens mirror work.php / start_tribute.php.

   This file styles the .tp-wall container and adds
   .tp-wall--interactions overrides that re-skin the existing
   #memorial-interactions partial WITHOUT renaming any existing
   .mp-* classes — JS continues to bind to mp-* IDs and classes.
   ============================================================ */

:root {
    --tp-primary:      #4232c2;
    --tp-primary-dark: #3628a8;
    --tp-accent:       #efb059;
    --tp-accent-light: #fde8b8;
    --tp-bg:           #f4f3fb;
    --tp-card:         #ffffff;
    --tp-text:         #1a1635;
    --tp-muted:        #6b6890;
    --tp-border:       rgba(66, 50, 194, 0.10);
    --tp-shadow-soft:  0 2px 18px rgba(66, 50, 194, 0.06);
    --tp-shadow-hover: 0 6px 28px rgba(66, 50, 194, 0.12);
    --tp-radius:       16px;
    --tp-radius-sm:    10px;
}

/* ── Wall container ──────────────────────────────────────── */
.tp-wall {
    background: var(--tp-bg);
    padding: 48px 20px 56px;
    font-family: 'Inter', 'Open Sans', system-ui, -apple-system, sans-serif;
    color: var(--tp-text);
}
.tp-wall * { box-sizing: border-box; }
.tp-wall__inner   { max-width: 880px; margin: 0 auto; }
.tp-wall__header  { text-align: center; margin-bottom: 32px; }
.tp-wall__title {
    color: var(--tp-primary);
    font-weight: 700;
    font-size: 1.6rem;
    margin: 0 0 8px;
    line-height: 1.25;
}
.tp-wall__sub {
    color: var(--tp-muted);
    font-size: 0.95rem;
    margin: 0;
}

/* ── Soft white card ─────────────────────────────────────── */
.tp-wall-card {
    background: var(--tp-card);
    border-radius: var(--tp-radius);
    box-shadow: var(--tp-shadow-soft);
    padding: 24px;
    margin-bottom: 18px;
    transition: box-shadow .18s ease, transform .18s ease;
}
.tp-wall-card:hover { box-shadow: var(--tp-shadow-hover); }

/* ── Form ────────────────────────────────────────────────── */
.tp-wall-form        { display: flex; flex-direction: column; gap: 14px; }
.tp-wall-form__grid  { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 600px) {
    .tp-wall-form__grid { grid-template-columns: 1fr 1fr; }
}

.tp-wall-field        { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; }
.tp-wall-field__label { font-weight: 600; color: var(--tp-text); }
.tp-wall-field input,
.tp-wall-field textarea {
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
    padding: 10px 12px;
    font: inherit;
    background: #fff;
    color: var(--tp-text);
    resize: vertical;
}
.tp-wall-field input:focus,
.tp-wall-field textarea:focus {
    outline: none;
    border-color: var(--tp-primary);
    box-shadow: 0 0 0 3px rgba(66, 50, 194, 0.12);
}

/* ── Buttons ─────────────────────────────────────────────── */
.tp-wall-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 11px 22px;
    border: none; border-radius: var(--tp-radius-sm);
    background: var(--tp-primary); color: #fff;
    font-weight: 600; font-size: 0.95rem;
    cursor: pointer; text-decoration: none;
    transition: background .18s ease;
}
.tp-wall-btn:hover         { background: var(--tp-primary-dark); color: #fff; }
.tp-wall-btn--gold         { background: var(--tp-accent); color: var(--tp-text); }
.tp-wall-btn--gold:hover   { background: #d99e3f; color: var(--tp-text); }
.tp-wall-btn--ghost        {
    background: transparent; color: var(--tp-primary);
    border: 1px solid var(--tp-border);
}
.tp-wall-btn--ghost:hover  { background: rgba(66, 50, 194, 0.06); }

/* ── Flash messages ──────────────────────────────────────── */
.tp-wall-flash {
    padding: 10px 14px;
    border-radius: var(--tp-radius-sm);
    margin-bottom: 14px;
    font-size: 0.92rem;
}
.tp-wall-flash--ok  { background: #e6f7ee; color: #1c6c40; border-left: 3px solid #2bb673; }
.tp-wall-flash--err { background: #fce8ef; color: #8a234a; border-left: 3px solid #c93d6e; }

/* ── Message list ────────────────────────────────────────── */
.tp-wall-list { display: flex; flex-direction: column; gap: 14px; }
.tp-wall-msg {
    background: var(--tp-card);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
    padding: 14px 16px;
}
.tp-wall-msg__head {
    display: flex; flex-wrap: wrap; gap: 8px;
    align-items: baseline; margin-bottom: 6px;
}
.tp-wall-msg__name { font-weight: 700; color: var(--tp-text); }
.tp-wall-msg__rel  { font-size: 0.82rem; color: var(--tp-muted); }
.tp-wall-msg__time { font-size: 0.78rem; color: var(--tp-muted); margin-left: auto; }
.tp-wall-msg__body { color: var(--tp-text); font-size: 0.95rem; line-height: 1.55; }
.tp-wall-empty     { text-align: center; padding: 16px 0; color: var(--tp-muted); }

/* ── Counters (candles / flowers) ────────────────────────── */
.tp-wall-counters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}
.tp-wall-counter {
    background: var(--tp-card);
    border-radius: var(--tp-radius);
    box-shadow: var(--tp-shadow-soft);
    padding: 18px 14px;
    text-align: center;
}
.tp-wall-counter__icon  { font-size: 1.8rem; color: var(--tp-accent); margin-bottom: 4px; }
.tp-wall-counter__num   { font-weight: 700; font-size: 1.5rem; color: var(--tp-primary); }
.tp-wall-counter__label {
    color: var(--tp-muted); font-size: 0.85rem;
    text-transform: uppercase; letter-spacing: 0.04em;
}

/* ============================================================
   Bridge: re-skin the existing #memorial-interactions partial
   without renaming its mp-* classes (JS depends on them).
   Applies only when the section also carries .tp-wall--interactions
   so themes that haven't been retrofitted are unaffected.
   ============================================================ */
.tp-wall--interactions {
    border-top: 1px solid var(--tp-border);
    border-bottom: 1px solid var(--tp-border);
    overflow: hidden;
    position: relative;
}

.tp-wall--interactions .mp-header        { text-align: center; margin-bottom: 36px; }
.tp-wall--interactions .mp-header-icon   { font-size: 2em; margin-bottom: 4px; color: var(--tp-accent); }
.tp-wall--interactions .mp-header-title  {
    font-size: 1.6rem; font-weight: 700;
    color: var(--tp-primary); margin: 0 0 4px;
}
.tp-wall--interactions .mp-header-sub    { font-size: 0.95rem; color: var(--tp-muted); margin: 0; }

.tp-wall--interactions .mp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    max-width: 480px;
    margin: 0 auto 36px;
}
@media (max-width: 520px) {
    .tp-wall--interactions .mp-grid { grid-template-columns: 1fr; max-width: 320px; }
}

.tp-wall--interactions .mp-card {
    background: var(--tp-card);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius);
    padding: 24px 16px 20px;
    text-align: center;
    box-shadow: var(--tp-shadow-soft);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
    position: relative;
    user-select: none;
}
.tp-wall--interactions .mp-card:hover  { transform: translateY(-4px); box-shadow: var(--tp-shadow-hover); }
.tp-wall--interactions .mp-card:active { transform: scale(.97); }

.tp-wall--interactions .mp-card-icon  { font-size: 2.4em; line-height: 1; margin-bottom: 8px; display: block; }
.tp-wall--interactions .mp-card-title { font-size: 1.02rem; font-weight: 700; color: var(--tp-text); margin: 0 0 4px; }
.tp-wall--interactions .mp-card-desc  { font-size: 0.82rem; color: var(--tp-muted); margin: 0 0 10px; line-height: 1.4; }
.tp-wall--interactions .mp-card-count {
    display: inline-block;
    font-size: 0.78rem; font-weight: 600;
    padding: 4px 12px; border-radius: 20px;
    background: rgba(66, 50, 194, 0.08);
    color: var(--tp-primary);
}
.tp-wall--interactions .mp-card--flower .mp-card-count {
    background: rgba(239, 176, 89, 0.18);
    color: #a87425;
}
.tp-wall--interactions .mp-card--candle .mp-card-count {
    background: rgba(66, 50, 194, 0.10);
    color: var(--tp-primary);
}

/* Flower rain & garden / candle row — keep existing animations,
   only normalise spacing + colours via tokens. */
.tp-wall--interactions .mp-flower-rain {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; overflow: hidden; z-index: 2;
}
.tp-wall--interactions .mp-petal {
    position: absolute; font-size: 1.6em; opacity: 0;
    animation: mp-fall linear forwards; pointer-events: none;
}
.tp-wall--interactions .mp-garden {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 4px; min-height: 24px; max-width: 900px;
    margin: 0 auto 20px; padding: 8px 12px;
}
.tp-wall--interactions .mp-garden-flower {
    font-size: 1.3em; animation: mp-pop .4s ease-out; display: inline-block;
}
.tp-wall--interactions .mp-candle-row {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 10px; min-height: 24px; max-width: 900px;
    margin: 0 auto 20px; padding: 4px 12px;
}
.tp-wall--interactions .mp-candle-item {
    display: flex; flex-direction: column; align-items: center;
    animation: mp-pop .4s ease-out;
}
.tp-wall--interactions .mp-flame {
    font-size: 1.4em; animation: mp-flicker 1.5s ease-in-out infinite alternate;
}
.tp-wall--interactions .mp-candle-body {
    width: 14px; height: 28px;
    background: linear-gradient(to bottom, var(--tp-accent-light), var(--tp-accent));
    border-radius: 3px 3px 4px 4px; margin-top: -4px;
    box-shadow: 0 0 8px rgba(239, 176, 89, 0.45);
}

@keyframes mp-fall {
    0%   { opacity: 1; transform: translateY(-30px) rotate(0deg) scale(.8); }
    60%  { opacity: 1; }
    100% { opacity: .6; transform: translateY(var(--mp-drop, 320px)) rotate(var(--mp-rot, 120deg)) scale(1); }
}
@keyframes mp-pop {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}
@keyframes mp-flicker {
    0%   { transform: scale(1) rotate(-3deg); opacity: .9; }
    50%  { transform: scale(1.12) rotate(2deg); opacity: 1; }
    100% { transform: scale(.95) rotate(-2deg); opacity: .85; }
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 480px) {
    .tp-wall          { padding: 32px 14px 40px; }
    .tp-wall-card     { padding: 18px; }
    .tp-wall__title   { font-size: 1.35rem; }
    .tp-wall--interactions .mp-header-title { font-size: 1.35rem; }
}