/**
 * Parfum Finder — Frontend Styles
 *
 * All custom properties use the --pf- prefix to avoid
 * collisions with WordPress themes (especially Astra).
 *
 * @version 2.0.0
 */


/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --pf-coral:    #E87055;
    --pf-coral-l:  #F0937B;
    --pf-coral-p:  #FDF0EC;
    --pf-coral-d:  #C45640;
    --pf-ink:      #1A1210;
    --pf-muted:    #8A7570;
    --pf-faint:    #C4B8B5;
    --pf-border:   #EDE6E3;
    --pf-r:        14px;
    --pf-font:     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --pf-serif:    Georgia, 'Times New Roman', serif;
}


/* ─── Trigger Button ─── */

.pf-open {
    all: unset !important;
    display: inline-flex !important; align-items: center !important; gap: 9px !important;
    background: var(--pf-coral) !important; color: #fff !important;
    border: none !important; border-radius: 50px !important;
    padding: 14px 32px !important;
    font-family: var(--pf-font) !important; font-size: 15px !important; font-weight: 500 !important;
    line-height: 1 !important; cursor: pointer !important;
    box-shadow: 0 6px 20px rgba(232,112,85,.3) !important;
    transition: filter .2s, transform .15s !important;
    box-sizing: border-box !important;
}
.pf-open:hover       { filter: brightness(.9) !important; transform: translateY(-2px) !important; color: #fff !important; }
.pf-open svg         { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; }


/* ─── Overlay ─── */

.pf-overlay {
    position: fixed !important; inset: 0 !important; z-index: 9999999 !important;
    background: rgba(26,18,16,.52) !important; backdrop-filter: blur(6px) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    padding: 20px !important;
    opacity: 0 !important; pointer-events: none !important;
    transition: opacity .3s !important; box-sizing: border-box !important;
}
.pf-overlay.open                { opacity: 1 !important; pointer-events: all !important; }
.pf-overlay .pf-modal           { pointer-events: none !important; }
.pf-overlay.open .pf-modal      { pointer-events: auto !important; }


/* ─── Modal ─── */

.pf-modal {
    all: initial;
    font-family: var(--pf-font) !important; font-size: 14px !important; line-height: 1.5 !important;
    color: var(--pf-ink) !important; background: #fff !important;
    border-radius: var(--pf-r) !important;
    box-shadow: 0 24px 64px rgba(30,10,5,.15), 0 4px 16px rgba(30,10,5,.07) !important;
    width: 100% !important; max-width: min(860px, 95vw) !important;
    max-height: min(920px, 92vh) !important; height: auto !important;
    display: flex !important; flex-direction: column !important; overflow: hidden !important;
    transform: translateY(22px) scale(.97) !important;
    transition: transform .35s cubic-bezier(.22,1,.36,1) !important;
    box-sizing: border-box !important; position: relative !important;
    text-align: left !important; -webkit-font-smoothing: antialiased !important;
}
.pf-overlay.open .pf-modal      { transform: none !important; }
.pf-modal *, .pf-modal *::before, .pf-modal *::after {
    box-sizing: border-box !important; font-family: var(--pf-font) !important;
}


/* ─── Header ─── */

.pf-head {
    padding: 28px 36px 22px !important;
    border-bottom: 1px solid var(--pf-border) !important;
    background: var(--pf-coral-p) !important;
    position: relative !important; flex-shrink: 0 !important;
}
.pf-eyebrow {
    font-size: 10px !important; letter-spacing: 2.5px !important; text-transform: uppercase !important;
    color: var(--pf-coral) !important; margin: 0 0 5px !important; padding: 0 !important;
    font-weight: 500 !important; display: block !important;
}
.pf-title {
    font-family: var(--pf-serif) !important; font-size: clamp(24px,3vw,32px) !important;
    font-weight: 400 !important; line-height: 1.2 !important;
    color: var(--pf-ink) !important; margin: 0 !important; padding: 0 !important; display: block !important;
}
.pf-title em { font-style: italic !important; color: var(--pf-coral) !important; }

.pf-x {
    all: unset !important;
    position: absolute !important; top: 18px !important; right: 20px !important;
    width: 32px !important; height: 32px !important;
    background: rgba(26,18,16,.08) !important; border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    color: var(--pf-ink) !important; transition: background .15s !important;
    box-sizing: border-box !important;
}
.pf-x:hover  { background: rgba(26,18,16,.15) !important; }
.pf-x svg    { width: 12px !important; height: 12px !important; }


/* ─── Body — scrollable inner area ─── */

.pf-body {
    flex: 1 !important; overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important;
    padding: 28px 36px 32px !important;
    scrollbar-width: thin !important; scrollbar-color: var(--pf-border) transparent !important;
}
.pf-body::-webkit-scrollbar       { width: 4px !important; }
.pf-body::-webkit-scrollbar-thumb { background: var(--pf-border) !important; border-radius: 2px !important; }


/* ─── Tabs ─── */

.pf-tabs {
    display: flex !important; gap: 0 !important; margin: 0 0 18px !important;
    border: 1.5px solid var(--pf-border) !important; border-radius: 50px !important;
    padding: 3px !important; background: #fff !important; flex-shrink: 0 !important;
}
.pf-tab {
    flex: 1 !important; padding: 9px 12px !important; border-radius: 50px !important;
    border: none !important; background: none !important;
    font-family: var(--pf-font) !important; font-size: 12px !important;
    color: var(--pf-muted) !important; cursor: pointer !important;
    transition: all .2s !important; text-align: center !important; font-weight: 400 !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    gap: 6px !important; box-sizing: border-box !important;
}
.pf-tab svg                         { width: 13px !important; height: 13px !important; flex-shrink: 0 !important; }
.pf-tab-active                      { background: var(--pf-coral) !important; color: #fff !important; font-weight: 500 !important; box-shadow: 0 4px 12px rgba(232,112,85,.3) !important; }
.pf-tab:not(.pf-tab-active):hover   { color: var(--pf-coral) !important; }


/* ─── Gender Pills ─── */

.pf-genders {
    display: flex !important; gap: 8px !important; margin: 0 0 16px !important;
    padding: 0 !important; flex-wrap: wrap !important;
    list-style: none !important; border: none !important; background: none !important;
}
.pf-g {
    all: unset !important;
    padding: 9px 22px !important; border-radius: 50px !important;
    border: 1.5px solid var(--pf-border) !important; background: transparent !important;
    font-size: 12px !important; color: var(--pf-muted) !important; cursor: pointer !important;
    transition: all .15s !important; line-height: 1 !important;
    display: inline-flex !important; align-items: center !important; box-sizing: border-box !important;
}
.pf-g:hover { border-color: var(--pf-coral-l) !important; color: var(--pf-coral) !important; }
.pf-g.on    { background: var(--pf-coral) !important; border-color: var(--pf-coral) !important; color: #fff !important; font-weight: 500 !important; }


/* ─── Search Field ─── */

.pf-sw       { margin: 0 !important; }
.pf-sw-inner { position: relative !important; }
.pf-si {
    position: absolute !important; left: 14px !important; top: 50% !important;
    transform: translateY(-50%) !important; color: var(--pf-muted) !important;
    pointer-events: none !important; display: flex !important;
}
.pf-si svg { width: 16px !important; height: 16px !important; }
.pf-input {
    all: unset !important; display: block !important; width: 100% !important;
    padding: 13px 16px 13px 44px !important;
    border: 1.5px solid var(--pf-border) !important; border-radius: 50px !important;
    font-family: var(--pf-font) !important; font-size: 15px !important;
    color: var(--pf-ink) !important; background: #fff !important;
    transition: border-color .2s, box-shadow .2s !important;
    box-sizing: border-box !important; line-height: 1.4 !important;
    -webkit-appearance: none !important;
}
.pf-input::placeholder { color: #BDB5B2 !important; opacity: 1 !important; }
.pf-input:focus        { border-color: var(--pf-coral) !important; box-shadow: 0 0 0 3px rgba(232,112,85,.12) !important; }


/* ─── Animated Placeholder — Search ─── */

.pf-search-ph {
    position: absolute !important; left: 44px !important; top: 50% !important;
    transform: translateY(-50%) !important;
    font-family: var(--pf-font) !important; font-size: 15px !important;
    color: #BDB5B2 !important; pointer-events: none !important;
    white-space: nowrap !important; overflow: hidden !important;
    transition: opacity .15s !important; max-width: calc(100% - 60px) !important;
}
.pf-search-ph.pf-ph-hidden { opacity: 0 !important; }
.pf-ph-cursor {
    display: inline-block !important; width: 1.5px !important; height: 14px !important;
    background: #BDB5B2 !important; margin-left: 1px !important;
    vertical-align: text-bottom !important;
    animation: pfBlink .9s step-end infinite !important;
}
@keyframes pfBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }


/* ─── Dropdown ─── */

.pf-dd-wrap {
    display: none !important; flex-direction: column !important;
    margin-top: 6px !important; border-radius: var(--pf-r) !important;
    overflow: hidden !important;
    border: 1.5px solid var(--pf-border) !important;
    box-shadow: 0 4px 16px rgba(30,10,5,.08) !important;
}
.pf-dd-wrap.open { display: flex !important; }
.pf-dd {
    background: #fff !important; max-height: 116px !important;
    overflow-y: auto !important; padding: 0 !important; margin: 0 !important;
    list-style: none !important;
    scrollbar-width: thin !important; scrollbar-color: var(--pf-border) transparent !important;
}
.pf-dd::-webkit-scrollbar       { width: 4px !important; }
.pf-dd::-webkit-scrollbar-thumb { background: var(--pf-border) !important; border-radius: 2px !important; }
.pf-di {
    padding: 11px 16px !important; cursor: pointer !important;
    border-bottom: 1px solid var(--pf-border) !important;
    transition: background .12s !important; margin: 0 !important;
}
.pf-di:last-child     { border-bottom: none !important; }
.pf-di:hover, .pf-di.hi { background: #F5F4F2 !important; }
.pf-dn { font-size: 13px !important; font-weight: 500 !important; color: var(--pf-ink) !important; margin: 0 !important; padding: 0 !important; line-height: 1.4 !important; }
.pf-db { font-size: 11px !important; color: var(--pf-muted) !important; margin: 2px 0 0 !important; padding: 0 !important; line-height: 1.3 !important; }
.pf-dm { color: var(--pf-coral) !important; font-weight: 600 !important; }
.pf-no { padding: 14px 16px !important; font-size: 12px !important; color: var(--pf-muted) !important; text-align: center !important; margin: 0 !important; font-style: italic !important; }

.pf-dd.pf-dd-expanded { max-height: 264px !important; }
.pf-dd-more {
    display: none !important; align-items: center !important; justify-content: center !important;
    gap: 6px !important; padding: 9px 16px !important;
    background: #EDEBE8 !important; border-top: 1px solid var(--pf-border) !important;
    font-size: 11px !important; color: var(--pf-muted) !important;
    cursor: pointer !important; transition: background .12s !important;
    user-select: none !important; flex-shrink: 0 !important;
}
.pf-dd-more.show  { display: flex !important; }
.pf-dd-more:hover { background: #E5E3E0 !important; color: var(--pf-ink) !important; }
.pf-dd-more svg   { width: 13px !important; height: 13px !important; flex-shrink: 0 !important; }


/* ─── Status Indicator ─── */

.pf-status {
    display: none !important; align-items: center !important; gap: 10px !important;
    padding: 11px 14px !important;
    background: var(--pf-coral-p) !important; border-radius: 10px !important;
    border: 1px solid rgba(232,112,85,.2) !important; margin: 12px 0 !important;
}
.pf-status.on { display: flex !important; }
.pf-pulse {
    width: 7px !important; height: 7px !important; border-radius: 50% !important;
    background: var(--pf-coral) !important; flex-shrink: 0 !important;
    animation: pfPulse 1.2s ease-in-out infinite !important;
}
@keyframes pfPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.6); } }
.pf-status-txt { font-size: 12px !important; font-style: italic !important; color: var(--pf-ink) !important; margin: 0 !important; }


/* ─── Stars & Section Labels ─── */

.pf-star, .pf-star-sm, .pf-star-xs {
    display: inline-block !important; background: currentColor !important;
    flex-shrink: 0 !important; vertical-align: middle !important;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%) !important;
}
.pf-star    { width: 11px !important; height: 11px !important; }
.pf-star-sm { width: 9px !important;  height: 9px !important; }
.pf-star-xs { width: 7px !important;  height: 7px !important; }
.pf-sec-label {
    font-size: 10px !important; letter-spacing: 2.5px !important; text-transform: uppercase !important;
    color: var(--pf-muted) !important; margin: 0 0 10px !important; padding: 0 !important;
    font-weight: 500 !important;
    display: flex !important; align-items: center !important; gap: 6px !important;
    border: none !important; background: none !important;
}
.pf-sec-label .pf-star-sm { color: var(--pf-coral) !important; }


/* ─── Navigation ─── */

.pf-back {
    all: unset !important; color: var(--pf-coral) !important;
    font-size: 14px !important; font-weight: 500 !important; cursor: pointer !important;
    margin: 0 0 22px !important;
    display: flex !important; width: 100% !important; align-items: center !important; gap: 8px !important;
    transition: opacity .15s !important; padding: 12px 0 !important;
    border-bottom: 2px solid var(--pf-border) !important; box-sizing: border-box !important;
}
.pf-back:hover { opacity: .75 !important; }

.pf-divider {
    display: flex !important; align-items: center !important; gap: 9px !important;
    color: var(--pf-muted) !important; font-size: 11px !important;
    margin: 18px 0 0 !important; padding: 0 !important;
    border: none !important; background: none !important;
}
.pf-divider::before, .pf-divider::after {
    content: '' !important; flex: 1 !important; height: 1px !important;
    background: var(--pf-border) !important;
}


/* ─── Tappunten CTA ─── */

.pf-tap {
    display: flex !important; align-items: center !important; gap: 14px !important;
    padding: 16px 22px !important; background: var(--pf-coral) !important;
    border-radius: 12px !important; text-decoration: none !important; color: #fff !important;
    margin: 14px 0 0 !important;
    transition: filter .15s, transform .15s !important; border: none !important;
}
.pf-tap:hover       { filter: brightness(.92) !important; transform: translateY(-1px) !important; color: #fff !important; }
.pf-tap-icon {
    width: 42px !important; height: 42px !important;
    background: rgba(255,255,255,.2) !important; border-radius: 50% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    flex-shrink: 0 !important;
}
.pf-tap-icon svg    { width: 16px !important; height: 16px !important; }
.pf-tap-txt         { flex: 1 !important; }
.pf-tap-txt strong  { display: block !important; font-size: 14px !important; font-weight: 500 !important; margin: 0 0 1px !important; color: #fff !important; }
.pf-tap-txt span    { font-size: 11px !important; opacity: .85 !important; color: #fff !important; }
.pf-tap-arrow       { opacity: .85 !important; font-size: 18px !important; color: #fff !important; }


/* ─── Inline CTA — try at tappunt ─── */

.pf-cta-try {
    display: block !important; text-align: center !important;
    padding: 11px 16px !important; margin: 12px 0 0 !important;
    background: transparent !important;
    border: 1.5px dashed rgba(232,112,85,.4) !important; border-radius: 50px !important;
    color: var(--pf-coral) !important; font-size: 13px !important; font-weight: 500 !important;
    text-decoration: none !important; cursor: pointer !important;
    transition: background .15s, border-color .15s !important; box-sizing: border-box !important;
}
.pf-cta-try:hover { background: var(--pf-coral-p) !important; border-color: var(--pf-coral) !important; color: var(--pf-coral) !important; }


/* ─── Shop CTA ─── */

.pf-cta-shop {
    display: block !important; text-align: center !important;
    padding: 14px 20px !important; margin: 10px 0 0 !important;
    background: var(--pf-ink) !important; color: #fff !important;
    border-radius: 12px !important; font-size: 14px !important; font-weight: 500 !important;
    text-decoration: none !important; cursor: pointer !important;
    transition: filter .15s, transform .15s !important; border: none !important;
    box-sizing: border-box !important;
}
.pf-cta-shop:hover { filter: brightness(1.3) !important; transform: translateY(-1px) !important; color: #fff !important; }


/* ─── Result Hero Card ─── */

.pf-match-hero {
    background: var(--pf-coral-p) !important;
    border: 2px solid var(--pf-coral) !important; border-radius: var(--pf-r) !important;
    padding: 22px 24px !important; margin: 0 0 22px !important;
    animation: pfIn .4s cubic-bezier(.22,1,.36,1) !important;
}
@keyframes pfIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.pf-match-lbl {
    display: flex !important; align-items: center !important; gap: 6px !important;
    font-size: 10px !important; font-weight: 600 !important;
    letter-spacing: 2px !important; text-transform: uppercase !important;
    color: var(--pf-coral) !important; margin: 0 0 12px !important; padding: 0 !important;
    border: none !important; background: none !important;
}
.pf-result-header {
    display: flex !important; align-items: flex-start !important;
    justify-content: space-between !important; gap: 12px !important;
    margin: 0 0 14px !important;
}
.pf-hero-row {
    display: flex !important; align-items: flex-start !important;
    justify-content: space-between !important; gap: 10px !important;
    margin: 0 0 14px !important;
}
.pf-hero-name {
    font-family: var(--pf-serif) !important; font-size: 24px !important;
    font-weight: 400 !important; line-height: 1.2 !important;
    color: var(--pf-ink) !important; margin: 0 !important; padding: 0 !important;
}
.pf-hero-brand {
    font-size: 12px !important; color: var(--pf-coral) !important; font-weight: 500 !important;
    margin: 4px 0 0 !important; padding: 0 !important;
    letter-spacing: .3px !important;
}
.pf-sku {
    flex-shrink: 0 !important; background: var(--pf-coral) !important; color: #fff !important;
    padding: 5px 14px !important; border-radius: 50px !important;
    font-size: 13px !important; font-weight: 700 !important; letter-spacing: .8px !important;
    white-space: nowrap !important; display: inline-block !important;
    line-height: 1.4 !important; border: none !important;
}
.pf-sku--big {
    font-size: 20px !important; padding: 8px 22px !important; letter-spacing: 1.5px !important;
    box-shadow: 0 4px 14px rgba(232,112,85,.35) !important;
    animation: pfPulseOnce 1.2s ease !important;
}
@keyframes pfPulseOnce { 0% { transform: scale(.9); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }


/* ─── Note Pills ─── */

.pf-notes {
    display: flex !important; gap: 7px !important; flex-wrap: wrap !important;
    margin: 0 0 15px !important; padding: 0 !important; list-style: none !important;
}
.pf-note {
    display: flex !important; align-items: center !important; gap: 6px !important;
    padding: 8px 14px !important; border-radius: 50px !important; font-size: 12px !important;
    border: 1.5px solid !important;
    animation: pfNoteIn .4s cubic-bezier(.22,1,.36,1) both !important;
    margin: 0 !important; line-height: 1 !important;
}
@keyframes pfNoteIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.pf-note-dot {
    width: 5px !important; height: 5px !important; border-radius: 50% !important;
    background: currentColor !important; opacity: .7 !important;
    flex-shrink: 0 !important; display: inline-block !important;
}
.pf-n0 { background: #FFF3EE !important; border-color: #F0A882 !important; color: #712B13 !important; }
.pf-n1 { background: #FFF9F0 !important; border-color: #E8C882 !important; color: #633806 !important; }
.pf-n2 { background: #EAF3DE !important; border-color: #97C459 !important; color: #27500A !important; }


/* ─── AI Profile ─── */

.pf-profile {
    background: rgba(255,255,255,.75) !important; border-radius: 10px !important;
    padding: 13px 16px !important; border: 1px solid rgba(232,112,85,.2) !important;
    margin: 0 0 15px !important; display: none !important;
}
.pf-profile.on { display: block !important; animation: pfIn .5s ease !important; }
.pf-profile-badge {
    display: inline-flex !important; align-items: center !important; gap: 5px !important;
    background: var(--pf-ink) !important; color: #fff !important;
    padding: 3px 9px !important; border-radius: 50px !important;
    font-size: 9px !important; font-weight: 500 !important;
    letter-spacing: 1px !important; text-transform: uppercase !important;
    margin: 0 0 8px !important; border: none !important;
}
.pf-profile-badge .pf-star-xs { color: #fff !important; }
.pf-profile-text {
    font-family: var(--pf-serif) !important; font-size: 15px !important;
    font-weight: 400 !important; line-height: 1.75 !important;
    font-style: italic !important; color: var(--pf-ink) !important;
    margin: 0 !important; padding: 0 !important;
}


/* ─── Rate Limit Warning ─── */

.pf-rl {
    display: none; align-items: flex-start !important; gap: 12px !important;
    padding: 14px 16px !important;
    background: #FDF0EC !important; border: 1.5px solid rgba(232,112,85,.25) !important;
    border-radius: 10px !important; margin: 0 0 15px !important;
    animation: pfIn .4s ease !important;
}
.pf-rl.on        { display: flex !important; }
.pf-rl-icon      { font-size: 20px !important; flex-shrink: 0 !important; margin-top: 1px !important; }
.pf-rl-msg       { font-size: 13px !important; color: var(--pf-ink) !important; line-height: 1.6 !important; }
.pf-rl-msg a     { color: var(--pf-coral) !important; text-decoration: underline !important; font-weight: 500 !important; }


/* ─── DNA Bar Chart ─── */

.pf-dna     { display: none !important; }
.pf-dna.on  { display: block !important; margin: 0 0 4px !important; }
.pf-dna-row { display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 0 7px !important; padding: 0 !important; }
.pf-dna-lbl { font-size: 11px !important; color: var(--pf-muted) !important; width: 80px !important; flex-shrink: 0 !important; margin: 0 !important; }
.pf-dna-bg  { flex: 1 !important; height: 4px !important; background: var(--pf-border) !important; border-radius: 2px !important; overflow: hidden !important; }
.pf-dna-fill {
    height: 100% !important; border-radius: 2px !important;
    width: 0 !important; transition: width 1s cubic-bezier(.22,1,.36,1) !important;
}
.pf-dna-pct { font-size: 10px !important; color: var(--pf-muted) !important; width: 28px !important; text-align: right !important; margin: 0 !important; }


/* ─── Alternative Matches Grid ─── */

.pf-alts      { margin: 0 0 16px !important; }
.pf-alts-grid {
    display: grid !important; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)) !important;
    gap: 9px !important; margin: 10px 0 0 !important; padding: 0 !important; list-style: none !important;
}
.pf-alt {
    border: 1.5px solid var(--pf-border) !important; border-radius: 12px !important;
    padding: 13px !important; cursor: pointer !important; background: #fff !important;
    transition: border-color .15s, background .15s, transform .15s !important;
    animation: pfIn .35s cubic-bezier(.22,1,.36,1) both !important;
    text-align: left !important; display: block !important;
}
.pf-alt:hover {
    border-color: var(--pf-coral) !important; background: var(--pf-coral-p) !important;
    transform: translateY(-2px) !important;
}
.pf-alt-sku  { font-size: 16px !important; font-weight: 700 !important; color: var(--pf-coral) !important; margin: 0 0 2px !important; padding: 0 !important; letter-spacing: .3px !important; line-height: 1.3 !important; }
.pf-alt-name { font-size: 11px !important; color: var(--pf-ink) !important; font-weight: 500 !important; margin: 0 0 8px !important; padding: 0 !important; line-height: 1.3 !important; }
.pf-alt-pills { display: flex !important; flex-wrap: wrap !important; gap: 3px !important; list-style: none !important; margin: 0 !important; padding: 0 !important; }
.pf-sp {
    font-size: 10px !important; padding: 3px 7px !important; border-radius: 50px !important;
    background: var(--pf-coral-p) !important; color: #712B13 !important;
    border: 1px solid rgba(232,112,85,.3) !important;
    white-space: nowrap !important; display: inline-block !important;
    line-height: 1.4 !important; margin: 0 !important;
}
.pf-op {
    font-size: 10px !important; padding: 3px 7px !important; border-radius: 50px !important;
    background: #F4F3F1 !important; color: var(--pf-muted) !important;
    border: 1px solid var(--pf-border) !important;
    white-space: nowrap !important; display: inline-block !important;
    line-height: 1.4 !important; margin: 0 !important;
}


/* ─── Hero Section (shortcode landing) ─── */

.pf-hero-section {
    padding: 60px 24px; text-align: center;
    background: linear-gradient(160deg, #FDF0EC 0%, #FDFAF8 55%, #F9EDE8 100%);
    border-radius: 12px; margin-bottom: 20px;
}
.pf-hero-inner {
    max-width: 480px; margin: 0 auto;
    display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.pf-hero-logo     { font-family: Georgia, serif !important; font-size: 20px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: #1A1210; }
.pf-hero-logo sup { font-size: 10px; color: #E87055; vertical-align: super; }
.pf-hero-title    { font-family: Georgia, serif !important; font-size: clamp(28px, 5vw, 46px); font-weight: 300; line-height: 1.2; color: #1A1210; margin: 0; padding: 0; border: none; background: none; }
.pf-hero-title em { font-style: italic; color: #E87055; }
.pf-hero-sub      { font-size: 15px; color: #8A7570; line-height: 1.7; margin: 0; padding: 0; max-width: 380px; }


/* ─── Screens ─── */

#pf-vs, #pf-vr { flex-shrink: 0; }


/* ─── Mood Entry Button ─── */

.pf-mood-entry-btn {
    all: unset !important;
    display: flex !important; align-items: center !important; gap: 8px !important;
    width: 100% !important; padding: 13px 18px !important; margin: 12px 0 0 !important;
    border-radius: 10px !important;
    background: var(--pf-coral-p) !important; border: 1.5px dashed rgba(232,112,85,.35) !important;
    color: var(--pf-coral) !important; font-size: 13px !important; font-weight: 500 !important;
    cursor: pointer !important; transition: background .15s, border-color .15s !important;
    box-sizing: border-box !important;
}
.pf-mood-entry-btn:hover { background: #f9e4dd !important; border-color: var(--pf-coral) !important; }
.pf-mood-arrow           { margin-left: auto !important; opacity: .7 !important; }

.pf-vm-sub { font-size: 13px !important; color: var(--pf-muted) !important; margin: 0 0 16px !important; padding: 0 !important; line-height: 1.6 !important; }


/* ─── Mood Textarea ─── */

.pf-mood-ta-wrap { position: relative !important; margin-bottom: 0 !important; }
.pf-mood-ta {
    all: unset !important; display: block !important; width: 100% !important;
    padding: 13px 16px !important;
    border: 1.5px solid var(--pf-border) !important; border-radius: 10px !important;
    font-family: var(--pf-font) !important; font-size: 14px !important;
    color: var(--pf-ink) !important; background: #fff !important;
    resize: none !important; min-height: 85px !important; line-height: 1.6 !important;
    transition: border-color .15s !important; box-sizing: border-box !important;
}
.pf-mood-ta:focus        { border-color: var(--pf-coral) !important; outline: none !important; }
.pf-mood-ta::placeholder { color: transparent !important; }
.pf-mood-ph {
    position: absolute !important; top: 13px !important; left: 16px !important; right: 16px !important;
    font-family: var(--pf-font) !important; font-size: 14px !important;
    color: #BDB5B2 !important; pointer-events: none !important;
    line-height: 1.6 !important; transition: opacity .15s !important;
}
.pf-mood-ph.pf-ph-hidden { opacity: 0 !important; }


/* ─── Mood Example Chips ─── */

.pf-mood-examples {
    display: flex !important; flex-wrap: wrap !important; gap: 7px !important;
    margin: 14px 0 18px !important; align-items: center !important;
}
.pf-mood-ex-label { font-size: 11px !important; color: var(--pf-faint) !important; flex-shrink: 0 !important; letter-spacing: .3px !important; }
.pf-mood-ex {
    all: unset !important;
    display: inline-flex !important; align-items: center !important;
    font-size: 12px !important; color: var(--pf-muted) !important;
    padding: 7px 14px !important;
    border: 1px solid var(--pf-border) !important; border-radius: 50px !important;
    cursor: pointer !important; background: #fff !important;
    font-family: var(--pf-font) !important; transition: all .15s !important;
    white-space: nowrap !important; box-sizing: border-box !important;
}
.pf-mood-ex:hover { border-color: var(--pf-coral) !important; color: var(--pf-coral) !important; background: var(--pf-coral-p) !important; }


/* ─── Location & Weather ─── */

.pf-mood-city-row {
    display: flex !important; gap: 8px !important; margin: 14px 0 10px !important;
    align-items: center !important;
}
.pf-mood-city-input {
    flex: 1 !important; padding: 9px 14px !important;
    border: 1.5px solid var(--pf-border) !important; border-radius: 50px !important;
    font-size: 13px !important; font-family: var(--pf-font) !important;
    color: var(--pf-ink) !important; background: #fff !important;
    outline: none !important; transition: border-color .15s !important;
    box-sizing: border-box !important;
}
.pf-mood-city-input:focus        { border-color: var(--pf-coral) !important; }
.pf-mood-city-input::placeholder { color: #BDB5B2 !important; }
.pf-mood-city-btn {
    padding: 9px 16px !important; background: none !important;
    border: 1.5px solid var(--pf-border) !important; border-radius: 50px !important;
    font-size: 12px !important; color: var(--pf-muted) !important;
    cursor: pointer !important; font-family: var(--pf-font) !important;
    transition: all .15s !important; white-space: nowrap !important;
    box-sizing: border-box !important;
}
.pf-mood-city-btn:hover    { border-color: var(--pf-coral) !important; color: var(--pf-coral) !important; }
.pf-mood-city-btn:disabled { opacity: .5 !important; cursor: default !important; }

.pf-mood-loc-row {
    display: flex !important; align-items: center !important; gap: 10px !important;
    margin: 12px 0 !important; flex-wrap: wrap !important;
}
.pf-mood-loc-btn {
    all: unset !important;
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    padding: 8px 16px !important;
    border: 1.5px solid var(--pf-border) !important; border-radius: 50px !important;
    font-size: 12px !important; color: var(--pf-muted) !important;
    cursor: pointer !important; transition: all .15s !important;
    box-sizing: border-box !important;
}
.pf-mood-loc-btn:hover    { border-color: var(--pf-coral) !important; color: var(--pf-coral) !important; }
.pf-mood-loc-btn:disabled { opacity: .6 !important; cursor: default !important; }
.pf-mood-weather-chip {
    display: inline-flex !important; align-items: center !important;
    padding: 5px 12px !important;
    background: var(--pf-coral-p) !important; border: 1px solid rgba(232,112,85,.2) !important;
    border-radius: 50px !important;
    font-size: 12px !important; color: var(--pf-coral) !important; font-weight: 500 !important;
}


/* ─── Mood Submit Button ─── */

.pf-mood-submit {
    all: unset !important;
    display: inline-flex !important; align-items: center !important; gap: 9px !important;
    background: var(--pf-coral) !important; color: #fff !important;
    border-radius: 50px !important; padding: 14px 28px !important; margin-top: 14px !important;
    font-size: 15px !important; font-weight: 500 !important; cursor: pointer !important;
    transition: filter .2s, transform .15s !important;
    box-shadow: 0 6px 20px rgba(232,112,85,.3) !important; box-sizing: border-box !important;
    -webkit-appearance: none !important; -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
}
.pf-mood-submit:hover    { filter: brightness(.9) !important; transform: translateY(-2px) !important; }
.pf-mood-submit:disabled { opacity: .6 !important; cursor: default !important; transform: none !important; }


/* ─── Mobile ─── */

@media (max-width: 520px) {
    .pf-overlay { padding: 0 !important; align-items: flex-end !important; -webkit-overflow-scrolling: touch !important; }
    .pf-modal {
        border-radius: var(--pf-r) var(--pf-r) 0 0 !important;
        height: 90vh !important; height: 90svh !important; height: 90dvh !important;
        max-height: -webkit-fill-available !important; max-width: 100% !important;
        transform: translateY(110%) !important;
        transition: transform .35s cubic-bezier(.22,1,.36,1) !important;
    }
    .pf-overlay.open .pf-modal { transform: translateY(0) !important; }
    .pf-head { padding-left: 18px !important; padding-right: 18px !important; }
    .pf-body { padding: 20px 18px !important; }
    .pf-alts-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* Larger touch targets on mobile */
    .pf-g { padding: 11px 20px !important; min-height: 44px !important; }
    .pf-tab { padding: 11px 14px !important; min-height: 44px !important; }
    .pf-input { padding: 15px 16px 15px 44px !important; font-size: 16px !important; }
    .pf-mood-ta { font-size: 16px !important; min-height: 90px !important; }
    .pf-mood-ex { padding: 9px 16px !important; min-height: 40px !important; }
    .pf-mood-city-input { padding: 11px 14px !important; font-size: 16px !important; }
    .pf-mood-city-btn { padding: 11px 16px !important; min-height: 44px !important; }
    .pf-mood-loc-btn { padding: 11px 16px !important; min-height: 44px !important; }

    /* Submit button: explicit tap area, prevent iOS issues */
    .pf-mood-submit {
        width: 100% !important; justify-content: center !important;
        padding: 16px 28px !important; margin-top: 16px !important;
        min-height: 52px !important;
        -webkit-appearance: none !important; -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }

    /* Fullpage mobile: full bleed */
    .pf-fullpage-wrap { padding: 24px 16px !important; }
    .pf-fullpage .pf-hero-section { padding: 24px 16px !important; }
}


/* ─── Fullpage Reset ─── */

.pf-fullpage {
    margin: 0 !important; padding: 0 !important;
    min-height: 100vh !important; min-height: 100dvh !important;
    background: linear-gradient(160deg, #FDF0EC 0%, #FDFAF8 55%, #F9EDE8 100%) !important;
}
.pf-fullpage-wrap {
    width: 100% !important; min-height: 100vh !important; min-height: 100dvh !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    padding: 40px 24px !important; box-sizing: border-box !important;
}

/* On fullpage, hero fills viewport naturally — no card appearance */
.pf-fullpage .pf-hero-section {
    background: transparent !important; border-radius: 0 !important;
    padding: 40px 24px !important; margin: 0 !important;
}