/* =============================================================================
   Additive styles for the order flow.

   Loaded AFTER portal.css and only ever adds - it never redefines an existing
   rule, so the current look is untouched. Everything here is for markup that
   did not exist before: the tall dropzone on the order page, the staged file
   list, and the scrolling region on Past uploads.
   ========================================================================== */

/* The order page's dropzone is the primary action on the screen, so it gets
   real height rather than the compact one used inside cards. */
.dropzone.tall {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* --------------------------------------------------------- staged files
   Files chosen but not yet uploaded - the order does not exist until submit.
   Capped height with its own scrollbar so dropping forty clips never pushes
   the brief and the submit button off the screen. */
.staged-list {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--line, rgba(255, 255, 255, .08));
    border-radius: 10px;
}

.staged-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--line, rgba(255, 255, 255, .06));
}

.staged-item:last-child { border-bottom: none; }

.staged-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ------------------------------------------------------------ past uploads
   Roughly twenty rows before it scrolls, so the card never grows without
   limit as the history builds up. */
.scroll-list {
    max-height: 620px;
    overflow-y: auto;
}

/* ------------------------------------------------------------- thumbnails
   Every staged row leads with a 16:9 poster generated in the browser, so the
   list reads as "what you picked" rather than a column of filenames. */
.staged-row { border-bottom: 1px solid var(--line, rgba(255, 255, 255, .06)); }
.staged-row:last-child { border-bottom: none; }
.staged-row .staged-item { border-bottom: none; }

.staged-item {
    grid-template-columns: 72px 1fr auto auto;
}

.staged-thumb {
    width: 72px;
    height: 41px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, .05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex: none;
}

.staged-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Decoding a long clip takes a beat; a quiet pulse beats a layout jump. */
.staged-thumb.loading { animation: thumbPulse 1.1s ease-in-out infinite; }
@keyframes thumbPulse { 0%, 100% { opacity: .35; } 50% { opacity: .8; } }

/* ------------------------------------------------------------------ trash */
.trash {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--muted, #8b93a7);
    display: flex;
    align-items: center;
}
.trash svg { width: 17px; height: 17px; display: block; }
.trash:hover { color: #ff6b6b; }

/* -------------------------------------------------------------- zip inside
   Indented under its archive so it is obvious the contents belong to it and
   are not separate uploads. */
.zip-body { padding: 0 12px 10px 84px; }
.zip-head { margin-bottom: 6px; }

.zip-list {
    max-height: 200px;
    overflow-y: auto;
    border-left: 2px solid var(--line, rgba(255, 255, 255, .08));
    padding-left: 10px;
}

.zip-item {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

/* ------------------------------------------------- uploaded file rows
   The order page and Past Uploads show the poster the browser drew when the
   file was staged, so a file looks the same before and after it uploads. */
.upload-item.file-row {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 12px;
    align-items: center;
}

.upload-item.file-row .file-main { min-width: 0; }

.file-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Sits on a row of small text, so it is a touch smaller than the staged one. */
.file-actions .trash svg { width: 15px; height: 15px; }

/* ==========================================================================
   Order rows: a cover image and a four-stage tracker.

   The old row showed a status word, a percentage bar and a date. None of those
   answered the only question a client has - where is my order and when did it
   move. The tracker answers it at a glance; the exact times are on hover so the
   row stays quiet.
   ========================================================================== */

.row.order-row {
    grid-template-columns: minmax(200px, 1.2fr) minmax(260px, 2fr) auto;
    align-items: center;
    gap: 18px;
}

.order-id {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.order-thumb {
    width: 78px;
    height: 44px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, .05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex: none;
}

.order-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.order-id .title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ------------------------------------------------------------ the tracker */
.track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: start;
}

.stage {
    position: relative;
    text-align: center;
    padding-top: 14px;
    cursor: default;
}

/* The connecting line is drawn by each stage except the first, reaching back to
   the previous dot, so the line always matches the real column widths. */
.stage::before {
    content: "";
    position: absolute;
    top: 5px;
    right: 50%;
    left: -50%;
    height: 2px;
    background: var(--line, rgba(255, 255, 255, .14));
}
.stage:first-child::before { display: none; }

/* A completed leg is coloured; a pending one stays grey. */
.stage.done::before,
.stage.now::before { background: var(--accent, #2F5DF0); }

.stage .dot {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-sizing: border-box;
    background: var(--line, rgba(255, 255, 255, .16));
}

.stage.done .dot { background: var(--accent, #2F5DF0); }

/* The stage the order is on right now: filled, with a ring around it. */
.stage.now .dot {
    background: var(--accent, #2F5DF0);
    box-shadow: 0 0 0 4px rgba(47, 93, 240, .28);
}

.stage.todo .dot {
    background: transparent;
    border: 2px solid var(--line, rgba(255, 255, 255, .22));
}

.stage .lbl {
    display: block;
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--muted, #8b93a7);
}

.stage.now .lbl { color: var(--text, #fff); font-weight: 600; }
.stage.todo .lbl { opacity: .55; }

@media (max-width: 900px) {
    .stage .lbl { display: none; }
    .track { padding: 4px 0; }
}

/* ------------------------------------------------------ password reveal
   The account page reuses the sign-in page's control, but that one's styles
   live inside login.html, so the portal needs its own copy. */
.pw-wrap { position: relative; }
.pw-wrap input { width: 100%; padding-right: 44px; }

.pw-eye {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--muted, #8b93a7);
}
.pw-eye:hover { color: var(--text, #fff); }
.pw-eye svg { width: 19px; height: 19px; display: block; }

/* ==========================================================================
   Checkout: plan picker and payment step.
   ========================================================================== */

.tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    margin-top: 6px;
}

/* A plain button so it is keyboard reachable and announced as selectable. */
.tier {
    text-align: left;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line, rgba(255, 255, 255, .1));
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    color: inherit;
    font: inherit;
    transition: border-color .15s ease, background .15s ease;
}

.tier:hover { border-color: rgba(255, 255, 255, .28); }

/* Only the chosen card changes - the others stay exactly as they were. */
.tier.picked {
    border-color: var(--accent, #2F5DF0);
    background: rgba(47, 93, 240, .10);
}

.tier-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.tier-name { font-weight: 600; }

.tier-price {
    font-weight: 700;
    font-size: 18px;
    color: var(--text, #fff);
    white-space: nowrap;
}

.tier-blurb { margin-bottom: 8px; }

.tier-inc {
    margin: 0;
    padding-left: 16px;
    font-size: 12.5px;
    color: var(--muted, #8b93a7);
    line-height: 1.7;
}

/* Says out loud that the price can move. A client should learn this here, not
   when an invoice turns up. */
.tier-note {
    margin-top: 10px;
    font-size: 11.5px;
    line-height: 1.5;
    color: #e8b465;
}

.pay-summary {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(47, 93, 240, .10);
    border: 1px solid rgba(47, 93, 240, .28);
    font-size: 13px;
    line-height: 1.6;
}

/* Stripe renders the card fields itself; this is only the box they sit in. */
#cardEl {
    padding: 4px 0;
    min-height: 48px;
}

.status-pill.unpaid {
    background: rgba(232, 180, 101, .16);
    color: #e8b465;
}

/* ==========================================================================
   Studio → client messages: the notification bar, invoice banners, and the
   two-voice note thread.
   ========================================================================== */

.notify-bar {
    background: rgba(47, 93, 240, .12);
    border-bottom: 1px solid rgba(47, 93, 240, .3);
    padding: 10px 22px;
}

.notify-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.notify-list { display: grid; gap: 6px; }

.notify-item {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
}

/* ------------------------------------------------------------- notices
   Used for things the client must act on or must not miss: a rejection, or an
   invoice standing between them and their edit. */
.notice {
    padding: 14px 16px;
    border-radius: 12px;
    margin-bottom: 14px;
    font-size: 13.5px;
    line-height: 1.6;
}

.notice.warn {
    background: rgba(232, 180, 101, .10);
    border: 1px solid rgba(232, 180, 101, .35);
}

.notice.bad {
    background: rgba(255, 107, 107, .08);
    border: 1px solid rgba(255, 107, 107, .3);
}

/* --------------------------------------------------------- note thread
   The tag carries the meaning rather than the colour, so it still reads on a
   phone and for anyone who cannot separate the two dots. */
.tagline {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 1px 6px;
    border-radius: 999px;
    margin: 0 6px;
    background: rgba(255, 255, 255, .08);
    color: var(--muted, #8b93a7);
}

.feed-item.from-editor .tagline {
    background: rgba(47, 93, 240, .18);
    color: #8aa9ff;
}

.status-pill.refunded { background: rgba(255, 107, 107, .16); color: #ff8f8f; }

/* ------------------------------------------------------------ email toggle
   The label wraps the checkbox so the whole row is a hit target, and the
   explanation sits under the title rather than in a tooltip nobody opens. */
.switch-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    padding: 4px 0;
}

.switch-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    flex: none;
    accent-color: var(--accent, #2F5DF0);
    cursor: pointer;
}

.switch-row span { display: grid; gap: 3px; }