/* ============================================================
   TributePoint — Create Tribute shared stylesheet
   Source: extracted verbatim from work.php inline <style>
   (lines 169–326). Do NOT modify token values or selectors —
   this file must keep work.php pixel-identical.
   New additions live in the "TYPE SWITCHER" block at the bottom.
   ============================================================ */

/* ── Design Tokens ── */
: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.1);
    --tp-shadow: 0 4px 24px rgba(66,50,194,0.07);
    --tp-radius: 16px;
}
html { scroll-behavior: smooth; }
body { background: var(--tp-bg); font-family: 'Inter', 'Open Sans', sans-serif; color: var(--tp-text); line-height: 1.6; }

/* ── Navbar ── */
#main_nav { background: #fff !important; border-bottom: 1px solid rgba(66,50,194,0.08); box-shadow: 0 2px 18px rgba(66,50,194,0.06) !important; padding: 0.55rem 0; }
#main_nav .nav-link { font-size: 0.875rem; font-weight: 500; color: #4a4770 !important; border-radius: 8px; padding: 6px 14px !important; transition: all .2s; }
#main_nav .nav-link:hover { background: #f0eeff; color: var(--tp-primary) !important; }

/* ── Hero Banner ── */
#work_banner { background: linear-gradient(150deg, #14103a 0%, #2b1e8a 45%, #4232c2 80%, #3c4bbd 100%); position: relative; overflow: hidden; }
#work_banner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 65% 80% at 82% 50%, rgba(239,176,89,0.13) 0%, transparent 70%), radial-gradient(ellipse 45% 65% at 8% 85%, rgba(108,92,231,0.28) 0%, transparent 60%); pointer-events: none; }
#work_banner::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 48px; background: var(--tp-bg); clip-path: ellipse(55% 100% at 50% 100%); }
.banner-title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: #fff; line-height: 1.22; letter-spacing: -0.02em; }
.banner-subtitle { font-size: 0.975rem; color: rgba(255,255,255,0.72); font-weight: 400; max-width: 460px; }
.banner-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(239,176,89,0.16); border: 1px solid rgba(239,176,89,0.38); color: #fde8b8; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; padding: 5px 14px; border-radius: 100px; margin-bottom: 14px; }

/* ── Step Progress ── */
.step-progress { display: flex; justify-content: center; gap: 0; margin: 0 auto; max-width: 320px; }
.step-item { flex: 1; text-align: center; position: relative; }
.step-item .step-circle { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.12); border: 2px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.6); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; margin-bottom: 7px; transition: all .3s; position: relative; z-index: 2; }
.step-item.active .step-circle { background: #fff; border-color: #fff; color: var(--tp-primary); box-shadow: 0 4px 18px rgba(0,0,0,0.25); }
.step-item.completed .step-circle { background: rgba(239,176,89,0.9); border-color: rgba(239,176,89,0.9); color: #fff; }
.step-item .step-label { font-size: 0.78rem; color: rgba(255,255,255,0.52); font-weight: 500; }
.step-item.active .step-label { color: #fff; font-weight: 700; }
.step-item.completed .step-label { color: rgba(239,176,89,0.88); }
.step-item:not(:last-child)::after { content: ''; position: absolute; top: 21px; left: calc(50% + 26px); right: calc(-50% + 26px); height: 2px; background: rgba(255,255,255,0.18); z-index: 1; }
.step-item.completed:not(:last-child)::after { background: rgba(239,176,89,0.5); }

/* ── Form Labels ── */
.form-label { font-weight: 600; color: #3d3a5c; font-size: 0.85rem; margin-bottom: 6px; letter-spacing: 0.01em; }

/* ── Inputs ── */
.form-control, .form-select { border-radius: 10px; border: 1.5px solid #dddaf0; padding: 10px 14px; font-size: 0.92rem; color: var(--tp-text); background: #fafafe; transition: border-color .2s, box-shadow .2s, background .2s; font-family: 'Inter', sans-serif; }
.form-control:focus, .form-select:focus { background: #fff; box-shadow: 0 0 0 3px rgba(66,50,194,.11); border-color: var(--tp-primary); outline: none; }
.form-control::placeholder { color: #aba8cc; }
textarea.form-control { min-height: 110px; resize: vertical; }
.form-control[readonly] { background: #f2f1f9; color: #8886a8; }
.input-group-text { border-radius: 10px 0 0 10px !important; border: 1.5px solid #dddaf0; border-right: none; background: #f2f1f9; color: var(--tp-muted); }
.input-group .form-control { border-radius: 0 10px 10px 0 !important; }

/* ── Photo previews ── */
.image-preview-container { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.preview-thumb { max-width: 120px; height: 120px; object-fit: cover; border-radius: 10px; border: 2px solid var(--tp-accent); }
.preview-main { max-width: 200px; max-height: 200px; object-fit: cover; border-radius: 12px; }

/* ── Cards ── */
.form-card { background: var(--tp-card); border-radius: var(--tp-radius); box-shadow: var(--tp-shadow); padding: 28px 30px 24px; margin-bottom: 20px; border: 1px solid rgba(66,50,194,0.07); transition: box-shadow .3s; }
.form-card:focus-within { box-shadow: 0 8px 36px rgba(66,50,194,.11); }
.form-card-header { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid #f0eeff; }
.form-card-header .fc-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 21px; flex-shrink: 0; }
.form-card-header h4 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--tp-text); letter-spacing: -0.01em; }
.form-card-header small { color: var(--tp-muted); font-size: 0.81rem; margin-top: 2px; display: block; }
.fc-purple { background: linear-gradient(135deg,#ebe8f9,#d9d4f4); color: var(--tp-primary); }
.fc-amber  { background: linear-gradient(135deg,#fef3e0,#fde0a5); color: #b8760a; }
.fc-green  { background: linear-gradient(135deg,#e5f7ec,#c5edce); color: #138042; }
.fc-blue   { background: linear-gradient(135deg,#e3f0ff,#bdd8fc); color: #1554b0; }
.fc-rose   { background: linear-gradient(135deg,#fce8ef,#f8ccd9); color: #a82d56; }

/* ─── Dropzone Hover ──────────────────────────── */
/* ── Dropzones ── */
#photoDropzone { transition: all .25s; }
#photoDropzone:hover { background: #ede8fb !important; transform: translateY(-2px); }
#photoDropzone.drag-over { outline: 2px dashed var(--tp-accent); outline-offset: -4px; background: #fffbf0 !important; }
.border-dashed { border-style: dashed !important; }
.border-2 { border-width: 2px !important; }

/* ── Maps ── */
#homeMap, #churchMap, #cemeteryMap { width: 100%; height: 260px; border-radius: 12px; border: 1.5px solid #dddaf0; }

/* ── Location Toggles ── */
.loc-toggles { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.loc-toggle-btn { display:flex; align-items:center; gap:8px; padding:10px 16px; border-radius:10px; border:2px solid #e5e7eb; background:#f8f7ff; cursor:pointer; font-size:.88rem; font-weight:600; color:#4232c2; transition:all .15s; user-select:none; }
.loc-toggle-btn.active { border-color:#4232c2; background:#ede9fd; }
.loc-toggle-btn input[type=checkbox] { display:none; }
.loc-toggle-icon { font-size:1.1rem; }
.loc-section { margin-top:0; overflow:hidden; transition:max-height .3s ease, opacity .2s ease; }
.loc-section.hidden { max-height:0; opacity:0; pointer-events:none; }
.loc-section.visible { max-height:900px; opacity:1; }
.loc-divider { border:none; border-top:1px solid #ede9fd; margin:16px 0; }

/* ── Typeahead ── */
.typeahead-wrapper { position: relative; }
.typeahead-list { position:absolute; z-index:2500; left:0; right:0; top:100%; background:#fff; border:1.5px solid #dddaf0; border-radius:12px; max-height:260px; overflow-y:auto; box-shadow:0 12px 36px rgba(66,50,194,.14); font-size:0.9rem; margin-top:4px; }
.typeahead-item { display:block; padding:10px 15px; cursor:pointer; border-bottom:1px solid #f3f2fb; color:#333; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.typeahead-item:last-child { border-bottom:none; }
.typeahead-item:hover, .typeahead-item.active { background:#f0eeff; color:var(--tp-primary); }

/* ── Buttons ── */
.btn-primary { background: linear-gradient(135deg, #4232c2, #5a4fd6); border: none; padding: 12px 32px; font-weight: 600; font-size: 0.95rem; border-radius: 12px; letter-spacing: 0.015em; transition: all .25s; box-shadow: 0 4px 18px rgba(66,50,194,.32); }
.btn-primary:hover, .btn-primary:focus { background: linear-gradient(135deg, #3628a8, #4232c2); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(66,50,194,.42); }
.btn-primary:active { transform: translateY(0); }
.btn-outline-secondary { border: 1.5px solid #c8c3ea; color: var(--tp-primary); background: transparent; padding: 12px 26px; font-weight: 600; font-size: 0.92rem; border-radius: 12px; transition: all .2s; }
.btn-outline-secondary:hover { background: #f0eeff; border-color: var(--tp-primary); color: var(--tp-primary); }
.btn-lg { padding: 14px 36px !important; font-size: 1rem !important; }

/* ── Focal Point ── */
.fp-btn { position:absolute; bottom:6px; right:6px; background:rgba(66,50,194,0.85); color:#fff; border:none; border-radius:6px; padding:3px 8px; font-size:0.72rem; cursor:pointer; display:flex; align-items:center; gap:4px; }
.fp-btn:hover { background:#4232c2; }
.fp-set-badge { position:absolute; bottom:6px; left:6px; background:#10b981; color:#fff; border-radius:4px; padding:2px 7px; font-size:0.7rem; font-weight:600; display:none; }
.fp-set-badge.visible { display:block; }
#mainPhotoPreview.main-photo-highlight { box-shadow: 0 0 0 3px #efb059; border-radius: 12px; padding: 4px; background: #fff7e6; transition: box-shadow 0.3s ease; }

/* ── Misc ── */
.form-check-input:checked { background-color: var(--tp-primary); border-color: var(--tp-primary); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(66,50,194,.15); border-color: var(--tp-primary); }
.alert { border-radius: 12px; }
.alert-danger { background: #fff1f3; border-color: #f5c2c7; color: #842029; }
.alert-info { background: #f0f6ff; border-color: #b6d0fd; color: #1a4c7a; }
footer.bg-secondary { background: #1a1635 !important; }
footer .bg-primary { background: var(--tp-primary) !important; }
footer a.text-light:hover { color: var(--tp-accent) !important; }
/* ── Obituary rich-text editor ── */
.editor-wrap { border: 1.5px solid #d1d5db; border-radius: 10px; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.editor-wrap:focus-within { border-color: var(--tp-primary); box-shadow: 0 0 0 3px rgba(66,50,194,.1); }
.editor-toolbar { display: flex; gap: 2px; padding: 6px 8px; background: #f9fafb; border-bottom: 1.5px solid #e5e7eb; flex-wrap: wrap; align-items: center; }
.editor-toolbar button { width: 30px; height: 30px; border: none; background: transparent; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #4b5563; font-size: .8rem; transition: background .1s, color .1s; flex-shrink: 0; }
.editor-toolbar button:hover { background: #e5e7eb; color: #111; }
.editor-toolbar button.active { background: #ede9fe; color: var(--tp-primary); }
.editor-toolbar button svg { width: 15px; height: 15px; fill: currentColor; pointer-events: none; }
.tb-sep { width: 1px; height: 20px; background: #e5e7eb; margin: 0 4px; flex-shrink: 0; }
.tb-spacer { flex: 1; }
.tb-font-select { height: 30px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; color: #374151; font-size: .75rem; padding: 0 6px; cursor: pointer; width: 148px; outline: none; flex-shrink: 0; }
.tb-font-select:hover { border-color: #9ca3af; }
.tb-font-select:focus { border-color: var(--tp-primary); }
.work-rich-editor { padding: 1.25rem; min-height: 200px; outline: none; font-size: .9375rem; line-height: 1.85; color: #1f2937; transition: min-height .25s ease; }
.work-rich-editor.expanded { min-height: 460px; }
.work-rich-editor:empty::before { content: attr(data-placeholder); color: #9ca3af; pointer-events: none; display: block; }
.work-rich-editor p { margin: 0 0 .85em; }
.work-rich-editor p:last-child { margin-bottom: 0; }
.work-rich-editor h3 { font-size: 1.1em; font-weight: 700; margin: 1.1em 0 .4em; }
.work-rich-editor ul, .work-rich-editor ol { margin: 0 0 .85em 1.4em; padding: 0; }
.work-rich-editor li { margin-bottom: .3em; }
.work-rich-editor blockquote { margin: .9em 0; padding: .65em 1em; border-left: 3px solid var(--tp-primary); background: #f5f3ff; border-radius: 0 6px 6px 0; font-style: italic; color: #4b5563; }
.work-rich-editor strong, .work-rich-editor b { font-weight: 700; }
.work-rich-editor em, .work-rich-editor i { font-style: italic; }
.work-rich-editor u { text-decoration: underline; }
.editor-footer { display: flex; justify-content: space-between; align-items: center; padding: 5px 10px; background: #f9fafb; border-top: 1px solid #f3f4f6; font-size: .75rem; color: #9ca3af; }
.editor-footer span { color: #6b7280; font-weight: 500; }
.work-char-count.near-limit { color: #d97706; }
.work-char-count.at-limit { color: #dc2626; }
.ff-feedback{font-size:.78rem;margin-top:4px;min-height:18px;transition:all .2s}
.ff-feedback.fb-error{color:#ef4444}
.ff-feedback.fb-ok{color:#10b981}
.form-control.is-invalid,.form-select.is-invalid{border-color:#ef4444 !important;box-shadow:0 0 0 3px rgba(239,68,68,.1) !important}
.form-control.is-valid,.form-select.is-valid{border-color:#10b981 !important;box-shadow:0 0 0 3px rgba(16,185,129,.1) !important}

/* ============================================================
   TYPE SWITCHER (new — Phase 2A)
   Segmented pill control shown above the hero banner so users
   can swap between Upcoming Funeral / Memorial Service / Legacy
   without leaving the create flow.
   ============================================================ */
.tp-type-switcher {
    background: #fff;
    border-bottom: 1px solid rgba(66,50,194,0.08);
    padding: 18px 0 22px;
}
.tp-type-switcher__label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--tp-muted);
    text-align: center;
    margin: 0 0 12px;
}
.tp-type-switcher__group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 16px;
}
.tp-type-option {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 22px;
    border-radius: 999px;
    border: 1.5px solid #dddaf0;
    background: #fafafe;
    color: var(--tp-primary);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s ease;
    line-height: 1;
    white-space: nowrap;
}
.tp-type-option i {
    font-size: 1.15rem;
    line-height: 1;
}
.tp-type-option:hover {
    background: #f0eeff;
    border-color: #c8c3ea;
    color: var(--tp-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(66,50,194,0.10);
}
.tp-type-option.is-active {
    background: linear-gradient(135deg, #4232c2, #5a4fd6);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 20px rgba(66,50,194,0.32);
    cursor: default;
    transform: none;
}
.tp-type-option.is-active:hover {
    background: linear-gradient(135deg, #4232c2, #5a4fd6);
    color: #fff;
    transform: none;
}
.tp-type-option__badge {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--tp-accent);
    color: #1a1635;
    padding: 2px 7px;
    border-radius: 999px;
    margin-left: 4px;
}
.tp-type-option.is-active .tp-type-option__badge {
    background: rgba(255,255,255,0.92);
    color: var(--tp-primary);
}
@media (max-width: 540px) {
    .tp-type-option { padding: 10px 16px; font-size: 0.83rem; }
    .tp-type-option i { font-size: 1.05rem; }
}