/* ==========================================================================
   TEO Express — the customer portal.

   Loaded after app.css, which provides the tokens, the buttons and the form
   fields. This file is the portal's own layout, built for a phone first: one
   bar, one row of tabs, full-width cards, nothing to scroll sideways.

   Directional rules use logical properties, so the same file serves Arabic
   (RTL) and English (LTR).
   ========================================================================== */

.body--portal {
    background: var(--c-surface-muted);
    /* Room for a phone's home bar at the bottom of the page. */
    padding-block-end: env(safe-area-inset-bottom, 0);
}

/* ==========================================================================
   The bar
   ========================================================================== */

.pbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-3);
    padding: var(--s-3) var(--s-4);
    background: var(--c-surface);
    border-block-end: 1px solid var(--c-border);
}

.pbar__brand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

/* The logo is transparent, so it sits straight on the white bar. */
.pbar__logo {
    display: block;
    width: auto;
    height: 2.5rem;
}

/* The greeting lives inside the bar rather than in a second line of its own. */
.pbar__welcome {
    margin: 0;
    min-width: 0;
    flex: 1 1 auto;
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Opposite the logo. */
.pbar__end {
    margin-inline-start: auto;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.pbar__lang,
.pbar__contact {
    display: inline-block;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    text-decoration: none;
}

.pbar__lang {
    color: var(--c-text-muted);
    border: 1px solid var(--c-border);
}

.pbar__contact {
    background: var(--c-brand);
    color: #FFFFFF;
    font-weight: 600;
}

.pbar__contact:hover,
.pbar__contact:focus {
    background: var(--c-brand-dark);
}

/* On a narrow phone the logo and the two buttons fill the bar, so the
   greeting drops to its own line underneath rather than being squeezed out:
   the owner asked for the welcome to be part of the bar, and a 375px screen
   is the common case, not the exception. */
@media (max-width: 28rem) {
    .pbar__welcome {
        order: 3;
        flex-basis: 100%;
        font-size: 0.875rem;
    }

    .pbar__end {
        order: 2;
    }
}

/* ==========================================================================
   Tabs
   ========================================================================== */

.ptabs {
    display: flex;
    gap: var(--s-1);
    padding: 0 var(--s-3);
    background: var(--c-surface);
    border-block-end: 1px solid var(--c-border);
    overflow-x: auto;
    /* No sideways scrollbar on desktop where everything fits anyway. */
    scrollbar-width: none;
}

.ptabs::-webkit-scrollbar {
    display: none;
}

.ptab {
    display: inline-flex;
    align-items: center;
    padding: var(--s-3) var(--s-3);
    border-block-end: 2px solid transparent;
    color: var(--c-text-muted);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.ptab.is-active {
    color: var(--c-brand);
    border-block-end-color: var(--c-brand);
}

/* ==========================================================================
   The page
   ========================================================================== */

.pmain {
    max-width: 48rem;
    margin: 0 auto;
    padding: var(--s-4);
}

.pmain--guest {
    max-width: 34rem;
}

.ptitle {
    margin: 0 0 var(--s-4);
    font-size: 1.25rem;
}

.pback {
    display: inline-block;
    margin-block-end: var(--s-2);
    font-size: 0.875rem;
}

.pcard {
    margin-block-end: var(--s-4);
    padding: var(--s-4);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.pcard--narrow {
    max-width: 26rem;
    margin-inline: auto;
}

.pcard__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin: 0 0 var(--s-3);
    font-size: 1rem;
}

.pcard__sub {
    margin-block: var(--s-4) var(--s-2);
    font-size: 0.875rem;
    color: var(--c-text-muted);
}

.pfoot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-3);
    max-width: 48rem;
    margin: 0 auto;
    padding: var(--s-4);
    border-block-start: 1px solid var(--c-border);
}

.pfoot__code {
    margin: 0;
    font-size: 0.875rem;
    color: var(--c-text-muted);
}

.pfoot--guest {
    justify-content: center;
    text-align: center;
}

/* ==========================================================================
   The front page
   ========================================================================== */

.services {
    list-style: none;
    margin: 0 0 var(--s-4);
    padding: 0;
    display: grid;
    gap: var(--s-3);
}

.services__name {
    margin: 0 0 var(--s-1);
    font-size: 0.9375rem;
    color: var(--c-brand);
}

.services__what {
    margin: 0;
    color: var(--c-text-muted);
    font-size: 0.9375rem;
}

/* The three legs of the line, numbered. */
.plinestep {
    margin: 0;
    padding-inline-start: 1.25rem;
    color: var(--c-text-muted);
    font-size: 0.9375rem;
}

/* ==========================================================================
   Contact

   The address carries its own heading above the icon row, and the phone
   number is one of the icons rather than a line repeated under the address.
   ========================================================================== */

.contact__title {
    margin: 0 0 var(--s-1);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-text-muted);
}

.contact__address {
    margin: 0 0 var(--s-4);
}

.contact__icons {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

.contact__link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    text-decoration: none;
    color: var(--c-text);
    font-size: 0.875rem;
}

.contact__link:hover,
.contact__link:focus {
    border-color: var(--c-brand);
    background: var(--c-brand-tint);
}

.contact__icon {
    display: inline-flex;
    color: var(--c-brand);
}

/* ==========================================================================
   The account summary
   ========================================================================== */

.pfigures {
    display: grid;
    gap: var(--s-3);
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.pfigure {
    padding: var(--s-3);
    background: var(--c-surface-muted);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
}

.pfigure__currency {
    margin: 0 0 var(--s-2);
    font-size: 0.8125rem;
    color: var(--c-text-muted);
    letter-spacing: 0.06em;
}

.pfigure__rows {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--s-1) var(--s-3);
    margin: 0;
}

.pfigure__rows dt {
    color: var(--c-text-muted);
    font-size: 0.875rem;
}

.pfigure__rows dd {
    margin: 0;
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.is-balance {
    font-weight: 600;
}

.is-credit {
    font-weight: 600;
    color: var(--c-ok);
}

/* A note that explains a figure rather than showing one. */
.pnote {
    margin-block: var(--s-4) 0;
    padding: var(--s-3);
    background: var(--c-brand-tint);
    border: 1px solid #DCD4EC;
    border-radius: var(--radius-sm);
}

.pnote__title {
    margin: 0 0 var(--s-1);
    font-size: 0.875rem;
}

.pnote__list {
    margin: 0;
    padding-inline-start: 1.1rem;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   The shipment list
   ========================================================================== */

.pscopes {
    display: flex;
    gap: var(--s-2);
    margin-block-end: var(--s-4);
    overflow-x: auto;
    scrollbar-width: none;
}

.pscopes::-webkit-scrollbar {
    display: none;
}

.pscope {
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background: var(--c-surface);
    color: var(--c-text-muted);
    font-size: 0.875rem;
    text-decoration: none;
    white-space: nowrap;
}

.pscope.is-active {
    background: var(--c-brand);
    border-color: var(--c-brand);
    color: #FFFFFF;
    font-weight: 600;
}

.pshipments {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--s-3);
}

.pship__link {
    display: grid;
    gap: var(--s-2);
    padding: var(--s-4);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
}

.pship__link:hover,
.pship__link:focus {
    border-color: var(--c-brand);
}

.pship__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
}

.pship__no {
    font-size: 1rem;
    font-weight: 600;
}

.pship__status {
    font-weight: 600;
    color: var(--c-brand);
}

.pship__status--delivered {
    color: var(--c-ok);
}

.pship__stage {
    font-size: 0.875rem;
    color: var(--c-text-muted);
}

.pship__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1) var(--s-3);
    font-size: 0.8125rem;
    color: var(--c-text-muted);
}

/* The five dots are a glance-level version of the timeline. */
.ptrack {
    display: flex;
    gap: var(--s-1);
    margin-block-start: var(--s-1);
}

.ptrack__dot {
    flex: 1 1 0;
    height: 4px;
    border-radius: 2px;
    background: var(--c-border);
}

.ptrack__dot.is-done {
    background: var(--c-brand);
}

/* ==========================================================================
   The shipment page
   ========================================================================== */

.ptimeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ptimeline__step {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding-block-end: var(--s-4);
    position: relative;
}

/* The line joining the dots, drawn from each step except the last. */
.ptimeline__step:not(:last-child)::before {
    content: "";
    position: absolute;
    inset-inline-start: 5px;
    inset-block: 1rem 0;
    width: 2px;
    background: var(--c-border);
}

.ptimeline__step--done:not(:last-child)::before {
    background: var(--c-brand);
}

.ptimeline__dot {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    margin-block-start: 0.4rem;
    border-radius: 50%;
    background: var(--c-surface);
    border: 2px solid var(--c-border);
    position: relative;
    z-index: 1;
}

.ptimeline__step--done .ptimeline__dot {
    background: var(--c-brand);
    border-color: var(--c-brand);
}

.ptimeline__step--current .ptimeline__dot {
    background: var(--c-accent);
    border-color: var(--c-accent);
    box-shadow: 0 0 0 4px rgba(250, 205, 21, 0.25);
}

.ptimeline__text {
    display: grid;
    gap: 2px;
}

.ptimeline__label {
    font-weight: 600;
}

.ptimeline__step--future .ptimeline__label {
    color: var(--c-text-muted);
    font-weight: 400;
}

.ptimeline__when {
    font-size: 0.8125rem;
    color: var(--c-text-muted);
    font-variant-numeric: tabular-nums;
}

.ptimeline__stage {
    font-size: 0.875rem;
    color: var(--c-brand);
}

.pfiles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--s-2);
}

.pfile {
    display: inline-block;
    overflow-wrap: anywhere;
}

/* --- product cards -------------------------------------------------------- */

.pproducts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--s-4);
}

.pproduct {
    display: grid;
    gap: var(--s-3);
    padding: var(--s-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
}

/* The warehouse photo is the proof the goods arrived, so it is shown large
   and labelled. A shop's picture is secondary and labelled differently. */
.pproduct__photo {
    margin: 0;
}

.pproduct__photo img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 18rem;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--c-surface-muted);
}

.pproduct__kind {
    display: inline-block;
    margin-block-start: var(--s-2);
    font-size: 0.75rem;
    color: var(--c-text-muted);
}

.pproduct__kind--warehouse {
    color: var(--c-ok);
    font-weight: 600;
}

.pproduct__name {
    margin: 0 0 var(--s-2);
    font-size: 1rem;
}

.pproduct__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1) var(--s-4);
    margin: 0 0 var(--s-2);
    font-size: 0.9375rem;
}

.pproduct__notes {
    margin: 0;
    font-size: 0.875rem;
    color: var(--c-text-muted);
}

.pproduct__store {
    margin-block-start: var(--s-2);
}

.pproduct__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-block-start: var(--s-1);
}

.pproduct__thumbs img {
    display: block;
    width: 4.5rem;
    height: 4.5rem;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border);
}

@media (min-width: 34rem) {
    /* Side by side once there is room, photo first. */
    .pproduct {
        grid-template-columns: 12rem 1fr;
        align-items: start;
    }

    .pproduct__photo img {
        max-height: 12rem;
    }
}

/* --- invoices ------------------------------------------------------------- */

.pinvoice {
    padding: var(--s-3);
    margin-block-end: var(--s-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
}

.pinvoice__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-2);
    margin-block-end: var(--s-2);
    font-size: 0.9375rem;
}

.pinvoice__totals {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--s-1) var(--s-3);
    margin: var(--s-3) 0 0;
    padding-block-start: var(--s-3);
    border-block-start: 1px solid var(--c-border);
}

.pinvoice__totals dt {
    color: var(--c-text-muted);
    font-size: 0.875rem;
}

.pinvoice__totals dd {
    margin: 0;
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.pinvoice__notes {
    margin: var(--s-3) 0 0;
    font-size: 0.875rem;
    color: var(--c-text-muted);
}

/* ==========================================================================
   Notifications
   ========================================================================== */

.pnotifs {
    list-style: none;
    margin: 0 0 var(--s-3);
    padding: 0;
    display: grid;
    gap: var(--s-2);
}

/* The whole row is the button, so it is easy to hit with a thumb. */
.pnotif__btn {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    width: 100%;
    padding: var(--s-3) var(--s-4);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
}

.pnotif__btn:hover,
.pnotif__btn:focus {
    border-color: var(--c-brand);
}

.pnotif__dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-block-start: 0.45rem;
    border-radius: 50%;
    background: transparent;
}

.pnotif.is-unread .pnotif__dot {
    background: var(--c-brand);
}

.pnotif.is-unread .pnotif__btn {
    background: var(--c-brand-tint);
}

.pnotif__text {
    display: grid;
    gap: 2px;
}

.pnotif.is-unread .pnotif__body {
    font-weight: 600;
}

.pnotif__when {
    font-size: 0.8125rem;
    color: var(--c-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Important notes
   ========================================================================== */

.pnote-card.is-unread {
    border-inline-start: 3px solid var(--c-accent);
}

.pnote-card__when {
    margin: 0 0 var(--s-2);
    font-size: 0.8125rem;
    color: var(--c-text-muted);
    font-variant-numeric: tabular-nums;
}

.pnote-card__body {
    overflow-wrap: anywhere;
}