/* ── The phone field ───────────────────────────────────────────────────────
   A country button, a number, and a searchable list. Loaded by every page that
   asks for a phone number -- eight of them -- so it is its own file rather than
   eight copies or a block in a stylesheet only half of them include.

   It styles itself from the theme tokens in css/styles.css and defines no
   colours of its own, which is what lets it sit inside the app, inside the
   listing page and inside the German purchase receipt without looking foreign
   in any of them. */

.phone-field {
    position: relative;
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.phone-country {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    cursor: pointer;
    white-space: nowrap;
}

.phone-country:hover,
.phone-country[aria-expanded="true"] {
    border-color: var(--border-hover);
}

.phone-number {
    flex: 1;
    min-width: 0;
    padding: 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
}

/* Below the button, which is where a dropdown is looked for. It overlaps the
   number field while it is open, and that is the right way round: the country
   is being chosen, the number is not being typed. */
.phone-pop {
    position: absolute;
    z-index: 60;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    max-width: 340px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-hover);
    border-radius: 6px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.phone-search {
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-primary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9rem;
}

.phone-search:focus { outline: none; }

.phone-list {
    max-height: 260px;
    overflow-y: auto;
    /* Momentum scrolling inside the list instead of dragging the page behind
       it, which on a phone is what makes a long list feel broken. */
    -webkit-overflow-scrolling: touch;
}

.phone-option {
    display: block;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
}

.phone-option:hover { background: rgba(var(--accent-gold-rgb), 0.1); }

.phone-option.on {
    background: rgba(var(--accent-gold-rgb), 0.16);
    color: var(--accent-gold);
}

.phone-none {
    padding: 12px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* The receipt is a contract on white paper with its own palette, so the field
   has to be legible there too -- it cannot borrow the dark theme's tokens. */
.purchase-sheet .phone-country,
.purchase-sheet .phone-number,
.purchase-sheet .phone-pop {
    background: #fff;
    border-color: #c9c9c9;
    color: #111;
}

.purchase-sheet .phone-option { color: #111; }
.purchase-sheet .phone-option:hover { background: #eee; }

/* The deals board switches its edit fields with `display: block !important`,
   and the wrapper carries `.field-edit` because it stands where the input
   stood. Without this it would obey that rule and stack the country button
   above the number instead of beside it. Specificity plus !important, because
   that is what it is competing with. */
.deal-card.editing .phone-field.field-edit { display: flex !important; }

/* And at rest it stays hidden along with every other edit field. */
.phone-field.field-edit { display: none !important; }