/**
 * account.css
 * WHAT: My Account pages: hero, sidebar (profile + icon menu), dashboard cards, order cards with status + steps,
 *       and a clean look for WooCommerce's standard forms (addresses, account details, login / register).
 * NOTE: WooCommerce's own account CSS also loads here, so float/width rules use !important to win.
 * Markup: woocommerce/myaccount/*.php. Script: assets/js/account.js. Loaded on account pages only (inc/assets.php).
 */

/* ---- layout (logged in): hero on top, sidebar left, content right ---- */
.logged-in.woocommerce-account .woocommerce{display:grid;grid-template-columns:280px minmax(0,1fr);gap:22px;align-items:start}
.logged-in.woocommerce-account .woocommerce-MyAccount-navigation{float:none!important;width:auto!important;position:sticky;top:130px}
.logged-in.woocommerce-account .woocommerce-MyAccount-content{float:none!important;width:auto!important;min-width:0}
.logged-in.woocommerce-account .woocommerce>.woocommerce-notices-wrapper{grid-column:1/-1}

.hn-acc__hero{grid-column:1/-1;position:relative;overflow:hidden;border-radius:var(--r);min-height:170px;display:flex;align-items:center;background:linear-gradient(120deg,var(--green-l),var(--orange-soft))}
.hn-acc__hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hn-acc__hero-in{position:relative;padding:24px 30px}
.hn-acc__hero .woocommerce-breadcrumb{font-size:13px;color:var(--muted);margin:0 0 6px}
.hn-acc__hero h1{font-size:clamp(30px,4vw,48px);margin:0 0 4px}
.hn-acc__hero p{margin:0;color:#3d4a3f;max-width:560px}

/* ---- sidebar ---- */
.woocommerce-MyAccount-navigation{background:#fff;border-radius:var(--r);padding:16px;box-shadow:0 1px 0 var(--line)}
.hn-acc__profile{display:flex;gap:12px;align-items:center;padding-bottom:14px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.hn-acc__avatar{width:60px;height:60px;border-radius:50%;object-fit:cover;flex:none}
.hn-acc__profile strong{display:block;font-size:17px}
.hn-acc__profile small{display:block;color:var(--muted);font-size:13px;word-break:break-all}
.hn-acc__edit{display:inline-block;margin-top:4px;padding:3px 12px;border-radius:6px;background:var(--green-l);font-size:13px;font-weight:600}
.woocommerce-MyAccount-navigation ul{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
.woocommerce-MyAccount-navigation li a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;color:var(--ink);font-size:15px;text-decoration:none}
.woocommerce-MyAccount-navigation li a:hover{background:var(--green-l)}
.woocommerce-MyAccount-navigation li.is-active a{background:var(--green-l);color:var(--green-d);font-weight:700}
.woocommerce-MyAccount-navigation li a span{flex:1}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a{color:#d32f2f}
.woocommerce-MyAccount-navigation .hn-count{position:static;font-style:normal}

/* ---- content boxes ---- */
.woocommerce-MyAccount-content>*:first-child{margin-top:0}
.woocommerce-MyAccount-content h2,.woocommerce-MyAccount-content h3{font-family:var(--serif)}
.hn-dash__hello,.hn-dash__box,.hn-dash__help{background:#fff;border-radius:var(--r);padding:20px 22px;box-shadow:0 1px 0 var(--line);margin-bottom:16px}
.hn-dash__hello{background:linear-gradient(120deg,#fff,var(--green-l))}
.hn-dash__hello h2{font-size:26px;margin:0 0 6px}
.hn-dash__hello p{margin:0 0 6px;color:#3d4a3f}
.hn-dash__not{font-size:13px;color:var(--muted)}.hn-dash__not a{text-decoration:underline}

/* cards: 4-up instead of 3 */
.hn-dash__cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}

/* cards: lift on hover + squircle icon bubble + orange tint variant */
.hn-dash__card{display:flex;gap:14px;align-items:center;background:#fff;border-radius:var(--r);padding:16px;box-shadow:0 1px 0 var(--line);color:inherit;text-decoration:none;transition:box-shadow .2s,transform .2s}
.hn-dash__card:hover{box-shadow:0 10px 24px #1f4d2b1a;transform:translateY(-2px)}
.hn-dash__card .ic{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--green-l);color:var(--green);flex:none}
.hn-dash__card.is-tint-orange .ic{background:#fff1e6;color:var(--orange)}


.hn-dash__card strong{display:block}.hn-dash__card small{display:block;color:var(--muted);font-size:13px}
.hn-dash__card em{font-style:normal;color:var(--green);font-weight:600;font-size:14px}
.hn-dash__card .hn-count{position:static;margin-left:6px;vertical-align:middle}
.hn-dash__box>header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.hn-dash__box h3{display:flex;align-items:center;gap:10px;font-size:20px;margin:0;color:var(--green-d)}
.hn-dash__box>header a{font-size:14px;font-weight:600;color:var(--green)}
.hn-dash__orders{list-style:none;margin:0;padding:0}
.hn-dash__orders li{display:grid;grid-template-columns:64px minmax(0,1fr) auto auto auto;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.hn-dash__orders li:first-child{border-top:0}
.hn-dash__orders .th img{width:60px;height:60px;object-fit:cover;border-radius:8px;display:block}
.hn-dash__orders .info{display:flex;flex-direction:column;min-width:0}.hn-dash__orders .info small{color:var(--muted)}
.hn-dash__orders .tot{font-size:17px}
.hn-dash__orders .hn-btn{min-height:40px;padding:0 18px;font-size:14px}
.hn-dash__none{margin:0;color:var(--muted)}
.hn-dash__addr{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.hn-dash__a{border:1px solid var(--line);border-left:4px solid var(--green);border-radius:10px;padding:14px 16px;font-size:14px}
.hn-dash__a .tag{display:inline-block;background:var(--green);color:#fff;font-size:11px;font-weight:700;padding:2px 10px;border-radius:5px;margin-bottom:6px}
.hn-dash__a address{font-style:normal;line-height:1.6}
.hn-dash__a>a{font-weight:600;color:var(--green);font-size:13px}
.hn-dash__add{display:block;text-align:center;padding:14px;border:1.5px dashed var(--line);border-radius:8px;color:var(--green)}
.hn-dash__help{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--green-l)}
.hn-dash__help>div{flex:1;min-width:200px}.hn-dash__help p{margin:0;color:var(--muted)}
.hn-dash__help .hn-btn{min-height:44px}

/* ---- status labels (WooCommerce statuses) ---- */
/* status pill: room for the little icon (is-* colour rules stay as they are) */
.hn-status{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-size:13px;font-weight:700;background:#eef0ec;color:#555}
.hn-status svg{flex:none;width:13px;height:13px}
.hn-status.is-completed{background:var(--green-l);color:var(--green-d)}
.hn-status.is-processing{background:#fff1e6;color:var(--orange)}
.hn-status.is-on-hold,.hn-status.is-pending{background:#fff8dc;color:#8a6d00}
.hn-status.is-cancelled,.hn-status.is-failed,.hn-status.is-refunded{background:#fdecea;color:#c62828}

/* ---- My Orders ---- */
.hn-ord__chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-bottom:14px}
.hn-ord__chips::-webkit-scrollbar{display:none}
/* filter chips: icon inside */
.hn-ord__chips button{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:9px 18px;border-radius:999px;border:1px solid var(--line);background:#fff;font:500 14px var(--sans);cursor:pointer}
.hn-ord__chips button svg{flex:none;width:14px;height:14px;opacity:.75}


.hn-ord__list{display:flex;flex-direction:column;gap:14px}
.hn-ord{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 190px;gap:18px;align-items:center;background:#fff;border-radius:var(--r);padding:16px 18px;box-shadow:0 1px 0 var(--line)}
.hn-ord[hidden]{display:none}
.hn-ord h3{font:700 17px var(--sans);margin:0 0 10px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.hn-ord h3 a:hover{color:var(--green)}
.hn-ord h3 time{font-weight:400;font-size:13px;color:var(--muted)}
.hn-ord__thumbs{display:flex;gap:8px;margin:0;padding:0;list-style:none}
.hn-ord__thumbs li{width:62px;height:62px}
.hn-ord__thumbs img{width:62px;height:62px;object-fit:cover;border-radius:8px;display:block}
.hn-ord__thumbs .more{display:grid;place-items:center;text-align:center;background:var(--green-l);border-radius:8px;font-size:13px;font-weight:700;line-height:1.2}
/* steps: bigger icon dots */
.hn-ord__steps{display:flex;margin:12px 0 0;padding:0;list-style:none}
.hn-ord__steps li{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;font-size:12px}
.hn-ord__steps li::before{content:"";position:absolute;top:13px;left:-50%;width:100%;height:2px;background:var(--line);z-index:0}
.hn-ord__steps li:first-child::before{display:none}
.hn-ord__steps .dot{position:relative;z-index:1;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#e7eae3;color:#9aa294}
.hn-ord__steps .dot svg{width:13px;height:13px}
.hn-ord__steps b{font-weight:600;margin-top:7px}
.hn-ord__steps small{color:var(--muted)}
.hn-ord__steps .is-done .dot{background:var(--green);color:#fff}
.hn-ord__steps .is-done::before{background:var(--green)}
.hn-ord__steps .is-current .dot{background:var(--orange);color:#fff;animation:hn-pulse 2.2s infinite}
.hn-ord__steps .is-current::before{background:var(--green)}
.hn-ord__steps .is-bad .dot{background:#d32f2f;color:#fff}
.hn-ord__steps .is-bad::before{background:#d32f2f}
@keyframes hn-pulse{0%{box-shadow:0 0 0 0 #ff8a3c45}70%{box-shadow:0 0 0 9px #ff8a3c00}100%{box-shadow:0 0 0 0 #ff8a3c00}}

.hn-ord__side{display:flex;flex-direction:column;gap:2px}
.hn-ord__side>b{font-size:22px}.hn-ord__side>small{color:var(--muted)}
.hn-ord__actions{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.hn-ord__actions .hn-btn{min-height:42px;padding:0 14px;font-size:14px}
.hn-ord__pager{display:flex;justify-content:space-between;margin-top:16px}

/* ---- WooCommerce standard forms (Account details, Addresses, order view) ---- */
.woocommerce-MyAccount-content form,.woocommerce-MyAccount-content .woocommerce-order-details,.woocommerce-MyAccount-content .woocommerce-customer-details{background:#fff;border-radius:var(--r);padding:20px 22px;box-shadow:0 1px 0 var(--line);margin-bottom:16px}
.woocommerce-MyAccount-content input.input-text,.woocommerce-MyAccount-content select,.woocommerce-MyAccount-content textarea,.woocommerce-form-login input.input-text,.woocommerce-form-register input.input-text{width:100%;padding:11px 12px;border:1.5px solid var(--line);border-radius:8px;font:inherit;background:#fff}
.woocommerce-MyAccount-content input:focus,.woocommerce-MyAccount-content select:focus,.woocommerce-MyAccount-content textarea:focus{border-color:var(--green);outline:0;box-shadow:0 0 0 3px var(--green-l)}
.woocommerce-MyAccount-content label{font-weight:600;font-size:14px}
/*.woocommerce-MyAccount-content .woocommerce-Addresses{display:grid;grid-template-columns:1fr 1fr;gap:18px}*/
/*.woocommerce-MyAccount-content .woocommerce-Addresses .u-column1,.woocommerce-MyAccount-content .woocommerce-Addresses .u-column2{float:none!important;width:auto!important}*/
.woocommerce-MyAccount-content .woocommerce-Address-title{display:flex;justify-content:space-between;align-items:center;gap:10px}
.woocommerce-MyAccount-content .woocommerce-Address-title h2,.woocommerce-MyAccount-content .woocommerce-Address-title h3{font-size:20px;margin:0}
.woocommerce-MyAccount-content .woocommerce-Address-title a.edit{font-weight:600;color:var(--green)}
.woocommerce-MyAccount-content table.shop_table{width:100%;border-collapse:collapse;border:0}
.woocommerce-MyAccount-content table.shop_table th,.woocommerce-MyAccount-content table.shop_table td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left}

/* ---- login / register (logged out) ---- */
.woocommerce-account:not(.logged-in) .u-columns{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.woocommerce-account:not(.logged-in) .u-column1,.woocommerce-account:not(.logged-in) .u-column2{float:none!important;width:auto!important;background:#fff;border-radius:var(--r);padding:22px;box-shadow:0 1px 0 var(--line)}
.woocommerce-account:not(.logged-in) form.login,.woocommerce-account:not(.logged-in) form.register{border:0;padding:0;margin:0}
.woocommerce-account:not(.logged-in) .woocommerce>h2{font-size:28px}

/* ---- responsive ---- */
@media (max-width:1100px){
 .hn-ord{grid-template-columns:minmax(0,1fr) 190px}
 .hn-ord__status{grid-column:1/-1;order:3}
}
@media (max-width:900px){
     .logged-in.woocommerce-account .woocommerce{grid-template-columns:minmax(0,1fr)}  /* floor = 0, not min-content */
    .logged-in.woocommerce-account .woocommerce-MyAccount-navigation{position:static;min-width:0;max-width:100%}
    .logged-in.woocommerce-account .woocommerce-MyAccount-content{min-width:0}
    .woocommerce-MyAccount-navigation ul{flex-direction:row;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;gap:6px}
 .woocommerce-MyAccount-navigation ul::-webkit-scrollbar{display:none}
 .woocommerce-MyAccount-navigation li a{white-space:nowrap;background:var(--cream)}
 .hn-dash__cards{grid-template-columns:1fr}
 .woocommerce-account:not(.logged-in) .u-columns,.woocommerce-MyAccount-content .woocommerce-Addresses,.hn-dash__addr{grid-template-columns:1fr}
}
@media (max-width:720px){
 .hn-acc__hero-in{padding:18px}
 .hn-ord{grid-template-columns:1fr;padding:14px}
 .hn-ord__status{order:0}
 .hn-ord__actions{flex-direction:row;flex-wrap:wrap}.hn-ord__actions .hn-btn{flex:1;min-width:110px}
 .hn-dash__orders li{grid-template-columns:56px minmax(0,1fr) auto;grid-template-areas:"th info tot" "th st btn"}
 .hn-dash__orders .th{grid-area:th}.hn-dash__orders .info{grid-area:info}.hn-dash__orders .tot{grid-area:tot}
 .hn-dash__orders .hn-status{grid-area:st;justify-self:start}.hn-dash__orders .hn-btn{grid-area:btn}
 .hn-dash__orders .th img{width:54px;height:54px}
}

/* order number with parcel icon */
.hn-ord__no{display:inline-flex;align-items:center;gap:6px}
.hn-ord__no svg{width:16px;height:16px;color:var(--green);flex:none}

/* shipping line on the order card */
.hn-ord__ship{display:flex;align-items:center;gap:6px;margin:10px 0 0;font-size:13px;color:var(--muted)}
.hn-ord__ship svg{width:15px;height:15px;color:var(--green);flex:none}

/* gentle lift on order cards */
.hn-ord{transition:transform .2s,box-shadow .2s}
.hn-ord:hover{transform:translateY(-2px);box-shadow:0 10px 24px #1f4d2b1a}

@media (max-width:560px){
    .hn-dash__cards{grid-template-columns:1fr}
    .hn-ord__steps b{font-size:11px}
    .hn-ord__steps small{display:none}
}


@media (max-width:560px){
    /* steps: 4 labels can't fit 320px — let them shrink */
    .hn-ord__steps li{min-width:0}
    .hn-ord__steps b{font-size:10px}
}

/* ---- Addresses page: intro note + two address cards ---- */

/* intro line becomes a soft info chip */
.woocommerce-MyAccount-content > p{
    margin:0 0 16px;padding:10px 14px;border-radius:10px;
    background:var(--green-l);color:#3d4a3f;font-size:13.5px;
    display:flex;align-items:center;gap:10px;
}
.woocommerce-MyAccount-content > p::before{
    content:"i";flex:none;width:18px;height:18px;display:grid;place-items:center;
    background:var(--green);color:#fff;border-radius:50%;font:700 11px/1 var(--sans);
}

/* wrapper: invisible grid — auto-fit stacks the cards on small screens by itself */
.woocommerce-MyAccount-content .woocommerce-Addresses{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
    gap:18px;background:none;padding:0;border:0;box-shadow:none;margin-bottom:0;
}

/* the two cards */
.woocommerce-MyAccount-content .u-column1,
.woocommerce-MyAccount-content .u-column2{
    float:none!important;width:auto!important;min-width:0;
    position:relative;overflow:hidden;
    background:#fff;border:1px solid var(--line);border-radius:var(--r);
    box-shadow:0 1px 0 var(--line);
    transition:transform .2s,box-shadow .2s;
}
.woocommerce-MyAccount-content .u-column1:hover,
.woocommerce-MyAccount-content .u-column2:hover{transform:translateY(-3px);box-shadow:0 12px 26px #1f4d2b17}

/* thin gradient strip on top: green = billing, orange = shipping */
.woocommerce-MyAccount-content .u-column1::before,
.woocommerce-MyAccount-content .u-column2::before{
    content:"";position:absolute;inset:0 0 auto;height:4px;
    background:linear-gradient(90deg,var(--green),var(--green-l));
}
.woocommerce-MyAccount-content .u-column2::before{background:linear-gradient(90deg,var(--orange),var(--orange-soft))}

/* card header */
.woocommerce-MyAccount-content .woocommerce-Address-title{
    display:flex;justify-content:space-between;align-items:center;gap:10px;
    padding:14px 18px;margin:0;border-bottom:1px dashed var(--line);
}
.woocommerce-MyAccount-content .woocommerce-Address-title h2{
    display:flex;align-items:center;gap:10px;margin:0;
    font:700 14px var(--sans);text-transform:uppercase;letter-spacing:.5px;color:var(--ink);
}
/* pin icon bubble (inline SVG — no image file, no PHP change) */
.woocommerce-MyAccount-content .woocommerce-Address-title h2::before{
    content:"";flex:none;width:36px;height:36px;border-radius:10px;
    background:var(--green-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e7d4f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/18px no-repeat;
}
.woocommerce-MyAccount-content .u-column2 .woocommerce-Address-title h2::before{
    background-color:#fff1e6;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8a3c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/* edit link → pill button */
.woocommerce-MyAccount-content .woocommerce-Address-title a.edit{
    flex:none;font:700 13px var(--sans);text-decoration:none;white-space:nowrap;
    color:var(--green-d);background:var(--green-l);
    padding:8px 14px;border-radius:999px;transition:background .2s,color .2s;
}
.woocommerce-MyAccount-content .woocommerce-Address-title a.edit:hover{background:var(--green);color:#fff}
.woocommerce-MyAccount-content .u-column2 .woocommerce-Address-title a.edit{color:#d96a17;background:#fff1e6}
.woocommerce-MyAccount-content .u-column2 .woocommerce-Address-title a.edit:hover{background:var(--orange);color:#fff}

/* address text */
.woocommerce-MyAccount-content .woocommerce-Address address{
    margin:0;padding:16px 18px 20px;font-style:normal;
    font-size:14.5px;line-height:1.8;color:var(--ink);
}

/* sidebar: camera badge on the avatar */
.hn-acc__avatar-link{position:relative;flex:none;display:block;line-height:0}
.hn-acc__avatar-link::after{
    content:"";position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;
    border:2px solid #fff;
    background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E") center/11px no-repeat;
    transition:transform .2s;
}
.hn-acc__avatar-link:hover::after{transform:scale(1.15)}

/* Account Details: photo picker row */
.hn-photo{display:flex;align-items:center;gap:14px;margin:0 0 20px;padding:14px;background:var(--green-l);border:1.5px dashed var(--green);border-radius:12px}
.hn-photo__preview img{display:block;width:64px;height:64px;border-radius:50%;object-fit:cover;background:#fff}
.hn-photo__btns{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.hn-photo__btns label[for="hn-photo-input"]{cursor:pointer;min-height:38px;line-height:38px;padding:0 16px;font-size:14px}
.hn-photo__remove{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer}
.hn-photo__hint{margin:0;font-size:12px;color:var(--muted)}
@media (max-width:560px){.hn-photo{flex-wrap:wrap}}


.woocommerce-page .col2-set::after,.woocommerce-page .col2-set::before {
    content:none!important;
    display: table
}

.woocommerce-button.pay.order-actions-button {
    color: var(--btn-primary-text);
    background-color: var(--btn-primary-bg);
    padding: 15px 24px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
}

.woocommerce-button.pay.order-actions-button:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button{
        color: var(--btn-primary-text);
    background-color: var(--btn-primary-bg);

}