/* ============================================================
   Tachli - User Panel styles
   Copy to: wwwroot/Site/assets/css/user-panel.css
   Loaded automatically via the UserPanelInformationBar component.
   ============================================================ */

/* ---------- Information bar (variable header) ---------- */
.up-info-bar {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 16px 22px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.up-info-bar-title {
    margin: 0;
    font-weight: 700;
    color: #4E3B2B;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .up-info-bar-title i {
        color: #C89B3C;
    }

.up-info-bar-sub {
    color: #5F5245;
    font-size: 13px;
    margin-top: 2px;
}

/* ---------- Panel wrapper (sidebar + content) ---------- */
.up-section {
    padding: 30px 0 60px;
}

.up-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

/* ---------- Sidebar (fixed) ---------- */
.up-sidebar {
    flex: 0 0 260px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    position: sticky;
    top: 20px;
}

    .up-sidebar .up-user {
        background: linear-gradient(135deg, #4E3B2B, #3A2A1C);
        color: #fff;
        padding: 24px 20px;
        text-align: center;
    }

        .up-sidebar .up-user img {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #fff;
        }

        .up-sidebar .up-user .name {
            font-weight: 700;
            margin-top: 10px;
        }

        .up-sidebar .up-user .phone {
            font-size: 13px;
            opacity: .9;
        }

    .up-sidebar .up-menu {
        padding: 10px 0;
    }

        .up-sidebar .up-menu a {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 22px;
            color: #5F5245;
            font-size: 15px;
            border-right: 3px solid transparent;
            transition: all .2s;
            text-decoration: none;
        }

            .up-sidebar .up-menu a i {
                font-size: 18px;
            }

            .up-sidebar .up-menu a:hover {
                background: #F5F0E6;
                color: #A87E2A;
            }

            .up-sidebar .up-menu a.active {
                background: #F5F0E6;
                color: #A87E2A;
                border-right-color: #C89B3C;
                font-weight: 600;
            }

/* ---------- Content area ---------- */
.up-content {
    flex: 1;
    min-width: 0;
}

.up-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 22px;
    margin-bottom: 20px;
}

.up-stat {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

    .up-stat .icon {
        width: 48px;
        height: 48px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        color: #fff;
    }

    .up-stat .num {
        font-size: 22px;
        font-weight: 700;
        line-height: 1.1;
    }

    .up-stat .lbl {
        color: #5F5245;
        font-size: 13px;
    }

.up-table th {
    white-space: nowrap;
}

/* ---------- Status badges ---------- */
.badge-soft-success {
    background: #E8EFDF;
    color: #7A8A57;
}

.badge-soft-danger {
    background: #F5E8E0;
    color: #A0522D;
}

.badge-soft-warning {
    background: #FBF3DC;
    color: #A87E2A;
}

.badge-soft-secondary {
    background: #EFE7D5;
    color: #5F5245;
}

.badge-soft-primary {
    background: #EFE7D5;
    color: #4E3B2B;
}

.badge-soft-info {
    background: #EFE7D5;
    color: #7A8A57;
}

/* ---------- Misc ---------- */
.up-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #C89B3C;
}

.up-empty {
    text-align: center;
    padding: 50px 0;
    color: #999;
}

    .up-empty i {
        font-size: 64px;
        color: #ddd;
        display: block;
        margin-bottom: 12px;
    }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .up-wrapper {
        flex-direction: column;
    }

    .up-sidebar {
        flex: 1 1 auto;
        width: 100%;
        position: static;
    }

        .up-sidebar .up-menu {
            display: flex;
            flex-wrap: wrap;
        }

            .up-sidebar .up-menu a {
                border-right: 0;
                border-bottom: 3px solid transparent;
                padding: 10px 14px;
                font-size: 14px;
            }

                .up-sidebar .up-menu a.active {
                    border-bottom-color: #C89B3C;
                }
}

/* ============ v2: contrast fix ============ */
/* Primary buttons -> chocolate */
.up-content .btn-primary,
.up-info-bar .btn-primary {
    background-color: #4E3B2B !important;
    border-color: #4E3B2B !important;
    color: #fff !important;
}

    .up-content .btn-primary:hover,
    .up-info-bar .btn-primary:hover {
        background-color: #3A2A1C !important;
        border-color: #3A2A1C !important;
    }
/* Outline buttons -> chocolate border */
.up-content .btn-outline-secondary {
    color: #4E3B2B !important;
    border-color: #4E3B2B !important;
}

    .up-content .btn-outline-secondary:hover {
        background-color: #4E3B2B !important;
        color: #fff !important;
    }
/* Links inside panel -> honey */
.up-content a {
    color: #A87E2A;
}

    .up-content a:hover {
        color: #C89B3C;
    }
/* Table header text -> chocolate */
.up-table thead th {
    color: #4E3B2B;
}

/* ============ Icon color classes (replaces inline styles) ============ */
.up-stat .icon.icon-honey {
    background: #C89B3C;
}

.up-stat .icon.icon-choco {
    background: #4E3B2B;
}

.up-stat .icon.icon-olive {
    background: #7A8A57;
}

.up-stat .icon.icon-gold-dark {
    background: #A87E2A;
}

.up-icon-big {
    font-size: 34px;
}

.up-icon-honey {
    color: #C89B3C;
}

.up-icon-choco {
    color: #4E3B2B;
}

.up-icon-olive {
    color: #7A8A57;
}

.up-avatar-placeholder {
    background: #F5F0E6;
    border: 2px dashed #DCCEB3;
}

/* ============ v3: warm & cohesive palette ============ */
:root {
    --up-bg: #FBF6EC; /* warm cream page bg */
    --up-card: #FFFFFF;
    --up-honey: #C89B3C; /* panel gold - now the SAME gold as the hardcoded accents below */
    --up-honey-dark: #A87E2A;
    --up-choco: #4E3B2B;
    --up-choco-dark: #3A2A1C;
    --up-olive: #8A9A63; /* softer olive */
    --up-text: #5F5245;
    --up-border: #EADFC9;
}

body {
    background-color: var(--up-bg);
}

/* ---- Sidebar: deep chocolate with warm gold accents ---- */
.up-sidebar {
    background: var(--up-card);
    border-color: var(--up-border);
    box-shadow: 0 4px 18px rgba(78, 59, 43, 0.06);
}

    .up-sidebar .up-user {
        background: linear-gradient(150deg, #5A4632, #3A2A1C);
    }

        .up-sidebar .up-user .name {
            color: #F5E9D8;
        }

    .up-sidebar .up-menu a {
        color: var(--up-text);
        border-right-color: transparent;
    }

        .up-sidebar .up-menu a i {
            color: #A8957F;
        }

        .up-sidebar .up-menu a:hover {
            background: #FBF3E3;
            color: var(--up-honey-dark);
        }

        .up-sidebar .up-menu a.active {
            background: #FBF3E3;
            color: var(--up-honey-dark);
            border-right-color: var(--up-honey);
            font-weight: 700;
        }

            .up-sidebar .up-menu a.active i {
                color: var(--up-honey);
            }

/* ---- Info bar ---- */
.up-info-bar {
    background: linear-gradient(135deg, #FFFFFF 0%, #FBF3E3 100%);
    border: 1px solid var(--up-border);
    border-right: 4px solid var(--up-honey);
}

.up-info-bar-title {
    color: var(--up-choco);
}

    .up-info-bar-title i {
        color: var(--up-honey);
    }

/* ---- Cards ---- */
.up-card {
    background: var(--up-card);
    border: 1px solid var(--up-border);
    box-shadow: 0 2px 10px rgba(78, 59, 43, 0.04);
}

/* ---- Stats ---- */
.up-stat {
    background: var(--up-card);
    border: 1px solid var(--up-border);
    transition: transform .15s ease, box-shadow .15s ease;
}

    .up-stat:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(78, 59, 43, 0.08);
    }

    .up-stat .icon {
        border-radius: 12px;
    }

    .up-stat .num {
        color: var(--up-choco);
    }

    .up-stat .lbl {
        color: #8A7B6A;
    }

/* ---- Buttons ---- */
.up-content .btn-primary,
.up-info-bar .btn-primary {
    background-color: var(--up-honey) !important;
    border-color: var(--up-honey) !important;
    color: #fff !important;
    font-weight: 600;
}

    .up-content .btn-primary:hover,
    .up-info-bar .btn-primary:hover {
        background-color: var(--up-honey-dark) !important;
        border-color: var(--up-honey-dark) !important;
    }

.up-content .btn-outline-secondary {
    color: var(--up-choco) !important;
    border-color: #D8C9AF !important;
    background: transparent !important;
}

    .up-content .btn-outline-secondary:hover {
        background-color: var(--up-choco) !important;
        color: #fff !important;
        border-color: var(--up-choco) !important;
    }

/* ---- Tables ---- */
.up-table thead th {
    color: var(--up-choco);
    border-bottom-color: var(--up-border) !important;
}

.up-table tbody tr:hover {
    background: #FBF6EC !important;
}

/* ---- Badges (warm) ---- */
.badge-soft-success {
    background: #EDF2E2;
    color: #5F7040;
}

.badge-soft-warning {
    background: #FBF0D9;
    color: #A87E2A;
}

.badge-soft-danger {
    background: #F9E4DC;
    color: #A0522D;
}

.badge-soft-secondary {
    background: #F0EAE0;
    color: #7A6B5A;
}

.badge-soft-primary {
    background: #F0EAE0;
    color: #4E3B2B;
}

.badge-soft-info {
    background: #EDF2E2;
    color: #5F7040;
}

/* ---- Empty state ---- */
.up-empty i {
    color: #E5D9C5;
}

/* ---- Pagination links inside panel ---- */
.up-content .page-link {
    color: var(--up-choco);
    border-color: #EADFC9;
    background: #fff;
}

.up-content .page-item.active .page-link {
    background-color: var(--up-honey);
    border-color: var(--up-honey);
    color: #fff;
}

.up-content .page-link:hover {
    color: var(--up-honey-dark);
    background: #FBF3E3;
}

/* ============================================================
   Address Cards - CLEAN (NO inline styles)
   ============================================================ */
.up-address-card {
    border: 1px solid var(--up-border);
    transition: all 0.2s ease;
    background: #fff;
    border-radius: 10px;
}

    .up-address-card.default-address {
        border-color: var(--up-honey) !important;
        border-width: 2px !important;
        box-shadow: 0 2px 8px rgba(200, 155, 60, 0.15);
    }

    /* Default address badge */
    .up-address-card .badge-default {
        background-color: #C89B3C;
        color: #fff;
        font-size: 0.75rem;
        padding: 0.15rem 0.45rem;
        border-radius: 4px;
    }

/* Checkout Address Selection Card */
.address-select-card {
    border: 1.5px solid var(--up-border);
    background-color: #ffffff;
    transition: all 0.2s ease;
    cursor: pointer;
}

    .address-select-card:hover {
        border-color: var(--up-honey);
        background-color: #FDFBF7;
    }

    .address-select-card.selected-address {
        border-color: var(--up-honey) !important;
        background-color: #FDF9F0 !important;
        box-shadow: 0 3px 12px rgba(200, 155, 60, 0.18);
    }

/* ============================================================
   Order Timeline (clean classes)
   ============================================================ */
.timeline-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #C89B3C;
    flex-shrink: 0;
    display: inline-block;
}

/* ============================================================
   Price accents (brand honey) - no inline styles
   ============================================================ */
.price-accent {
    color: #C89B3C;
    font-weight: 700;
}

/* Sidebar avatar placeholder (no inline styles) */
.up-user .avatar-placeholder {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 30px;
}

/* Hidden alert containers (used by _UserPanelMessages) */
.alert-hidden {
    display: none !important;
}

/* ============================================================
   Form Inputs & SMS OTP Styling (Tachli Brand Theme)
   ============================================================ */
.up-card .form-label {
    color: #4E3B2B;
    font-weight: 600;
    font-size: 0.88rem;
    margin-bottom: 0.35rem;
}

.up-card .form-control,
.up-card .form-select {
    border: 1px solid #EADFC9 !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    color: #5F5245 !important;
    font-size: 0.92rem !important;
    padding: 0.45rem 0.85rem !important;
    height: auto !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

    .up-card .form-control:focus,
    .up-card .form-select:focus {
        border-color: #C89B3C !important;
        box-shadow: 0 0 0 0.18rem rgba(200, 155, 60, 0.18) !important;
        background-color: #ffffff !important;
        outline: none !important;
    }

    .up-card .form-control:disabled,
    .up-card .form-control[readonly] {
        background-color: #F8F4EC !important;
        border-color: #EADFC9 !important;
        color: #8A7B6A !important;
    }

/* SMS verification box */
.up-sms-box {
    background: #FCF9F2;
    border: 1px solid #EADFC9;
    border-radius: 10px;
    padding: 16px 20px;
    margin-top: 10px;
}

/* Send SMS button */
.btn-send-sms,
#sendChangePassSmsBtn,
#sendSmsBtn,
.btn-outline-honey {
    color: #A87E2A !important;
    background-color: #FBF3E3 !important;
    border: 1px solid #C89B3C !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    padding: 0.45rem 1.15rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
}

    .btn-send-sms:hover,
    #sendChangePassSmsBtn:hover,
    #sendSmsBtn:hover,
    .btn-outline-honey:hover {
        background-color: #C89B3C !important;
        border-color: #C89B3C !important;
        color: #ffffff !important;
        box-shadow: 0 3px 10px rgba(200, 155, 60, 0.25) !important;
    }

    .btn-send-sms:disabled,
    #sendChangePassSmsBtn:disabled,
    #sendSmsBtn:disabled {
        background-color: #EFE7D5 !important;
        border-color: #DCCEB3 !important;
        color: #8A7B6A !important;
        opacity: 0.85 !important;
        cursor: not-allowed !important;
        box-shadow: none !important;
    }


/* ============ v4: mobile hardening (info-bar cut-off fix) ============
   Root cause: .up-table th { white-space: nowrap } makes the tables
   wider than a phone viewport. The overflowing table stretched the whole
   content column, so sibling blocks (the info bar first of all) ended up
   wider than the screen and looked "cut". Containing the scroll inside
   the card keeps every sibling at viewport width. */
@media (max-width: 991px) {
    .up-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    /* Tables scroll inside their own card instead of stretching the page */
    .up-card {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .up-table {
        min-width: 640px; /* readable columns + honest horizontal scroll */
    }

    .up-info-bar {
        padding: 14px 16px;
    }

    .up-info-bar-title {
        font-size: 15px;
    }

    .up-info-bar-sub {
        font-size: 12px;
    }
}

@media (max-width: 575px) {
    .up-info-bar .btn {
        width: 100%;
    }

    .up-sidebar .up-menu a {
        padding: 8px 10px;
        font-size: 13px;
    }

    .up-card {
        padding: 16px;
    }

    .up-stat {
        padding: 14px;
        gap: 10px;
    }

        .up-stat .num {
            font-size: 18px;
        }
}


/* ============================================================
   USER PANEL - Required-field star (panel forms)
   Same marker utility as the auth forms: custom-site.js adds
   the is-required class to the labels of required fields
   (add/edit address, change password, edit profile). Kept
   here so it renders no matter which global sheets the
   panel layout loads.
   ============================================================ */
#add-address-form label.is-required::after,
#edit-address-form label.is-required::after,
#change-password-form label.is-required::after,
#edit-profile-form label.is-required::after {
    content: "*";
    color: #C0392B;
    font-weight: 800;
    font-size: 0.9em;
    margin-inline-start: 5px;
}
/* ============================================================
   USER PANEL - Bootstrap switch in Tachli palette
   Bootstrap paints the checked switch (e.g. the "default
   address" toggle) in its default blue. A toggle shows a
   STATE, not an action - so it gets the soft sage olive
   (--up-olive) instead of the honey amber reserved for
   primary buttons; the deeper olive border keeps the edge
   defined and in family with the panel's olive text
   accents. Scoped to the panel content so every future
   panel switch matches too.
   ============================================================ */
.up-content .form-check-input:checked {
    background-color: var(--up-olive, #8A9A63) !important;
    border-color: #6E8B4D !important;
}

.up-content .form-check-input:focus {
    border-color: var(--up-olive, #8A9A63) !important;
    box-shadow: 0 0 0 0.25rem rgba(138, 154, 99, 0.25) !important;
}


/* ============================================================
   SUPPORT TICKETS (user panel conversation)
   ============================================================ */
.tachli-ticket-chat {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--shop-cream);
    border: 1px solid var(--shop-beige);
    border-radius: 12px;
}

.tachli-ticket-msg {
    display: flex;
}

    /* In RTL: flex-start = right side = the customer's own messages */
    .tachli-ticket-msg.from-user {
        justify-content: flex-start;
    }

    .tachli-ticket-msg.from-admin {
        justify-content: flex-end;
    }

.tachli-ticket-bubble {
    max-width: 78%;
    padding: .75rem 1rem;
    border-radius: 14px;
}

.tachli-ticket-msg.from-user .tachli-ticket-bubble {
    background: var(--shop-cream);
    border: 1px solid var(--shop-beige);
    border-top-right-radius: 4px;
}

.tachli-ticket-msg.from-admin .tachli-ticket-bubble {
    background: #ffffff;
    border: 1px solid var(--shop-honey);
    border-top-left-radius: 4px;
}

.tachli-ticket-sender {
    font-size: .72rem;
    font-weight: 700;
    margin-bottom: .25rem;
    color: var(--shop-text);
}

.tachli-ticket-msg.from-admin .tachli-ticket-sender {
    color: var(--shop-honey-dark);
}

.tachli-ticket-text {
    white-space: pre-line;
    word-break: break-word;
    color: var(--shop-text);
}

.tachli-ticket-time {
    font-size: .68rem;
    color: var(--shop-text);
    opacity: .6;
    margin-top: .35rem;
}

.tachli-ticket-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .5rem;
}

.tachli-ticket-att-img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--shop-beige);
    transition: transform .15s ease;
}

    .tachli-ticket-att-img:hover {
        transform: scale(1.05);
    }

.tachli-ticket-att-file {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .7rem;
    font-size: .78rem;
    border-radius: 8px;
    background: var(--shop-cream);
    border: 1px solid var(--shop-beige);
    color: var(--shop-choco);
    text-decoration: none;
}

    .tachli-ticket-att-file:hover {
        border-color: var(--shop-honey);
        color: var(--shop-honey-dark);
    }

@media (max-width: 576px) {
    .tachli-ticket-bubble {
        max-width: 90%;
    }
}


/* ---------- Unread ticket rows (bold until the conversation is opened) ----------
   Own class on purpose: the site template's CSS environment does not reliably
   apply Bootstrap's fw-bold on table rows, so we set the weight ourselves
   with a specificity that beats template-wide td rules. */
.up-table tbody tr.tachli-ticket-unread > td {
    font-weight: 700 !important;
}

/* The template renders table text heavy in every weight, so unread rows are
   ALSO marked with a honey dot + a soft tint - visible no matter the font. */
.up-table tbody tr.tachli-ticket-unread {
    background: rgba(200, 155, 60, 0.08);
}

.tachli-ticket-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--up-honey);
    margin-inline-end: 6px;
    vertical-align: middle;
}