/* Build a space — the create-room sheet.
 *
 * This screen's look used to live in mobile.html among ~119 scattered rules,
 * where it lost fights it should never have been in: broad selectors like
 * `[id*="modal"] *` set `color: #ffffff !important` on anything whose id
 * merely contains "modal", so the labels and the Access dropdown went white
 * on a white panel. The dropdown read as empty, Paid could not be chosen, and
 * the price field it reveals was unreachable.
 *
 * Two rules keep that from coming back:
 *
 *   1. Everything here is scoped under #text-bloc-create-modal, and every
 *      colour is stated on this sheet rather than inherited from a global
 *      token that may be undefined. A screen that defines its own ground
 *      cannot be repainted by a rule written for some other screen.
 *
 *   2. Colours come from local --room-* custom properties, redefined once for
 *      dark. Nothing here reads --text-primary or --modal-bg directly, so an
 *      unset or half-applied theme cannot leave text the same colour as what
 *      it sits on.
 *
 * The !important flags are deliberate and are answering the template's own
 * !important rules; they are not decoration. Loading this file is what lets
 * the template's copies be deleted.
 */

#text-bloc-create-modal {
    /* Light is the default, not a theme that has to be asked for: a session
       with no data-theme attribute lands here rather than on white text. */
    --room-surface: #ffffff;
    --room-panel: #ffffff;
    --room-field: #ffffff;
    --room-ink: #050505;
    --room-ink-soft: rgba(5, 5, 5, 0.62);
    --room-placeholder: rgba(5, 5, 5, 0.42);
    --room-line: rgba(5, 5, 5, 0.16);
    --room-accent: var(--primary-color, #ff4d2e);
}

html[data-theme="dark"] #text-bloc-create-modal,
html[data-theme="dark-accent"] #text-bloc-create-modal,
body[data-theme="dark"] #text-bloc-create-modal,
body[data-theme="dark-accent"] #text-bloc-create-modal {
    --room-surface: #0b0b0d;
    --room-panel: #151517;
    --room-field: #202024;
    --room-ink: #f5f5f7;
    --room-ink-soft: rgba(245, 245, 247, 0.66);
    --room-placeholder: rgba(245, 245, 247, 0.40);
    --room-line: rgba(255, 255, 255, 0.14);
}

/* ---- Surface ---------------------------------------------------------- */

#text-bloc-create-modal {
    background: var(--room-surface) !important;
    color: var(--room-ink) !important;
    color-scheme: light;
}

/* Everything inside inherits this sheet's ink by default.
 *
 * The template carries rules like `[id*="modal"] *` that set white with
 * !important on every descendant of anything whose id contains "modal" — so
 * each new element added here (a <span> in a button, the heading) arrives
 * invisible on a white panel and has to be rescued one at a time. Claiming
 * the subtree once ends that: the specific rules below then say what differs,
 * rather than each one restoring what a foreign rule took away. */
html body #text-bloc-create-modal,
html body #text-bloc-create-modal *:not(i) {
    color: var(--room-ink) !important;
    -webkit-text-fill-color: var(--room-ink) !important;
}

html[data-theme="dark"] #text-bloc-create-modal,
html[data-theme="dark-accent"] #text-bloc-create-modal,
body[data-theme="dark"] #text-bloc-create-modal,
body[data-theme="dark-accent"] #text-bloc-create-modal {
    color-scheme: dark;
}

#text-bloc-create-modal .text-bloc-create-panel {
    background: var(--room-panel) !important;
    border: 1px solid var(--room-line) !important;
    border-radius: 24px;
    padding: 16px;
    box-shadow: 0 22px 50px color-mix(in srgb, var(--room-ink) 12%, transparent);
}

/* ---- Heading ---------------------------------------------------------- */

#text-bloc-create-modal .text-bloc-create-kicker {
    color: var(--room-ink-soft) !important;
    -webkit-text-fill-color: var(--room-ink-soft) !important;
}

#text-bloc-create-modal .text-bloc-create-title {
    color: var(--room-ink) !important;
    -webkit-text-fill-color: var(--room-ink) !important;
}

/* ---- Fields ----------------------------------------------------------- */

#text-bloc-create-modal .text-bloc-create-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 13px;
}

/* The label is the part that vanished. It carries its own colour and its own
   fill: -webkit-text-fill-color wins over `color` on iOS, so a rule that sets
   only one of the two can still leave the text invisible. */
html body #text-bloc-create-modal .text-bloc-create-field label {
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--room-ink-soft) !important;
    -webkit-text-fill-color: var(--room-ink-soft) !important;
}

/* html+body in the selector on purpose. This sheet loads in <head>, while the
   template's own rules are inline further down the document, so an equally
   specific rule there would win on source order alone. */
html body #text-bloc-create-modal input,
html body #text-bloc-create-modal select {
    width: 100%;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid var(--room-line) !important;
    background: var(--room-field) !important;
    background-color: var(--room-field) !important;
    color: var(--room-ink) !important;
    -webkit-text-fill-color: var(--room-ink) !important;
    caret-color: var(--room-ink);
    font-size: 15px;
    outline: none;
}

/* ---- Access ----------------------------------------------------------- */

/* Three buttons instead of a <select>. The native control paints its own
   options at the platform level, which is why Paid rendered white on white
   until a tap forced a repaint — and Paid is the one that opens the price
   field, so the form looked like it had no way to charge for a room. These
   are ordinary elements: what the stylesheet says is what shows. */
#text-bloc-create-modal .room-access {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

html body #text-bloc-create-modal .room-access__opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 13px 6px;
    border-radius: 16px;
    border: 1px solid var(--room-line) !important;
    background: var(--room-field) !important;
    color: var(--room-ink-soft) !important;
    -webkit-text-fill-color: var(--room-ink-soft) !important;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.02em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

/* The glyph and the word both follow the button, so active/inactive is one
   decision on the parent rather than three colours kept in step. */
html body #text-bloc-create-modal .room-access__opt i,
html body #text-bloc-create-modal .room-access__opt span {
    font-size: 14px;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

html body #text-bloc-create-modal .room-access__opt span {
    font-size: 12px;
}

html body #text-bloc-create-modal .room-access__opt.is-active {
    border-color: var(--room-accent) !important;
    background: color-mix(in srgb, var(--room-accent) 12%, var(--room-field)) !important;
    color: var(--room-accent) !important;
    -webkit-text-fill-color: var(--room-accent) !important;
}

html body #text-bloc-create-modal .room-access__opt:active {
    transform: scale(0.97);
}

html body #text-bloc-create-modal input::placeholder {
    color: var(--room-placeholder) !important;
    -webkit-text-fill-color: var(--room-placeholder) !important;
    opacity: 1;
}

html body #text-bloc-create-modal input:focus,
html body #text-bloc-create-modal select:focus {
    border-color: color-mix(in srgb, var(--room-accent) 44%, transparent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--room-accent) 14%, transparent);
}

/* ---- Price + Stripe --------------------------------------------------- */

/* Shown by mobile-rooms-create.js when Access is Paid; hidden otherwise. */
#text-bloc-create-modal #text-bloc-paid-row {
    flex-direction: column;
}

html body #text-bloc-create-modal .text-bloc-paid-stripe-status {
    min-height: 18px;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 700;
    color: var(--room-ink-soft) !important;
    -webkit-text-fill-color: var(--room-ink-soft) !important;
}

/* ---- Actions ---------------------------------------------------------- */

#text-bloc-create-modal .text-bloc-create-primary {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

#text-bloc-create-modal .text-bloc-create-primary:disabled {
    opacity: 0.5;
}

#text-bloc-create-modal .text-bloc-create-secondary {
    background: transparent !important;
    color: var(--room-ink) !important;
    -webkit-text-fill-color: var(--room-ink) !important;
    border: 1px solid var(--room-line) !important;
}

/* ---- Header ------------------------------------------------------------ */

/* A down chevron, not an X: this sheet slides away downward, so the glyph
   should say where it goes. Circled so it reads as a control on an otherwise
   open page. */
html body #text-bloc-create-modal .text-bloc-create-close {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    border-radius: 50% !important;
    background: color-mix(in srgb, var(--room-ink) 8%, var(--room-surface)) !important;
    color: var(--room-ink) !important;
    -webkit-text-fill-color: var(--room-ink) !important;
    font-size: 15px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.16s cubic-bezier(0.32, 0.72, 0, 1), background 0.16s ease;
}

html body #text-bloc-create-modal .text-bloc-create-close i {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

html body #text-bloc-create-modal .text-bloc-create-close:active {
    background: color-mix(in srgb, var(--room-ink) 15%, var(--room-surface)) !important;
    transform: scale(0.92) translateY(1px);
}

/* ---- Layout ------------------------------------------------------------ */

/* The sheet started hard against the status bar. Dropping it clear of the top
   gives the heading room and puts the fields nearer the thumb. */
html body #text-bloc-create-modal {
    padding-top: calc(84px + env(safe-area-inset-top, 0px)) !important;
}

/* Cancel is gone — the chevron dismisses the sheet, and a second way out
   directly under the primary action mostly invited mis-taps. */
html body #text-bloc-create-modal .text-bloc-create-actions {
    margin-top: 4px;
}

/* ---- Billing interval --------------------------------------------------- */

/* Four across rather than a dropdown, for the same reason Access is buttons:
   a native <select> paints its own options and they came out unreadable. */
#text-bloc-create-modal .room-billing {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

html body #text-bloc-create-modal .room-billing__opt {
    min-height: 44px;
    padding: 0 4px;
    border-radius: 14px;
    border: 1px solid var(--room-line) !important;
    background: var(--room-field) !important;
    color: var(--room-ink-soft) !important;
    -webkit-text-fill-color: var(--room-ink-soft) !important;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: -0.01em;
    line-height: 1.1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

html body #text-bloc-create-modal .room-billing__opt.is-active {
    border-color: var(--room-accent) !important;
    background: color-mix(in srgb, var(--room-accent) 12%, var(--room-field)) !important;
    color: var(--room-accent) !important;
    -webkit-text-fill-color: var(--room-accent) !important;
}

html body #text-bloc-create-modal .room-billing__opt:active {
    transform: scale(0.97);
}