/* ABOUTME: Self-contained styles for the storefront login modal and its header trigger button.
   ABOUTME: Loaded after style.css so #loginModal-scoped rules win over the legacy Bootstrap 3 overrides. */

/* ---- Header trigger (logged-out): plain link + button, no legacy gray box ---- */
.lp-login-trigger {
    float: right;
    margin: 0;
    padding: 16px 4px;
    text-align: right;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1;
}
.lp-login-trigger > a {
    text-decoration: none;
    margin-right: 12px;
    vertical-align: middle;
}
.lp-login-trigger .btn {
    vertical-align: middle;
}
.lp-login-trigger .eroare {
    display: block;
    margin-bottom: 6px;
}

/* ---- Login modal: dialog on desktop, themed to match the site's other modals ---- */
#loginModal .modal-dialog {
    width: 440px;
    max-width: 94%;
}
#loginModal .modal-content {
    border: none;
    border-radius: 6px;
    overflow: hidden;                 /* clip the colored header to the rounded corners */
    box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
}

/* header bar — the lechpol section-header blue (matches .titluri / panel headings) */
#loginModal .modal-header {
    background-color: #04519b;
    background-image: linear-gradient(#04519b, #033c73 60%, #02325f);
    padding: 13px 18px;
    border-bottom: none;
    min-height: 0;
}
#loginModal .modal-title {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
}
#loginModal .modal-header .close {
    color: #fff;
    opacity: .85;
    text-shadow: none;
    font-size: 24px;
    margin-top: 1px;
    line-height: 1;
}
#loginModal .modal-header .close:hover {
    opacity: 1;
}

/* body */
#loginModal .modal-body {
    padding: 20px 18px 8px;
}
#loginModal .form-group {
    margin-bottom: 16px;
}
#loginModal .modal-body label {
    display: block;
    color: #555;
    font-weight: 600;
    font-size: 13px;
    text-align: left;
    margin: 0 0 6px;
}
#loginModal .form-control {
    height: auto;
    padding: 9px 12px;                /* override legacy #loginform input{padding:0} so the cursor clears the border */
    font-size: 15px;
    box-shadow: none;
}
#loginModal .alert {
    margin-bottom: 16px;
    padding: 10px 12px;
    font-size: 14px;
    text-align: center;
}

/* footer */
#loginModal .modal-footer {
    padding: 4px 18px 18px;
    border-top: none;
    text-align: center;
}
#loginModal .modal-footer .btn-primary {
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
}

/* The theme only swaps background-color on :hover but leaves the gradient painted on top, so the
   hover looks dead — darken the gradient itself (matching the theme's #178acc hover) for feedback. */
#loginModal .btn-primary:hover,
#loginModal .btn-primary:focus,
.lp-login-trigger .btn-primary:hover,
.lp-login-trigger .btn-primary:focus {
    background-image: linear-gradient(#2fa4e7, #178acc 60%, #1684c2);
    border-color: #1684c2;
    color: #fff;
}
#loginModal .modal-footer .text-center {
    margin-top: 14px;
    font-size: 13px;
}
#loginModal .modal-footer .text-center a {
    text-decoration: none;
}

/* ---- Gate steps (reset / enroll / verify) ---- */
#loginModal.lp-step-enroll .modal-dialog {
    width: 500px;
}
#loginModal .lp-gate-info {
    text-align: center;
    font-size: 15px;
    color: #555;
    margin: 0 0 14px;
}
#loginModal .lp-gate-muted {
    font-size: 12px;
    color: #888;
    line-height: 1.5;
}
#loginModal .lp-qr {
    width: 180px;
    height: 180px;
    margin: 8px auto 12px;
}
#loginModal .lp-qr img,
#loginModal .lp-qr canvas {
    margin: 0 auto;
}
#loginModal .lp-remember {
    display: block;
    font-weight: normal;
    margin: 2px 0 0;
}

/* ---- Desktop: vertically center the short steps (ghost-element trick, Bootstrap-3 safe).
   The tall enrollment step is left top-aligned so Bootstrap scrolls it naturally if it ever
   exceeds the viewport, instead of clipping the top. ---- */
@media (min-width: 768px) {
    #loginModal:not(.lp-step-enroll) {
        text-align: center;
        white-space: nowrap;
    }
    #loginModal:not(.lp-step-enroll):before {
        content: "";
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        margin-right: -4px;
    }
    #loginModal:not(.lp-step-enroll) .modal-dialog {
        display: inline-block;
        vertical-align: middle;
        text-align: left;
        white-space: normal;
    }
}

/* ---- Phones: slide-up bottom sheet ---- */
@media (max-width: 767px) {
    /* Short steps slide up as a bottom sheet. The enrollment step is too tall for a fixed sheet
       (the code field would strand behind the pinned button), so it stays a normal scrollable
       modal that the whole .modal scrolls. */
    #loginModal:not(.lp-step-enroll) .modal-dialog {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
    #loginModal:not(.lp-step-enroll) .modal-content {
        border-radius: 14px 14px 0 0;
    }
    #loginModal:not(.lp-step-enroll).fade .modal-dialog {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        -webkit-transition: -webkit-transform .25s ease-out;
        transition: transform .25s ease-out;
    }
    #loginModal:not(.lp-step-enroll).in .modal-dialog {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    /* a fixed-position sheet can't grow past the screen top, so scroll the body instead */
    #loginModal:not(.lp-step-enroll) .modal-body {
        max-height: 70vh;
        overflow-y: auto;
    }
    #loginModal.lp-step-enroll .modal-dialog {
        width: auto;
        margin: 8px;
    }
}

/* ---- Enroll step: passkey-or-app choice ---- */
#loginModal .lp-enroll-passkey .btn {
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
}
#loginModal .lp-enroll-passkey .glyphicon {
    margin-right: 6px;
}
#loginModal .lp-enroll-or {
    text-align: center;
    border-bottom: 1px solid #e2e2e2;
    line-height: 0.1em;
    margin: 18px 0 16px;
}
#loginModal .lp-enroll-or span {
    background: #fff;
    padding: 0 10px;
    color: #999;
    font-size: 13px;
}
/* No WebAuthn support (set on <html> by js/webauthn.js) → only the authenticator-app path is shown. */
.no-webauthn #loginModal .lp-enroll-passkey {
    display: none;
}

/* ---- Verify step: passkey call-to-action + code fallback ---- */
#loginModal .lp-passkey-cta {
    margin-bottom: 10px;
}
#loginModal .lp-passkey-cta .btn,
#loginModal .lp-verify-submit {
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
}
#loginModal .lp-passkey-cta .glyphicon {
    margin-right: 6px;
}
#loginModal .lp-use-code-wrap {
    margin-top: 10px;
    font-size: 13px;
}
#loginModal .lp-use-code-wrap a {
    text-decoration: none;
}
.lp-passkey-msg {
    margin-top: 8px;
    font-size: 13px;
    color: #555;
}
.lp-passkey-msg.lp-passkey-error {
    color: #a94442;
}
/* Passkey-only account on a browser without WebAuthn: hide the inert passkey button and explain,
   so the user isn't left tapping a dead control with no code fallback. Driven by the .no-webauthn
   class js/webauthn.js sets on <html> when the API is missing. */
.lp-passkey-nowebauthn {
    display: none;
    margin-top: 10px;
    font-size: 13px;
    color: #a94442;
}
.no-webauthn #loginModal .lp-passkey-cta .btn { display: none; }
.no-webauthn .lp-passkey-nowebauthn { display: block; }

/* ---- Security page: view/securitate.php authenticator list + add forms ---- */
.lp-sec-body {
    padding: 16px 18px 26px;
}
.lp-sec-h {
    font-weight: bold;
    color: #333;
    margin: 18px 0 10px;
}
.lp-factor {
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 10px;
    background: #fafafa;
}
.lp-factor-main .glyphicon {
    color: #04519b;
    margin-right: 8px;
}
.lp-factor-name {
    font-size: 15px;
}
.lp-factor .label {
    margin-left: 8px;
    vertical-align: middle;
}
.lp-factor-meta {
    color: #888;
    font-size: 12px;
    margin-top: 4px;
}
.lp-factor-actions {
    margin-top: 8px;
}
.lp-inline-form {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #ddd;
}
.lp-inline-form .form-control {
    display: inline-block;
    width: auto;
    max-width: 240px;
    vertical-align: middle;
    margin-right: 6px;
}
.lp-inline-label {
    display: block;
    font-size: 12px;
    color: #777;
    margin-bottom: 4px;
}
.lp-add-block {
    margin: 16px 0;
}
.lp-add-block .btn {
    margin: 0 6px 8px 0;
}
.lp-passkey-row {
    margin-top: 4px;
}
.lp-passkey-row .form-control {
    max-width: 280px;
}
.lp-add-totp {
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    padding: 16px;
    max-width: 420px;
    background: #fff;
}
.lp-add-totp .lp-qr {
    width: 180px;
    height: 180px;
    margin: 4px auto 12px;
}
.lp-add-totp .lp-qr img,
.lp-add-totp .lp-qr canvas {
    margin: 0 auto;
}

/* ============================================================================
   Mobile header (<= 767px). Turns the legacy float-pile top bar into clean
   stacked rows: a single "Cont" account dropdown, a tidy language/currency/cart
   utility row, finger-sized nav buttons, and a discoverable logged-out
   login/register. Plus login/2FA-modal + Securitate touch polish. Everything
   here is scoped to phones; the >= 768px desktop layout is untouched.
   ============================================================================ */
@media (max-width: 767px) {

    /* ---- Logged-in top bar: stack the floated columns into rows ---- */
    .logare {
        float: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;   /* right-anchor the logged-out flags/currency row (logged-in still uses .cos margin-left:auto) */
        width: 100%;
        padding: 4px 8px;
    }
    .login2 {
        order: 1;
        flex: 0 0 100%;
        float: none;
        margin: 2px 0;
        padding: 0;
        border: 0;
        background: transparent;
        text-align: right;
    }
    .credit-bar {
        order: 2;
        flex: 0 0 100%;
        float: none;
        width: 100% !important;
        clear: both;
        margin: 4px 0;
        min-width: 0;
    }
    .steaguri { order: 3; padding: 0; }
    #valuta   { order: 4; margin-left: 8px; margin-right: 0; padding: 0; }
    .cos      { order: 5; margin-left: auto; clear: none; }
    .steaguri, #valuta, .cos {
        float: none;
        width: auto;
        margin-top: 4px;
        margin-bottom: 4px;
    }

    /* Account dropdown: the button carries the (truncated) user name */
    .lp-acct { text-align: right; }
    .lp-acct .lp-acct-name {
        display: inline-block;
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }
    .lp-acct .glyphicon-user { margin-right: 2px; }
    .lp-acct .dropdown-menu a { padding: 11px 16px; font-size: 14px; }
    .lp-acct .dropdown-menu .glyphicon { margin-right: 8px; width: 16px; text-align: center; }

    /* Cart: drop the text labels, keep the icons + count badge (matches the row) */
    .cos .cosul-meu, .cos .precomanda-mea { display: none; }
    .cos .icon, .cos .precomanda-icon { font-size: 26px; vertical-align: middle; }
    .cos .cos-derulant-exterior { margin-right: 14px; }

    /* ---- Blue nav bar: even, finger-sized buttons instead of a float pile ---- */
    .navbar-header.visible-xs-inline-block {
        display: flex !important;          /* beat Bootstrap's .visible-xs-inline-block inline-block !important */
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
        padding: 2px 6px;
    }
    .navbar-header.visible-xs-inline-block .btn,
    .navbar .navbar-toggle {
        float: none;
        margin: 4px 0;
        min-width: 44px;
        min-height: 40px;
        line-height: 1;
        padding: 10px 12px;
    }
    .navbar .navbar-toggle { order: 99; }
    /* the empty <a.navbar-brand> would otherwise be a stray ~30px-padded flex item in the button row */
    .navbar-header.visible-xs-inline-block .navbar-brand { display: none; }
    /* the per-button #id rules carry float:right at id specificity — beat them by id too */
    #buton-newsletter-smartphone, #buton-filtre-smartphone, #buton-categorii-smartphone,
    #buton-cautare-smartphone, #buton-logare-smartphone, #buton-inregistrare-smartphone {
        float: none;
        margin-right: 0;
    }

    /* Logged-out: labeled buttons; login reads as the primary action, placed first */
    #buton-logare-smartphone { order: -2; }
    #buton-inregistrare-smartphone { order: -1; }
    .lp-nav-login, .lp-nav-register { width: auto; }
    .lp-nav-label { display: inline; margin-left: 5px; font-weight: bold; }
    .lp-nav-login { background-color: #04519b; border-color: #04519b; }
    .lp-nav-login:hover, .lp-nav-login:focus { background-color: #033c73; border-color: #033c73; }

    /* Collapsed hamburger menu: roomier, tappable links */
    .navbar-collapse .nav > li > a { padding: 12px 16px; font-size: 15px; }
    .navbar-collapse .dropdown-menu > li > a { padding: 10px 24px; font-size: 14px; white-space: normal; }

    /* ---- News carousel arrows: bigger touch target ---- */
    .carousel-control { width: 36px; opacity: .9; }
    .carousel-control .glyphicon-chevron-left,
    .carousel-control .glyphicon-chevron-right { top: 45%; font-size: 22px; margin-top: -11px; }

    /* ---- Login / 2FA modal polish ---- */
    #loginModal #loginform .form-control { margin-left: 0; margin-right: 0; }   /* kill legacy 30px inset */
    #loginModal:not(.lp-step-enroll) .modal-content { padding-bottom: env(safe-area-inset-bottom); }
    #loginModal.lp-step-enroll .modal-dialog { margin: 8px auto; width: auto; max-width: 100%; }
    #loginModal.lp-step-enroll .lp-qr,
    #loginModal.lp-step-enroll .lp-qr img,
    #loginModal.lp-step-enroll .lp-qr canvas { width: 150px; height: 150px; }
    #loginModal .lp-use-code-wrap { margin-top: 14px; }
    #loginModal .lp-use-code-wrap a { display: inline-block; padding: 10px 12px; }
    #loginModal .lp-remember { min-height: 44px; display: flex; align-items: center; }
    #loginModal .lp-login-links a { display: inline-block; padding: 8px 6px; }

    /* ---- Securitate page: stack the inline forms, finger-sized buttons ---- */
    .lp-sec-body { padding: 14px 12px 22px; }
    .lp-add-block .btn { display: block; width: 100%; margin: 0 0 8px; }
    .lp-passkey-row .form-control { width: 100%; max-width: none; }
    .lp-inline-form .form-control { display: block; width: 100%; max-width: none; margin: 0 0 8px; }
    .lp-inline-form .btn, .lp-add-totp .btn[type="submit"] { display: block; width: 100%; }
    .lp-factor-actions .btn { min-height: 40px; padding: 8px 14px; }
}