/* Sales order location.
   Inherits the brand colour from variables.css, where --brand-color is overridden per overlay. */

.order-location-container {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: .75rem;
    min-height: 100vh;
    box-sizing: border-box;
    background-color: var(--ct-light-grey, #f2f2f2);
}

/* ---------- header ---------- */

.order-location-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.order-location-header-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.order-location-title {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--brand-color, #774286);
    overflow-wrap: break-word;
}

.order-location-order-id {
    font-size: .95rem;
    font-weight: 600;
    color: var(--ct-mid-grey, rgb(153, 153, 153));
    font-variant-numeric: tabular-nums;
}

/* Shown on its own when the host supplies the title bar, so it needs the paragraph margin reset. */
.order-location-order-id--standalone {
    margin: 0;
}

.order-location-close {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background-color: var(--brand-color, #774286);
    color: var(--brand-text-color, #fff);
    font-size: .9rem;
    line-height: 1;
}

.order-location-close:focus-visible {
    outline: 2px solid var(--ct-text-color, #222);
    outline-offset: 2px;
}

/* ---------- estados: carga, error, sin seguimiento ---------- */

.order-location-state {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 2rem 1.25rem;
    text-align: center;
    background-color: var(--ct-light-white, #fff);
    border-radius: var(--ct-border-radius, .25rem);
}

/* The panel that carries the whole answer — delivered, still in preparation, unreachable — rather
   than the neutral ground the spinner sits on. It is framed, tinted and topped with a brand rule so
   the message reads as a statement instead of as an empty screen: the shopper opened this view to be
   told something, and centred grey text on white was not telling it. */
.order-location-state--notice {
    /* Sized to its content, then centred in whatever height is left over. The auto block margins
       are what centre it: on a flex item in this column container they absorb the free space
       evenly, so the frame sits in the middle of the view instead of clinging to the header — and
       they collapse to zero on a short screen, where the content needs the room more. */
    flex: 0 1 auto;
    margin: auto 0;
    padding: 1.75rem 1.25rem;
    gap: .85rem;
    border: 1px solid var(--brand-color-rgba-025, rgba(119, 66, 134, .25));
    border-top: 4px solid var(--brand-color, #774286);
    background-color: var(--brand-color-rgba-01, rgba(119, 66, 134, .1));
    box-shadow: 0 2px 10px var(--ct-select-customer-shadow-light, rgba(0, 0, 0, .1));
}

.order-location-state-image {
    max-width: 190px;
    width: 60%;
    height: auto;
}

/* Smaller inside the frame, so the headline is what the eye lands on first. */
.order-location-state--notice .order-location-state-image {
    max-width: 128px;
    width: 42%;
}

.order-location-state-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--brand-color, #774286);
}

.order-location-state--notice .order-location-state-title {
    font-size: 1.2rem;
    line-height: 1.3;
    text-wrap: balance;
}

.order-location-state-message {
    margin: 0;
    max-width: 34ch;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--ct-mid-grey, rgb(153, 153, 153));
}

/* Body colour, not the muted grey: inside the frame this is the explanation of the headline, and the
   grey used elsewhere for captions reads as secondary text the eye skips. */
.order-location-state--notice .order-location-state-message {
    font-size: .95rem;
    color: var(--ct-text-color, rgb(34, 34, 34));
}

.order-location-spinner {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 3px solid var(--ct-light-grey, #f2f2f2);
    border-top-color: var(--brand-color, #774286);
    animation: order-location-spin .9s linear infinite;
}

@keyframes order-location-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .order-location-spinner {
        animation-duration: 2.4s;
    }
}

/* ---------- notice for a vehicle with no reported position ---------- */

.order-location-notice {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .65rem .8rem;
    border-radius: var(--ct-border-radius, .25rem);
    background-color: var(--brand-color-rgba-01, rgba(119, 66, 134, .1));
    color: var(--ct-text-color, rgb(34, 34, 34));
    font-size: .85rem;
    line-height: 1.45;
}

.order-location-notice i {
    margin-top: .15rem;
    color: var(--brand-color, #774286);
}

/* ---------- mapa ---------- */

.order-location-map-card {
    position: relative;
    flex: 1 1 auto;
    min-height: 320px;
    border-radius: var(--ct-border-radius, .25rem);
    overflow: hidden;
    background-color: var(--ct-light-white, #fff);
}

.order-location-map {
    /* Absolute + inset instead of height:100% — a flex item's flex-grown height is not always
       treated as "definite" for a percentage-height child (older Android WebView engines are
       exactly this case), which left this div stuck at its own min-height and the parent card
       showing blank underneath. inset sizes it against the positioned parent unconditionally. */
    position: absolute;
    inset: 0;
    min-height: 320px;
}

/* The iframe that draws the map when the host supplies a frame URL (ADR-0011). It is created by
   order-location-frame-bridge.js inside .order-location-map and fills it the way the direct map does. */
.order-location-frame {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    border: 0;
}

/* The framed page itself (served by the web domain, see order-location-frame-host.js): its map
   container fills the viewport of the iframe. The size is stated outright, not left to the position:
   the map library writes `position: relative` into the container's own style attribute, which wins over
   this stylesheet and turns `inset: 0` into nothing, so a container sized only that way ends up with no
   height and the map is drawn into an empty box. `100vh` comes first for the engines that do not know
   `100dvh`. .order-location-frame-page, put on the body, removes the scrollbars a stray margin would add. */
#order-location-frame-map {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
}

.order-location-frame-page {
    margin: 0;
    height: 100%;
    overflow: hidden;
}

/* Laid over the map card until the map reports it is up, so the shopper sees that something is loading
   instead of an empty box. It uses the card's own ground and sits above the map and the vehicle legend,
   which only make sense once there is a map under them. The spinner is the one the page state uses. */
.order-location-map-loading {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ct-light-white, #fff);
}

/* Shown instead of the map when it cannot be drawn. It fills the same frame so the layout does
   not jump, and it uses the body colour because it is a message the user has to read. */
.order-location-map-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    margin: 0;
    padding: 2rem 1.25rem;
    box-sizing: border-box;
    text-align: center;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--ct-text-color, rgb(34, 34, 34));
}

/* The vehicle marker, when the map draws advanced markers — its content is a real <img> in the page,
   so the hop is a keyframe here. A classic marker is painted on the map's canvas instead and takes
   the provider's own BOUNCE animation; order-location-map.js picks between the two.
   The hop is what makes a vehicle that reports every few minutes read as travelling rather than as a
   still image, which is what the shopper asked for. */
.order-location-vehicle-marker {
    display: block;
    transform-origin: 50% 100%;
    animation: order-location-vehicle-hop 1.1s ease-in-out infinite;
    /* Its own layer, so the hop does not repaint the map tiles under it on every frame. */
    will-change: transform;
}

@keyframes order-location-vehicle-hop {
    0%, 100% { transform: translateY(0); }
    30% { transform: translateY(-22%); }
    55% { transform: translateY(0); }
    70% { transform: translateY(-8%); }
}

@media (prefers-reduced-motion: reduce) {
    .order-location-vehicle-marker {
        animation: none;
    }
}

.order-location-vehicle-legend {
    position: absolute;
    top: .6rem;
    left: .6rem;
    display: flex;
    flex-direction: column;
    padding: .35rem .6rem;
    border-radius: var(--ct-border-radius, .25rem);
    background-color: rgba(255, 255, 255, .93);
    box-shadow: 0 1px 4px var(--ct-select-customer-shadow-light, rgba(0, 0, 0, .1));
    pointer-events: none;
    max-width: 60%;
}

.order-location-vehicle-legend-title {
    font-size: .8rem;
    font-weight: 700;
    color: var(--ct-text-color, rgb(34, 34, 34));
}

.order-location-vehicle-legend-subtitle {
    font-size: .7rem;
    color: var(--ct-mid-grey, rgb(153, 153, 153));
}

/* ---------- tarjeta de seguimiento ---------- */

.order-location-tracking-card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 0;
    padding: .85rem 1rem;
    border-radius: var(--ct-border-radius, .25rem);
    background-color: var(--ct-light-white, #fff);
}

.order-location-tracking-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.order-location-tracking-row dt {
    flex: 0 0 auto;
    font-size: .8rem;
    color: var(--ct-mid-grey, rgb(153, 153, 153));
}

.order-location-tracking-row dd {
    margin: 0;
    text-align: right;
    font-size: .88rem;
    font-weight: 600;
    color: var(--ct-text-color, rgb(34, 34, 34));
    overflow-wrap: anywhere;
}

.order-location-status-pill {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 999px;
    background-color: var(--brand-color, #774286);
    color: var(--brand-text-color, #fff);
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}