/*
 * My Account.
 *
 * Styling ONLY. Nothing here lays the page out.
 *
 * An earlier cut of this file put a two-column grid on `.woocommerce`, on the
 * assumption that WooCommerce's stock stack needed rescuing. It did not: the
 * theme already places the navigation beside the content, and the grid fought
 * it -- measured on a real logged-in page, the content column went from 802px
 * wide and level with the nav, to 170px wide and pushed below it.
 *
 * So the rule is: style the navigation items, the verification panel and the
 * content of each account tab, and touch nothing that can reflow the page. No
 * display, no grid, no float, no width on any container WooCommerce's own
 * layout stylesheet or the theme is responsible for. Padding and background on
 * those containers is fine -- the theme sets `box-sizing: border-box`, so a
 * padded column keeps the width its float gave it.
 *
 * Palette is the brand palette -- see the block below.
 */

/* The brand palette, verbatim from `VINTARI Brand Palette.pdf`:
   #002046 navy, #FFBB26 gold, #CEDAE9 light blue, #475569 slate, #1E293B ink,
   #3873E4 blue, #050505, #FFFFFF. The three tints below are the only values not
   in that document -- there are eight swatches and a table needs intermediate
   steps -- and each is a tint on the navy/light-blue axis, not a neutral grey.
   The page behind this block is #002046 exactly, so the greys an earlier cut
   used (#001227 text, #e6e8ec borders) read as slightly dead beside it. */
:root {
    --vin-navy: #002046;
    --vin-navy-soft: #475569;
    --vin-gold: #ffbb26;
    --vin-blue: #3873e4;
    --vin-line: #cedae9;
    --vin-line-soft: #e4ebf0;
    --vin-wash: #eef3f8;
    --vin-wash-soft: #f8fafc;
}

/* ---- navigation items (appearance only, no layout) ---- */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--vin-line);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
    margin: 0;
    /* The theme paints this navy. Without an explicit background the link below
       would be navy text on navy: the inactive items were unreadable. */
    background: #fff;
    border-bottom: 1px solid var(--vin-line-soft);
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
    border-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 13px 16px;
    background: #fff;
    color: var(--vin-navy);
    text-decoration: none;
    font-weight: 500;
    /* The active item is marked by a gold rule that is always present, so the
       row does not shift by a border's width when it becomes active. */
    border-left: 3px solid transparent;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li a:focus {
    background: var(--vin-wash);
    color: var(--vin-navy);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    background: var(--vin-wash);
    border-left-color: var(--vin-gold);
    font-weight: 700;
}

/* ---- the verification panel ---- */

.vin-kyc {
    border: 1px solid var(--vin-line);
    border-left: 4px solid #6d6d6d;
    border-radius: 12px;
    background: #fff;
    padding: 16px 18px;
    margin: 0 0 22px;
}

.vin-kyc__title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--vin-navy);
}

.vin-kyc__body {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--vin-navy-soft);
}

/* Verified, in review, and not yet done. Colour reinforces here, it is never the
   only signal -- each state also says what it is in the heading, so this reads
   correctly in greyscale and to someone who cannot separate the hues. */
.vin-kyc--ok { border-left-color: #1f7a44; background: #f4faf6; }
.vin-kyc--wait { border-left-color: var(--vin-gold); background: #fffbf0; }
.vin-kyc--todo { border-left-color: var(--vin-navy); background: var(--vin-wash); }

/* =====================================================================
 * The content column.
 *
 * Everything below dresses what WooCommerce prints inside
 * `.woocommerce-MyAccount-content` -- the dashboard prose, the orders and
 * downloads tables, the two address cards and the account-details form.
 * The navigation was already a white card; the content beside it was bare text
 * sitting straight on the page wash.
 * ===================================================================== */

.woocommerce-account .woocommerce-MyAccount-content {
    background: #fff;
    border: 1px solid var(--vin-line);
    border-radius: 12px;
    padding: 24px 26px;
    color: var(--vin-navy);
}

.woocommerce-account .woocommerce-MyAccount-content > h2:first-child,
.woocommerce-account .woocommerce-MyAccount-content > h3:first-child {
    margin-top: 0;
}

.woocommerce-account .woocommerce-MyAccount-content p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--vin-navy-soft);
}

.woocommerce-account .woocommerce-MyAccount-content a {
    text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-content a:hover {
    text-decoration: underline;
}

/* ---- dashboard prose ----
 *
 * Scoped by the verification panel rather than a body class: the panel is
 * printed on the dashboard endpoint and nowhere else, so `.vin-kyc ~ p` is
 * exactly "a paragraph on the dashboard" and leaves the intro paragraph on
 * Addresses (and any future tab) alone. */

.woocommerce-account .woocommerce-MyAccount-content .vin-kyc ~ p:first-of-type {
    font-size: 18px;
    font-weight: 500;
    color: var(--vin-navy);
    margin: 0 0 4px;
}

.woocommerce-account .woocommerce-MyAccount-content .vin-kyc ~ p:first-of-type strong {
    font-weight: 700;
}

/* ---- tables: orders, downloads ---- */

.woocommerce-account .woocommerce table.shop_table {
    width: 100%;
    margin: 0;
    border: 1px solid var(--vin-line);
    border-radius: 12px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    font-size: 15px;
}

.woocommerce-account .woocommerce table.shop_table thead th {
    background: var(--vin-wash);
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid var(--vin-line);
    color: var(--vin-navy);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
}

.woocommerce-account .woocommerce table.shop_table tbody td {
    padding: 15px 16px;
    border: 0;
    border-bottom: 1px solid var(--vin-line-soft);
    color: var(--vin-navy);
    vertical-align: middle;
    text-align: left;
}

.woocommerce-account .woocommerce table.shop_table tbody tr:last-child td {
    border-bottom: 0;
}

.woocommerce-account .woocommerce table.shop_table tbody tr:hover td {
    background: var(--vin-wash-soft);
}

/* Links in a row -- the order number, a downloadable product's name -- are
   navy, not the theme's pink. `:not(.button)` leaves the row's action button to
   the button rules below. */
.woocommerce-account .woocommerce table.shop_table tbody td a:not(.button) {
    color: var(--vin-navy);
    font-weight: 500;
}

.woocommerce-account .woocommerce table.shop_table tbody td a:not(.button):hover {
    color: #7a5a00;
    text-decoration: underline;
}

/* The order number is the row's identity, so it carries a little more weight
   than the rest of the row. */
.woocommerce-account .woocommerce table.shop_table td.woocommerce-orders-table__cell-order-number a {
    font-weight: 700;
}

.woocommerce-account .woocommerce table.shop_table td.woocommerce-orders-table__cell-order-date,
.woocommerce-account .woocommerce table.shop_table td.download-expires,
.woocommerce-account .woocommerce table.shop_table td.download-remaining {
    color: var(--vin-navy-soft);
    white-space: nowrap;
}

.woocommerce-account .woocommerce table.shop_table td.woocommerce-orders-table__cell-order-total {
    font-weight: 500;
    white-space: nowrap;
}

.woocommerce-account .woocommerce table.shop_table td.woocommerce-orders-table__cell-order-actions,
.woocommerce-account .woocommerce table.shop_table td.download-file {
    text-align: right;
    white-space: nowrap;
}

/* ---- the row action button (View / Pay / Download file) ---- */

.woocommerce-account .woocommerce table.shop_table td .button {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--vin-line);
    border-radius: 8px;
    background: #fff;
    color: var(--vin-navy);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}

.woocommerce-account .woocommerce table.shop_table td .button:hover {
    background: var(--vin-gold);
    border-color: var(--vin-gold);
    color: var(--vin-navy);
    text-decoration: none;
}

/* `Download file` is a real action the customer completes here, so it is the one
   filled button in the table.
   `Pay` deliberately gets NO emphasis. Direct Bank Transfer is the only enabled
   gateway, so there is nothing to pay here: the customer transfers the money
   themselves against the reference on the order. WooCommerce only offers a Pay
   action on `pending`/`failed` anyway -- never on the `on-hold` an unpaid
   bank-transfer order sits at -- and where it does appear it leads to the same
   bank details, not a payment. Styling it as the primary call to action would
   promise something the shop cannot do. */
.woocommerce-account .woocommerce table.shop_table td .button.alt {
    background: var(--vin-gold);
    border-color: var(--vin-gold);
    color: var(--vin-navy);
}

.woocommerce-account .woocommerce table.shop_table td .button.alt:hover {
    background: #f0ad10;
    border-color: #f0ad10;
}

.woocommerce-account .woocommerce table.shop_table td .button + .button {
    margin-left: 6px;
}

/* ---- order status pill ----
 *
 * The markup comes from AccountDashboard::renderOrderStatus(), which replaces
 * the bare status word with a span. Same word, same source (WooCommerce's own
 * `wc_get_order_status_name`) -- only wrapped so it can be given a shape. */

.vin-status {
    display: inline-block;
    padding: 4px 11px;
    border: 1px solid var(--vin-line);
    border-radius: 999px;
    background: var(--vin-wash);
    color: var(--vin-navy);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    white-space: nowrap;
}

/* Awaiting payment: the only state the customer has to act on. */
.vin-status--on-hold,
.vin-status--pending {
    border-color: #f3d492;
    background: #fffbf0;
    color: #7a5a00;
}

/* The palette's own blue, darkened for contrast on its tint. */
.vin-status--processing {
    border-color: #c3d5f7;
    background: #f2f6fe;
    color: #24539f;
}

.vin-status--completed {
    border-color: #b9ddc7;
    background: #f4faf6;
    color: #1f7a44;
}

/* Cancelled is not an error, it is an ending: the palette's slate, muted, rather
   than a red that would read as something having gone wrong. */
.vin-status--cancelled,
.vin-status--failed,
.vin-status--refunded {
    border-color: #d7dde5;
    background: var(--vin-wash-soft);
    color: var(--vin-navy-soft);
}

/* ---- pagination under the orders table ---- */

.woocommerce-account .woocommerce .woocommerce-pagination {
    margin-top: 18px;
}

.woocommerce-account .woocommerce .woocommerce-pagination .button {
    display: inline-block;
    padding: 9px 18px;
    border: 1px solid var(--vin-line);
    border-radius: 8px;
    background: #fff;
    color: var(--vin-navy);
    font-weight: 500;
    text-decoration: none;
}

.woocommerce-account .woocommerce .woocommerce-pagination .button:hover {
    background: var(--vin-gold);
    border-color: var(--vin-gold);
}

/* ---- addresses ---- */

.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
    margin-bottom: 20px;
}

.woocommerce-account .woocommerce-MyAccount-content address {
    margin: 0;
    padding: 16px 18px;
    border: 1px solid var(--vin-line);
    border-radius: 12px;
    background: var(--vin-wash-soft);
    color: var(--vin-navy);
    font-style: normal;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.75;
}

.woocommerce-account .woocommerce-MyAccount-content address p {
    margin: 0;
    font-size: 15px;
    line-height: 1.75;
    color: var(--vin-navy);
}

/* The theme already makes this header a flex row with the Edit link at the far
   end; this only dresses the link. */
.woocommerce-account .woocommerce-Address-title.title a {
    flex: 0 0 auto;
    padding: 7px 15px;
    border: 1px solid var(--vin-line);
    border-radius: 8px;
    background: #fff;
    color: var(--vin-navy);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.woocommerce-account .woocommerce-Address-title.title a:hover {
    background: var(--vin-gold);
    border-color: var(--vin-gold);
    text-decoration: none;
}

/* ---- forms: account details, and the address edit form ---- */

.woocommerce-account .woocommerce-MyAccount-content form .form-row label,
.woocommerce-account .woocommerce-MyAccount-content form legend {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
}

.woocommerce-account .woocommerce-MyAccount-content form .input-text,
.woocommerce-account .woocommerce-MyAccount-content form input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content form input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content form input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content form input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content form select {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #d7dce3;
    border-radius: 10px;
    background: #fff;
    color: var(--vin-navy);
    font-size: 15px;
    line-height: 1.5;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.woocommerce-account .woocommerce-MyAccount-content form .input-text:focus,
.woocommerce-account .woocommerce-MyAccount-content form input[type="text"]:focus,
.woocommerce-account .woocommerce-MyAccount-content form input[type="email"]:focus,
.woocommerce-account .woocommerce-MyAccount-content form input[type="tel"]:focus,
.woocommerce-account .woocommerce-MyAccount-content form input[type="password"]:focus,
.woocommerce-account .woocommerce-MyAccount-content form select:focus {
    outline: 0;
    border-color: var(--vin-gold);
    /* A visible ring, not just a hue change: focus has to survive greyscale. */
    box-shadow: 0 0 0 3px rgba(255, 187, 38, 0.35);
}

/* The "this is how your name will be displayed" hint under a field. */
.woocommerce-account .woocommerce-MyAccount-content form .form-row span em {
    display: block;
    margin-top: 6px;
    color: var(--vin-navy-soft);
    font-size: 13px;
    font-style: normal;
    line-height: 1.5;
}

.woocommerce-account .woocommerce-MyAccount-content form fieldset {
    margin: 26px 0 0;
    padding: 18px 20px 4px;
    border: 1px solid var(--vin-line);
    border-radius: 12px;
    background: var(--vin-wash-soft);
}

.woocommerce-account .woocommerce-MyAccount-content form fieldset legend {
    width: auto;
    margin: 0;
    padding: 0 8px;
    color: var(--vin-navy);
    font-size: 15px;
    font-weight: 700;
}

/* The theme paints the submit button navy with `!important`; this only adds the
   hover state it never got, so it has to answer in kind. */
.woocommerce-account .woocommerce-MyAccount-content form button.button:hover,
.woocommerce-account .woocommerce-MyAccount-content form .woocommerce-Button.button:hover {
    background-color: var(--vin-gold) !important;
    border-color: var(--vin-gold) !important;
    color: var(--vin-navy) !important;
}

/* ---- notices and empty states ---- */

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error {
    margin: 0 0 20px;
    padding: 16px 18px;
    border: 1px solid var(--vin-line);
    border-top: 1px solid var(--vin-line);
    border-left: 4px solid var(--vin-navy);
    border-radius: 12px;
    background: var(--vin-wash);
    color: var(--vin-navy);
    font-size: 15px;
    line-height: 1.55;
    list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message { border-left-color: #1f7a44; background: #f4faf6; }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error { border-left-color: #a13b3b; background: #faf6f6; }

/* WooCommerce sets its own glyph on these in `woocommerce.css`; the card shape
   and the coloured rule already say what the notice is. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message::before,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error::before {
    content: none;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message .button {
    display: inline-block;
    margin-left: 14px;
    padding: 8px 16px;
    border: 1px solid var(--vin-line);
    border-radius: 8px;
    background: #fff;
    color: var(--vin-navy);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message .button:hover {
    background: var(--vin-gold);
    border-color: var(--vin-gold);
    text-decoration: none;
}

/* ---- phone ----
 *
 * WooCommerce's own `woocommerce-smallscreen.css` drops the table head and
 * stacks each cell under its `data-title` below 768px. That turns a row into a
 * block of label/value lines, so each row is given the edges of a card. */

@media screen and (max-width: 768px) {
    .woocommerce-account .woocommerce-MyAccount-content {
        padding: 18px 16px;
    }

    .woocommerce-account .woocommerce table.shop_table {
        border: 0;
        border-radius: 0;
    }

    .woocommerce-account .woocommerce table.shop_table tbody tr {
        display: block;
        margin-bottom: 14px;
        border: 1px solid var(--vin-line);
        border-radius: 12px;
        overflow: hidden;
        background: #fff;
    }

    .woocommerce-account .woocommerce table.shop_table tbody tr:last-child {
        margin-bottom: 0;
    }

    .woocommerce-account .woocommerce table.shop_table tbody td {
        padding: 11px 14px;
        border-bottom: 1px solid var(--vin-line-soft);
        /* Stacked, every cell carries its `data-title` label as well as its
           value. Keeping the desktop `nowrap` here makes the widest row -- a
           long date, or two buttons side by side -- set a minimum width the
           phone does not have, and the whole page scrolls sideways. */
        white-space: normal;
    }

    .woocommerce-account .woocommerce table.shop_table tbody td::before {
        color: var(--vin-navy-soft);
        font-size: 13px;
        font-weight: 500;
    }

    .woocommerce-account .woocommerce table.shop_table tbody td.woocommerce-orders-table__cell-order-actions,
    .woocommerce-account .woocommerce table.shop_table tbody td.download-file {
        background: var(--vin-wash-soft);
    }
}

/*
 * WooCommerce's registration privacy notice.
 *
 * Operator decision 2026-09-18: fine print, not body copy. It is a standing
 * disclosure rather than something the customer has to read to sign up, and at
 * the theme's default size it competed with the form itself.
 *
 * 11px, not smaller. This is a collection notice in substance -- it links to the
 * privacy policy -- so it has to stay legible; below about 11px is the range
 * browser minimum-font-size settings exist to override.
 *
 * `!important` because the text is rendered by WooCommerce inside the theme's
 * own form styling, which sets the paragraph size after this file loads.
 */
.woocommerce-privacy-policy-text,
.woocommerce-privacy-policy-text p {
  font-size: 11px !important;
  line-height: 1.45 !important;
  color: #5a6473 !important;
  margin-bottom: 0.5em !important;
}

.woocommerce-privacy-policy-text a {
  font-size: inherit !important;
  text-decoration: underline;
}