/* ============================================================
   Panelino Pro - front-end auth modal & profile UI.
   RTL-first; tokens at the top let host themes recolor easily.
   ============================================================ */

:root {
    --panelino-bg: #ffffff;
    --panelino-fg: #1d2433;
    --panelino-muted: #6b7280;
    --panelino-border: #e5e7eb;
    --panelino-input-bg: #f9fafb;
    --panelino-primary: #2563eb;
    --panelino-primary-hover: #1d4ed8;
    --panelino-primary-fg: #ffffff;
    --panelino-success: #16a34a;
    --panelino-danger: #dc2626;
    --panelino-radius: 14px;
    --panelino-shadow: 0 20px 50px -12px rgba(15, 23, 42, .25);
    --panelino-font: inherit;
}

/* --- Modal shell ----------------------------------------- */
.panelino-modal { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; padding: 16px; font-family: var(--panelino-font); direction: rtl; }
.panelino-modal[aria-hidden="false"] { display: flex; animation: panelino-fade .2s ease-out; }
.panelino-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); backdrop-filter: blur(4px); }
.panelino-modal__card {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--panelino-bg);
    color: var(--panelino-fg);
    border-radius: var(--panelino-radius);
    padding: 28px 26px 24px;
    box-shadow: var(--panelino-shadow);
    animation: panelino-pop .25s cubic-bezier(.22, 1, .36, 1);
}
@keyframes panelino-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes panelino-pop  { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }

.panelino-modal__close {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    border: 0;
    background: transparent;
    color: var(--panelino-muted);
    width: 36px; height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}
.panelino-modal__close:hover { background: var(--panelino-input-bg); color: var(--panelino-fg); }

.panelino-modal__title {
    font-size: 20px;
    font-weight: 700;
    margin: 4px 0 6px;
    text-align: center;
}

/* --- Stepper --------------------------------------------- */
.panelino-stepper { display: flex; gap: 6px; justify-content: center; padding: 0; margin: 0 0 20px; list-style: none; }
.panelino-stepper__dot { width: 24px; height: 4px; border-radius: 2px; background: var(--panelino-border); transition: background .25s; }
.panelino-stepper__dot.is-active { background: var(--panelino-primary); }
.panelino-stepper__dot.is-done   { background: var(--panelino-success); }

/* --- Steps ----------------------------------------------- */
.panelino-step { display: none; flex-direction: column; gap: 14px; animation: panelino-slide .22s ease-out; }
.panelino-step.is-active { display: flex; }
@keyframes panelino-slide { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

.panelino-step__hint { color: var(--panelino-muted); margin: 0; font-size: 14px; line-height: 1.7; text-align: center; }
.panelino-step__hint strong { color: var(--panelino-fg); margin-inline-start: 4px; }
.panelino-step__actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 4px; }

/* --- Fields ---------------------------------------------- */
.panelino-field { display: flex; flex-direction: column; gap: 6px; position: relative; }
.panelino-field__label { font-size: 13px; color: var(--panelino-muted); }
.panelino-field input {
    appearance: none;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1.5px solid var(--panelino-border);
    border-radius: 10px;
    background: var(--panelino-input-bg);
    color: var(--panelino-fg);
    font-size: 16px;
    font-family: inherit;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.panelino-field input:focus {
    outline: none;
    border-color: var(--panelino-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.panelino-field input.is-invalid { border-color: var(--panelino-danger); box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }

.panelino-field--otp input { letter-spacing: 8px; text-align: center; font-size: 22px; font-weight: 600; padding: 14px 12px; }
.panelino-field--password { position: relative; }
.panelino-field__eye {
    position: absolute;
    inset-inline-end: 10px;
    bottom: 8px;
    border: 0;
    background: transparent;
    color: var(--panelino-muted);
    width: 36px; height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.panelino-field__eye:hover { color: var(--panelino-fg); }

/* --- Buttons --------------------------------------------- */
.panelino-btn {
    appearance: none;
    border: 0;
    cursor: pointer;
    padding: 12px 18px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    font-family: inherit;
    transition: background .15s, transform .05s, box-shadow .15s;
}
.panelino-btn--primary {
    background: var(--panelino-primary);
    color: var(--panelino-primary-fg);
    box-shadow: 0 6px 16px -8px rgba(37, 99, 235, .55);
}
.panelino-btn--primary:hover  { background: var(--panelino-primary-hover); }
.panelino-btn--primary:active { transform: translateY(1px); }
.panelino-btn[disabled] { opacity: .55; cursor: not-allowed; }

.panelino-link {
    background: transparent;
    border: 0;
    color: var(--panelino-primary);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    padding: 8px 4px;
    text-decoration: none;
}
.panelino-link:hover:not([disabled]) { text-decoration: underline; }
.panelino-link[disabled] { color: var(--panelino-muted); cursor: not-allowed; }

/* --- Feedback / loader / success ------------------------- */
.panelino-modal__feedback { min-height: 0; transition: min-height .15s; }
.panelino-modal__feedback.is-error,
.panelino-modal__feedback.is-success {
    margin: -8px 0 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
    min-height: 20px;
}
.panelino-modal__feedback.is-error   { background: #fef2f2; color: var(--panelino-danger); border: 1px solid #fecaca; }
.panelino-modal__feedback.is-success { background: #f0fdf4; color: var(--panelino-success); border: 1px solid #bbf7d0; }

.panelino-modal__loader {
    position: absolute; inset: 0;
    background: rgba(255, 255, 255, .8);
    border-radius: var(--panelino-radius);
    display: flex; align-items: center; justify-content: center;
    z-index: 5;
}
.panelino-spinner {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 3px solid var(--panelino-border);
    border-top-color: var(--panelino-primary);
    animation: panelino-spin .8s linear infinite;
}
@keyframes panelino-spin { to { transform: rotate(360deg); } }

.panelino-step--done { align-items: center; text-align: center; padding: 16px 0; }
.panelino-success    { color: var(--panelino-success); display: inline-flex; }
.panelino-success svg { animation: panelino-pop .35s cubic-bezier(.22,1,.36,1); }

/* --- Login button + user chip ---------------------------- */
.panelino-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    background: var(--panelino-primary);
    color: var(--panelino-primary-fg) !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 14px;
    transition: background .15s, transform .05s;
}
.panelino-trigger:hover  { background: var(--panelino-primary-hover); }
.panelino-trigger:active { transform: translateY(1px); }
.panelino-trigger img    { width: 18px; height: 18px; border-radius: 50%; }

.panelino-user-chip { position: relative; display: inline-block; direction: rtl; }
.panelino-user-chip__btn {
    appearance: none; border: 1px solid var(--panelino-border);
    background: var(--panelino-bg); color: var(--panelino-fg);
    border-radius: 999px;
    padding: 4px 12px 4px 6px;
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer; font: inherit; font-size: 14px;
    transition: background .15s, border-color .15s;
}
.panelino-user-chip__btn:hover { background: var(--panelino-input-bg); border-color: #d1d5db; }
.panelino-user-chip__avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(135deg, var(--panelino-primary), #6366f1);
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px;
}
.panelino-user-chip__menu {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 8px);
    list-style: none !important;
    padding: 6px !important;
    margin: 0 !important;
    min-width: 220px;
    max-width: 280px;
    background: #fff;
    border: 1px solid var(--panelino-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px -10px rgba(15, 23, 42, .25);
    display: none;
    z-index: 99;
    text-align: start;
}
.panelino-user-chip.is-open .panelino-user-chip__menu { display: block; }

/* Beat host-theme li selectors that turn dropdown items into a flex/inline row. */
.panelino-user-chip__menu > li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    float: none !important;
    background: transparent !important;
    border: 0 !important;
}
.panelino-user-chip__menu > li::before,
.panelino-user-chip__menu > li::after { content: none !important; }

.panelino-user-chip__menu > li > a {
    display: block !important;
    width: auto !important;
    padding: 9px 12px !important;
    border-radius: 8px;
    color: var(--panelino-fg) !important;
    background: transparent !important;
    text-decoration: none !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    text-align: start !important;
    transition: background .15s, color .15s;
}
.panelino-user-chip__menu > li > a:hover,
.panelino-user-chip__menu > li > a:focus {
    background: var(--panelino-input-bg) !important;
    color: var(--panelino-fg) !important;
    text-decoration: none !important;
}
.panelino-user-chip__sep {
    display: block !important;
    height: 1px !important;
    background: var(--panelino-border) !important;
    margin: 6px 4px !important;
    padding: 0 !important;
}
.panelino-user-chip__menu > li > a.panelino-user-chip__logout,
.panelino-user-chip__logout {
    color: var(--panelino-danger) !important;
}
.panelino-user-chip__menu > li > a.panelino-user-chip__logout:hover {
    background: #fef2f2 !important;
}

/* --- Profile page ---------------------------------------- */
.panelino-profile { direction: rtl; }
.panelino-profile__layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }
@media (max-width: 768px) { .panelino-profile__layout { grid-template-columns: 1fr; } }

.panelino-profile__sidebar {
    background: #fff;
    border: 1px solid var(--panelino-border);
    border-radius: var(--panelino-radius);
    padding: 18px;
}
.panelino-profile__user { text-align: center; padding: 8px 0 16px; border-bottom: 1px solid var(--panelino-border); margin-bottom: 12px; }
.panelino-profile__avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--panelino-primary), #6366f1);
    color: #fff; font-weight: 700; font-size: 24px;
}
.panelino-profile__name { margin-top: 8px; font-weight: 600; }

.panelino-profile__menu { list-style: none; padding: 0; margin: 0; }
.panelino-profile__menu a {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--panelino-fg);
    text-decoration: none;
    font-size: 14px;
    transition: background .15s;
}
.panelino-profile__menu a:hover { background: var(--panelino-input-bg); }
.panelino-profile__menu a.is-active { background: var(--panelino-primary); color: #fff; }
.panelino-profile__menu-sep { height: 1px; background: var(--panelino-border); margin: 8px 4px; }
.panelino-profile__logout { color: var(--panelino-danger) !important; }

.panelino-profile__body {
    background: #fff;
    border: 1px solid var(--panelino-border);
    border-radius: var(--panelino-radius);
    padding: 24px;
    min-height: 320px;
}
.panelino-profile__title { margin: 0 0 18px; font-size: 20px; }

.panelino-notice {
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--panelino-input-bg);
    color: var(--panelino-muted);
    text-align: center;
}