/* =============================================================================
   SO.Blazor.Components.Radzen — Component Stylesheet
   Include in the host app: <link href="_content/SO.Blazor.Components.Radzen/so-rz.css" rel="stylesheet" />
   Override variables per-app in your own app.css / site.css.
   ============================================================================= */

/* ── CSS Custom Properties (overridable per app) ─────────────────────────── */
:root {
    --so-backdrop-z:     999;
    --so-dropdown-z:     1000;
    --so-toast-z:        2000;
    --so-logo-h:         30px;
    --so-logo-max-w:     120px;
    --so-avatar-size:    34px;
    --so-form-max-width: 480px;
    --so-card-bg:        var(--rz-base-200, #e9ecef);
    --so-icon-bg:        var(--rz-primary, #338ef7);
}

/* ── Shared text utilities ───────────────────────────────────────────────── */
.so-text-reset     { margin: 0; }
.so-text-secondary { color: var(--rz-text-secondary-color); margin: 0; }
.so-text-ellipsis  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-header-icon    { font-size: 1.15rem; line-height: 1; }

/* ── AppHeader ───────────────────────────────────────────────────────────── */
.header-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    padding: 0 .5rem;
    background-color: var(--so-header-bg, var(--rz-primary, #338ef7));
    color: var(--so-header-fg, #fff);
}
.header-title {
    color: var(--so-header-fg, #fff);
    font-size: .95rem;
    letter-spacing: .01em;
}
.header-btn {
    background: transparent;
    border: none;
    color: var(--so-header-fg, #fff);
    padding: .4rem .5rem;
    border-radius: 6px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.header-btn:hover { background: rgba(255,255,255,.14); }
.so-header-logo {
    height: var(--so-logo-h);
    max-width: var(--so-logo-max-w);
    object-fit: contain;
    border-radius: 4px;
}
.so-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--so-backdrop-z);
}
.so-user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: var(--so-dropdown-z);
    min-width: 220px;
}
.so-user-name { font-size: .92rem; }
.so-user-nr   { font-size: .75rem; opacity: .7; }
.user-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--so-avatar-size); height: var(--so-avatar-size);
    border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, #6366f1, #338ef7);
    color: #fff; font-size: .75rem; font-weight: 700;
    border: 2px solid rgba(255,255,255,.3);
}
.user-avatar--lg { width: 44px; height: 44px; font-size: 1rem; }
.user-dropdown-card {
    background: var(--rz-panel-background-color, #fff);
    border: 1px solid var(--rz-border-color, #e4e4e7);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    width: 240px;
    overflow: hidden;
}
.user-dropdown-header {
    display: flex; align-items: center; gap: .75rem;
    padding: 1rem 1.1rem .8rem;
    background: linear-gradient(135deg, #338ef7, #6366f1);
    color: #fff;
}
.user-dropdown-body {
    padding: .7rem 1.1rem .9rem;
    display: flex; flex-direction: column; gap: .5rem;
}
.user-info-row {
    display: flex; align-items: center; gap: .6rem;
    font-size: .83rem;
    color: var(--rz-text-color, #3f3f46);
}

/* ── FormCard ────────────────────────────────────────────────────────────── */
.so-form-outer {
    display: flex;
    justify-content: center;
    width: 100%;
}
.so-form-card {
    width: 100%;
    overflow: hidden;
    max-width: var(--so-form-max-width);
    overflow: visible !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.so-form-card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
    padding: 1.5rem 1.5rem 0.5rem;
    border-bottom: 1px solid var(--rz-border-disabled-color);
}
.so-form-card-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.so-form-card-icon { font-size: 2rem; line-height: 1; }

/* ── PageHeader ──────────────────────────────────────────────────────────── */
.so-page-header {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 1.25rem;
}
.so-page-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0;
}
.so-page-header-actions { margin-top: 0.5rem; }

/* ── PageIconHeader ──────────────────────────────────────────────────────── */
.so-icon-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}
.so-icon-header-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 10px;
    flex-shrink: 0;
    background: var(--so-icon-bg);
}
.so-icon-header-icon  { color: #fff; font-size: 1.5rem; }
.so-icon-header-text  { display: flex; flex-direction: column; gap: 0.1rem; }
.so-icon-header-title { font-size: 1.3rem; font-weight: 600; margin: 0; }

/* ── State components (Empty, Success, Loading) ──────────────────────────── */
.so-empty-state,
.so-success-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    text-align: center;
    width: 100%;
}
.so-empty-icon,
.so-success-icon { font-size: 3rem; line-height: 1; }
.so-empty-icon   { opacity: .7; }
.so-empty-message {
    color: var(--rz-text-secondary-color);
    max-width: 320px;
}
.so-loading-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    width: 100%;
}
.so-loading-text { font-size: 0.9rem; color: var(--rz-text-tertiary-color); }

/* ── Toast (SoGlobalAlert) ───────────────────────────────────────────────── */
.so-toast-container {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: var(--so-toast-z);
    min-width: 280px;
    max-width: 360px;
}

/* ── StartMenuCard ───────────────────────────────────────────────────────── */
.so-start-card {
    border-radius: var(--rz-border-radius, 8px);
    box-shadow: var(--rz-card-shadow, 0 2px 8px rgba(0,0,0,.1));
    transition: transform .15s ease, box-shadow .15s ease;
    cursor: pointer;
    padding: 0 !important;
    overflow: hidden;
}
.so-start-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.15);
}
.so-start-image-wrapper {
    position: relative;
    height: 160px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--so-card-bg);
}
.so-start-image         { width: 100%; height: 100%; object-fit: cover; display: block; }
.so-start-svg-icon      { width: 88px; height: 88px; filter: drop-shadow(0 4px 12px rgba(0,0,0,.18)); }
.so-start-material-icon { font-size: 3.5rem; opacity: .25; color: #fff; }
.so-start-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.45) 0%, rgba(0,0,0,.05) 55%, transparent 100%);
}
.so-start-content { position: absolute; bottom: 0; left: 0; padding: .75rem 1rem; color: #fff; }
.so-start-title {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.so-start-desc {
    font-size: .78rem;
    opacity: .85;
    text-shadow: 0 1px 3px rgba(0,0,0,.4);
    margin-top: .15rem;
}

/* Grid wrapper for StartMenuCards — centered, fixed card width, wraps naturally */
.so-start-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 160px));
    justify-content: center;
    gap: 12px;
    padding: 12px 16px;
}

/* ── QuantitySpinner ─────────────────────────────────────────────────────── */
.so-qty-spinner { display: flex; align-items: center; gap: 0.3rem; }
.so-qty-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
    padding: 0 !important;
}
.so-qty-value { min-width: 1.8rem; text-align: center; font-weight: 600; font-size: 1rem; }

/* ── BonusCard ───────────────────────────────────────────────────────────── */
/*  .so-bonus-card goes on <RadzenCard>; makes card a flex column so the action
    button is always pinned to the bottom regardless of image or text height.   */
.so-bonus-card {
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.rz-card.so-bonus-card {
    display: flex !important;
    flex-direction: column;
    height: 100%;
}
.so-bonus-card-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}
.so-bonus-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.75rem;
}
/* Pushes action button to the bottom of every card uniformly */
.so-bonus-card-action {
    margin-top: auto;
    padding-top: 0.5rem;
}
.so-bonus-card-action .rz-button { width: 100%; }

/* ── StarPicker ──────────────────────────────────────────────────────────── */
.so-star-picker { display: flex; align-items: center; gap: 0.1rem; }
.so-star {
    background: none;
    border: none;
    font-size: 1.8rem;
    line-height: 1;
    padding: 0 0.05rem;
    cursor: pointer;
    transition: transform .1s;
}
.so-star:hover    { transform: scale(1.15); }
.so-star--on      { color: var(--rz-warning); }
.so-star--off     { color: var(--rz-base-400, #adb5bd); }
.so-star:disabled { cursor: default; opacity: .5; }
.so-star-label    { font-size: 0.85rem; margin-left: 0.4rem; color: var(--rz-text-secondary-color); }

/* ── SoMediaCard ─────────────────────────────────────────────────────────── */
.so-media-card     { overflow: hidden; height: 100%; }
.so-media-card-img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* ── SoCardCarousel ──────────────────────────────────────────────────────── */
/* Height / max-card-width parameterised via CSS custom properties            */
.so-carousel       { height: var(--so-carousel-height, 420px); }
.so-carousel-wrap  { display: flex; justify-content: center; padding: 0.5rem; }
.so-carousel-inner { width: 100%; max-width: var(--so-carousel-item-max-width, 360px); }
.so-carousel-h500  { height: 500px; }

/* ── List / Image Renderers ──────────────────────────────────────────────── */
.so-list-card      { width: 300px; }
.so-list-card-icon { width: 100px; height: 100px; }
.so-list-card-img  { width: 100px; height: 100px; object-fit: cover; }
.so-list-icon-lg   { width: 200px; height: 200px; }
.so-list-icon-xl   { width: 300px; height: 300px; }
.so-img-thumb-wrap { height: 150px; overflow: hidden; }
.so-img-thumb      { width: 100%; height: 150px; object-fit: cover; }
.so-view-icon      { width: 200px; height: 200px; }

/* ── Navigation ──────────────────────────────────────────────────────────── */
.so-nav-panel-full { width: 100%; }
.so-nav-danger     { color: var(--rz-danger) !important; }
.so-hamburger-icon { font-size: 1.25rem; line-height: 1; }

/* ── Video Player ────────────────────────────────────────────────────────── */
.so-video-wrap   { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 8px; }
.so-video-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.so-video-elem   { width: 100%; border-radius: 8px; max-height: 60vh; }

/* ── Dialog Body ─────────────────────────────────────────────────────────── */
.so-dialog-body     { display: flex; flex-direction: column; gap: .75rem; }
.so-dialog-desc     { margin: 0; font-size: .9rem; color: var(--rz-text-secondary-color, #6b7280); }
.so-dialog-divider  { margin: 0; opacity: .25; }

/* ── Form Utilities ──────────────────────────────────────────────────────── */
.so-form-full        { width: 100%; }
.so-product-img-prev { max-height: 120px; max-width: 100%; object-fit: contain; border-radius: var(--rz-border-radius); align-self: center; }
.so-appt-product-img { max-height: 200px; object-fit: cover; border-radius: 8px; }