/* ---------------------------------------------------------------------------
 * account.css — checkout, My Orders, and the order-details popup.
 *
 * The theme styles these pages as plain forms and lists. This layer gives them
 * the same restraint as the rest of the site: gold on off-white, generous
 * spacing, one clear focal point per panel.
 *
 * Palette follows the theme tokens (--primary #AE873E, --main #1F1F1F) and
 * falls back to literals so it still renders if styles.css ever changes.
 * ------------------------------------------------------------------------- */

:root {
    --acc-line: #e8e4dc;
    --acc-bg: #faf8f4;
    --acc-ink: #1f1f1f;
    --acc-muted: #6f6a63;
    --acc-gold: var(--primary, #AE873E);
}

/* ===================================================== shared page frame == */

.acc-panel {
    background: #fff;
    border: 1px solid var(--acc-line);
    border-radius: 14px;
    padding: 26px 26px 28px;
}

.acc-panel + .acc-panel {
    margin-top: 18px;
}

.acc-panel__title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 20px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--acc-ink);
}

.acc-panel__title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--acc-line), transparent);
}

/* ============================================================= checkout == */

/* Fields carry a visible label rather than relying on the placeholder, which
   disappears the moment someone starts typing and leaves them guessing. */
.tf-page-checkout .tf-field,
.acc-field {
    position: relative;
    margin-bottom: 16px;
}

.acc-field__label {
    display: block;
    margin-bottom: 7px;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .4px;
    color: var(--acc-muted);
}

.acc-field__label .req {
    color: #b00020;
}

.tf-page-checkout input[type="text"],
.tf-page-checkout input[type="tel"],
.tf-page-checkout input[type="email"],
.tf-page-checkout textarea {
    border: 1px solid var(--acc-line);
    border-radius: 9px;
    padding: 13px 15px;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.tf-page-checkout input:focus,
.tf-page-checkout textarea:focus {
    outline: none;
    border-color: var(--acc-gold);
    box-shadow: 0 0 0 3px rgba(174, 135, 62, .13);
}

/* --- order summary ------------------------------------------------------- */

.acc-summary {
    position: sticky;
    top: 96px;
}

.acc-summary .list-total {
    margin: 0;
    padding: 16px 0 4px;
    border-top: 1px solid var(--acc-line);
}

.acc-summary .total-item {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    font-size: 14.5px;
    color: var(--acc-muted);
}

.acc-summary .total-item span:last-child {
    color: var(--acc-ink);
    font-weight: 500;
}

.acc-summary .last-total {
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid var(--acc-line);
    font-size: 19px;
    font-weight: 600;
    color: var(--acc-ink);
}

/* The order line: image, name, price. The stray product id that used to sit
   under the name is gone; the slot now carries the bundle label. */
.acc-summary .variant:empty {
    display: none;
}

.acc-summary .variant {
    display: inline-block;
    margin-top: 5px;
    padding: 3px 9px;
    border-radius: 11px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #7a5a12;
    background: rgba(174, 135, 62, .13);
}

/* Primary action — gold, not the theme's flat black.
   Scoped to .acc-summary (the sidebar) rather than .tf-page-checkout, which is
   on the left column and never contains this button. */
.acc-summary .checkout-button,
.tf-page-checkout .checkout-button,
.acc-cta {
    width: 100%;
    padding: 16px 22px;
    border: 0;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #241009;
    background: linear-gradient(100deg, #E8C87A, #AE873E 55%, #E8C87A);
    background-size: 200% auto;
    cursor: pointer;
    transition: background-position .5s ease, transform .2s ease;
}

.acc-summary .checkout-button:hover,
.tf-page-checkout .checkout-button:hover,
.acc-cta:hover {
    background-position: right center;
    color: #241009;
    transform: translateY(-1px);
}

.acc-note {
    margin-top: 14px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--acc-muted);
    text-align: center;
}

/* =========================================================== My Orders === */

.acc-orders {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.acc-order {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 18px;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid var(--acc-line);
    border-radius: 14px;
    transition: border-color .22s ease, box-shadow .22s ease;
}

.acc-order:hover {
    border-color: rgba(174, 135, 62, .5);
    box-shadow: 0 10px 26px rgba(31, 31, 31, .07);
}

.acc-order__ref {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-bottom: 3px;
}

.acc-order__id {
    font-size: 17px;
    font-weight: 600;
    color: var(--acc-ink);
}

.acc-order__date {
    font-size: 13px;
    color: var(--acc-muted);
}

.acc-order__items {
    margin-top: 10px;
    font-size: 14px;
    color: var(--acc-ink);
}

.acc-order__items span {
    color: var(--acc-muted);
}

.acc-order__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.acc-order__amount-label {
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--acc-muted);
}

.acc-order__amount {
    font-size: 21px;
    font-weight: 600;
    color: var(--acc-ink);
    line-height: 1.2;
}

/* --- status chips -------------------------------------------------------- */

.acc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

.acc-chip {
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .5px;
    border: 1px solid var(--acc-line);
    background: #f6f4f0;
    color: var(--acc-muted);
    white-space: nowrap;
}

/* Readable contrast — the previous paid chip was near-white text on bright
   green, and the failed/pending chips were pale text on a 10% tint. */
.acc-chip--paid {
    border-color: #bfe6cd;
    background: #eaf7ef;
    color: #1a7f45;
}

.acc-chip--failed {
    border-color: #f3c6c6;
    background: #fdeeee;
    color: #b3261e;
}

.acc-chip--pending {
    border-color: #f0dfb0;
    background: #fdf6e5;
    color: #8a6516;
}

.acc-chip--ship {
    border-color: rgba(174, 135, 62, .38);
    background: rgba(174, 135, 62, .1);
    color: #7a5a12;
}

.acc-btn {
    padding: 10px 18px;
    border: 1px solid var(--acc-ink);
    border-radius: 8px;
    background: transparent;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--acc-ink);
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.acc-btn:hover {
    background: var(--acc-ink);
    border-color: var(--acc-ink);
    color: #fff;
}

/* --- empty state --------------------------------------------------------- */

.acc-empty {
    padding: 64px 24px;
    text-align: center;
    background: var(--acc-bg);
    border: 1px dashed var(--acc-line);
    border-radius: 16px;
}

.acc-empty__icon {
    font-size: 34px;
    color: var(--acc-gold);
    margin-bottom: 12px;
}

.acc-empty h5 {
    margin-bottom: 8px;
    font-weight: 500;
}

.acc-empty p {
    max-width: 380px;
    margin: 0 auto 20px;
    color: var(--acc-muted);
}

/* ================================================= order details popup === */

.acc-modal .modal-dialog {
    max-width: 660px;
}

.acc-modal .modal-content {
    border: 0;
    border-radius: 16px;
    overflow: hidden;
}

.acc-modal__head {
    padding: 22px 26px;
    background: linear-gradient(160deg, #2c1119, #1a090d);
    color: #F3E4C4;
}

.acc-modal__eyebrow {
    font-size: 11px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: rgba(243, 228, 196, .7);
}

.acc-modal__id {
    font-size: 23px;
    font-weight: 600;
    color: #fff;
    margin-top: 2px;
}

.acc-modal__body {
    padding: 24px 26px 26px;
    max-height: 62vh;
    max-height: 62dvh;
    overflow-y: auto;
}

.acc-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 9px 18px;
    margin: 0 0 20px;
    font-size: 14px;
}

.acc-dl dt {
    color: var(--acc-muted);
    font-weight: 400;
}

.acc-dl dd {
    margin: 0;
    color: var(--acc-ink);
    font-weight: 500;
}

.acc-lines {
    border-top: 1px solid var(--acc-line);
}

.acc-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--acc-line);
    font-size: 14px;
}

.acc-line__name {
    color: var(--acc-ink);
}

.acc-line__qty {
    color: var(--acc-muted);
    font-size: 12.5px;
}

.acc-line__amt {
    font-weight: 600;
    white-space: nowrap;
}

.acc-modal__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 2px solid var(--acc-ink);
    font-size: 18px;
    font-weight: 600;
}

/* ============================================================ responsive = */

@media (max-width: 991px) {

    .acc-summary {
        position: static;
        margin-top: 18px;
    }
}

@media (max-width: 767px) {

    .acc-order {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .acc-order__right {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding-top: 14px;
        border-top: 1px solid var(--acc-line);
    }

    .acc-panel {
        padding: 20px 18px 22px;
    }

    .acc-dl {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .acc-dl dd {
        margin-bottom: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .acc-order,
    .acc-btn,
    .acc-cta,
    .tf-page-checkout .checkout-button {
        transition: none;
    }
}

/* ===========================================================================
 * Order details popup (My Orders -> "View details")
 * Mirrors what thank-you.php shows, plus shipment tracking, which only exists
 * once a courier has been assigned.
 * ========================================================================= */

.order-details-modal .modal-dialog {
    max-width: 560px;
}

.order-details-modal .modal-content {
    position: relative;
    border: 0;
    border-radius: 14px;
    padding: 26px 26px 22px;
    background: #fff;
}

/* The theme's `.modal .icon-close-popup` is dark-on-dark in places and sits at
   top:0 with 16px padding; pin it to this panel's corner instead. */
.order-details-modal .od-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--main, #1f1f1f);
    background: rgba(0, 0, 0, .06);
}

.order-details-modal .od-close:hover {
    background: var(--primary, #AE873E);
    color: #fff;
}

.od-head {
    padding-right: 34px;
    border-bottom: 1px solid var(--line, #ececec);
    padding-bottom: 14px;
    margin-bottom: 16px;
}

.od-title {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 600;
}

.od-placed {
    font-size: 13.5px;
    color: var(--main-4, #666);
}

.od-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.od-chip {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    background: #f4f4f4;
    color: var(--main-4, #666);
}

.od-chip-paid    { background: rgba(34, 197, 94, .12); color: #15803d; }
.od-chip-failed  { background: rgba(239, 68, 68, .12); color: #b91c1c; }
.od-chip-pending { background: rgba(234, 179, 8, .14); color: #a16207; }

.od-state {
    padding: 26px 0;
    text-align: center;
    font-size: 14px;
    color: var(--main-4, #666);
}

.od-error-msg {
    margin: 0;
    color: #b00020;
}

.od-section {
    margin-bottom: 18px;
}

.od-section-title {
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--main-4, #888);
    margin-bottom: 8px;
}

.od-rows {
    margin: 0;
}

.od-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 5px 0;
    font-size: 14px;
}

.od-row dt {
    color: var(--main-4, #666);
    font-weight: 400;
}

.od-row dd {
    margin: 0;
    text-align: right;
    word-break: break-all;
}

.od-track {
    display: inline-block;
    margin-top: 8px;
    font-size: 13.5px;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--primary, #AE873E);
}

.od-address {
    font-size: 14px;
    line-height: 1.65;
}

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

.od-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line, #f0f0f0);
}

.od-item:last-child {
    border-bottom: 0;
}

.od-item-empty {
    display: block;
    font-size: 14px;
    color: var(--main-4, #666);
}

.od-item-img {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    object-fit: cover;
    border-radius: 8px;
    background: #f4f4f4;
}

.od-item-text {
    flex: 1 1 auto;
    min-width: 0;
}

.od-item-name {
    font-size: 14.5px;
    line-height: 1.35;
}

.od-item-meta {
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--main-4, #777);
}

.od-item-price {
    font-size: 14.5px;
    font-weight: 500;
    white-space: nowrap;
}

.od-totals {
    border-top: 1px solid var(--line, #ececec);
    padding-top: 12px;
}

.od-total-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 14px;
    color: var(--main-4, #555);
}

.od-total-final {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--line, #ececec);
    font-size: 16px;
    font-weight: 600;
    color: var(--main, #1f1f1f);
}

@media (max-width: 575px) {
    .order-details-modal .modal-content {
        padding: 20px 18px 18px;
    }

    .od-title {
        font-size: 18px;
    }

    .od-item-img {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }
}

/* --------------------------------------------------------------- refinements

   Two fixes and one polish pass on the details popup.

   1. The markup has no `.modal-body`, so Bootstrap's `modal-dialog-scrollable`
      had nothing to make scrollable: on a short window the content simply
      overflowed the dialog and the totals at the bottom were unreachable. The
      content panel does its own scrolling instead.
   2. Because that panel now scrolls, the close button can no longer be
      positioned against it — it would scroll off the top with the rest of the
      content. It anchors to the dialog, which does not move.
   3. The header gets its own tinted band so the order number reads as a
      heading rather than as the first line of the body.
*/

.order-details-modal .modal-dialog {
    position: relative;
}

.order-details-modal .modal-content {
    position: static;   /* so .od-close resolves against .modal-dialog */
    padding: 0;
    overflow: hidden;
}

.order-details-modal .od-scroll,
.order-details-modal #odBody,
.order-details-modal .od-state {
    max-height: calc(100vh - 210px);
    max-height: calc(100dvh - 210px);
    overflow-y: auto;
    padding: 20px 26px 24px;
}

.od-head {
    padding: 22px 26px 16px;
    margin-bottom: 0;
    background: linear-gradient(180deg, #fbf8f2, #fff);
    border-bottom: 1px solid var(--line, #ececec);
}

.od-title {
    font-size: 21px;
    letter-spacing: .2px;
}

/* The product name on an order card is not a link and should not be coloured
   like one; the theme's anchor colour was bleeding through. */
.acc-order .acc-order__items {
    color: var(--acc-ink);
}

@media (max-width: 575px) {

    .od-head {
        padding: 18px 18px 14px;
    }

    .order-details-modal #odBody,
    .order-details-modal .od-state {
        padding: 16px 18px 20px;
    }
}

/* --- checkout assurance panel -------------------------------------------- */

.acc-assure {
    display: grid;
    gap: 18px;
}

.acc-assure__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.acc-assure__item i {
    flex: 0 0 auto;
    margin-top: 2px;
    font-size: 19px;
    color: var(--acc-gold);
}

.acc-assure__item strong {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--acc-ink);
}

.acc-assure__item span {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--acc-muted);
}

@media (min-width: 768px) {

    .acc-assure {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
    }

    .acc-assure__item {
        flex-direction: column;
        gap: 8px;
    }
}

/* The theme colours generic inline text with its link/accent colour, which was
   bleeding into this body copy and making it read as clickable. */
.acc-assure .acc-assure__item span {
    color: var(--acc-muted);
}

/* The close control sat on a white panel at 6% black, which is nearly
   invisible now that the header behind it is tinted. */
.order-details-modal .od-close {
    background: #fff;
    border: 1px solid var(--acc-line);
    color: var(--acc-ink);
    box-shadow: 0 1px 3px rgba(31, 31, 31, .08);
}

/* --- empty cart -----------------------------------------------------------

   Place Order stays clickable while the cart is empty so the click can explain
   itself; it just stops looking like the page's one live action.
*/

.acc-summary .checkout-button.is-disabled {
    background: #e7e3db;
    color: #8b857c;
    cursor: not-allowed;
    box-shadow: none;
}

.acc-summary .checkout-button.is-disabled:hover {
    background: #e7e3db;
    color: #8b857c;
    transform: none;
}

.cart-empty-line {
    padding: 22px 0;
    text-align: center;
    font-size: 14px;
    color: var(--acc-muted);
}

.checkout-hint {
    margin: 12px 0 0;
    padding: 10px 14px;
    border: 1px solid #f0dfb0;
    border-radius: 9px;
    background: #fdf6e5;
    font-size: 13px;
    line-height: 1.55;
    color: #8a6516;
    text-align: center;
}

.checkout-hint[hidden] {
    display: none;
}

.checkout-hint.is-shown {
    animation: acc-hint-in .28s ease;
}

@keyframes acc-hint-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {

    .checkout-hint.is-shown {
        animation: none;
    }
}