/* ───────────────────────────────────────────────────────────
   Account bar — site-wide logged-in indicator + account menu.
   Rendered by include/account-bar.php into every page header.
   Works in two header contexts:
     • dark headers  (.header-content — home, checkout, info pages)
     • white headers (header_logo + cart — product/editor pages)
   Right-aligns via margin-left:auto. Frame-group headers
   (canvas/acrylic/frame) override this to 0 in their own CSS,
   because they right-align the cart with a centered #product_summary.
   ─────────────────────────────────────────────────────────── */

.account-menu {
    position: relative;
    margin-left: auto;
    align-self: center;
    /* negative vertical margin cancels the trigger padding's effect on header height */
    margin-top: -6px;
    margin-bottom: -6px;
    flex-shrink: 0;
    font-family: "Signika Negative", sans-serif;
    font-weight: 400;
}

/* ── trigger (icon-only button) ── */
.account-menu .am-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    border: none;
    background: transparent;
    color: #1a1a1a;
    padding: 6px;
    border-radius: 999px;
    line-height: 0;
    transition: background-color 0.2s, color 0.2s;
}
.account-menu .am-trigger:hover { color: #f58a00; }
.account-menu .am-trigger svg { width: 26px; height: 26px; flex-shrink: 0; }

/* green "logged-in" status dot on the account icon */
.account-menu .am-dot {
    position: absolute;
    top: 3px;
    right: 3px;
    box-sizing: border-box; /* pin: order-main.css lacks the universal *{border-box} the other pages set */
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #15803d;
    border: 2px solid #fff;
}
/* dot's ring blends with each header background */
.header-content .account-menu .am-dot { border-color: #1a1a1a; }

/* dark-header context: white icon, lighter hover */
.header-content .account-menu .am-trigger { color: #fff; }
.header-content .account-menu .am-trigger:hover { color: #f58a00; }
/* reset the oversized inherited header font inside dark headers */
.header-content .account-menu { font-size: 1rem; font-weight: 400; }

/* ── dropdown ── */
.account-menu .am-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    background: #fff;
    color: #1a1a1a;
    border: 1px solid #e2e2e2;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
    min-width: 220px;
    padding: 6px;
    display: none;
    z-index: 200;
    text-align: left;
}
.account-menu.open .am-menu { display: block; }

.account-menu .am-meta {
    padding: 10px 12px 12px;
    border-bottom: 1px solid #eee;
    margin-bottom: 4px;
}
.account-menu .am-meta b { display: block; font-size: 0.95rem; font-weight: 600; }
.account-menu .am-meta span { font-size: 0.78rem; color: #888; word-break: break-all; }

.account-menu .am-menu a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: #1a1a1a;
    font-size: 0.9rem;
    cursor: pointer;
}
.account-menu .am-menu a svg { width: 17px; height: 17px; opacity: 0.8; flex-shrink: 0; }
.account-menu .am-menu a:hover { background: #f4f4f5; }
.account-menu .am-menu a.am-logout { color: #c0392b; }
.account-menu .am-menu a.am-logout:hover { background: #fdeceb; }

/* On headers that right-align the cart with margin-left:auto (card group,
   print group), the cart would split the free space with the account control
   and leave the account icon mid-row. When the account control sits right
   before the cart, give the cart a fixed gap so ONLY the account control
   absorbs the free space — keeping the account + cart cluster on the right. */
.account-menu + .header_icon_cart { margin-left: 15px; }

/* vertically center the cart icon so it lines up with the account control
   (the cart anchor renders its SVG inline/top-aligned by default) */
header .header_icon_cart {
    display: flex;
    align-items: center;
    align-self: center;
    position: relative;
    padding: 6px;
    /* negative vertical margin cancels the padding's effect on header height */
    margin-top: -6px;
    margin-bottom: -6px;
    border-radius: 999px;
    transition: background-color 0.2s;
}
header .header_icon_cart svg { display: block; width: 28px; height: 28px; stroke: #1a1a1a; transition: stroke 0.2s; }
header .header_icon_cart:hover svg { stroke: #f58a00; fill: none; }

/* cart count badge: a real circle pinned to the bag's top-right corner
   (the per-page CSS positions it with left:75%, tuned for the old basket).
   `display` is left to the per-page CSS + JS so it still hides at 0. */
header .header_icon_cart span {
    left: auto;
    right: 3px;
    top: 3px;
    transform: none;
    margin: 0;
    box-sizing: border-box;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    border-radius: 999px;
    background-color: #222;
    color: #fff;
}

/* ───────────────────────────────────────────────────────────
   Login / register popup (logged-out account menu).
   A wider dropdown that mirrors the checkout auth flow.
   ─────────────────────────────────────────────────────────── */
.account-menu .am-auth {
    width: 300px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    padding: 14px;
}

/* tabs */
.am-auth .am-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    background: #f4f4f5;
    border-radius: 9px;
    padding: 4px;
}
.am-auth .am-tab {
    flex: 1;
    border: none;
    background: transparent;
    border-radius: 7px;
    padding: 8px 0;
    font: inherit;
    font-size: 0.85rem;
    color: #666;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}
.am-auth .am-tab.active { background: #fff; color: #1a1a1a; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }

/* views */
.am-auth .am-view { display: none; }
.am-auth .am-view.active { display: block; }

.am-auth .am-section { margin-bottom: 12px; }
.am-auth .am-section h3 { margin: 0 0 4px; font-size: 0.92rem; font-weight: 600; color: #1a1a1a; }
.am-auth .am-section p { margin: 0; font-size: 0.78rem; color: #888; line-height: 1.4; }

/* floating-label fields */
.am-auth .am-field { position: relative; margin-bottom: 9px; }
.am-auth .am-field-row { display: flex; gap: 9px; }
.am-auth .am-field-row .am-field { flex: 1; }
.am-auth .am-field-sm { max-width: 110px; }
.am-auth .am-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 16px 11px 6px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font: inherit;
    font-size: 0.88rem;
    color: #1a1a1a;
    background: #fff;
    transition: border-color 0.15s;
}
.am-auth .am-field input:focus { outline: none; border-color: #f58a00; }
.am-auth .am-field input.am-invalid { border-color: #c0392b; background: #fdf3f2; }
.am-auth .am-field label {
    position: absolute;
    left: 11px;
    top: 11px;
    font-size: 0.88rem;
    color: #999;
    pointer-events: none;
    transition: top 0.13s, font-size 0.13s, color 0.13s;
}
.am-auth .am-field input:focus + label,
.am-auth .am-field input:not(:placeholder-shown) + label {
    top: 5px;
    font-size: 0.64rem;
    color: #f58a00;
}

/* company / privatperson toggle */
.am-auth .am-type-toggle {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    background: #f4f4f5;
    border-radius: 9px;
    padding: 4px;
}
.am-auth .am-type-btn {
    flex: 1;
    border: none;
    background: transparent;
    border-radius: 7px;
    padding: 7px 0;
    font: inherit;
    font-size: 0.8rem;
    color: #666;
    cursor: pointer;
}
.am-auth .am-type-btn.active { background: #fff; color: #1a1a1a; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }

/* primary button + link row */
.am-auth .am-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
}
.am-auth .am-row:only-child,
.am-auth .am-row.am-row-right { justify-content: flex-end; }
.am-auth .am-btn {
    border: none;
    background: #f58a00;
    color: #fff;
    border-radius: 8px;
    padding: 10px 18px;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s;
}
.am-auth .am-btn:hover { background: #d97900; }
.am-auth .am-link {
    color: #666;
    font-size: 0.8rem;
    text-decoration: none;
    cursor: pointer;
}
.am-auth .am-link:hover { color: #f58a00; text-decoration: underline; }

/* alert + info boxes */
.am-auth .am-alert {
    color: #c0392b;
    font-size: 0.78rem;
    line-height: 1.4;
}
.am-auth .am-alert:not(:empty) { margin-top: 8px; }
.am-auth .am-info-box {
    margin-top: 10px;
    padding: 10px 12px;
    background: #f4f4f5;
    border-radius: 8px;
    font-size: 0.8rem;
    color: #555;
}
.am-auth .am-info-box .am-link { display: inline-block; margin-top: 6px; }

/* ───────────────────────────────────────────────────────────
   Landscape sidebar: the product-page header collapses to a narrow
   fixed column on the left with the account control near the bottom.
   The default dropdown (opens downward, right-aligned) would spill off
   the bottom/left edge there, so open it to the RIGHT of the sidebar and
   anchor it to the bottom so it grows upward and stays on screen.
   Scoped to `header > .account-menu` (the product sidebars) — the dark
   top-bar pages nest the menu in .header-content and keep the default.
   ─────────────────────────────────────────────────────────── */
@media screen and (orientation: landscape) and (max-height: 500px) {
  header > .account-menu .am-menu {
    top: auto;
    bottom: 0;
    right: auto;
    left: calc(100% + 10px);
  }
}