/* account.css — Moj račun V5 on the live page (hand-written; loads after account-design.css).
   account-design.css is the artboard's CSS, generated (tools/build-account-shell.py); this file maps it onto
   WooCommerce's My Account markup and adds what the artboard does not draw: logged-out card, the other endpoints'
   tables/forms/buttons (WooCommerce templates, no override), notices, no-key / empty states, focus. Design tokens only.
   (0.10.0 — replaces the 068d panel CSS, which lives on as licence-panel.css for sites without the V5 account page.) */

/* ---- grid: WooCommerce's wrapper joins the design grid ---------------------------------------------------------- */
.ac-grid > .woocommerce { display: contents; }
/* WooCommerce's clearfix pseudo-elements would become grid items once the wrapper is `contents`. */
.ac-grid > .woocommerce::before, .ac-grid > .woocommerce::after { content: none; display: none; }
.ac-grid > .woocommerce > .woocommerce-notices-wrapper:empty { display: none; }
.ac-grid > .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
body.wgm-shell-ac .woocommerce-MyAccount-content { float: none; width: auto; min-width: 0; }
body.wgm-shell-ac .woocommerce-MyAccount-content > .woocommerce-notices-wrapper:not(:empty) { margin-bottom: 24px; }
body.wgm-shell-ac.admin-bar .ac-nav { top: 56px; }
.wgm-shell [hidden] { display: none !important; }

/* ---- licence card: states the artboard does not draw ------------------------------------------------------------ */
@media (min-width: 1181px) {
	.ac-facts.ac-facts-3 { grid-template-columns: repeat(3, 1fr); }
	.ac-facts.ac-facts-2 { grid-template-columns: repeat(2, 1fr); }
}
.ac-facts.ac-facts-1 { grid-template-columns: minmax(0, 1fr); max-width: 320px; }
.ac-fact span a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ac-fact span a:hover { color: var(--yellow); }
.ac-lic .ac-nokey, .ac-nokey { margin: 18px 0 0; padding: 14px 16px; border-radius: 10px; background: var(--yellow-soft); color: var(--navy); font-size: 15px; line-height: 1.5; font-weight: 500; }
.ac-nokey a, .ac-lic .ac-nokey a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ac-nolic { margin: 12px 0 0; font-size: 16px; line-height: 1.5; color: #fff; }
.ac-nolic a { color: var(--yellow); text-decoration: underline; text-underline-offset: 3px; }
.ac-empty { margin-top: 18px; }

/* ---- logged out: one card with WooCommerce's login / lost-password form ----------------------------------------- */
.ac-login { margin-top: -56px; }
.ac-login-card { max-width: 560px; }
.ac-login-card h2 { margin-bottom: 18px; }
.ac-login-note { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.ac-login-note a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---- other endpoints: WooCommerce output inside one card -------------------------------------------------------- */
.ac-endpoint { font-size: 16px; line-height: 1.55; }
.ac-endpoint > :first-child, .ac-endpoint .woocommerce-notices-wrapper + * { margin-top: 0; }
.ac-endpoint p { margin: 0 0 14px; }
.ac-endpoint h2, .ac-endpoint h3, .ac-login-card h2 { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.02em; color: var(--navy); line-height: 1.15; margin: 28px 0 14px; }
.ac-endpoint h2:first-child, .ac-login-card h2:first-child { margin-top: 0; }
.ac-endpoint mark { background: var(--yellow-soft); color: var(--navy); padding: 0 4px; border-radius: 4px; font-weight: 600; }
.ac-endpoint address { font-style: normal; line-height: 1.6; padding: 16px 18px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper); }
.ac-endpoint .woocommerce-Addresses, .ac-endpoint .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: auto; }
.ac-endpoint .col2-set::before, .ac-endpoint .col2-set::after, .ac-endpoint .woocommerce-Addresses::before, .ac-endpoint .woocommerce-Addresses::after { display: none; }
.ac-endpoint .col2-set .col-1, .ac-endpoint .col2-set .col-2, .ac-endpoint .woocommerce-Address { float: none; width: auto; max-width: none; }
.wgm-shell-ac .ac-endpoint .woocommerce-Address-title.title::before, .wgm-shell-ac .ac-endpoint .woocommerce-Address-title.title::after { content: none; display: none; } /* beats WooCommerce`s .woocommerce-account .addresses .title::before */
.ac-endpoint .woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ac-endpoint .woocommerce-Address-title h2 { margin: 0 0 10px; font-size: 18px; }
.ac-endpoint .woocommerce-Address-title a { font-weight: 600; font-size: 15px; }

/* tables (Orders, Downloads, view-order, payment methods) in the artboard's .ac-table look */
.ac-endpoint table.shop_table, .ac-endpoint table.woocommerce-table { width: 100%; border: 0; border-collapse: collapse; border-radius: 0; margin: 0 0 20px; font-size: 15px; }
.ac-endpoint table.shop_table th, .ac-endpoint table.woocommerce-table th { text-align: left; font-family: var(--font-mono); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 0 12px 10px 0; border: 0; border-bottom: 1.5px solid var(--line); background: none; }
.ac-endpoint table.shop_table td, .ac-endpoint table.woocommerce-table td, .ac-endpoint table.shop_table tbody th, .ac-endpoint table.shop_table tfoot th, .ac-endpoint table.shop_table tfoot td { padding: 14px 12px 14px 0; border: 0; border-bottom: 1px solid var(--line); vertical-align: middle; background: none; font-family: var(--font-body); font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.ac-endpoint table.shop_table tfoot th { font-weight: 600; }
.ac-endpoint table.shop_table td a:not(.button), .ac-endpoint table.woocommerce-table td a:not(.button) { font-weight: 600; }
.ac-endpoint table .woocommerce-orders-table__cell-order-actions, .ac-endpoint table .download-file { text-align: right; padding-right: 0; }
.ac-endpoint table .button + .button { margin-left: 8px; }

/* buttons: WooCommerce .button → V5 navy / ghost */
.wgm-shell-ac .woocommerce .button, .wgm-shell-ac .woocommerce button.button, .wgm-shell-ac .woocommerce a.button, .wgm-shell-ac .woocommerce input.button {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--r);
	font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 1.2; text-decoration: none;
	background: var(--navy); color: #fff; border: 2px solid var(--navy); cursor: pointer; box-shadow: none; text-shadow: none;
}
.wgm-shell-ac .woocommerce .button:hover, .wgm-shell-ac .woocommerce button.button:hover, .wgm-shell-ac .woocommerce a.button:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; text-decoration: none; }
.wgm-shell-ac .ac-endpoint table .button, .wgm-shell-ac .woocommerce .button.view { background: transparent; color: var(--navy); border-color: var(--navy); min-height: 40px; padding: 0 14px; font-size: 14px; }
.wgm-shell-ac .ac-endpoint table .button:hover { background: var(--navy); color: #fff; }
.wgm-shell-ac .woocommerce-pagination { display: flex; gap: 12px; margin-top: 8px; }

/* forms (login, lost password, edit account, addresses): fields as on checkout B — 44 px, labels above, focus ring */
.wgm-shell-ac .woocommerce form .form-row { display: block; float: none; width: auto; margin: 0 0 16px; padding: 0; }
.wgm-shell-ac .woocommerce form .form-row-first, .wgm-shell-ac .woocommerce form .form-row-last { display: inline-block; width: calc(50% - 8px); vertical-align: top; }
.wgm-shell-ac .woocommerce form .form-row-first { margin-right: 12px; }
.wgm-shell-ac .woocommerce form .form-row label, .wgm-shell-ac .woocommerce fieldset legend { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.wgm-shell-ac .woocommerce form .form-row label.woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 16px 0 0; font-weight: 500; cursor: pointer; }
.wgm-shell-ac .woocommerce form .form-row .required { color: var(--dpd-red); text-decoration: none; border: 0; }
.wgm-shell-ac .woocommerce form .input-text, .wgm-shell-ac .woocommerce form select, .wgm-shell-ac .woocommerce form textarea, .wgm-shell-ac .select2-container .select2-selection--single {
	width: 100%; min-height: 44px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff;
	font-family: var(--font-body); font-size: 16px; line-height: 1.4; color: var(--ink); box-shadow: none;
}
.wgm-shell-ac .select2-container .select2-selection--single { height: 44px; padding: 0; display: flex; align-items: center; }
.wgm-shell-ac .select2-container .select2-selection--single .select2-selection__rendered { padding-left: 14px; line-height: 40px; color: var(--ink); }
.wgm-shell-ac .select2-container .select2-selection--single .select2-selection__arrow { height: 42px; }
.wgm-shell-ac .woocommerce form .input-text:focus, .wgm-shell-ac .woocommerce form select:focus, .wgm-shell-ac .woocommerce form textarea:focus { outline: 3px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.wgm-shell-ac .woocommerce form .password-input { display: flex; position: relative; width: 100%; }
.wgm-shell-ac .woocommerce form .show-password-input { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: none; border: 0; cursor: pointer; }
.wgm-shell-ac .woocommerce form .form-row span em, .wgm-shell-ac .woocommerce form .form-row #account_display_name_description em { display: block; margin-top: 6px; font-size: 13.5px; color: var(--muted); font-style: normal; }
.wgm-shell-ac .woocommerce fieldset { margin: 24px 0 8px; padding: 18px; border: 1.5px solid var(--line); border-radius: 12px; }
.wgm-shell-ac .woocommerce form.login, .wgm-shell-ac .woocommerce form.lost_reset_password, .wgm-shell-ac .woocommerce form.register { margin: 0; padding: 0; border: 0; border-radius: 0; }
.wgm-shell-ac .woocommerce form.login .form-row:last-of-type { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wgm-shell-ac .woocommerce .lost_password { margin: 4px 0 0; font-size: 15px; }
.wgm-shell-ac .woocommerce .lost_password a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.wgm-shell-ac .woocommerce-password-strength { margin-top: 6px; padding: 6px 10px; border-radius: 8px; font-size: 13.5px; }
.wgm-shell-ac .woocommerce-password-hint { display: block; margin-top: 6px; font-size: 13.5px; color: var(--muted); }

/* notices */
.wgm-shell-ac .woocommerce-message, .wgm-shell-ac .woocommerce-info, .wgm-shell-ac .woocommerce-error, .wgm-shell-ac .woocommerce-notices-wrapper .wc-block-components-notice-banner {
	margin: 0 0 16px; padding: 14px 18px 14px 18px; list-style: none; border: 1.5px solid var(--line); border-left: 4px solid var(--blue); border-radius: 12px;
	background: #fff; color: var(--ink); font-size: 15px; line-height: 1.5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
}
.wgm-shell-ac .woocommerce-message::before, .wgm-shell-ac .woocommerce-info::before, .wgm-shell-ac .woocommerce-error::before { content: none; }
.wgm-shell-ac .woocommerce-message::after, .wgm-shell-ac .woocommerce-info::after, .wgm-shell-ac .woocommerce-error::after { content: none; }
.wgm-shell-ac .woocommerce-error { border-left-color: var(--dpd-red); }
.wgm-shell-ac .woocommerce-message { border-left-color: var(--navy); }
.wgm-shell-ac .woocommerce-error li { margin: 0; }
.wgm-shell-ac .woocommerce-message .button, .wgm-shell-ac .woocommerce-info .button { order: 2; margin-left: auto; min-height: 40px; font-size: 14px; }

/* WooCommerce 11 block-style notices (wc-blocks-style is not loaded in the shell) */
.wgm-shell-ac .wc-block-components-notice-banner { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 14px 18px; border: 1.5px solid var(--line); border-left: 4px solid var(--blue); border-radius: 12px; background: #fff; color: var(--ink); font-size: 15px; line-height: 1.5; }
.wgm-shell-ac .wc-block-components-notice-banner.is-error { border-left-color: var(--dpd-red); }
.wgm-shell-ac .wc-block-components-notice-banner.is-success { border-left-color: var(--navy); }
.wgm-shell-ac .wc-block-components-notice-banner > svg { flex: none; width: 20px; height: 20px; margin-top: 1px; fill: currentColor; color: var(--blue); }
.wgm-shell-ac .wc-block-components-notice-banner.is-error > svg { color: var(--dpd-red); }
.wgm-shell-ac .wc-block-components-notice-banner__content { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.wgm-shell-ac .wc-block-components-notice-banner__content .button { order: 2; margin-left: auto; min-height: 40px; font-size: 14px; }
.ac-endpoint .wc-block-components-notice-banner + .button, .ac-endpoint .woocommerce-info + .button { margin-top: 4px; }

/* ---- focus (a11y): yellow on navy, blue on paper/white ---------------------------------------------------------- */
.wgm-shell a:focus-visible, .wgm-shell button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.wgm-shell .site-header a:focus-visible, .wgm-shell .site-header button:focus-visible, .ac-top a:focus-visible, .ac-lic a:focus-visible, .ac-lic button:focus-visible, .ac-nav a.is-active:focus-visible { outline-color: var(--yellow); }
.ac-lic .ac-nokey a:focus-visible, .ac-help a:focus-visible { outline-color: var(--navy); }

/* ---- smaller screens -------------------------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.ac-grid > .woocommerce > .woocommerce-notices-wrapper { grid-column: auto; }
	.ac-endpoint .woocommerce-Addresses, .ac-endpoint .col2-set { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
	.ac-login { margin-top: -48px; }
	.ac-endpoint table.shop_table_responsive tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
	/* WooCommerce's smallscreen.css hides `tbody th` — that is the order number on the Orders table. */
	.wgm-shell-ac .ac-endpoint table.shop_table_responsive tbody th { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border: 0; text-align: right; }
	.ac-endpoint table.shop_table_responsive tbody th::before { content: attr(data-title); font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: left; font-weight: 600; }
	.ac-endpoint table.shop_table_responsive td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border: 0; text-align: right; }
	.ac-endpoint table.shop_table_responsive td::before { content: attr(data-title); font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: left; float: none; }
	.ac-endpoint table.shop_table_responsive thead { display: none; }
	.wgm-shell-ac .woocommerce form .form-row-first, .wgm-shell-ac .woocommerce form .form-row-last { display: block; width: auto; margin-right: 0; }
}