/* ------------------------------------------------------------------ *
 * Shop + wishlist styles.
 *
 * Kept in a plain stylesheet rather than styles.scss because styles.css is a
 * committed build artefact and there is no Sass toolchain wired into this repo.
 * Palette values mirror the brand variables at the top of styles.scss:
 *   midnight navy #0B1220 · warm gold #C89B5A · slate gray #6B7280
 * ------------------------------------------------------------------ */

/* Wishlist heart on a product card ---------------------------------- */
/* Top right of the card/image. The "Coming Soon"/"Sold Out" pill lives at
   top left (see .product-card-v2-status-pill) so the two never collide. */
.product-card-v2-heart {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 3;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(169, 128, 85, 0.25);
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    color: #6B7280;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.25s ease;
}

.product-card-v2-heart:hover,
.product-card-v2-heart:focus-visible {
    color: #C89B5A;
    border-color: #C89B5A;
    transform: scale(1.06);
    outline: none;
}

.product-card-v2-heart.is-saved {
    color: #C89B5A;
    border-color: #C89B5A;
    background-color: rgba(200, 155, 90, 0.12);
}

.product-card-v2-heart:disabled {
    opacity: 0.6;
    cursor: progress;
}

/* Shop card only: wraps the product image so the heart can be pinned to its
   own top-right corner rather than the outer card's. */
.product-card-v2-media {
    position: relative;
}

/* Header wishlist counter ------------------------------------------- */
.wishlist-nav-link {
    display: inline-flex;
    text-decoration: none;
    transition: color 0.25s ease;
}

.wishlist-nav-link:hover {
    color: #C89B5A !important;
}

.wishlist-nav-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    background-color: #C89B5A;
    color: #FFFFFF;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
}

/* Gap between the hero banner and the search bar below it. Not on the
   Bootstrap spacing scale (which jumps 1.5rem -> 3rem), so it's a one-off. */
.shop-content-pt {
    padding-top: 2.5rem;
}

/* Sort dropdown on /shop: a plain <select>, styled as a pill so it reads as
   a control rather than blending into the "Showing X destinations" text. */
.shop-sort-select {
    background-color: #FFFFFF;
    border: 1px solid rgba(11, 18, 32, 0.15);
    box-shadow: 0 2px 6px rgba(11, 18, 32, 0.04);
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    padding-left: 1rem;
    cursor: pointer;
}

.shop-sort-select:hover {
    border-color: #C89B5A;
}

.shop-sort-select:focus {
    border-color: #C89B5A;
    box-shadow: 0 0 0 0.2rem rgba(200, 155, 90, 0.15);
}

/* Shop search bar ----------------------------------------------------- */
/* Wide pill input centered above the grid; padding-left clears the icon,
   which sits further from the edge here (ms-4) than the old sidebar version. */
.shop-search-input {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    padding-left: 3rem !important;
    box-shadow: 0 4px 14px rgba(11, 18, 32, 0.05);
}

/* Product detail ---------------------------------------------------- */
.product-detail-landmark {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 78%;
    opacity: 0.12;
    pointer-events: none;
    mix-blend-mode: multiply;
}

/* Rich text from the admin panel: keep the last paragraph flush with the
   section spacing instead of stacking two margins. */
.product-detail-description > :last-child {
    margin-bottom: 0;
}

/* Toast styling lives in assets/css/toast.css, shared with the dashboard. */

/* Submitting state for the AJAX forms: the button keeps its width so the
   layout does not jump when the label is swapped for a spinner. */
form[data-ajax] button[type="submit"][disabled] {
    opacity: 0.75;
    cursor: progress;
}

/* These forms already carry their own field icons, so Bootstrap's invalid state
   is kept to the red border rather than stacking a second icon on top. Selects
   are left alone — their background image is also the dropdown caret. */
form[data-ajax] .form-control.is-invalid {
    background-image: none;
    padding-right: 0.75rem;
}

/* Managed legal copy ------------------------------------------------ */
/* Rich text from the admin Settings page, styled to match the built-in
   sections it replaces on /privacy-policy and /terms-and-conditions. */
.legal-content h2,
.legal-content h3 {
    font-family: "Cormorant Garamond", serif;
    color: #0B1220;
    font-size: 1.5rem;
    margin: 2rem 0 1rem;
}

.legal-content h2:first-child,
.legal-content h3:first-child {
    margin-top: 0;
}

.legal-content p,
.legal-content li {
    color: #0B1220;
    line-height: 1.9;
    opacity: 0.85;
}

.legal-content ul,
.legal-content ol {
    padding-left: 1.25rem;
    margin-bottom: 1.25rem;
}

.legal-content a {
    color: #C89B5A;
    font-weight: 600;
}

.legal-content blockquote {
    border-left: 3px solid #C89B5A;
    padding-left: 1rem;
    margin: 1.5rem 0;
    color: #6B7280;
}

.legal-content > :last-child {
    margin-bottom: 0;
}

/* Checkout + order confirmation ------------------------------------- */
/* The checkout's own furniture lives in styles.css (a committed build artefact
   from the original static site). Only what the real checkout flow added is
   here — see the note at the top of this file. */

/* Quantity stepper: keep the native spinners off, the buttons are the control. */
#quantityInput::-webkit-outer-spin-button,
#quantityInput::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#quantityInput {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* A field the server rejected keeps its gold focus underline, but the invalid
   border has to win until it is fixed. */
.form-floating-custom .form-control.is-invalid {
    background-image: none;
    border-bottom-width: 2px !important;
}

.form-floating-custom .invalid-feedback:empty {
    display: none !important;
}

/* Order confirmation ------------------------------------------------- */
.order-status-icon {
    width: 88px;
    height: 88px;
}

.order-status-message {
    max-width: 34rem;
}

/* Order fulfilment tracker ------------------------------------------- */
/* Pending → In production → Ready to ship → Shipped → Delivered.
   Built with a flex row of equal steps and a connecting line drawn by ::before
   on each marker, so the line length follows the step width at any breakpoint
   instead of being a fixed guess. */
.order-progress {
    gap: 0;
    counter-reset: order-step;
}

.order-progress-step {
    flex: 1 1 0;
    text-align: center;
    position: relative;
    padding-top: 2.25rem;
    min-width: 0;
}

/* The connector, drawn leftwards from each marker except the first. */
/* .order-progress-step:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 0.75rem;
    right: 50%;
    left: -50%;
    height: 2px;
    background-color: rgba(11, 18, 32, 0.1);
} */

.order-progress-step.is-reached:not(:first-child)::before {
    background-color: #C89B5A;
}

.order-progress-marker {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    background-color: #FFFFFF;
    border: 2px solid rgba(11, 18, 32, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: #FFFFFF;
    z-index: 1;
}

.order-progress-step.is-reached .order-progress-marker {
    background-color: #C89B5A;
    border-color: #C89B5A;
}

/* The step the order is actually on gets a ring rather than a tick, so it reads
   as "here" rather than "done". */
.order-progress-step.is-current .order-progress-marker {
    background-color: #0B1220;
    border-color: #0B1220;
    box-shadow: 0 0 0 4px rgba(200, 155, 90, 0.25);
}

.order-progress-label {
    display: block;
    font-size: 0.7rem;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: #6B7280;
}

.order-progress-step.is-reached .order-progress-label {
    color: #0B1220;
}

.order-progress-step.is-current .order-progress-label {
    color: #C89B5A;
}

@media (max-width: 575.98px) {
    .order-progress-label {
        font-size: 0.6rem;
        letter-spacing: 0.03em;
    }
}

/* NFC activation ----------------------------------------------------- */
.activate-ball {
    max-height: 200px;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.15));
}

/* The code is read off a card and typed on a phone, so it gets room to breathe
   and a monospace face where 8 and B cannot be confused. */
.activate-code-input {
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 1.6rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    border: 2px solid rgba(11, 18, 32, 0.12);
    border-radius: 0.75rem;
    padding: 0.9rem 0.5rem;
}

.activate-code-input:focus {
    border-color: #C89B5A;
    box-shadow: 0 0 0 0.25rem rgba(200, 155, 90, 0.15);
}

.activate-code-input::placeholder {
    letter-spacing: 0.28em;
    color: rgba(11, 18, 32, 0.2);
}

@media (max-width: 575.98px) {
    .activate-code-input {
        font-size: 1.25rem;
        letter-spacing: 0.18em;
    }
}

/* The activation code where the customer first meets it, on the order page. */
.order-activation-code {
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #0B1220;
}