/* ================================
   VARIABLES & THEME
   ================================ */
:root {
    --card-bg: #ffffff;
    --text-color: #1c1c1e;
}

.dark-theme {
    --card-bg: #1c1c1e;
    --text-color: #ffffff;
}

/* ================================
   BASE BODY
   ================================ */
body {
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
        sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f7f7f7;
    overflow-x: hidden;
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

body.dark-theme {
    background-color: #1c1c1e;
    color: #f5f5f5;
}
/* ================================
   LOGO
   ================================ */
.logo-container {
    padding: 0 0 25px 20px;
}

.main-logo {
    width: 100px;
    height: 25px;
    display: block;
    mix-blend-mode: multiply;
}

/* ================================
   SIDEBAR
   ================================ */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 150px;
    display: flex;
    flex-direction: column;
    padding: 5px 12px 0 12px;
    z-index: 1000;
}

.sidebar-brand {
    padding: 10px 12px 25px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-brand-name {
    font-size: 17px;
    font-weight: 900;
    color: #1c1c1e;
    letter-spacing: -0.6px;
    font-family: "Outfit", sans-serif;
}

.sidebar-brand-tld {
    font-size: 9.5px;
    font-weight: 700;
    color: #ff8c00;
    letter-spacing: 0.5px;
    font-family: "Outfit", sans-serif;
}

body.dark-theme .sidebar-brand-name {
    color: #ffffff;
}

.glass-nav-container {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 24px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    margin-top: 15px;
}

body.dark-theme .glass-nav-container {
    background: rgba(44, 44, 46, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.nav-separator {
    height: 1px;
    background-color: rgba(0, 0, 0, 0.08);
    margin: 5px 15px;
}

body.dark-theme .nav-separator {
    background-color: rgba(255, 255, 255, 0.1);
}

.nav-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sidebar a {
    position: relative;
    display: flex;
    align-items: center;
    padding: 12px 12px;
    gap: 5px;
    text-decoration: none;
    color: #161823;
    font-weight: 700;
    font-size: 18px;
    border-radius: 14px;
    background: transparent;
    outline: none;
    transition:
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        background-color 0.3s ease,
        color 0.4s ease;
}

/* Keeps keyboard-focus visible for accessibility, without the browser's
   default yellow focus ring. */
.sidebar a:focus-visible {
    outline: 2px solid rgba(255, 140, 0, 0.5);
    outline-offset: 2px;
}

.sidebar a:hover {
    transform: scale(1.08);
    background-color: rgba(0, 0, 0, 0.05);
    color: #161823;
}

.sidebar a:active {
    transform: scale(0.94);
}

.sidebar a.active {
    color: #ff8c00;
}

.sidebar a.active i,
.sidebar a.active:hover i {
    color: #ffa500;
}

body.dark-theme .sidebar a {
    color: #f2f2f7;
}

/* ================================
   STICKY HEADER & SEARCH
   ================================ */
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 100;
    margin-left: 0;
    padding: 12px 20px 12px 200px;
    background: rgba(247, 247, 247, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
}

body.dark-theme .sticky-header {
    background: rgba(28, 28, 30, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.top-header {
    margin: 0;
    padding: 0;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.search-wrapper {
    position: relative;
    width: 100%;
    max-width: 500px;
}

.search-wrapper > i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.search-wrapper:focus-within > i {
    color: #ff8c00;
    transform: translateY(-50%) scale(1.1);
}

.search-bar {
    width: 100%;
    padding: 12px 46px 12px 45px;
    font-size: 15px;
    border-radius: 25px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.9);
    outline: none;
    box-sizing: border-box;
    transition: all 0.3s ease;
    font-family: inherit;
}

.search-bar:focus {
    border-color: #ff8c00;
    box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.1);
    background: white;
}

body.dark-theme .search-bar {
    background: rgba(44, 44, 46, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
}

/* ================================
   SEARCH FILTER (icon + dropdown panel)
   ================================ */
.search-filter-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    color: #6e6e73;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.search-filter-btn:hover {
    background: rgba(255, 140, 0, 0.15);
    color: #ff8c00;
}

.search-filter-icon {
    width: 15px;
    height: 15px;
    filter: brightness(0) opacity(0.55);
    transition: filter 0.2s ease;
}

.search-filter-btn:hover .search-filter-icon {
    filter: brightness(0) saturate(100%) invert(55%) sepia(97%) saturate(1000%)
        hue-rotate(1deg) brightness(103%) contrast(104%);
}

.search-filter-btn.active .search-filter-icon {
    filter: brightness(0) invert(1);
}

.search-filter-btn.active {
    background: #ff8c00;
    color: #ffffff;
}

body.dark-theme .search-filter-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #d1d1d6;
}

body.dark-theme .search-filter-icon {
    filter: brightness(0) invert(1) opacity(0.7);
}

body.dark-theme .search-filter-btn.active .search-filter-icon {
    filter: brightness(0) invert(1) opacity(1);
}

body.dark-theme .search-filter-btn:hover {
    background: rgba(255, 140, 0, 0.25);
    color: #ffa733;
}

.search-filter-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 280px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: 20px;
    box-sizing: border-box;
    z-index: 50;
    display: none;
    flex-direction: column;
    gap: 16px;
}

.search-filter-panel.active {
    display: flex;
}

body.dark-theme .search-filter-panel {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.1);
}

.filter-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-field label {
    font-size: 12px;
    font-weight: 600;
    color: #86868b;
}

.filter-field select,
.filter-field input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.02);
    font-size: 14px;
    font-family: inherit;
    color: #1c1c1e;
    box-sizing: border-box;
    outline: none;
}

.filter-field select:focus,
.filter-field input:focus {
    border-color: #ff8c00;
}

body.dark-theme .filter-field select,
body.dark-theme .filter-field input {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

body.dark-theme .filter-field label {
    color: #a1a1a6;
}

.filter-price-row {
    flex-direction: row;
    gap: 12px;
}

.filter-price-row > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.filter-clear-btn,
.filter-apply-btn {
    flex: 1;
    padding: 10px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.2s ease;
}

.filter-clear-btn {
    background: rgba(0, 0, 0, 0.06);
    border: none;
    color: #1c1c1e;
}

body.dark-theme .filter-clear-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.filter-apply-btn {
    background: #ff8c00;
    border: none;
    color: #ffffff;
}

.filter-clear-btn:hover,
.filter-apply-btn:hover {
    opacity: 0.85;
}

/* ================================
   SELL BUTTON (outline pill)
   ================================ */
.sell-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 24px;
    flex-shrink: 0;
    border-radius: 20px;
    background: transparent;
    border: 1.5px solid #ff8c00;
    color: #ff8c00;
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sell-btn i {
    font-size: 16px;
}

.sell-btn:hover {
    background: rgba(255, 140, 0, 0.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 140, 0, 0.15);
}

.sell-btn:active {
    transform: scale(0.96);
    background: rgba(255, 140, 0, 0.18);
}

body.dark-theme .sell-btn {
    border-color: #ff8c00;
    color: #ff9c33;
}

body.dark-theme .sell-btn:hover {
    background: rgba(255, 140, 0, 0.15);
}

/* ================================
   PROMO BANNER
   ================================ */
.promo-banner {
    margin-top: 20px;
    margin-left: 200px;
    margin-right: 20px;
    height: 190px;
    border-radius: 1px 1px 20px 20px;
    display: flex;
    align-items: center;
    padding: 0 30px;
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, #ff8c00, #ff0050, #ff8c00);
    background-size: 300% 300%;
    animation: gradient-shift 6s ease infinite;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.banner-content h1 {
    font-size: 50px;
    margin: 0;
    font-weight: 800;
    color: white;
}

.banner-content p {
    font-size: 15px;
    margin: 5px 0 0 0;
    opacity: 0.9;
    color: white;
}

/* ================================
   MODAL OVERLAY
   ================================ */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(8px);
    justify-content: center;
    align-items: center;
    z-index: 2000;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.22s ease;
}

.modal-overlay.active {
    opacity: 1;
}

.glass-modal {
    width: 75%;
    height: 75%;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 40px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(0.92);
    transition:
        transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.22s ease;
}

.modal-overlay.active .glass-modal {
    transform: scale(1);
}

/* ================================
   ACCOUNT MODAL (Deactivate / Delete)
   ================================ */
.account-modal-card {
    width: 320px;
    max-width: 88vw;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
    padding: 8px 0 28px;
    cursor: default;
    transform: scale(0.92);
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.dark-theme .account-modal-card {
    background: #2c2c2e;
}

.modal-overlay.active .account-modal-card {
    transform: scale(1);
}

.account-row-btn {
    width: 100%;
    background: none;
    border: none;
    padding: 20px 24px;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #1c1c1e;
    cursor: pointer;
    text-align: center;
}

body.dark-theme .account-row-btn {
    color: #ffffff;
}

.account-row-btn:hover {
    background: rgba(0, 0, 0, 0.03);
}

body.dark-theme .account-row-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}

.account-modal-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    margin: 0 0 24px;
}

body.dark-theme .account-modal-divider {
    background: rgba(255, 255, 255, 0.1);
}

.account-delete-btn {
    display: block;
    margin: 0 auto;
    background: transparent;
    border: 1.5px solid #ff3b30;
    color: #ff3b30;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 500;
    padding: 10px 28px;
    border-radius: 22px;
    cursor: pointer;
    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.account-delete-btn:hover {
    background: rgba(255, 59, 48, 0.08);
}

.account-delete-btn:active {
    transform: scale(0.97);
}

.account-delete-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ================================
   DELETE ACCOUNT CONFIRMATION MODAL
   ================================ */
.delete-confirm-card {
    width: 360px;
    max-width: 88vw;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
    padding: 32px 28px 28px;
    cursor: default;
    position: relative;
    text-align: center;
    transform: scale(0.92);
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.dark-theme .delete-confirm-card {
    background: #2c2c2e;
}

.modal-overlay.active .delete-confirm-card {
    transform: scale(1);
}

.delete-confirm-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 59, 48, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 22px;
    color: #ff3b30;
}

.delete-confirm-title {
    font-family: "Outfit", sans-serif;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #1c1c1e;
}

body.dark-theme .delete-confirm-title {
    color: #ffffff;
}

.delete-confirm-subtitle {
    font-size: 14px;
    color: #86868b;
    line-height: 1.5;
    margin: 0 0 24px;
}

.delete-confirm-text-input {
    text-align: center;
    letter-spacing: 1px;
}

.delete-confirm-final-btn {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    border: 1.5px solid #ff3b30;
    background: transparent;
    color: #ff3b30;
    font-family: "Outfit", sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 6px;
    transition:
        background 0.2s ease,
        transform 0.2s ease,
        opacity 0.2s ease;
}

.delete-confirm-final-btn:hover:not(:disabled) {
    background: rgba(255, 59, 48, 0.08);
}

.delete-confirm-final-btn:active:not(:disabled) {
    transform: scale(0.98);
}

.delete-confirm-final-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.modal-inner {
    text-align: center;
    color: #161823;
}

.empty-icon {
    font-size: 80px;
    color: #ff8c00;
    margin-bottom: 20px;
    opacity: 0.8;
}

.close-modal {
    position: absolute;
    top: 25px;
    right: 25px;
    background: none;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 2100;
}

.close-modal i {
    color: #ffffff;
    font-size: 32px;
    font-weight: 900;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

.close-modal:hover {
    transform: scale(1.1);
    opacity: 0.7;
}

/* ================================
   TOAST NOTIFICATION
   ================================ */
.toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%) translateY(12px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 14px;
    background: #1c1c1e;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    max-width: min(90vw, 420px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    z-index: 5000;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.toast.error {
    background: #ff3b30;
}

body.dark-theme .toast {
    background: #2c2c2e;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

body.dark-theme .toast.error {
    background: #ff453a;
}

/* ================================
   NOTIFICATIONS DRAWER
   ================================ */
#notifications-modal.modal-overlay {
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: none !important;
}

.notifications-drawer {
    position: absolute;
    right: -400px;
    top: 16px;
    bottom: 16px;
    width: 380px;
    height: auto;
    background: var(--card-bg, #ffffff);
    border-radius: 20px;
    box-shadow:
        -15px 0 35px rgba(0, 0, 0, 0.1),
        -4px 0 10px rgba(0, 0, 0, 0.05);
    transition: right 0.28s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    flex-direction: column;
    cursor: auto;
    overflow: hidden;
}

.modal-overlay.active .notifications-drawer {
    right: 16px;
}

.notifications-content {
    flex: 1;
    overflow-y: auto;
}

body.dark-theme .notifications-drawer {
    background: #1c1c1e;
    box-shadow: -15px 0 45px rgba(0, 0, 0, 0.4);
    border-left: 1px solid rgba(255, 255, 255, 0.05);
}

.modal-header {
    padding: 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

body.dark-theme .modal-header {
    border-color: rgba(255, 255, 255, 0.05);
}

.modal-header h3 {
    flex: 1;
    text-align: center;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    margin-right: 32px;
}

body.dark-theme h3 {
    color: white;
}

.close-modal-btn {
    background: none;
    border: none;
    font-size: 26px;
    cursor: pointer;
    color: #86868b;
    padding: 10px;
    line-height: 1;
    transition: color 0.2s;
}

.close-modal-btn:hover {
    color: #ff3b30;
}

/* ================================
   RECENT SHELF (home feed) — last 4 viewed products, YouTube
   Shorts-shelf style: bold heading, horizontal row, left-aligned
   with the rest of the feed content.
   ================================ */
.recent-shelf {
    margin: 20px 20px 4px 20px;
}

.recent-shelf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.recent-shelf-heading {
    font-size: 20px;
    font-weight: 800;
    color: #1c1c1e;
    margin: 0;
    text-align: left;
}

body.dark-theme .recent-shelf-heading {
    color: #ffffff;
}

.recent-shelf-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    color: #6e6e73;
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.recent-shelf-close:hover {
    background: rgba(0, 0, 0, 0.12);
    color: #1c1c1e;
}

body.dark-theme .recent-shelf-close {
    background: rgba(255, 255, 255, 0.1);
    color: #b0b0b5;
}

body.dark-theme .recent-shelf-close:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.recent-shelf-grid {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
}

.recent-shelf-grid::-webkit-scrollbar {
    display: none;
}

.recent-shelf-card {
    flex: 0 0 160px;
    width: 160px;
    cursor: pointer;
}

.recent-shelf-img-wrap {
    width: 160px;
    height: 160px;
    border-radius: 14px;
    overflow: hidden;
    background: #e5e5e7;
}

.recent-shelf-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease;
}

.recent-shelf-card:hover .recent-shelf-img-wrap img {
    transform: scale(1.04);
}

.recent-shelf-name {
    font-size: 13px;
    font-weight: 600;
    color: #1c1c1e;
    margin-top: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.dark-theme .recent-shelf-name {
    color: #ffffff;
}

.recent-shelf-price {
    font-size: 12px;
    font-weight: 600;
    color: #86868b;
    margin-top: 2px;
}

/* ================================
   PRODUCT GRID
   ================================ */
.product-grid {
    margin-left: 20px;
    margin-right: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 20px 0 50px 0;
}

.product-card {
    background: transparent;
    overflow: visible;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.product-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: #e5e5e7;
    border-radius: 16px;
    display: block;
    transition: transform 0.2s ease;
}

.product-card:hover .product-image {
    transform: scale(1.02);
}

.product-name {
    font-size: 15px;
    font-weight: 700;
    color: #1c1c1e;
    margin: 10px 0 4px 0;
}

body.dark-theme .product-name {
    color: #ffffff;
}

.product-price {
    font-size: 14px;
    font-weight: 600;
    color: #86868b;
    margin: 0;
    /* Truncates instead of wrapping/pushing the button when the price
       is long — the fade mask below makes that truncation look
       intentional (the text recedes into the card) rather than an
       abrupt cut-off. */
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
    flex-shrink: 1;
    -webkit-mask-image: linear-gradient(
        90deg,
        #000 calc(100% - 18px),
        transparent 100%
    );
    mask-image: linear-gradient(
        90deg,
        #000 calc(100% - 18px),
        transparent 100%
    );
}

.product-description {
    font-size: 13px;
    color: #86868b;
    margin: 4px 0 8px 0;
}

.product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}

.add-to-bag-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #1c1c1e;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s ease;
    margin-top: 0 !important;
    height: auto !important;
    width: auto !important;
    flex-shrink: 0;
}

.add-to-bag-btn:hover {
    opacity: 0.75;
}

body.dark-theme .add-to-bag-btn {
    background: #ffffff;
    color: #1c1c1e;
}

/* ================================
   MAIN CONTENT VIEW
   ================================ */
.main-content-view {
    margin-left: 180px;
    padding: 40px;
    min-height: 100vh;
    display: none;
    animation: fadeIn 0.4s ease;
}

#profile-view {
    max-width: 1200px;
    margin-right: auto;
    height: auto;
    overflow: visible;
    transition: background 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.view-header h2 {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 30px;
}

body.dark-theme .view-header h2 {
    color: #ffffff !important;
}

.history-clear-btn {
    background: transparent;
    border: none;
    color: #ff5900;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 30px;
    padding: 6px 4px;
}

.history-clear-btn:hover {
    text-decoration: underline;
}

.empty-state {
    text-align: center;
    padding-top: 100px;
    color: #888;
}

.empty-state i {
    font-size: 50px;
    color: #ff8c00;
    margin-bottom: 15px;
    display: block;
}

/* ================================
   SETTINGS / "MORE" PAGE
   Precision rebuild matching design mock exactly:
   card bg #fafafa, border/divider #dbdbdb, radius 20px,
   bare black outline icons, dark chevrons, gray secondary values.
   ================================ */
.settings-group {
    background: #fafafa;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #dbdbdb;
    margin-bottom: 20px;
}

body.dark-theme .settings-group {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.12);
    color: white;
}

.settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 22px;
    transition: background 0.2s ease;
    border-bottom: 1px solid #dbdbdb;
}

.settings-row:last-child {
    border-bottom: none;
}

.settings-row:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

body.dark-theme .settings-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-theme .settings-row:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

.settings-label {
    padding-left: 16px;
    font-size: 13px;
    color: #86868b;
    text-transform: capitalize;
    margin-bottom: 8px;
}

.row-left {
    display: flex;
    align-items: center;
    font-weight: 500;
    color: #1c1c1e;
}

body.dark-theme .row-left {
    color: #ffffff;
}

.row-title {
    font-size: 16px;
    font-weight: 500;
}

.studio-delete-listing-btn {
    background: none;
    border: none;
    color: #86868b;
    font-size: 15px;
    padding: 8px;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 8px;
    transition:
        color 0.2s ease,
        background 0.2s ease;
}

.studio-delete-listing-btn:hover {
    color: #ff3b30;
    background: rgba(255, 59, 48, 0.08);
}

.studio-delete-listing-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.row-subtitle {
    display: block;
    font-size: 12.5px;
    color: #86868b;
    font-weight: 400;
    margin-top: 2px;
}

/* ================================
   STUDIO LISTING ROW — horizontal action bar per listing, similar to
   YouTube Studio's video management table: thumbnail, editable title,
   a row of compact stat pills, then delete — all in one line.
   ================================ */
.studio-listing-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.studio-listing-row:last-child {
    border-bottom: none;
}

body.dark-theme .studio-listing-row {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.studio-listing-thumb {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.studio-listing-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 180px;
}

.studio-listing-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.studio-listing-title {
    font-size: 15px;
    font-weight: 600;
    color: #1c1c1e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.dark-theme .studio-listing-title {
    color: #ffffff;
}

.studio-listing-title-input {
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    color: #1c1c1e;
    border: 1px solid #ff8c00;
    border-radius: 6px;
    padding: 3px 8px;
    width: 100%;
    max-width: 220px;
    background: var(--card-bg, #fff);
}

body.dark-theme .studio-listing-title-input {
    color: #ffffff;
    background: var(--card-bg, #1c1c1e);
}

.studio-listing-edit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: none;
    background: none;
    color: #a0a0a5;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s ease, background 0.15s ease;
}

.studio-listing-edit-btn:hover {
    color: #ff8c00;
    background: rgba(255, 140, 0, 0.1);
}

.studio-listing-sub {
    font-size: 12.5px;
    color: #86868b;
    margin-top: 2px;
}

.studio-listing-stats {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
    padding: 0 12px;
}

.studio-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #6e6e73;
    cursor: default;
}

.studio-stat i {
    font-size: 13px;
    color: #a0a0a5;
}

body.dark-theme .studio-stat {
    color: #c7c7cc;
}

body.dark-theme .studio-stat i {
    color: #8a8a8e;
}

@media (max-width: 720px) {
    .studio-listing-row {
        flex-wrap: wrap;
    }
    .studio-listing-stats {
        order: 3;
        width: 100%;
        padding: 8px 0 0 62px;
        justify-content: flex-start;
        gap: 16px;
    }
}

.arrow-icon {
    font-size: 14px;
    color: #1c1c1e;
}

body.dark-theme .arrow-icon {
    color: #ffffff;
}

.clickable-row {
    cursor: pointer;
}

.clickable-row:active {
    background-color: rgba(0, 0, 0, 0.06);
}

body.dark-theme .clickable-row:active {
    background-color: rgba(255, 255, 255, 0.08);
}

/* ================================
   ICON BOXES — bare outline icons, no badge background
   ================================ */
.icon-box {
    width: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    color: #1c1c1e;
    font-size: 19px;
    background: none;
}

body.dark-theme .icon-box {
    color: #ffffff;
}

/* Currency's coin icon needs its own circular ring, per design */
.more-icon-circle {
    width: 24px;
    height: 24px;
    border: 1.3px solid #1c1c1e;
    border-radius: 50%;
    font-size: 11px;
}

body.dark-theme .more-icon-circle {
    border-color: #ffffff;
}

/* About row's bare question mark — slightly larger, no ring */
.more-icon-plain {
    font-size: 21px;
}

/* ================================
   "MORE" PAGE — TWO COLUMN GRID
   Right column card stretches to match the combined height of the
   two stacked left cards (Preferences + Notifications), exactly like
   the design mock.
   ================================ */
.more-grid {
    display: flex;
    align-items: stretch;
    gap: 20px;
    margin-bottom: 20px;
}

.more-col {
    flex: 1.1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.more-col-right {
    flex: 1;
    display: flex;
}

.more-card-fill {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.more-card-header {
    text-align: center;
    padding: 24px 20px;
    font-size: 22px;
    font-weight: 500;
    color: #86868b;
    border-bottom: 1px solid #dbdbdb;
}

body.dark-theme .more-card-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.more-section-label {
    margin-top: 4px;
}

.more-row-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 900px) {
    .more-grid {
        flex-direction: column;
    }
}

/* ================================
   THEME SEGMENTED CONTROL (Auto / Dark / Light)
   ================================ */
.theme-seg {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 6px;
    border: 1.5px solid #dbdbdb;
    border-radius: 999px;
}

body.dark-theme .theme-seg {
    border-color: rgba(255, 255, 255, 0.15);
}

.theme-opt {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: #1c1c1e;
    font-size: 15px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1.3px solid transparent;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

body.dark-theme .theme-opt {
    color: #ffffff;
}

.theme-opt.active {
    border-color: #1c1c1e;
}

body.dark-theme .theme-opt.active {
    border-color: #ffffff;
}

.theme-opt-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1.3px solid #1c1c1e;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
}

body.dark-theme .theme-opt-badge {
    border-color: #ffffff;
}

.theme-opt[data-theme="auto"] {
    padding: 4px;
}

/* ================================
   BRAND ROW (About card)
   ================================ */
.more-brand {
    color: #ff470a;
    font-weight: 700;
}

.more-beta {
    color: #515151;
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

body.dark-theme .more-beta {
    color: #c7c7cc;
}

/* ================================
   TOGGLE SWITCH
   ================================ */
/* ================================
      APPLE SWITCH
      ================================ */
.apple-switch {
    position: relative;
    display: inline-block;
    width: 55px;
    height: 26px;
}

.apple-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 34px;
}

.apple-switch input:checked + .slider {
    background: linear-gradient(135deg, #ff9500 0%, #ff5e00 100%);
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 29px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input:checked + .slider:before {
    transform: translateX(20px);
}

/* ================================
   AI BETA BUTTON
   ================================ */
.ai-beta-button {
    position: relative;
    width: 100%;
    padding: 2px;
    border-radius: 14px;
    cursor: pointer;
    margin-bottom: 20px;
    display: flex;
    background: linear-gradient(135deg, #ff9500, #ffcc00);
    box-shadow: 0 0 5px rgba(255, 149, 0, 0.2);
    animation: breathing-glow 4s ease-in-out infinite;
    transition: transform 0.2s ease;
}

.ai-button-content {
    background: var(--card-bg, #ffffff);
    color: var(--text-color, #1c1c1e);
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 2;
}

@keyframes breathing-glow {
    0%,
    100% {
        box-shadow:
            0 0 8px rgba(255, 149, 0, 0.3),
            0 0 2px rgba(255, 204, 0, 0.2);
        transform: scale(1);
    }
    50% {
        box-shadow:
            0 0 18px rgba(255, 149, 0, 0.5),
            0 0 10px rgba(255, 204, 0, 0.3);
        transform: scale(1.005);
    }
}

/* ================================
   LOGIN BUTTON
   ================================ */
.main-login-btn {
    width: 100%;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 27px;
    font-size: 16px;
    font-weight: 700;
    font-family: "Outfit", sans-serif;
    margin-top: 25px;
    cursor: pointer;
    border: none;
    color: white;
    background: linear-gradient(90deg, #ff8b17 0%, #ff470a 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 4px 12px rgba(255, 108, 0, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.main-login-btn:hover {
    background: linear-gradient(90deg, #ff9c33 0%, #ff5a1f 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 6px 16px rgba(255, 108, 0, 0.4) !important;
    transform: translateY(-1px);
}

.main-login-btn:active {
    transform: scale(0.97);
    background: linear-gradient(90deg, #e67300 0%, #ff470a 100%) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}
/* ================================
   PROFILE VIEW INPUTS
   ================================ */
#profile-view input[type="email"],
#profile-view input[type="password"] {
    height: 54px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 25px !important;
    box-sizing: border-box !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.02),
        0 10px 20px rgba(0, 0, 0, 0.06) !important;
    color: #1c1c1e;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.dark-theme #profile-view input[type="email"],
body.dark-theme #profile-view input[type="password"] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: white;
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.3),
        0 10px 25px rgba(0, 0, 0, 0.2) !important;
}

#profile-view input:focus {
    outline: none;
    border-color: rgba(255, 140, 0, 0.6) !important;
    background: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-1px);
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.08),
        0 0 0 4px rgba(255, 140, 0, 0.1) !important;
}

/* ================================
   BUTTON LOADING
   ================================ */
.button-loading {
    color: transparent !important;
    position: relative;
    pointer-events: none;
}

.button-loading::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    top: 50%;
    left: 50%;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ================================
   SHAKE ANIMATION
   ================================ */
.input-group.input-error-shake {
    animation: appleShake 0.4s ease-in-out !important;
}

.input-group.input-error-shake input {
    border-color: #ff3b30 !important;
    box-shadow: 0 0 5px rgba(255, 59, 48, 0.2);
}

@keyframes appleShake {
    0%,
    100% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(-10px);
    }
    40% {
        transform: translateX(10px);
    }
    60% {
        transform: translateX(-6px);
    }
    80% {
        transform: translateX(6px);
    }
}

/* ================================
   SOCIAL BUTTONS
   ================================ */
.social-auth-btn,
.google-btn,
.social-btn {
    flex: 1;
    height: 54px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px;
    border-radius: 14px !important;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(0, 0, 0, 0.05) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #1c1c1e !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

body.dark-theme .social-auth-btn,
body.dark-theme .google-btn,
body.dark-theme .social-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

.social-auth-btn:hover,
.google-btn:hover {
    transform: translateY(-1px);
    background: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1) !important;
}

body.dark-theme .social-auth-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

.social-auth-btn:active {
    transform: scale(0.97);
}

/* ================================
   FEEDBACK MODAL
   ================================ */
.feedback-content {
    width: 90%;
    max-width: 400px;
    padding: 30px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    text-align: center;
}

body.dark-theme .feedback-content {
    background: rgba(30, 30, 30, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ================================
   OTP / FORGOT PASSWORD / RESET PASSWORD MODALS
   Small popup — background is dimmed but never blurred, and everything
   else is simply covered by the full-screen overlay underneath it.
   ================================ */
#otp-modal.modal-overlay,
#forgot-password-modal.modal-overlay,
#reset-password-modal.modal-overlay {
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ================================
   ABOUT MODAL (desktop) — mirrors the copy/structure of the mobile
   About screen (m-pf-screen-about) so both surfaces stay in sync.
   ================================ */
#about-modal.modal-overlay {
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.about-modal-content {
    position: relative;
    text-align: left;
    background: #ffffff;
    max-width: 420px;
}

body.dark-theme .about-modal-content {
    background: #1c1c1e;
}

.about-modal-content .feedback-header {
    text-align: left;
    margin-bottom: 16px;
}

.about-modal-content .feedback-header h1 {
    font-size: 20px;
}

.about-modal-content .m-pf-about-p {
    font-size: 14px;
    line-height: 1.6;
    color: #4c4c4e;
    margin: 0 0 14px;
}

body.dark-theme .about-modal-content .m-pf-about-p {
    color: #c7c7cc;
}

.about-help-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 4px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 6px;
    cursor: pointer;
    font-size: 14px;
    color: #1c1c1e;
}

body.dark-theme .about-help-row {
    border-top-color: rgba(255, 255, 255, 0.1);
    color: #f5f5f5;
}

.about-help-row svg {
    flex-shrink: 0;
}

body.dark-theme .about-help-row svg path,
body.dark-theme .about-help-row svg polyline,
body.dark-theme .about-help-row svg line {
    stroke: #aaaaae;
}

.about-copyright {
    text-align: center;
    font-size: 11px;
    color: #86868b;
    margin-top: 22px;
}

body.dark-theme .about-copyright {
    color: #8a8a8e;
}

.otp-content {
    position: relative;
    background: #ffffff;
    text-align: center;
}

body.dark-theme .otp-content {
    background: #1c1c1e;
}

.otp-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    color: #1c1c1e;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.otp-close-btn:hover {
    background: rgba(0, 0, 0, 0.12);
}

body.dark-theme .otp-close-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

body.dark-theme .otp-close-btn:hover {
    background: rgba(255, 255, 255, 0.18);
}

.otp-content .feedback-header p {
    color: #6e6e73;
    font-size: 14px;
    margin-top: 6px;
}

body.dark-theme .otp-content .feedback-header p {
    color: #a1a1a6;
}

.otp-content .input-group {
    text-align: left;
}

.otp-code-input {
    letter-spacing: 8px;
    font-weight: 700;
    text-align: center;
}

.otp-footer-row {
    margin-top: 18px;
    font-size: 14px;
    color: #6e6e73;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

body.dark-theme .otp-footer-row {
    color: #a1a1a6;
}

.otp-resend-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.otp-resend-btn:disabled {
    color: #a1a1a6;
    cursor: not-allowed;
    text-decoration: none;
}

.feedback-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 20px 0;
}

.feedback-chip {
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.feedback-chip.selected {
    background: #ff8c00;
    color: white;
    border-color: #ff8c00;
}

textarea {
    width: 90%;
    height: 80px;
    border-radius: 12px;
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.3);
    resize: none;
    font-family: inherit;
    margin-bottom: 20px;
}

/* ================================
   PROFILE PAGE
   ================================ */
.pf-banner {
    position: relative;
    width: 100%;
    border-radius: 22px;
    overflow: hidden;
    padding: 26px 30px 22px;
    box-sizing: border-box;
    background: linear-gradient(115deg, #cdf6e8 0%, #eafcf6 42%, #ffffff 78%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    margin-bottom: 34px;
}

.pf-banner-deco {
    position: absolute;
    top: 0;
    right: 0;
    width: 46%;
    max-width: 320px;
    height: 100%;
    pointer-events: none;
}

.pf-banner-deco svg {
    width: 100%;
    height: 100%;
}

.pf-banner .profile-avatar-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0;
    margin-top: 0;
}

.pf-banner .avatar-circle {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.pf-banner .profile-name-group h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
    color: #1c1c1e;
    line-height: 1.3;
}

.pf-banner .profile-name-group h2 strong {
    font-weight: 700;
}

.pf-handle {
    position: relative;
    z-index: 1;
    margin: 6px 0 0;
    padding-left: 120px;
    font-size: 17px;
    font-weight: 700;
    color: #4c4c4e;
}

body.dark-theme .pf-banner .profile-name-group h2 {
    color: #1c1c1e;
}

body.dark-theme .pf-handle {
    color: #4c4c4e;
}

.pf-body {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 40px;
    align-items: start;
}

@media (max-width: 860px) {
    .pf-body {
        grid-template-columns: 1fr;
    }
    .pf-handle {
        padding-left: 0;
        margin-top: 10px;
    }
}

.pf-stats-row {
    display: flex;
    justify-content: center;
    gap: 48px;
    margin-bottom: 34px;
}

.pf-stat {
    background: none;
    border: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
}

.pf-stat i {
    font-size: 20px;
    color: #1c1c1e;
}

body.dark-theme .pf-stat i {
    color: #f5f5f5;
}

.pf-stat-label {
    font-size: 14px;
    font-weight: 500;
    color: #1c1c1e;
}

body.dark-theme .pf-stat-label {
    color: #f5f5f5;
}

.pf-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #1c1c1e;
    text-decoration: underline;
    text-underline-offset: 4px;
}

body.dark-theme .pf-stat-value {
    color: #f5f5f5;
}

.pf-orders-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    color: #1c1c1e;
}

body.dark-theme .pf-orders-title {
    color: #f5f5f5;
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

.pf-orders-section {
    margin-top: 18px;
}

.pf-orders-subtitle {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 14px;
    color: #1c1c1e;
}

body.dark-theme .pf-orders-subtitle {
    color: #f5f5f5;
}

.pf-order-list {
    display: flex;
    flex-direction: column;
}

.pf-order-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 4px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
    font-size: 14px;
    color: #1c1c1e;
}

body.dark-theme .pf-order-row {
    color: #f5f5f5;
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

.pf-order-row:last-child {
    border-bottom: none;
}

.pf-order-status {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1.5px solid #1c1c1e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex: 0 0 auto;
}

body.dark-theme .pf-order-status {
    border-color: #f5f5f5;
}

.pf-order-status.delivered {
    color: #1c1c1e;
}

body.dark-theme .pf-order-status.delivered {
    color: #f5f5f5;
}

.pf-order-status.pending {
    color: #8e8e93;
    border-color: #8e8e93;
}

.pf-order-empty {
    text-align: center;
    font-size: 13px;
    color: #8e8e93;
    margin: 0;
    padding: 8px 0 4px;
}

.pf-info-card {
    background: #e6e6e8;
    border-radius: 18px;
    padding: 22px 24px;
    margin-bottom: 26px;
}

body.dark-theme .pf-info-card {
    background: #2c2c2e;
}

.pf-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
}

.pf-info-label {
    font-size: 14px;
    font-weight: 700;
    color: #1c1c1e;
    white-space: nowrap;
}

body.dark-theme .pf-info-label {
    color: #f5f5f5;
}

.pf-info-value {
    font-size: 14px;
    color: #6b6b6f;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-info-value-group {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pf-info-value-group .pf-info-value {
    min-width: 0;
}

.pf-verify-email-btn {
    flex-shrink: 0;
    border: none;
    border-radius: 999px;
    background: #ff8c00;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
    padding: 5px 12px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}

.pf-verify-email-btn:hover {
    background: #e67e00;
}

.pf-verify-email-btn:active {
    transform: scale(0.96);
}

.pf-verify-email-btn:disabled {
    background: #c7c7cc;
    cursor: default;
}

body.dark-theme .pf-info-value {
    color: #aeaeb2;
}

.pf-info-editable {
    cursor: pointer;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.25);
}

.pf-info-editable:hover {
    color: #ff5900;
}

.pf-password-block {
    margin-bottom: 28px;
}

.pf-password-block h4 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 12px;
    color: #1c1c1e;
}

body.dark-theme .pf-password-block h4 {
    color: #f5f5f5;
}

.pf-password-trigger {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    background: #f0f0f1;
    border: none;
    border-radius: 27px;
    padding: 8px;
    cursor: pointer;
    text-align: left;
}

body.dark-theme .pf-password-trigger {
    background: #2c2c2e;
}

.pf-lock-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #1c1c1e;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 14px;
}

.pf-password-dots {
    font-size: 20px;
    letter-spacing: 3px;
    color: #8e8e93;
}

.pf-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: transparent;
    border: 1.5px solid #1c1c1e;
    border-radius: 27px;
    padding: 12px 26px;
    font-size: 15px;
    font-weight: 600;
    color: #1c1c1e;
    cursor: pointer;
    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

body.dark-theme .pf-logout-btn {
    border-color: #f5f5f5;
    color: #f5f5f5;
}

.pf-logout-btn:hover {
    background: rgba(0, 0, 0, 0.04);
}

body.dark-theme .pf-logout-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.pf-logout-btn:active {
    transform: scale(0.97);
}

.avatar-circle {
    width: 100px;
    height: 100px;
    background: var(--card-bg, #fff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.avatar-circle .user-main-icon {
    font-size: 40px;
    color: #ff8c00;
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.avatar-circle .camera-hover-icon {
    position: absolute;
    font-size: 28px;
    color: #fff;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 2;
}

.avatar-circle:hover {
    background: rgba(0, 0, 0, 0.4);
}

.avatar-circle:hover .user-main-icon {
    opacity: 0;
    transform: scale(0.8);
}

.avatar-circle:hover .camera-hover-icon {
    opacity: 1;
    transform: translateY(0);
}

body.dark-theme .avatar-circle {
    background: #1c1c1e;
}

body.dark-theme .profile-name-group h2 {
    color: #ffffff;
}

body.dark-theme .profile-name-group p {
    color: #a1a1a6;
}

/* ================================
   SECONDARY BUTTON
   ================================ */
.secondary-btn {
    background: transparent;
    border: 1px solid #ddd;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
}

.alt-separator {
    margin: 20px 0 !important;
    opacity: 0.6;
}

/* ================================
   BENTO CARDS
   ================================ */
.bento-card {
    padding: 25px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid #fff;
    transition: all 0.3s ease;
}

body.dark-theme .bento-card {
    background: rgba(44, 44, 46, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.bento-card.wide {
    grid-column: span 2;
}

.bento-card i {
    font-size: 24px;
    color: #ff8c00;
    margin-bottom: 15px;
}

.bento-card h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
}
.bento-card p {
    color: #666;
    font-size: 14px;
    margin: 0;
}

body.dark-theme h2,
body.dark-theme h3 {
    color: #f2f2f7;
}

.bento-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ================================
   CART MODAL
   ================================ */
.cart-modal-box {
    width: 75%;
    height: 75%;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 40px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.92);
    transition:
        transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.22s ease;
}

.modal-overlay.active .cart-modal-box {
    transform: scale(1);
}

body.dark-theme .cart-modal-box {
    background: rgba(44, 44, 46, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

.cart-modal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 24px;
    position: relative;
    background: transparent;
    font-size: 16px;
    font-weight: 600;
    color: #1c1c1e;
}

body.dark-theme .cart-modal-header {
    color: #ffffff;
}

.cart-close-btn {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #1c1c1e;
    line-height: 1;
    padding: 4px 8px;
}

body.dark-theme .cart-close-btn {
    color: #ffffff;
}

.cart-close-btn:hover {
    opacity: 0.6;
}

.cart-modal-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    padding: 16px;
}

.cart-items-list {
    flex: 1;
    overflow-y: auto;
    padding-right: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cart-item-row {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    padding: 12px;
}

body.dark-theme .cart-item-row {
    background: rgba(255, 255, 255, 0.08);
}

.cart-item-img {
    width: 130px;
    height: 130px;
    border-radius: 12px;
    object-fit: cover;
    background: #e5e5e7;
    flex-shrink: 0;
}

/* ================================
   CART QTY CONTROLS
   ================================ */
.cart-qty-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.qty-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.04);
    color: #1c1c1e;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: background 0.2s ease;
}

.qty-btn:hover {
    background: rgba(0, 0, 0, 0.1);
}

.qty-btn:active {
    transform: scale(0.9);
}

body.dark-theme .qty-btn {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

body.dark-theme .qty-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.qty-number {
    font-size: 15px;
    font-weight: 700;
    color: #1c1c1e;
    min-width: 16px;
    text-align: center;
}

body.dark-theme .qty-number {
    color: #ffffff;
}

.cart-item-info {
    flex: 1;
}

.cart-item-name {
    font-size: 15px;
    font-weight: 600;
    color: #1c1c1e;
    margin-bottom: 6px;
}

body.dark-theme .cart-item-name {
    color: #ffffff;
}

.cart-item-price {
    font-size: 14px;
    color: #86868b;
    background: rgba(0, 0, 0, 0.06);
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
}

.cart-request-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 140, 0, 0.1);
    border: 1px solid rgba(255, 140, 0, 0.3);
    color: #ff8c00;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition:
        background 0.2s ease,
        transform 0.15s ease;
}

.cart-request-btn:hover {
    background: rgba(255, 140, 0, 0.18);
}

.cart-request-btn:active {
    transform: scale(0.96);
}

.cart-request-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

body.dark-theme .cart-request-btn {
    background: rgba(255, 140, 0, 0.15);
    border-color: rgba(255, 140, 0, 0.35);
    color: #ffa733;
}

.qty-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.qty-btn:disabled:hover {
    background: rgba(0, 0, 0, 0.04);
}

body.dark-theme .qty-btn:disabled:hover {
    background: rgba(255, 255, 255, 0.06);
}

.cart-remove-btn {
    background: none;
    border: none;
    color: #ff3b30;
    cursor: pointer;
    font-size: 16px;
    padding: 8px;
}

.cart-divider {
    width: 1px;
    background: rgba(0, 0, 0, 0.08);
    margin: 0 40px;
    flex-shrink: 0;
    align-self: stretch;
}

body.dark-theme .cart-divider {
    background: rgba(255, 255, 255, 0.08);
}

.cart-summary {
    width: 180px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.cart-count {
    font-size: 18px;
    font-weight: 700;
    color: #1c1c1e;
}

body.dark-theme .cart-count {
    color: #ffffff;
}

.cart-total {
    font-size: 16px;
    font-weight: 600;
    color: #1c1c1e;
}

body.dark-theme .cart-total {
    color: #ffffff;
}

.cart-checkout-btn {
    background: #1c1c1e;
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s ease;
    width: 100%;
}

body.dark-theme .cart-checkout-btn {
    background: #ffffff;
    color: #1c1c1e;
}

.cart-checkout-btn:hover {
    opacity: 0.8;
}

.cart-checkout-btn:disabled,
.cart-checkout-btn.disabled {
    background: #d1d1d6;
    color: #8e8e93;
    cursor: not-allowed;
    opacity: 1;
}

body.dark-theme .cart-checkout-btn:disabled,
body.dark-theme .cart-checkout-btn.disabled {
    background: #3a3a3c;
    color: #6e6e73;
}

/* ================================
   SHIMMER / SKELETON
   ================================ */
.skeleton-box {
    position: relative;
    overflow: hidden;
    background: #e5e5e7;
}

.skeleton-box::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.6) 50%,
        transparent 100%
    );
    animation: shimmer-slide 1.2s infinite;
}

@keyframes shimmer-slide {
    from {
        left: -100%;
    }
    to {
        left: 100%;
    }
}

body.dark-theme .skeleton-box {
    background: #3a3a3c;
}

body.dark-theme .skeleton-box::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 100%
    );
}

/* ================================
   CART EMPTY STATE
   ================================ */
.cart-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #86868b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.cart-empty-state i {
    font-size: 60px;
    color: #ff8c00;
    margin-bottom: 16px;
    display: block;
}

.cart-empty-state p {
    font-size: 18px;
    font-weight: 600;
    color: #1c1c1e;
    margin: 0 0 6px 0;
}

body.dark-theme .cart-empty-state p {
    color: #ffffff;
}

.cart-empty-state small {
    display: block;
    font-size: 14px;
    color: #86868b;
    margin-top: 4px;
}

/* ================================
   LANGUAGE DROPDOWN
   ================================ */
#language-dropdown {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    max-height: 300px;
    overflow-y: auto;
    animation: dropdownPop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin: 4px 16px;
}

body.dark-theme #language-dropdown {
    background: rgba(44, 44, 46, 0.97);
    border-color: rgba(255, 255, 255, 0.08);
}

.language-item {
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 500;
    color: #1c1c1e;
    cursor: pointer;
    transition: background 0.15s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.language-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

body.dark-theme .language-item {
    color: #ffffff;
}
body.dark-theme .language-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.language-item.active-language {
    color: #ff8c00;
    font-weight: 700;
}

.language-item.active-language::after {
    content: "✓";
    margin-left: auto;
    color: #ff8c00;
}

.lang-indicator {
    font-size: 15px;
    color: #4d4d4d;
    margin-left: 8px;
    font-weight: 400;
}

body.dark-theme .lang-indicator {
    color: #a1a1a6;
}

/* ================================
   NOTIFICATION DOT & ITEMS
   ================================ */
.noti-dot {
    width: 8px;
    height: 8px;
    background: #ff3b30;
    border-radius: 50%;
    position: absolute;
    top: -2px;
    right: -2px;
    border: 1.5px solid white;
    z-index: 10;
}

body.dark-theme .noti-dot {
    border-color: #1c1c1e;
}

.noti-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    animation: fadeIn 0.3s ease;
}

body.dark-theme .noti-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.noti-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 140, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.noti-item-icon i {
    font-size: 18px;
    color: #ff8c00;
}

.noti-item-content {
    flex: 1;
}

.noti-item-content p {
    font-size: 14px;
    line-height: 1.6;
    color: #1c1c1e;
    margin: 0;
}

body.dark-theme .noti-item-content p {
    color: #ffffff;
}

.noti-dismiss-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #86868b;
    font-size: 16px;
    padding: 4px;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

/* ================================
   FOLLOWING LIST (profile -> "Following" stat)
   Same row skeleton as .noti-item, but with a real seller avatar
   instead of an icon, and an unfollow action instead of dismiss.
   ================================ */
.following-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: background 0.15s ease;
    animation: fadeIn 0.3s ease;
}

.following-row:hover {
    background: rgba(255, 140, 0, 0.06);
}

body.dark-theme .following-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

body.dark-theme .following-row:hover {
    background: rgba(255, 140, 0, 0.1);
}

.following-row-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: #ccc;
    flex-shrink: 0;
}

.following-row-content {
    flex: 1;
    min-width: 0;
}

.following-row-name {
    font-size: 14px;
    font-weight: 600;
    color: #1c1c1e;
    margin: 0 0 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.dark-theme .following-row-name {
    color: #ffffff;
}

.following-row-handle {
    font-size: 13px;
    color: #86868b;
    margin: 0;
}

.following-row-unfollow-btn {
    flex-shrink: 0;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: none;
    font-size: 13px;
    font-weight: 600;
    color: #1c1c1e;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.following-row-unfollow-btn:hover {
    background: #ff3b30;
    border-color: #ff3b30;
    color: #ffffff;
}

body.dark-theme .following-row-unfollow-btn {
    border-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.noti-dismiss-btn:hover {
    color: #ff3b30;
}

.noti-approve-btn {
    display: inline-block;
    margin-top: 8px;
    background: linear-gradient(135deg, #ff4500, #ff8c00);
    color: #ffffff;
    border: none;
    border-radius: 20px;
    padding: 8px 18px;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.noti-approve-btn:hover {
    opacity: 0.9;
}

.noti-approve-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.noti-item-clickable {
    cursor: pointer;
    transition: background 0.15s ease;
}

.noti-item-clickable:hover {
    background: rgba(255, 140, 0, 0.06);
}

body.dark-theme .noti-item-clickable:hover {
    background: rgba(255, 140, 0, 0.1);
}

/* ================================
   LIVE NOTIFICATION POPUP
   A single reusable "toast" that slides in from the top-right the
   instant a realtime notification arrives while the app is open —
   the in-app equivalent of a push notification (YouTube-bell style).
   Distinct from .toast (which is bottom-center, for short-lived
   confirmations like "Added to wishlist!").
   ================================ */
.live-noti-popup {
    position: fixed;
    top: 24px;
    right: 24px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: min(360px, calc(100vw - 48px));
    background: #ffffff;
    border-radius: 16px;
    padding: 16px 16px 16px 14px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
    z-index: 6000;
    opacity: 0;
    transform: translateX(24px);
    pointer-events: none;
    cursor: pointer;
    transition:
        opacity 0.28s ease,
        transform 0.28s ease;
}

.live-noti-popup.show {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

body.dark-theme .live-noti-popup {
    background: #2c2c2e;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}

.live-noti-popup-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 140, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.live-noti-popup-icon i {
    font-size: 16px;
    color: #ff8c00;
}

.live-noti-popup-body {
    flex: 1;
    min-width: 0;
}

.live-noti-popup-title {
    margin: 0 0 2px 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #ff8c00;
}

.live-noti-popup-msg {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #1c1c1e;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.dark-theme .live-noti-popup-msg {
    color: #ffffff;
}

.live-noti-popup-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #86868b;
    font-size: 14px;
    padding: 4px;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.live-noti-popup-close:hover {
    color: #ff3b30;
}

@media (max-width: 640px) {
    .live-noti-popup {
        top: 16px;
        right: 16px;
        left: 16px;
        width: auto;
    }
}

/* ================================
   CUSTOM SVG NAV ICONS
   ================================ */
.nav-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* Sized to match .nav-icon exactly so wrapping it changes nothing about
   the existing icon/text gap — it just gives the dot a home to anchor to. */
.nav-icon-wrap {
    position: relative;
    display: inline-flex;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.nav-icon-fill {
    display: none;
}

.sidebar a.active .nav-icon-outline {
    display: none;
}

.sidebar a.active .nav-icon-fill {
    display: block;
}

/* ================================
   STUDIO LINK — REVEAL STATE
   ================================ */
#studio-link {
    overflow: hidden;
}

/* Fully hidden / collapsed — before first login ever happens */
.studio-nav-hidden {
    display: none !important;
}

/* Present but not yet animated in (e.g. returning users after the
   one-time reveal has already played) */
.studio-nav-ready {
    display: flex;
}

/* One-time reveal: sidebar grows to make room, link pops + fades in.
   Short and pulsy on purpose — this only ever plays once per user. */
.studio-reveal-pop {
    display: flex;
    animation: studioPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes studioPopIn {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(-4px);
    }
    60% {
        opacity: 1;
        transform: scale(1.06) translateY(0);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Brief orange glow so the reveal reads as a small reward, then settles
   back to the normal resting nav-link style automatically. */
.studio-reveal-pop {
    background-color: rgba(255, 140, 0, 0.15);
    color: #ff8c00;
    animation:
        studioPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both,
        studioGlowSettle 0.9s ease-out 0.15s both;
}

@keyframes studioGlowSettle {
    0% {
        background-color: rgba(255, 140, 0, 0.28);
    }
    100% {
        background-color: transparent;
    }
}

/* Sidebar grows in height to make room for the new Studio link.
   Uses max-height so it animates smoothly without knowing exact px. */
.glass-nav-container.studio-growing {
    animation: navGrow 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes navGrow {
    0% {
        transform: scaleY(0.97);
    }
    100% {
        transform: scaleY(1);
    }
}

/* ================================
   SVG ICON THEMING
   ================================ */

/* Default (light theme, inactive) - black */
.nav-icon {
    filter: brightness(0);
}

/* Active - orange */
.sidebar a.active .nav-icon {
    filter: brightness(0) saturate(100%) invert(55%) sepia(97%) saturate(1000%)
        hue-rotate(1deg) brightness(103%) contrast(104%);
}

/* Dark theme inactive - white */
body.dark-theme .nav-icon {
    filter: brightness(0) invert(1);
}

/* Dark theme active - still orange */
body.dark-theme .sidebar a.active .nav-icon {
    filter: brightness(0) saturate(100%) invert(55%) sepia(97%) saturate(1000%)
        hue-rotate(1deg) brightness(103%) contrast(104%);
}
#discover-view,
#pinned-view,
#profile-view,
#payments-view,
#signup-view {
    min-height: unset;
    height: auto;
    overflow: hidden;
}
#guest-wrapper {
    overflow: hidden;
}
/* ============ SCROLLBAR HIDE ============ */
* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
*::-webkit-scrollbar {
    display: none;
}

/* ============ WISHLIST HEART OVERLAY ============ */
.product-img-wrap {
    position: relative;
    overflow: hidden;
}
.wishlist-heart {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    opacity: 0;
    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}
.product-card:hover .wishlist-heart,
.wishlist-heart.active {
    opacity: 1;
}
.wishlist-heart:active {
    transform: scale(0.86);
}
.wishlist-heart i {
    font-size: 19px;
    color: #ffffff;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
    transition: all 0.2s ease;
}
.wishlist-heart:hover i,
.wishlist-heart.active i {
    background: linear-gradient(135deg, #ff4500, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============ CART MODAL — BEHIND NAV ============ */
#recent-modal {
    z-index: 1800 !important;
}
#notifications-modal {
    z-index: 1800 !important;
}

/* ============ EDIT PROFILE BOTTOM SHEET ============ */
.edit-profile-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(0, 0, 0, 0.45);
    display: none;
    align-items: flex-end;
    justify-content: center;
    backdrop-filter: blur(4px);
}
.edit-profile-modal.open {
    display: flex;
}
.edit-profile-sheet {
    background: #fff;
    border-radius: 22px 22px 0 0;
    width: 100%;
    max-width: 640px;
    padding: 24px 20px 36px;
    max-height: 88vh;
    overflow-y: auto;
    box-sizing: border-box;
}
body.dark-theme .edit-profile-sheet {
    background: #1c1c1e;
}
.ep-handle {
    width: 40px;
    height: 4px;
    background: #e0e0e0;
    border-radius: 4px;
    margin: 0 auto 20px;
}
body.dark-theme .ep-handle {
    background: #3a3a3c;
}
.edit-profile-sheet h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
}
.ep-banner-zone {
    width: 100%;
    height: 80px;
    border: 2px dashed #ff8c00;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    color: #ff8c00;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.ep-field {
    margin-bottom: 14px;
}
.ep-field label {
    font-size: 11px;
    font-weight: 700;
    color: #8e8e93;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    display: block;
}
.ep-field input,
.ep-field textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 11px;
    border: 1px solid #e0e0e0;
    font-size: 15px;
    box-sizing: border-box;
    background: #f2f2f7;
    font-family: inherit;
    outline: none;
    transition: border-color 0.18s;
}
.ep-field input:focus,
.ep-field textarea:focus {
    border-color: #ff8c00;
}
body.dark-theme .ep-field input,
body.dark-theme .ep-field textarea {
    background: #2c2c2e;
    border-color: #3a3a3c;
    color: #fff;
}
.ep-field textarea {
    resize: none;
    height: 80px;
    line-height: 1.5;
}
.btn-ep-save {
    width: 100%;
    padding: 15px;
    border-radius: 14px;
    border: none;
    background: #ff8c00;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
    font-family: inherit;
}
.btn-ep-cancel {
    width: 100%;
    padding: 13px;
    border-radius: 14px;
    border: none;
    background: transparent;
    color: #ff3b30;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    margin-top: 4px;
}
/* ================================
   PRODUCT DETAIL VIEW — EXACT LUNACY DESIGN
   ================================ */

#product-detail-view.main-content-view {
    padding: 70px 40px 40px 40px;
}

body.dark-theme #product-detail-view.main-content-view {
    color: #ffffff;
}

/* Two-column layout: image + thumbnails on the left, product info
   (name → seller card) in its own left-aligned column beside it.
   "You may also like" wraps to a new row and spans the full width. */
.pd-container {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 60px;
}

.pd-left {
    flex: 0 0 auto;
}

.pd-right {
    flex: 1 1 380px;
    min-width: 300px;
    text-align: left;
}

.pd-similar {
    flex: 1 1 100%;
    width: 100%;
}

/* Product Image */
.pd-hero {
    width: 508px;
    height: 471px;
    border-radius: 30px;
    border: 1px solid #808080;
    background: #f5f5f5;
    overflow: hidden;
}

.pd-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Thumbnails Container */
.pd-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 20px;
}

.pd-thumb {
    width: 88px;
    height: 88px;
    flex: 0 0 88px;
    border-radius: 10px;
    border: 1px solid #808080;
    background: #eeeeee;
    cursor: pointer;
    overflow: hidden;
}

.pd-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pd-thumb.active {
    border: 2px solid #ff5900;
}

/* Product Info Section */
.pd-info {
    margin-top: 0;
    text-align: left;
}

.pd-info h1 {
    font-family: "Inter", sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 38px;
    color: #000000;
    margin: 0 0 16px 0;
}

body.dark-theme .pd-info h1 {
    color: #ffffff;
}

/* Price Badge */
.pd-price-badge {
    font-family: "Inter", sans-serif;
    font-size: 26px;
    font-weight: 600;
    line-height: 31px;
    color: #000000;
    margin-bottom: 24px;
}

body.dark-theme .pd-price-badge {
    color: #ffffff;
}

/* Description Section */
.pd-description-box {
    width: 453px;
    height: 89px;
    border-radius: 10px;
    border: 1px solid #808080;
    padding: 16px;
    margin-bottom: 24px;
}

body.dark-theme .pd-description-box {
    border-color: #48484a;
    background: rgba(255, 255, 255, 0.05);
}

.pd-desc-label {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    color: #000000;
    margin-bottom: 8px;
}

body.dark-theme .pd-desc-label {
    color: #ffffff;
}

.pd-description-box p {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #000000;
    margin: 0;
}

body.dark-theme .pd-description-box p {
    color: #aeaeb2;
}

/* Order Request Button */
.pd-btn-order {
    width: 275px;
    height: 48px;
    border-radius: 27px;
    background: #fafafa;
    border: 1px solid rgba(74, 74, 74, 0.38);
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.22);
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #000000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

body.dark-theme .pd-btn-order {
    background: #2c2c2e;
    border-color: #48484a;
    color: #ffffff;
}

.pd-btn-order:hover {
    opacity: 0.9;
}

.pd-btn-order:disabled {
    background: #ececec;
    border-color: rgba(0, 0, 0, 0.12);
    color: #a1a1a6;
    cursor: not-allowed;
    opacity: 1;
}

body.dark-theme .pd-btn-order:disabled {
    background: #3a3a3c;
    border-color: #48484a;
    color: #6e6e73;
}

.pd-btn-order:disabled i {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: inherit;
}

.pd-btn-order i {
    font-size: 20px;
    background: linear-gradient(90deg, #ff9696 0%, #ff5900 96%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Seller-own-listing read-only stats — shown in place of the order
   request / add-to-cart / wishlist buttons when the logged-in viewer
   is the product's own seller. Mirrors the pill language of
   .pd-btn-order / .pd-btn-primary above rather than introducing a new
   visual style. */
.pd-owner-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.pd-owner-stat-box {
    flex: 1;
    height: 64px;
    border-radius: 20px;
    background: #fafafa;
    border: 1px solid rgba(74, 74, 74, 0.38);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

body.dark-theme .pd-owner-stat-box {
    background: #2c2c2e;
    border-color: #48484a;
}

.pd-owner-stat-label {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #6e6e73;
}

body.dark-theme .pd-owner-stat-label {
    color: #aeaeb2;
}

.pd-owner-stat-value {
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #000000;
}

body.dark-theme .pd-owner-stat-value {
    color: #ffffff;
}

/* Action Buttons Container */
.pd-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

/* Add to Cart Button */
.pd-btn-primary {
    width: 201px;
    height: 41px;
    border-radius: 27px;
    background: #ff5900;
    border: 1px solid #ff5900;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pd-btn-primary:hover {
    background: #e04e00;
}

.pd-btn-primary:active {
    transform: scale(0.98);
}

/* Wishlist Button */
.pd-btn-wishlist {
    width: 201px;
    height: 41px;
    border-radius: 27px;
    background: transparent;
    border: 1px solid #ff2f00;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #000000;
    cursor: pointer;
}

body.dark-theme .pd-btn-wishlist {
    color: #ffffff;
    border-color: #ff5900;
}

.pd-btn-wishlist:hover {
    background: rgba(255, 89, 0, 0.05);
}

/* Seller Card */
.pd-seller-card {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
    cursor: pointer;
}

.pd-seller-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #a3a3a3;
    object-fit: cover;
}

.pd-seller-info {
    flex: 1;
}

.pd-seller-name {
    font-family: "Inter", sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 20px;
    color: #000000;
    margin: 0;
}

body.dark-theme .pd-seller-name {
    color: #ffffff;
}

.pd-seller-handle {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    color: #5e5e5e;
    margin: 4px 0 0 0;
}

body.dark-theme .pd-seller-handle {
    color: #aeaeb2;
}

.pd-seller-rating {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 15px;
    color: #000000;
    margin: 8px 0 0 0;
}

body.dark-theme .pd-seller-rating {
    color: #ffffff;
}

.pd-seller-distance {
    width: 147px;
    height: 73px;
    border-radius: 13px;
    background: rgba(211, 211, 211, 0.34);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pd-distance-number {
    font-family: "Inter", sans-serif;
    font-size: 44px;
    font-weight: 600;
    line-height: 53px;
    color: #616161;
    margin: 0;
}

.pd-distance-label {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 15px;
    color: #616161;
    margin: 0;
}

.pd-distance-unit {
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 21px;
    color: #595959;
    margin: 0;
}

/* You May Also Like Section */
.pd-similar {
    margin-top: 60px;
    border-top: 1px solid #bdbdbd;
    padding-top: 32px;
}

body.dark-theme .pd-similar {
    border-top-color: #48484a;
}

.pd-similar h3 {
    font-family: "Inter", sans-serif;
    font-size: 19px;
    font-weight: 500;
    line-height: 22px;
    color: #8c8c8c;
    margin: 0 0 24px 0;
}

body.dark-theme .pd-similar h3 {
    color: #aeaeb2;
}

.pd-similar-grid {
    display: flex;
    gap: 20px;
    overflow-x: auto;
}

.pd-similar-item {
    flex: 0 0 auto;
    width: 191px;
    cursor: pointer;
}

.pd-similar-img {
    width: 191px;
    height: 146px;
    border-radius: 31px;
    background: #eeeeee;
    border: 1px solid rgba(128, 128, 128, 0.22);
    box-shadow: -4px 0px 20px rgba(0, 0, 0, 0.09);
    object-fit: cover;
    margin-bottom: 12px;
}

body.dark-theme .pd-similar-img {
    background: #3a3a3c;
    border-color: #48484a;
}

.pd-similar-name {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 15px;
    color: #6b6b6b;
    margin: 0 0 6px 0;
}

body.dark-theme .pd-similar-name {
    color: #aeaeb2;
}

.pd-similar-price {
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 18px;
    color: #6b6b6b;
    margin: 0;
}

body.dark-theme .pd-similar-price {
    color: #aeaeb2;
}

/* ================================
   SELLER MARKETPLACE VIEW
   ================================ */

#seller-marketplace-view.main-content-view {
    padding: 40px;
    background: #ffffff;
}

body.dark-theme #seller-marketplace-view.main-content-view {
    background: #1c1c1e;
    color: #ffffff;
}

.sm-banner {
    width: 100%;
    height: 180px;
    background: linear-gradient(135deg, #000000 0%, #808080 100%);
    background-size: cover;
    background-position: center;
    border-radius: 18px;
    margin-bottom: 0;
}

.sm-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 0 4px;
    margin-bottom: 28px;
}

.sm-avatar {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: #ffffff;
    object-fit: cover;
    margin-top: -54px;
    border: 4px solid #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    flex: 0 0 auto;
}

body.dark-theme .sm-avatar {
    background: #2c2c2e;
    border-color: #1c1c1e;
}

.sm-header-main {
    flex: 1;
    min-width: 0;
    padding-top: 10px;
}

.sm-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 10px;
}

.sm-stats {
    font-family: "Inter", sans-serif;
    font-size: 15px;
    color: #5c5c5c;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sm-stats strong {
    color: #1c1c1e;
    font-weight: 700;
}

body.dark-theme .sm-stats {
    color: #aeaeb2;
}

body.dark-theme .sm-stats strong {
    color: #ffffff;
}

.sm-dot {
    color: #bdbdbd;
}

.sm-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.sm-follow-btn {
    height: 36px;
    padding: 0 22px;
    border-radius: 24px;
    background: #ffffff;
    border: 1.5px solid #ff5900;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #ff5900;
    cursor: pointer;
}

body.dark-theme .sm-follow-btn {
    background: #2c2c2e;
}

.sm-follow-btn:hover {
    background: rgba(255, 89, 0, 0.06);
}

.sm-follow-btn.is-following {
    background: #ff5900;
    color: #ffffff;
}

body.dark-theme .sm-follow-btn.is-following {
    background: #ff5900;
    color: #ffffff;
}

.sm-follow-btn[hidden] {
    display: none;
}

.sm-more-wrap {
    position: relative;
}

.sm-more-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid rgba(0, 0, 0, 0.15);
    color: #1c1c1e;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.dark-theme .sm-more-btn {
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.sm-more-btn:hover {
    background: rgba(0, 0, 0, 0.04);
}

.sm-more-menu {
    display: none;
    position: absolute;
    top: 44px;
    right: 0;
    background: var(--card-bg, #ffffff);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    z-index: 20;
    min-width: 160px;
}

.sm-more-menu.active {
    display: block;
}

.sm-more-menu button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 12px 16px;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    color: var(--text-color, #1c1c1e);
    cursor: pointer;
}

.sm-more-menu button:hover {
    background: rgba(0, 0, 0, 0.05);
}

body.dark-theme .sm-more-menu button:hover {
    background: rgba(255, 255, 255, 0.08);
}

.sm-header-bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    margin-top: 10px;
}

.sm-identity {
    flex: 0 0 auto;
    min-width: 0;
}

.sm-identity h2 {
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 21px;
    color: #1c1c1e;
    margin: 0 0 4px 0;
}

body.dark-theme .sm-identity h2 {
    color: #f5f5f7;
}

.sm-handle {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #757575;
    margin: 0;
}

body.dark-theme .sm-handle {
    color: #aeaeb2;
}

.sm-bio {
    flex: 1;
    min-width: 0;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #5c5c5c;
    margin: 0;
}

body.dark-theme .sm-bio {
    color: #aeaeb2;
}

.sm-tabs {
    border-bottom: 1px solid #bdbdbd;
    margin-bottom: 32px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

body.dark-theme .sm-tabs {
    border-bottom-color: #48484a;
}

.sm-tab {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 15px;
    color: #5c5c5c;
    background: transparent;
    border: none;
    padding: 16px 6px;
    cursor: pointer;
}

body.dark-theme .sm-tab {
    color: #aeaeb2;
}

.sm-tab.active {
    border-bottom: 2px solid #ff5900;
    color: #000000;
}

body.dark-theme .sm-tab.active {
    color: #ffffff;
}

.sm-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

@media (max-width: 900px) {
    .sm-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .sm-header-bottom {
        flex-direction: column;
        gap: 10px;
    }
}

.sm-product-card {
    cursor: pointer;
}

.sm-product-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 18px;
    background: linear-gradient(135deg, #1c1c1e 0%, #808080 100%);
    object-fit: cover;
    display: block;
    margin-bottom: 10px;
}

body.dark-theme .sm-product-img {
    background: linear-gradient(135deg, #333333 0%, #666666 100%);
}

.sm-product-price {
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 18px;
    color: #1c1c1e;
    margin: 0 0 4px 0;
}

body.dark-theme .sm-product-price {
    color: #f5f5f7;
}

.sm-product-name {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 15px;
    color: #6b6b6b;
    margin: 0;
}

body.dark-theme .sm-product-name {
    color: #aeaeb2;
}
/* ================================
   AUTH CARD (LOGIN / SIGNUP)
   ================================ */
.auth-card {
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    padding: 60px 24px;
    box-sizing: border-box;
}

.auth-card-header {
    text-align: center;
    margin-bottom: 32px;
}

.auth-title {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    font-family: "Outfit", sans-serif;
    color: var(--text-color, #1c1c1e);
}

.auth-subtitle {
    margin: 6px 0 0 0;
    font-size: 17px;
    font-weight: 700;
    font-family: "Outfit", sans-serif;
    color: var(--text-color, #1c1c1e);
}

.auth-form-container {
    max-width: 320px;
    width: 100%;
    margin: 0 auto;
}

.auth-forgot-row {
    text-align: right;
    margin: -8px 0 20px 0;
}

.auth-link {
    color: #007aff !important;
    font-size: 14px;
    text-decoration: none;
    font-weight: 500;
}

.auth-link:hover {
    text-decoration: underline;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 24px 0;
}

.auth-divider span {
    flex: 1;
    height: 1px;
    background: rgba(0, 0, 0, 0.25);
}

body.dark-theme .auth-divider span {
    background: rgba(255, 255, 255, 0.25);
}

.auth-divider p {
    margin: 0;
    font-size: 14px;
    color: #86868b;
    font-family: "Outfit", sans-serif;
}

.auth-social-row {
    display: flex;
    gap: 14px;
}

.auth-footer-row {
    text-align: center;
    margin-top: 22px;
}

.auth-footer-row p {
    font-size: 13px;
    color: #86868b;
    margin: 0;
    line-height: 1.5;
    font-family: "Outfit", sans-serif;
}

.auth-footer-row a {
    color: #007aff;
    text-decoration: underline;
    font-weight: 500;
}

.auth-switch-row {
    text-align: center;
    margin-top: 25px;
    font-size: 14px;
    color: #86868b;
    font-family: "Outfit", sans-serif;
}

.auth-switch-row a {
    color: #ff8c00;
    font-weight: 600;
    text-decoration: none;
}

.auth-switch-row a:hover {
    text-decoration: underline;
}

/* ================================
   STUDIO (SELLER DASHBOARD)
   ================================ */
.studio-dashboard {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    font-family:
        "Outfit",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;
    color: var(--text-color, #1c1c1e);
    font-size: 16px;
}

.studio-dash-header h1 {
    font-size: 34px;
    font-weight: 800;
    margin: 0;
}
.studio-dash-header p {
    font-size: 16px;
    color: #86868b;
    margin: 4px 0 20px;
}

.studio-dash-tabs {
    display: flex;
    gap: 34px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    margin: 0 -40px 32px;
    padding: 16px 40px 0;
    overflow-x: auto;
    /* Stuck to the top of the view instead of scrolling away with the
       page — content scrolls up and is clipped hard behind this bar
       (solid bg, no blur) right at the active-tab line. The studio view
       has no sticky-header above it (that only shows on Home), so top:0
       pins this to the very top of the viewport. */
    position: sticky;
    top: 0;
    z-index: 40;
    background: #f7f7f7;
}
body.dark-theme .studio-dash-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.1);
    background: #1c1c1e;
}

.studio-tab {
    background: none;
    border: none;
    padding: 0 0 14px;
    font-size: 17px;
    font-weight: 700;
    font-family: "Outfit", sans-serif;
    color: #86868b;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 0.2s ease;
}
.studio-tab:hover {
    color: var(--text-color, #1c1c1e);
}
.studio-tab.active {
    color: #ff8c00;
    border-bottom-color: #ff8c00;
}
.studio-tab:focus-visible {
    outline: 2px solid #ff8c00;
    outline-offset: 2px;
}

.studio-tab-panel {
    display: none;
}
.studio-tab-panel.active {
    display: block;
}

/* Profile */
.studio-banner {
    position: relative;
    height: 220px;
    border-radius: 24px;
    background: #c9c9c9;
    margin-bottom: 36px;
}
.studio-edit-banner {
    position: absolute;
    bottom: 18px;
    right: 18px;
    padding: 10px 22px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-family: "Outfit", sans-serif;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: background 0.2s ease;
}
.studio-edit-banner:hover {
    background: rgba(0, 0, 0, 0.4);
}
.studio-edit-banner:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.studio-profile-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.studio-avatar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.studio-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #86868b;
}
.studio-avatar svg {
    width: 56px;
    height: 56px;
}
.studio-change-pic {
    padding: 12px 24px;
    background: var(--card-bg, #fff);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    font-size: 16px;
    font-family: "Outfit", sans-serif;
    color: var(--text-color, #1c1c1e);
    cursor: pointer;
    transition: background 0.2s ease;
}
.studio-change-pic:hover {
    background: rgba(0, 0, 0, 0.04);
}
body.dark-theme .studio-change-pic:hover {
    background: rgba(255, 255, 255, 0.08);
}
.studio-change-pic:focus-visible {
    outline: 2px solid #ff8c00;
    outline-offset: 2px;
}

.studio-field {
    width: 100%;
    max-width: 640px;
    margin-bottom: 24px;
}
.studio-field label {
    display: block;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}
.studio-field .studio-hint {
    display: block;
    font-size: 14px;
    color: #86868b;
    margin-bottom: 10px;
}
.studio-field input,
.studio-field textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    font-size: 16px;
    color: var(--text-color, #1c1c1e);
    font-family: "Outfit", sans-serif;
    box-sizing: border-box;
    background: var(--card-bg, #fff);
    transition: border-color 0.2s ease;
}
.studio-field textarea {
    resize: vertical;
    line-height: 1.6;
}
.studio-field input:focus,
.studio-field textarea:focus {
    outline: none;
    border-color: #ff8c00;
}

/* Handle field — fixed "@" prefix sitting inside the same bordered box
   as the input, so it reads as one control rather than two. */
.studio-handle-wrap {
    display: flex;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: var(--card-bg, #fff);
    transition: border-color 0.2s ease;
}
.studio-handle-wrap:focus-within {
    border-color: #ff8c00;
}
.studio-handle-at {
    padding-left: 16px;
    font-size: 16px;
    color: #86868b;
    user-select: none;
}
.studio-handle-wrap input {
    border: none;
    padding-left: 2px;
}
.studio-handle-wrap input:focus {
    border: none;
}
.studio-handle-status {
    display: block;
    min-height: 18px;
    font-size: 13px;
    margin-top: 6px;
}
.studio-handle-status.checking {
    color: #86868b;
}
.studio-handle-status.available {
    color: #1fa34d;
}
.studio-handle-status.taken,
.studio-handle-status.invalid {
    color: #e0392b;
}

body.dark-theme .studio-handle-wrap {
    background: var(--card-bg, #1c1c1e);
    border-color: rgba(255, 255, 255, 0.14);
}
body.dark-theme .studio-handle-at {
    color: #9a9a9e;
}

/* Bio / description textareas — auto-expanding box with a live
   "typed/max" counter pinned to the bottom-right corner. */
.studio-textarea-wrap,
.listing-textarea-wrap {
    position: relative;
}
.studio-textarea-wrap textarea,
.listing-textarea-wrap textarea {
    overflow: hidden;
    resize: none;
    padding-bottom: 28px;
}
.studio-char-count,
.listing-char-count {
    position: absolute;
    right: 14px;
    bottom: 10px;
    font-size: 12px;
    color: #86868b;
    pointer-events: none;
    background: var(--card-bg, #fff);
    padding: 0 2px;
}
.studio-char-count.limit-near,
.listing-char-count.limit-near {
    color: #e0392b;
}
body.dark-theme .studio-char-count,
body.dark-theme .listing-char-count {
    background: var(--card-bg, #1c1c1e);
}

.studio-save-btn {
    margin-top: 16px;
    padding: 10px 30px;
    background:
        linear-gradient(var(--card-bg, #fff), var(--card-bg, #fff)) padding-box,
        linear-gradient(90deg, #ff8b17 0%, #ff470a 100%) border-box;
    border: 1.5px solid transparent;
    border-radius: 999px;
    color: #ff8c00;
    font-size: 14px;
    font-weight: 700;
    font-family: "Outfit", sans-serif;
    cursor: pointer;
    transition:
        opacity 0.2s ease,
        transform 0.15s ease;
}
.studio-save-btn:hover {
    opacity: 0.85;
}
.studio-save-btn:active {
    transform: scale(0.97);
}
.studio-save-btn:focus-visible {
    outline: 2px solid #ff8c00;
    outline-offset: 2px;
}
.studio-save-btn.button-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* ================================
   TOGGLE SWITCH (iOS-style pill)
   ================================ */
.toggle {
    position: relative;
    width: 66px;
    height: 31px;
    border-radius: 999px;
    border: none;
    background: #e5e5ea;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.25s ease;
}
body.dark-theme .toggle {
    background: #3a3a3c;
}
.toggle[aria-checked="true"] {
    background: linear-gradient(90deg, #ff8b17 0%, #ff470a 100%);
}
/* Same knob height as the standard iOS switch (27px, 2px gap top/bottom)
   but stretched horizontally into an actual pill shape. Track widened
   to 66px so the knob still has clean 2px gaps on both ends as it
   slides from one side to the other. */
.toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 38px;
    height: 27px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.toggle[aria-checked="true"] .toggle-knob {
    transform: translateX(24px);
}

.studio-empty-state {
    color: #86868b;
    font-size: 14px;
    text-align: center;
    padding: 60px 0;
}

/* ================================
   STUDIO — NEW LISTING TOOLBAR BUTTON
   ================================ */
.studio-products-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}

.new-listing-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 999px;
    border: none;
    color: white;
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    background: linear-gradient(90deg, #ff8b17 0%, #ff470a 100%);
    box-shadow: 0 4px 12px rgba(255, 108, 0, 0.25);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.new-listing-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(255, 108, 0, 0.32);
}

.new-listing-btn:active {
    transform: scale(0.96);
}

/* ================================
   NEW LISTING WIZARD — glass sheet,
   in the same visual family as .cart-modal-box / .glass-modal
   but taller and slides up rather than just scaling in.
   ================================ */
.listing-sheet-overlay {
    align-items: flex-end;
}

@media (min-width: 720px) {
    .listing-sheet-overlay {
        align-items: center;
    }
}

.listing-sheet {
    width: min(560px, 100vw);
    height: min(720px, 92vh);
    max-height: 92vh;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 32px 32px 0 0;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(40px);
    opacity: 0;
    transition:
        transform 0.32s cubic-bezier(0.34, 1.2, 0.64, 1),
        opacity 0.24s ease;
}

@media (min-width: 720px) {
    .listing-sheet {
        border-radius: 32px;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
    }
}

.modal-overlay.active .listing-sheet {
    transform: translateY(0);
    opacity: 1;
}

body.dark-theme .listing-sheet {
    background: rgba(28, 28, 30, 0.7);
    border-color: rgba(255, 255, 255, 0.1);
}

.listing-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 18px 12px;
    flex-shrink: 0;
}

.listing-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    color: #1c1c1e;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.listing-icon-btn:hover {
    background: rgba(0, 0, 0, 0.1);
}

body.dark-theme .listing-icon-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.listing-step-dots {
    display: flex;
    gap: 8px;
}

.listing-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.15);
    transition: all 0.25s ease;
}

.listing-dot.active {
    background: #ff470a;
    width: 18px;
    border-radius: 4px;
}

body.dark-theme .listing-dot {
    background: rgba(255, 255, 255, 0.2);
}

.listing-sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 4px 24px 24px;
}

.listing-step {
    display: none;
}

.listing-step.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

.listing-step-title {
    font-size: 22px;
    font-weight: 800;
    font-family: "Outfit", sans-serif;
    margin: 4px 0 4px;
    color: #1c1c1e;
}

body.dark-theme .listing-step-title {
    color: #ffffff;
}

.listing-step-subtitle {
    font-size: 14px;
    color: #6e6e73;
    margin: 0 0 20px;
}

/* Photo picker */
.listing-photo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0 22px;
}

.listing-photo-add {
    width: 84px;
    height: 84px;
    border-radius: 16px;
    border: 1.5px dashed rgba(0, 0, 0, 0.25);
    background: rgba(0, 0, 0, 0.02);
    color: #6e6e73;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.listing-photo-add i {
    font-size: 18px;
}

.listing-photo-add:hover {
    border-color: #ff8c00;
    color: #ff8c00;
}

body.dark-theme .listing-photo-add {
    border-color: rgba(255, 255, 255, 0.25);
    color: #a1a1a6;
}

.listing-photo-thumb {
    width: 84px;
    height: 84px;
    border-radius: 16px;
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
}

.listing-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.listing-photo-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: white;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.listing-photo-crop {
    position: absolute;
    bottom: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: white;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.listing-photo-crop:hover {
    background: rgba(0, 0, 0, 0.75);
}

/* Fields */
.listing-field {
    margin-bottom: 18px;
}

.listing-field-row {
    display: flex;
    gap: 14px;
}

.listing-field-row .listing-field {
    flex: 1;
}

.listing-field label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #1c1c1e;
}

body.dark-theme .listing-field label {
    color: #ffffff;
}

.listing-field input[type="text"],
.listing-field input[type="number"],
.listing-field select,
.listing-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    font-size: 14px;
    font-family: "Outfit", sans-serif;
    color: #1c1c1e;
    background: rgba(255, 255, 255, 0.7);
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.listing-field textarea {
    resize: vertical;
    line-height: 1.5;
}

.listing-field input:focus,
.listing-field select:focus,
.listing-field textarea:focus {
    outline: none;
    border-color: #ff8c00;
}

body.dark-theme .listing-field input,
body.dark-theme .listing-field select,
body.dark-theme .listing-field textarea {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.listing-price-wrap {
    display: flex;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
    overflow: hidden;
}

body.dark-theme .listing-price-wrap {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
}

.listing-currency-prefix {
    padding: 12px 10px 12px 14px;
    font-size: 13px;
    font-weight: 700;
    color: #6e6e73;
    flex-shrink: 0;
}

.listing-price-wrap input {
    border: none !important;
    background: transparent !important;
    padding-left: 0 !important;
}

.listing-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.7);
}

body.dark-theme .listing-stepper {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
}

.listing-stepper-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    color: #1c1c1e;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.dark-theme .listing-stepper-btn {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.listing-stepper span {
    font-size: 15px;
    font-weight: 700;
    color: #1c1c1e;
}

body.dark-theme .listing-stepper span {
    color: #ffffff;
}

.listing-condition-toggle {
    display: flex;
    gap: 10px;
}

.listing-condition-opt {
    flex: 1;
    padding: 10px 0;
    border-radius: 12px;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    background: transparent;
    color: #1c1c1e;
    font-family: "Outfit", sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.listing-condition-opt.active {
    background: linear-gradient(90deg, #ff8b17 0%, #ff470a 100%);
    border-color: transparent;
    color: white;
}

body.dark-theme .listing-condition-opt {
    border-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

/* Preview step */
.listing-preview-card {
    max-width: 220px;
    margin: 0 auto 20px;
}

.listing-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.listing-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

body.dark-theme .listing-summary-row {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.listing-summary-row span:first-child {
    color: #6e6e73;
}

.listing-summary-row span:last-child {
    font-weight: 600;
    color: #1c1c1e;
}

body.dark-theme .listing-summary-row span:last-child {
    color: #ffffff;
}

/* Published step */
.listing-published {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 30px;
}

.listing-published-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: linear-gradient(90deg, #ff8b17 0%, #ff470a 100%);
    color: white;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    animation: studioPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.listing-text-btn {
    background: none;
    border: none;
    color: #6e6e73;
    font-family: "Outfit", sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    margin-top: 14px;
    padding: 8px;
}

.listing-text-btn:hover {
    color: #1c1c1e;
}

body.dark-theme .listing-text-btn:hover {
    color: #ffffff;
}

.listing-sheet-footer {
    padding: 16px 24px 24px;
    flex-shrink: 0;
}

.listing-sheet-footer .main-login-btn {
    margin-top: 0;
}

.listing-sheet-footer .main-login-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

/* ============================================================
   SHARED IMAGE CROP OVERLAY (item 1)
   Free-form crop tool, usable from both desktop's listing wizard
   and mobile's upload flow. Sits above everything at the top of
   the stacking order since it's appended at the very end of body.
   ============================================================ */
.img-crop-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #000;
    flex-direction: column;
}

.img-crop-overlay.img-crop-open {
    display: flex;
}

.img-crop-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    padding-top: max(16px, env(safe-area-inset-top));
}

.img-crop-title {
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 600;
}

.img-crop-cancel,
.img-crop-use {
    background: none;
    border: none;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    cursor: pointer;
    padding: 6px 4px;
}

.img-crop-cancel {
    color: #d0d0d0;
    font-weight: 400;
}

.img-crop-use {
    color: #ff5900;
    font-weight: 700;
}

.img-crop-stage {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
}

.img-crop-canvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.img-crop-box {
    position: absolute;
    border: 2px solid #fff;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
    cursor: move;
    touch-action: none;
}

.img-crop-handle {
    position: absolute;
    width: 26px;
    height: 26px;
    touch-action: none;
}

.img-crop-handle::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.img-crop-handle.tl { top: -13px; left: -13px; cursor: nwse-resize; }
.img-crop-handle.tr { top: -13px; right: -13px; cursor: nesw-resize; }
.img-crop-handle.bl { bottom: -13px; left: -13px; cursor: nesw-resize; }
.img-crop-handle.br { bottom: -13px; right: -13px; cursor: nwse-resize; }

.img-crop-hint {
    flex-shrink: 0;
    text-align: center;
    color: #a3a3a3;
    font-family: "Inter", sans-serif;
    font-size: 12.5px;
    padding: 10px 20px max(16px, env(safe-area-inset-bottom));
}

/* ================================
   OFFLINE BANNER
   ================================ */
#offline-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px;
    background: #1c1c1e;
    color: #ffffff;
    font-family: "Outfit", sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    z-index: 10000;
    box-sizing: border-box;
}

#offline-banner.show {
    display: flex;
}

#offline-banner i {
    font-size: 14px;
}

body.dark-theme #offline-banner {
    background: #2c2c2e;
}

/* ================================
   OFFLINE EMPTY STATE ICON
   ================================ */
/* icons/internet.svg is drawn in black — mask-image recolors it using
   background-color instead, so it matches the app's orange (#ff8c00)
   like every other icon, regardless of the source file's own fill. */
.offline-empty-icon {
    display: block;
    width: 42px;
    height: 42px;
    margin: 0 auto 16px auto;
    background-color: #ff8c00;
    -webkit-mask-image: url("icons/internet.svg");
    mask-image: url("icons/internet.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.cart-empty-icon {
    display: block;
    width: 52px;
    height: 52px;
    margin: 0 auto 16px auto;
    background-color: #ff8c00;
    -webkit-mask-image: url("icons/cart.svg");
    mask-image: url("icons/cart.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* ================================
   IMAGE LIGHTBOX (product photo viewer)
   Shared by desktop (.pd-hero) and mobile (.m-pd-hero) — tap/click any
   listing image to view it full-screen. Reuses the same dark blurred
   overlay + fade/scale-in language as .modal-overlay elsewhere in the
   app, and the app's orange accent for controls.
   ================================ */
.lightbox-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 3000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.22s ease;
}

.lightbox-overlay.active {
    display: flex;
    opacity: 1;
}

.lightbox-stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    touch-action: pan-y;
}

.lightbox-track {
    display: flex;
    height: 100%;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.lightbox-track.dragging {
    transition: none;
}

.lightbox-slide {
    flex: 0 0 100vw;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    box-sizing: border-box;
}

.lightbox-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
    user-select: none;
    -webkit-user-drag: none;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3010;
    transition: background 0.18s ease;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.22);
}

.lightbox-chevron {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3010;
    transition: background 0.18s ease, opacity 0.18s ease;
}

.lightbox-chevron:hover {
    background: #ff8c00;
}

.lightbox-chevron.prev {
    left: 20px;
}

.lightbox-chevron.next {
    right: 20px;
}

.lightbox-chevron[disabled] {
    opacity: 0;
    pointer-events: none;
}

/* Small hint chevrons overlaid on the hero image itself (before opening
   the lightbox) — only shown when a listing has more than one photo. */
.pd-hero-hint-chevron,
.m-pd-hero-hint-chevron {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    pointer-events: none;
}

.pd-hero-hint-chevron.next,
.m-pd-hero-hint-chevron.next {
    right: 12px;
}

.pd-hero-hint-chevron.prev,
.m-pd-hero-hint-chevron.prev {
    left: 12px;
}

.lightbox-counter {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.4);
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 999px;
    z-index: 3010;
}

@media (max-width: 768px) {
    .lightbox-close {
        top: 16px;
        right: 16px;
        width: 38px;
        height: 38px;
    }
    .lightbox-chevron {
        width: 40px;
        height: 40px;
    }
    .lightbox-chevron.prev { left: 10px; }
    .lightbox-chevron.next { right: 10px; }
    .lightbox-slide { padding: 16px; }
}

/* ================================
   STUDIO ORDERS TAB
   Matches the existing .studio-listing-row / .studio-stat visual
   language already used elsewhere in Studio, so this doesn't look like
   a bolted-on separate feature.
   ================================ */
.studio-orders-subtabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 12px;
}

body.dark-theme .studio-orders-subtabs {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.studio-orders-subtab {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: #86868b;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.studio-orders-subtab:hover {
    background: rgba(255, 140, 0, 0.08);
    color: #ff8c00;
}

.studio-orders-subtab.active {
    background: #ff8c00;
    color: #ffffff;
}

.studio-order-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.studio-order-approve-btn,
.studio-order-decline-btn {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 10px;
    cursor: pointer;
    border: none;
    transition: opacity 0.15s ease;
}

.studio-order-approve-btn {
    background: #ff8c00;
    color: #ffffff;
}

.studio-order-decline-btn {
    background: rgba(0, 0, 0, 0.06);
    color: #1c1c1e;
}

body.dark-theme .studio-order-decline-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.studio-order-approve-btn:hover,
.studio-order-decline-btn:hover {
    opacity: 0.85;
}

.studio-order-approve-btn:disabled,
.studio-order-decline-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.studio-order-status {
    font-size: 12.5px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    flex-shrink: 0;
}

.studio-order-status-approved {
    background: rgba(52, 199, 89, 0.14);
    color: #248a3d;
}

.studio-order-status-declined {
    background: rgba(255, 59, 48, 0.12);
    color: #d70015;
}

body.dark-theme .studio-order-status-approved {
    background: rgba(52, 199, 89, 0.2);
    color: #63e685;
}

body.dark-theme .studio-order-status-declined {
    background: rgba(255, 59, 48, 0.2);
    color: #ff6961;
}

@media (max-width: 720px) {
    .studio-order-row {
        flex-wrap: wrap;
    }
    .studio-order-actions {
        order: 3;
        width: 100%;
        padding-left: 62px;
        margin-top: 6px;
    }
}