/*
 * Homepage phone: a replica of the Aqar Plus app (mobile-rn). Sized in em (1em = 16dp scaled), so the
 * root font-size scales the whole device. Colours, radii and copy follow core/theme and the real screens.
 */
.phone {
    --ph-navy: #0F273B;
    --ph-gold: #C7952B;
    --ph-bg: #FAF9F6;
    --ph-border: #E8ECF3;
    --ph-muted: #6E7787;
    --ph-hint: #9CA3AF;
    --ph-green: #22C55E;
    --ph-red: #DC2626;
    --ph-amber: #F59E0B;
    --ph-blue: #0056D2;
    position: relative;
    width: 24em;
    height: 49.5em;
    padding: 0.8em;
    border-radius: 3.3em;
    background: linear-gradient(160deg, #2a5373 0%, #0b1f30 55%);
    box-shadow: 0 2.4em 4.8em rgba(5, 14, 22, 0.5), 0 0.4em 1em rgba(5, 14, 22, 0.3), inset 0 0 0 0.1em rgba(255, 255, 255, 0.16);
    font-family: var(--aqar-font);
    font-size: inherit;
    line-height: 1.35;
    color: #1A1A1A;
    -webkit-user-select: none;
    user-select: none;
}

:where(.phone button) { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; text-align: inherit; }
.phone b, .phone strong { font-weight: 700; }
.phone small { font-size: 0.72em; color: var(--ph-muted); font-weight: 400; }
.phone svg { flex: none; display: block; }

.phone-notch {
    position: absolute;
    top: 1.15em;
    left: 50%;
    transform: translateX(-50%);
    width: 6.6em;
    height: 1.7em;
    border-radius: 1em;
    background: #050e16;
    z-index: 5;
}

.phone-screen {
    position: relative;
    height: 100%;
    border-radius: 2.6em;
    overflow: hidden;
    background: var(--ph-bg);
    direction: rtl;
}

/* Screens */
.ph-s {
    position: absolute;
    inset: 0;
    padding: 3.1em 1em 5.4em;
    display: flex;
    flex-direction: column;
    gap: 0.65em;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.7em);
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.35s;
}

.ph-s.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ph-s--flush { padding: 0 0 4.4em; gap: 0; }

/* Top bars */
.ph-bar { display: flex; align-items: center; justify-content: space-between; height: 2.4em; margin-inline: -0.2em; }
.ph-bar--plain { justify-content: flex-start; font-size: 1.1em; }
.ph-bar--two { height: auto; }
.ph-bar--two span { display: flex; flex-direction: column; }
.ph-bar--two b { font-size: 1.1em; color: var(--ph-navy); }
.ph-bar--wiz { gap: 0.6em; }
.ph-bar--wiz b { flex: 1; font-size: 1em; color: var(--ph-navy); }
.ph-bar--wiz small { color: var(--ph-blue); font-weight: 600; }
.ph-bar-gap { width: 2.2em; }
.ph-logo { height: 2.1em; width: auto; }
.ph-bell { position: relative; width: 2.2em; display: grid; place-items: center; color: var(--ph-navy); }
.ph-bell i {
    position: absolute; top: -0.2em; inset-inline-start: 0.2em; min-width: 1.4em; height: 1.4em; padding-inline: 0.3em;
    border-radius: 1em; background: var(--ph-gold); color: #fff; font-size: 0.62em; font-style: normal; font-weight: 700;
    display: grid; place-items: center;
}
.ph-back { display: grid; place-items: center; width: 2em; height: 2em; color: var(--ph-navy); }
.ph-back svg { transform: scaleX(-1); }

/* Search CTA card */
.ph-cta {
    display: flex; align-items: center; gap: 0.7em; min-height: 4.2em; padding: 0.55em 0.75em; border-radius: 1em;
    background: #fff; border: 1px solid var(--ph-border); box-shadow: 0 0.12em 0.5em rgba(15, 39, 59, 0.08);
}
.ph-cta-icon { width: 2.3em; height: 2.3em; border-radius: 50%; background: var(--ph-bg); display: grid; place-items: center; color: var(--ph-navy); }
.ph-cta-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ph-cta-text b { font-size: 1em; color: var(--ph-navy); }
.ph-cta-text small { color: #8E939A; }
.ph-cta-go { align-self: stretch; margin: -0.55em -0.75em -0.55em 0; width: 3em; background: var(--ph-navy); color: #fff; display: grid; place-items: center; border-radius: 1em 0 0 1em; }
.ph-cta--tune .ph-cta-go { display: none; }
.ph-tune { position: relative; width: 2.6em; height: 2.6em; border-radius: 50%; background: var(--ph-navy); color: #fff; display: grid; place-items: center; }
.ph-tune i { position: absolute; top: -0.3em; inset-inline-end: -0.3em; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--ph-gold); color: #fff; font-size: 0.62em; font-style: normal; font-weight: 700; display: grid; place-items: center; }

/* Sale / rent cards */
.ph-sr { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; }
.ph-sr-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.1em; padding: 0.8em; border-radius: 1em;
    background: #fff; border: 1.5px solid var(--ph-gold); color: var(--ph-navy); transition: background 0.25s, color 0.25s;
}
.ph-sr-card svg { color: var(--ph-gold); margin-bottom: 0.2em; }
.ph-sr-card b { font-size: 0.95em; }
.ph-sr-card small { font-size: 0.62em; color: var(--ph-muted); }
.ph-sr-card.is-on { background: var(--ph-navy); border-color: var(--ph-navy); color: #fff; }
.ph-sr-card.is-on small { color: #F1E6DD; }

.ph-sec { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.15em; }
.ph-sec b { font-size: 1em; color: var(--ph-navy); }
.ph-sec span { font-size: 0.72em; color: var(--ph-blue); }

.ph-chips { display: flex; gap: 0.4em; }
.ph-chips span { padding: 0.35em 0.8em; border-radius: 1em; border: 1px solid var(--ph-gold); background: #fff; color: var(--ph-navy); font-size: 0.72em; font-weight: 600; }
.ph-chips span.is-on { background: var(--ph-navy); border-color: var(--ph-navy); color: #fff; }

/* Listing photos (abstract, no real imagery) */
.ph-photo {
    position: relative; display: block; border-radius: 0.75em; overflow: hidden;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='%23ffffff' fill-opacity='.14'%3E%3Crect x='14' y='54' width='30' height='70'/%3E%3Crect x='50' y='30' width='38' height='94'/%3E%3Crect x='94' y='62' width='28' height='62'/%3E%3Crect x='128' y='40' width='36' height='84'/%3E%3Crect x='170' y='68' width='30' height='56'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.28'%3E%3Crect x='58' y='42' width='5' height='9' rx='1'/%3E%3Crect x='72' y='42' width='5' height='9' rx='1'/%3E%3Crect x='58' y='60' width='5' height='9' rx='1'/%3E%3Crect x='136' y='52' width='5' height='9' rx='1'/%3E%3Crect x='150' y='70' width='5' height='9' rx='1'/%3E%3C/g%3E%3C/svg%3E") center bottom / cover no-repeat,
        linear-gradient(160deg, #3c6d90 0%, #0F273B 100%);
}
.ph-photo--b {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='%23ffffff' fill-opacity='.22'%3E%3Crect x='20' y='70' width='60' height='60'/%3E%3Crect x='86' y='48' width='44' height='80'/%3E%3Crect x='136' y='74' width='50' height='54'/%3E%3C/g%3E%3C/svg%3E") center bottom / cover no-repeat,
        linear-gradient(160deg, #D9AC48 0%, #8c6a1d 100%);
}
.ph-badge { position: absolute; top: 0.6em; inset-inline-start: 0.6em; padding: 0.2em 0.6em; border-radius: 0.4em; background: var(--ph-gold); color: #fff; font-size: 0.66em; font-style: normal; font-weight: 700; }
.ph-badge--drop { background: var(--ph-red); }
.ph-heart { position: absolute; top: 0.45em; inset-inline-end: 0.5em; color: #fff; filter: drop-shadow(0 0.05em 0.2em rgba(0, 0, 0, 0.5)); }
.ph-heart.is-saved svg { fill: var(--ph-red); stroke: var(--ph-red); }
.ph-price { position: absolute; bottom: 0.55em; inset-inline-start: 0.6em; padding: 0.25em 0.8em; border-radius: 1em; background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 0.8em; font-weight: 700; }

/* Home / favorite card */
.ph-card { display: block; border-radius: 1em; background: #fff; overflow: hidden; box-shadow: 0 0.12em 0.5em rgba(15, 39, 59, 0.08); text-align: right; }
.ph-card .ph-photo { height: 8em; border-radius: 0; }
.ph-card-body { display: flex; flex-direction: column; gap: 0.3em; padding: 0.7em 0.8em; }
.ph-card-body > b { font-size: 0.95em; color: var(--ph-navy); }
.ph-loc { display: flex; align-items: center; gap: 0.3em; font-size: 0.74em; color: #4B5563; }
.ph-loc svg { color: var(--ph-gold); }
.ph-specs { display: flex; gap: 0.9em; font-size: 0.72em; color: var(--ph-hint); }
.ph-specs i { display: inline-flex; align-items: center; gap: 0.3em; font-style: normal; }
.ph-adv { display: flex; align-items: center; justify-content: space-between; padding-top: 0.5em; border-top: 1px solid var(--ph-border); }
.ph-adv-name { display: inline-flex; align-items: center; gap: 0.3em; font-size: 0.82em; font-weight: 600; color: var(--ph-navy); }
.ph-adv-name svg, .ph-adv-meta b svg { color: var(--ph-gold); }
.ph-tag { display: inline-flex; align-items: center; gap: 0.3em; height: 1.7em; padding-inline: 0.6em; border-radius: 0.7em; background: var(--ph-bg); font-size: 0.68em; color: var(--ph-muted); }

/* Search */
.ph-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 0.25em; border-radius: 0.9em; background: #fff; border: 1px solid var(--ph-border); }
.ph-seg button { padding: 0.5em; border-radius: 0.75em; text-align: center; font-weight: 700; color: var(--ph-muted); transition: background 0.25s, color 0.25s; }
.ph-seg button.is-on { background: var(--ph-navy); color: #fff; }
.ph-types { display: flex; gap: 0.3em; overflow: hidden; }
.ph-types button { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 0.15em; padding: 0.4em 0.2em; border-radius: 0.75em; color: var(--ph-muted); transition: background 0.25s, color 0.25s; }
.ph-types button span { font-size: 0.66em; white-space: nowrap; }
.ph-types button.is-on { background: #fff; color: var(--ph-navy); box-shadow: 0 0.08em 0.3em rgba(15, 39, 59, 0.1); }
.ph-tool { font-size: 0.74em; color: var(--ph-muted); }

.ph-row { display: flex; gap: 0.7em; padding: 0.55em; border-radius: 0.9em; background: #fff; border: 1px solid var(--ph-border); text-align: right; }
.ph-row .ph-photo { width: 6.2em; height: 7.4em; flex: none; border-radius: 0.65em; }
.ph-row-body { display: flex; flex-direction: column; gap: 0.25em; min-width: 0; }
.ph-row-body > b { font-size: 0.9em; color: var(--ph-navy); }
.ph-row-body > strong { font-size: 0.82em; color: var(--ph-navy); }
.ph-fab-map { position: absolute; bottom: 5.9em; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.4em; padding: 0.55em 1.1em; border-radius: 2em; background: var(--ph-navy); color: #fff; font-size: 0.78em; font-weight: 700; box-shadow: 0 0.3em 1em rgba(15, 39, 59, 0.3); white-space: nowrap; }

/* Filter sheet */
.ph-sheet-wrap { position: absolute; inset: 0; z-index: 6; background: rgba(10, 27, 42, 0); visibility: hidden; transition: background 0.3s, visibility 0s linear 0.35s; display: flex; align-items: flex-end; }
.ph-sheet-wrap.is-open { background: rgba(10, 27, 42, 0.5); visibility: visible; transition-delay: 0s; }
.ph-sheet { width: 100%; padding: 0.6em 1em 1em; border-radius: 1.4em 1.4em 0 0; background: var(--ph-bg); display: flex; flex-direction: column; gap: 0.6em; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.ph-sheet-wrap.is-open .ph-sheet { transform: none; }
.ph-grab { align-self: center; width: 2.6em; height: 0.25em; border-radius: 1em; background: #cdd3dc; }
.ph-sheet-title { color: var(--ph-navy); font-size: 1em; }
.ph-field-card { display: flex; flex-direction: column; gap: 0.45em; padding: 0.75em; border-radius: 0.9em; background: #fff; border: 1px solid var(--ph-border); }
.ph-field-card > b { font-size: 0.85em; color: var(--ph-navy); }
.ph-field { display: flex; justify-content: space-between; align-items: center; padding: 0.5em 0.7em; border-radius: 0.6em; border: 1px solid var(--ph-border); font-size: 0.8em; }
.ph-field small { font-size: 1em; color: var(--ph-muted); }
.ph-field span { font-weight: 600; color: var(--ph-navy); }
.ph-field.is-off { opacity: 0.5; }
.ph-switch { display: flex; align-items: center; justify-content: space-between; font-size: 0.8em; }
.ph-switch i { position: relative; width: 2.6em; height: 1.45em; border-radius: 1em; background: #cdd3dc; transition: background 0.25s; }
.ph-switch i::after { content: ''; position: absolute; top: 0.18em; inset-inline-start: 0.18em; width: 1.1em; height: 1.1em; border-radius: 50%; background: #fff; transition: transform 0.25s; box-shadow: 0 0.05em 0.2em rgba(0, 0, 0, 0.3); }
.ph-switch.is-on i { background: var(--ph-gold); }
.ph-switch.is-on i::after { transform: translateX(-1.15em); }
.ph-sheet-foot { display: flex; gap: 0.6em; }
.ph-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; min-height: 2.9em; padding-inline: 1em; border-radius: 0.8em; background: var(--ph-navy); color: #fff; font-weight: 700; font-size: 0.9em; }
.ph-btn--line { background: #fff; color: var(--ph-navy); border: 1px solid var(--ph-navy); }
.ph-btn--wa { background: #25D366; }

/* Detail */
.ph-gallery { position: relative; height: 13em; flex: none; border-radius: 0; }
.ph-round { position: absolute; top: 2.7em; width: 2.3em; height: 2.3em; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; display: grid; place-items: center; }
.ph-round--back { inset-inline-start: 0.8em; }
.ph-round--back svg { transform: scaleX(-1); }
.ph-round--share { inset-inline-end: 3.5em; }
.ph-round--heart { inset-inline-end: 0.8em; }
.ph-count { position: absolute; bottom: 0.7em; inset-inline-start: 0.8em; display: inline-flex; align-items: center; gap: 0.3em; padding: 0.2em 0.7em; border-radius: 1em; background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 0.68em; }
.ph-info { display: flex; flex-direction: column; gap: 0.45em; padding: 0.9em 1em 0; margin-top: -0.9em; position: relative; border-radius: 1.1em 1.1em 0 0; background: var(--ph-bg); flex: 1; overflow: hidden; }
.ph-title { font-size: 1.15em; color: var(--ph-navy); }
.ph-bigprice { font-size: 1.35em; color: var(--ph-navy); }
.ph-bigprice small { font-size: 0.55em; color: var(--ph-muted); margin-inline-start: 0.2em; }
.ph-grid { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0.6em 0.2em; border-radius: 0.9em; border: 1px solid var(--ph-border); background: #fff; }
.ph-grid span { display: flex; flex-direction: column; align-items: center; gap: 0.1em; color: var(--ph-navy); }
.ph-grid b { font-size: 0.85em; }
.ph-meta { display: flex; gap: 1em; font-size: 0.7em; color: var(--ph-muted); }
.ph-meta span { display: inline-flex; align-items: center; gap: 0.3em; }
.ph-tabs { display: flex; gap: 1em; font-size: 0.8em; color: var(--ph-muted); border-bottom: 1px solid var(--ph-border); }
.ph-tabs span { padding-bottom: 0.4em; }
.ph-tabs .is-on { color: var(--ph-navy); font-weight: 700; box-shadow: 0 0.15em 0 var(--ph-gold); }
.ph-adv-card { display: flex; align-items: center; gap: 0.6em; padding: 0.6em; border-radius: 0.9em; background: #fff; border: 1px solid var(--ph-border); }
.ph-avatar { width: 2.6em; height: 2.6em; border-radius: 50%; background: var(--ph-bg); display: grid; place-items: center; color: var(--ph-muted); }
.ph-adv-meta { flex: 1; display: flex; flex-direction: column; }
.ph-adv-meta b { display: inline-flex; align-items: center; gap: 0.3em; font-size: 0.82em; color: var(--ph-navy); }
.ph-mini { padding: 0.35em 0.8em; border-radius: 0.55em; border: 1px solid var(--ph-navy); font-size: 0.68em; font-weight: 600; color: var(--ph-navy); }
.ph-contact { position: absolute; inset-inline: 0; bottom: 0; display: flex; gap: 0.7em; padding: 0.8em 1em 1em; background: var(--ph-bg); box-shadow: 0 -0.3em 1em rgba(15, 39, 59, 0.1); }

/* Favorites */
.ph-note { margin: 0; padding: 0.7em 0.8em; border-radius: 0.9em; background: #fff; border: 1px solid var(--ph-border); font-size: 0.74em; color: var(--ph-muted); }
.ph-note b { display: block; font-size: 1.1em; color: var(--ph-navy); margin-bottom: 0.15em; }
.ph-pricerow { display: flex; align-items: baseline; gap: 0.6em; }
.ph-pricerow strong { color: #15803D; font-size: 0.95em; }
.ph-pricerow s { color: var(--ph-hint); font-size: 0.74em; }
.ph-notif { display: flex; gap: 0.7em; align-items: center; padding: 0.7em; border-radius: 0.9em; background: rgba(15, 39, 59, 0.04); }
.ph-notif-icon { width: 2.6em; height: 2.6em; border-radius: 0.8em; background: rgba(15, 39, 59, 0.1); color: var(--ph-navy); display: grid; place-items: center; flex: none; }
.ph-notif b { display: block; font-size: 0.85em; color: var(--ph-navy); }

/* Wizard */
.ph-stepper { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; gap: 0.2em; position: relative; }
.ph-stepper::before { content: ''; position: absolute; top: 0.95em; inset-inline: 1.4em; height: 2px; background: var(--ph-border); }
.ph-stepper li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.25em; text-align: center; }
.ph-stepper i { width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--ph-bg); border: 1px solid var(--ph-border); color: var(--ph-hint); font-size: 0.8em; font-style: normal; font-weight: 700; display: grid; place-items: center; z-index: 1; }
.ph-stepper span { font-size: 0.56em; color: var(--ph-hint); line-height: 1.2; }
.ph-stepper li.is-on i { background: var(--ph-blue); border-color: var(--ph-blue); color: #fff; }
.ph-stepper li.is-on span { color: var(--ph-blue); }
.ph-wiz { display: flex; flex-direction: column; gap: 0.5em; flex: 1; }
.ph-wiz > b { font-size: 0.95em; color: var(--ph-navy); }
.ph-wiz > small { margin-top: -0.4em; }
.ph-purpose { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; }
.ph-purpose-card { padding: 1.1em 0.5em; border-radius: 0.9em; background: #fff; border: 1.5px solid var(--ph-border); text-align: center; font-weight: 700; color: var(--ph-navy); transition: background 0.25s, border-color 0.25s; }
.ph-purpose-card--sale.is-on { background: #E6F0FF; border-color: var(--ph-blue); color: var(--ph-blue); }
.ph-purpose-card--rent.is-on { background: #E8F5E9; border-color: var(--ph-green); color: #15803D; }
.ph-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.45em; }
.ph-tiles button { aspect-ratio: 0.95; border-radius: 0.8em; background: #fff; border: 1.5px solid var(--ph-border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3em; color: var(--ph-muted); text-align: center; transition: background 0.25s, border-color 0.25s, color 0.25s; }
.ph-tiles button span { font-size: 0.62em; }
.ph-tiles button.is-on { background: #E6F0FF; border-color: var(--ph-blue); color: var(--ph-blue); }
.ph-wiz-foot { position: absolute; inset-inline: 0; bottom: 0; display: flex; gap: 0.6em; padding: 0.8em 1em 1em; background: #fff; border-top: 1px solid var(--ph-border); }

/* Property management */
.ph-collect { padding: 0.8em; border-radius: 1em; background: #fff; border: 1px solid var(--ph-border); display: flex; flex-direction: column; gap: 0.55em; }
.ph-collect-head { display: flex; align-items: center; gap: 0.6em; }
.ph-collect-head > span:last-child { display: flex; flex-direction: column; }
.ph-collect-head b { font-size: 0.9em; color: var(--ph-navy); }
.ph-chipicon { width: 2.3em; height: 2.3em; border-radius: 0.7em; background: rgba(199, 149, 43, 0.12); color: var(--ph-gold); display: grid; place-items: center; }
.ph-cols { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.ph-cols span { display: flex; flex-direction: column; }
.ph-cols b { font-size: 0.82em; color: var(--ph-navy); font-variant-numeric: tabular-nums; }
.ph-bar-track { height: 0.55em; border-radius: 1em; background: var(--ph-border); overflow: hidden; }
.ph-bar-track i { display: block; height: 100%; border-radius: 1em; background: var(--ph-green); transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.ph-cap { text-align: center; }
.ph-alert { display: flex; align-items: center; gap: 0.6em; padding: 0.65em 0.8em; border-radius: 0.9em; background: rgba(245, 158, 11, 0.12); transition: background 0.3s; }
.ph-alert.is-ok { background: rgba(34, 197, 94, 0.1); }
.ph-alert-icon { width: 2.1em; height: 2.1em; border-radius: 50%; background: #fff; color: var(--ph-amber); display: grid; place-items: center; flex: none; }
.ph-alert.is-ok .ph-alert-icon { color: var(--ph-green); }
.ph-alert b { display: block; font-size: 0.82em; color: var(--ph-navy); }
.ph-units { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0.5em 0; border-radius: 0.9em; background: #fff; border: 1px solid var(--ph-border); text-align: center; }
.ph-units span { display: flex; flex-direction: column; }
.ph-units b { font-family: var(--aqar-font-display); font-size: 1.3em; font-weight: 600; color: var(--ph-navy); line-height: 1.2; }
.ph-units .is-green b { color: var(--ph-green); }
.ph-unit { position: relative; display: flex; flex-direction: column; gap: 0.45em; padding: 0.75em 0.85em; border-radius: 0.9em; background: #fff; border: 1px solid var(--ph-border); overflow: hidden; }
.ph-unit::after { content: ''; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 0.3em; background: var(--ph-red); transition: background 0.3s; }
.ph-unit.is-paid::after { background: var(--ph-green); }
.ph-unit-top { display: flex; align-items: center; justify-content: space-between; }
.ph-unit-top b { color: var(--ph-navy); font-size: 0.9em; }
.ph-status { padding: 0.15em 0.7em; border-radius: 1em; font-size: 0.68em; font-weight: 700; background: rgba(220, 38, 38, 0.1); color: var(--ph-red); transition: background 0.3s, color 0.3s; }
.ph-unit.is-paid .ph-status { background: rgba(34, 197, 94, 0.18); color: #15803D; }
.ph-unit-line { font-size: 0.72em; color: var(--ph-muted); }
.ph-unit-actions { display: flex; gap: 0.4em; align-items: center; }
.ph-pill { display: inline-flex; align-items: center; gap: 0.3em; padding: 0.4em 0.7em; border-radius: 1em; background: var(--ph-bg); border: 1px solid var(--ph-border); font-size: 0.7em; font-weight: 600; color: var(--ph-navy); }
.ph-pill--wa svg { color: #25D366; }
.ph-pay { margin-inline-start: auto; padding: 0.55em 1em; border-radius: 0.7em; background: var(--ph-navy); color: #F1E6DD !important; font-size: 0.72em; font-weight: 700; transition: transform 0.15s; }
.ph-pay:active { transform: scale(0.96); }

/* Tab bar */
.ph-tabs-bar { position: absolute; inset-inline: 0; bottom: 0; z-index: 4; height: 4.6em; padding-top: 0.5em; display: flex; align-items: flex-start; justify-content: space-around; background: #fff; border-top: 1px solid var(--ph-border); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.ph-tabs-bar.is-hidden { transform: translateY(100%); }
.ph-tabs-bar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.15em; color: var(--ph-hint); }
.ph-tabs-bar button span { font-size: 0.62em; }
.ph-tabs-bar button.is-on { color: var(--ph-gold); font-weight: 600; }
.ph-tabs-bar .ph-fab { flex: none; width: 3.4em; height: 3.4em; margin-top: -1.1em; border-radius: 50%; background: var(--ph-gold); color: #fff; display: grid; place-items: center; box-shadow: 0 0.3em 0.8em rgba(15, 39, 59, 0.28); }

@media (prefers-reduced-motion: reduce) {
    .ph-s, .ph-sheet, .ph-sheet-wrap, .ph-bar-track i, .ph-tabs-bar { transition: none; }
}