/* Brand colours - change them here and the whole site updates */
:root {
    --brand-pink: #C2185B;
    --brand-pink-dark: #9C1449;
    --brand-gold: #D4AF37;
    --brand-gold-dark: #8C6A00;
    --brand-pink-light: #F06292;
    --brand-black: #111;

    /* Dark theme colours */
    --page-bg: #0B0B0D;
    --surface: #18171C;
    --surface-raised: #232129;
    --text: #F5F5F5;
    --text-muted: #B8B2BC;
    --line: #3A3640;
}

/* Anything marked hidden must stay hidden, even if another rule sets display */
[hidden] {
    display: none !important;
}

main a:not(.vendor-link) {
    color: var(--brand-pink-light);
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    /* Purple, pink and orange gradient behind the whole site */
    background:
        radial-gradient(ellipse at 15% 0%, rgb(194 24 91 / 35%), transparent 55%),
        radial-gradient(ellipse at 90% 30%, rgb(230 110 40 / 22%), transparent 50%),
        linear-gradient(160deg, #1A0B2E 0%, #33103F 35%, #4A1235 65%, #3A1A10 100%);
    background-attachment: fixed;
    background-color: var(--page-bg);
    color: var(--text);
    text-align: center;
}

nav {
    /* Stays at the top of the screen when scrolling */
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgb(12 8 18 / 85%);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--brand-gold);
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav h2 {
    margin: 0;
    color: var(--brand-gold);
}

nav a {
    margin-left: 20px;
    text-decoration: none;
    color: white;
}

nav a:hover {
    color: var(--brand-gold);
}

header {
    background: var(--surface);
    padding: 60px 20px;
}

h1 {
    font-size: 40px;
}

/* Homepage welcome section */
.hero {
    padding: 70px 20px 60px;
    background: radial-gradient(ellipse at top, rgb(194 24 91 / 25%), transparent 70%);
}

.hero-crown {
    filter: drop-shadow(0 0 18px rgb(212 175 55 / 60%));
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 10px;
}

.hero-button {
    padding: 15px 30px;
    border-radius: 12px;
    font-weight: bold;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.hero-button:hover {
    transform: translateY(-2px);
}

.hero-button-primary {
    background: linear-gradient(90deg, var(--brand-pink), #E8642C);
    color: white;
    box-shadow: 0 0 22px rgb(194 24 91 / 45%);
}

.hero-button-secondary {
    background: rgb(255 255 255 / 8%);
    border: 1px solid var(--brand-gold);
    color: var(--brand-gold);
}

/* ===== Homepage service sections ===== */
.home-main {
    max-width: 1200px;
    margin: 0 auto;
}

.home-section {
    margin-bottom: 50px;
}

.home-section h2 {
    font-size: 30px;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
    text-align: left;
}

.service-tile {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: rgb(24 23 28 / 92%);
    border: 1px solid rgb(194 24 91 / 35%);
    border-radius: 18px;
    color: var(--text);
    font: inherit;
    text-align: left;
    box-shadow: 0 10px 30px rgb(0 0 0 / 35%);
    transition: transform 0.2s, box-shadow 0.2s;
}

.service-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 36px rgb(194 24 91 / 35%);
}

/* Square picture area with the watermark on top */
.service-tile-media {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: linear-gradient(135deg, #2A1438, #4A1235);
}

.service-tile-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.service-tile-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
}

.locked-media {
    filter: saturate(1.4);
    background:
        repeating-linear-gradient(45deg, rgb(255 255 255 / 4%) 0 12px, transparent 12px 24px),
        linear-gradient(135deg, #3A1040, #5A1A30);
}

/* Repeating "BEAUTY KINGDOM" drawn over every service picture */
.service-watermark {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='140'><text x='10' y='80' transform='rotate(-25 120 70)' font-family='Arial' font-weight='bold' font-size='20' fill='white' fill-opacity='0.28' stroke='black' stroke-opacity='0.15'>BEAUTY KINGDOM</text></svg>");
    background-repeat: repeat;
}

.service-tile-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    gap: 6px;
}

.badge-featured {
    background: var(--brand-gold);
    color: var(--brand-black);
}

.service-tile-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 6px;
    padding: 18px 20px 20px;
}

.service-tile-body h3 {
    margin: 0;
    font-size: 19px;
}

.service-tile-body p {
    margin: 0;
}

.service-tile-seller {
    color: var(--text-muted);
}

.service-tile-seller strong {
    color: var(--brand-pink-light);
}

.service-tile-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 6px 0;
    color: var(--text-muted);
}

.service-tile .service-tile-order {
    align-self: flex-start;
    margin: auto 0 0;
    padding: 12px 20px;
    background: linear-gradient(90deg, var(--brand-pink), #A23CD8);
}

.service-tile-locked {
    cursor: pointer;
}

.service-tile-locked:hover {
    background: rgb(24 23 28 / 92%);
}

/* Service pictures on profile cards and in the dashboard */
.service-card-media {
    margin: -25px -25px 14px;
    border-radius: 14px 14px 0 0;
}

.service-image-preview {
    width: 100%;
    max-width: 220px;
    margin-bottom: 8px;
    border-radius: 12px;
}

.highlighted-service {
    box-shadow: 0 0 0 3px var(--brand-gold), 0 0 30px rgb(212 175 55 / 40%);
}

/* 🪙 balance pill in the top menu */
.nav-balance {
    padding: 6px 12px;
    border: 1px solid var(--brand-gold);
    border-radius: 10px;
    background: rgb(212 175 55 / 12%);
    color: var(--brand-gold) !important;
    font-weight: bold;
}

.hero-crown {
    margin: 0;
    font-size: 36px;
}

.hero-title {
    margin: 6px 0 10px;
    font-size: 52px;
    background: linear-gradient(90deg, var(--brand-pink-light), var(--brand-gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-slogan {
    margin: 0 0 24px;
    font-size: 20px;
}

main {
    padding: 40px;
}

input {
    padding: 15px;
    width: 300px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

#vendor-search-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

select {
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

input,
select,
textarea {
    background: var(--surface-raised);
    color: var(--text);
}

button {
    padding: 15px 25px;
    margin: 10px;
    border: none;
    border-radius: 8px;
    background: var(--brand-pink);
    color: white;
    cursor: pointer;
}

button:hover {
    background: var(--brand-pink-dark);
}

.services {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.card {
    /* Pink-to-gold line along the top, on a dark card */
    background:
        linear-gradient(90deg, var(--brand-pink), var(--brand-gold)) top / 100% 4px no-repeat,
        var(--surface);
    padding: 25px;
    width: 240px;
    border: 1px solid rgb(194 24 91 / 35%);
    border-radius: 14px;
    box-shadow: 0 0 18px rgb(194 24 91 / 15%);
    transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 28px rgb(194 24 91 / 35%);
}
.vendor-image {
    width: 150px;
    height: 150px;
    object-fit: cover;
    object-position: center 25%;
    border-radius: 50%;
}
.vendor-link {
    display: inline-block;
    padding: 15px 25px;
    margin: 10px;
    background: var(--brand-pink);
    border-radius: 8px;
    text-decoration: none;
    color: white;
}

.vendor-link:hover {
    background: var(--brand-pink-dark);
}

.card-photo {
    display: block;
    width: 110px;
    height: 110px;
    margin: 16px auto 0;
    object-fit: cover;
    object-position: center 25%;
    border: 2px solid var(--brand-pink);
    border-radius: 16px;
}

.card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 14px 0;
    padding: 14px;
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.card-stats strong {
    display: block;
    font-size: 20px;
}

.card-stats span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

.badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.badge {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

.badge-verified {
    background: rgb(212 175 55 / 15%);
    border: 1px solid var(--brand-gold);
    color: var(--brand-gold);
}

.badge-top {
    background: var(--brand-pink);
    color: white;
}

.card-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.card-actions .vendor-link {
    margin: 0;
    padding: 12px;
}

.vendor-link-outline {
    background: transparent;
    border: 1px solid var(--brand-pink);
    color: var(--brand-pink-light);
}

.vendor-link-outline:hover {
    background: rgb(194 24 91 / 20%);
}

.site-footer {
    margin-top: 40px;
    padding: 30px 20px;
    background: var(--brand-black);
    border-top: 2px solid var(--brand-gold);
    color: var(--text-muted);
    font-size: 14px;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin-bottom: 12px;
}

.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--brand-gold);
}

.site-footer p {
    margin: 0;
}

/* New footer: crown, brand and links, social buttons */
.site-footer {
    padding: 40px 20px;
    background: rgb(10 6 16 / 88%);
}

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.footer-crown {
    font-size: 72px;
    text-decoration: none;
    filter: drop-shadow(0 0 20px rgb(194 24 91 / 60%));
}

.footer-middle {
    flex: 1 1 300px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-brand {
    color: var(--text);
    font-size: 18px;
    font-weight: bold;
}

.footer-middle .footer-links {
    margin: 4px 0 0;
}

.social-buttons {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.social-button {
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    font-weight: bold;
}

.social-button:hover {
    border-color: var(--brand-pink);
}

.coming-soon {
    opacity: 0.55;
    cursor: default;
}

/* ===== Homepage: For fans / For creators ===== */
.split-section {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    align-items: center;
    margin: 60px 0;
    text-align: left;
}

.split-reverse {
    grid-template-columns: 1.2fr 1fr;
}

.split-reverse .split-text {
    order: 2;
}

.section-tag {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid rgb(194 24 91 / 50%);
    border-radius: 999px;
    background: rgb(194 24 91 / 15%);
    color: var(--brand-pink-light);
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.split-title {
    margin: 14px 0;
    font-size: 40px;
    line-height: 1.15;
}

.split-title span {
    background: linear-gradient(90deg, var(--brand-pink-light), var(--brand-gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.split-text p {
    color: var(--text-muted);
    font-size: 17px;
    line-height: 1.6;
}

.split-text .hero-button {
    display: inline-block;
    margin-top: 10px;
}

.split-actions {
    justify-content: flex-start;
}

.feature-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.feature-card {
    display: flex;
    gap: 16px;
    padding: 22px;
    background: rgb(24 23 28 / 88%);
    border: 1px solid var(--line);
    border-radius: 16px;
    transition: border-color 0.2s, transform 0.2s;
}

/* Stagger the middle card for a less boxy look */
.feature-card:nth-child(2) {
    margin-left: 30px;
}

.feature-card:hover {
    border-color: rgb(194 24 91 / 60%);
    transform: translateX(4px);
}

.feature-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgb(194 24 91 / 40%), rgb(232 100 44 / 30%));
    font-size: 22px;
}

.feature-card h3 {
    margin: 0 0 6px;
}

.feature-card p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.5;
}

.stat-card {
    padding: 30px;
    border: 1px solid rgb(212 175 55 / 45%);
    border-radius: 18px;
    background: linear-gradient(135deg, rgb(194 24 91 / 25%), rgb(74 18 53 / 60%));
    text-align: center;
}

.stat-number {
    margin: 0 0 6px;
    font-size: 52px;
    font-weight: bold;
    color: var(--text);
}

.stat-card p:last-child {
    margin: 0;
    color: var(--text-muted);
}

.perk-row {
    margin: 0;
    padding: 16px 18px;
    background: rgb(24 23 28 / 80%);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text-muted);
}

/* ===== Homepage: Community ===== */
.community-section {
    margin: 60px 0 20px;
    padding: 50px 20px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgb(194 24 91 / 18%), rgb(232 100 44 / 10%));
    border: 1px solid rgb(194 24 91 / 30%);
}

.community-section h2 {
    margin: 14px 0 8px;
    font-size: 34px;
}

.community-section > p {
    color: var(--text-muted);
}

.community-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    max-width: 900px;
    margin: 26px auto 0;
}

.community-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    background: rgb(24 23 28 / 90%);
    border: 1px solid var(--line);
    border-radius: 16px;
    color: var(--text);
    text-align: left;
    text-decoration: none;
}

main a.community-card {
    color: var(--text);
}

.community-card:not(.coming-soon):hover {
    border-color: var(--brand-pink);
}

.community-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 22px;
}

.discord-icon {
    background: #5865F2;
}

.twitter-icon {
    background: #000;
    border: 1px solid var(--line);
}

.telegram-icon {
    background: #229ED9;
}

.community-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
}

.community-text span {
    color: var(--text-muted);
    font-size: 14px;
}

.community-arrow {
    color: var(--brand-pink-light);
    font-size: 20px;
}

/* Phone menu bar - hidden on bigger screens, shown in the phone section at the bottom */
.bottom-nav {
    display: none;
}

.vendor-intro {
    max-width: 520px;
    margin: 0 auto 30px;
    padding: 30px 20px;
    background:
        linear-gradient(90deg, var(--brand-pink), var(--brand-gold)) top / 100% 4px no-repeat,
        var(--surface);
    border: 1px solid rgb(194 24 91 / 35%);
    border-radius: 14px;
    box-shadow: 0 0 24px rgb(194 24 91 / 20%);
}

.about-card {
    max-width: 520px;
    margin: 0 auto 30px;
    padding: 20px 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    text-align: left;
    line-height: 1.6;
}

.about-card h2 {
    margin: 0 0 8px;
    color: var(--brand-gold);
    font-size: 18px;
    text-transform: uppercase;
}

.about-card p {
    margin: 0;
    color: var(--text-muted);
}

/* Content rules on the Terms page */
.rules-card {
    max-width: 720px;
}

.rules-card h3 {
    margin: 20px 0 6px;
    font-size: 17px;
}

.rules-card ul {
    margin: 0;
    padding-left: 20px;
    color: var(--text-muted);
}

.rules-card li {
    margin: 4px 0;
}

#services {
    color: var(--brand-gold);
    font-size: 18px;
    text-transform: uppercase;
}

.service-card {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.service-card h3 {
    margin-top: 6px;
}

.service-card p {
    color: var(--text-muted);
}

.service-card .starting-price {
    color: var(--brand-pink-light);
    font-size: 20px;
}

/* Push the button to the bottom so buttons line up across cards */
.service-card > button {
    width: 100%;
    margin: auto 0 0;
}

.vendor-intro .vendor-image {
    border: 3px solid var(--brand-pink);
}

.vendor-intro h1 {
    margin: 16px 0 10px;
}

.verified-label {
    color: var(--brand-gold);
    font-weight: bold;
    margin: 10px 0;
}

.vendor-tagline {
    color: var(--text-muted);
    margin-top: 10px;
}

.starting-price {
    font-weight: bold;
    color: var(--brand-pink-light);
}

.profile-view-count {
    color: var(--text-muted);
    font-size: 14px;
}

.dynamic-profile {
    max-width: 1100px;
    margin: 0 auto;
}

.service-order-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 18px;
    text-align: left;
}

.service-order-form input {
    box-sizing: border-box;
    width: 100%;
}

.service-order-total {
    font-weight: bold;
}

.service-order-form button {
    margin: 0;
}

.order-dialog {
    width: min(440px, calc(100% - 40px));
    padding: 28px;
    border: none;
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    text-align: left;
}

.order-dialog::backdrop {
    background: rgb(0 0 0 / 45%);
}

.order-dialog-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.order-dialog-actions button {
    margin: 0;
}

.orders-main {
    max-width: 900px;
    margin: 0 auto;
}

.admin-main {
    max-width: 900px;
    margin: 0 auto;
}

.admin-section {
    margin-top: 28px;
    text-align: left;
}

.admin-item {
    padding: 18px 0;
    border-top: 1px solid var(--line);
    overflow-wrap: anywhere;
}

.admin-item h3 {
    margin: 4px 0 10px;
}

.admin-meta {
    color: var(--text-muted);
    font-size: 14px;
}

.admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-actions button,
.admin-item > button {
    margin: 8px 0 0;
}

.admin-section > .account-form {
    max-width: 520px;
    padding: 20px;
    background: var(--surface);
    border-radius: 8px;
}

.orders-list {
    text-align: left;
}

.order-item {
    margin: 20px 0;
    padding: 22px;
    background:
        linear-gradient(90deg, var(--brand-pink), var(--brand-gold)) top / 100% 4px no-repeat,
        var(--surface);
    border: 1px solid rgb(194 24 91 / 35%);
    border-radius: 14px;
    box-shadow: 0 0 18px rgb(194 24 91 / 15%);
    overflow-wrap: anywhere;
}

.order-item h2 {
    margin: 0;
    font-size: 22px;
}

/* Order number on the left, status badge on the right */
.order-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* Status badge colours */
.status-pending,
.status-awaiting_confirmation {
    background: rgb(212 175 55 / 15%);
    border: 1px solid var(--brand-gold);
    color: var(--brand-gold);
}

.status-accepted,
.status-in_progress {
    background: var(--brand-pink);
    color: white;
}

.status-completed {
    background: rgb(46 160 67 / 20%);
    border: 1px solid #2EA043;
    color: #56D364;
}

.status-cancelled,
.status-rejected,
.status-refunded {
    background: var(--line);
    color: var(--text-muted);
}

.status-disputed {
    background: rgb(248 81 73 / 15%);
    border: 1px solid #F85149;
    color: #FF7B72;
}

/* Progress bar: Placed > Accepted > Started > Submitted > Completed */
.order-progress {
    display: flex;
    margin: 18px 0 8px;
    padding: 0;
    list-style: none;
}

.order-progress li {
    flex: 1;
    margin: 0;
    padding-top: 10px;
    border-top: 4px solid var(--line);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: bold;
    text-align: center;
}

.order-progress li.done {
    border-top-color: var(--brand-pink);
    color: var(--brand-pink-light);
}

.order-hint {
    margin: 12px 0;
    padding: 10px 14px;
    background: var(--surface-raised);
    border-left: 3px solid var(--brand-gold);
    border-radius: 6px;
}

/* Each service on its own row: name on the left, price on the right */
.order-items {
    padding: 0;
    list-style: none;
}

.order-item .order-items li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}

.order-total {
    text-align: right;
}

.order-review {
    margin-top: 16px;
    padding: 16px;
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.order-review h3 {
    margin: 0 0 6px;
    font-size: 18px;
}

.review-stars {
    color: var(--brand-gold);
    font-weight: bold;
}

/* Big tappable gold stars */
.star-picker button {
    margin: 0;
    padding: 0 4px;
    background: transparent;
    color: var(--brand-gold);
    font-size: 32px;
    line-height: 1;
}

.star-picker button:hover {
    background: transparent;
    transform: scale(1.15);
}

/* Star rating and reviews button under a vendor's name */
.review-summary {
    color: var(--brand-gold);
    font-weight: bold;
}

/* Reviews pop-up */
.reviews-dialog {
    width: min(620px, calc(100% - 40px));
    max-height: 85vh;
    background: var(--surface);
    color: var(--text);
}

.reviews-dialog-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.reviews-dialog-top h2 {
    margin: 0;
    font-size: 22px;
}

.reviews-close-x {
    margin: 0;
    padding: 6px 10px;
    background: transparent;
    color: var(--brand-pink-light);
    font-size: 20px;
}

.reviews-close-x:hover {
    background: transparent;
}

.reviews-list {
    max-height: 50vh;
    margin: 16px 0;
    overflow-y: auto;
}

.review-item {
    margin-bottom: 12px;
    padding: 16px;
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.review-item-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--text-muted);
}

.review-item p {
    margin: 8px 0 0;
}

.review-date {
    color: var(--text-muted);
    font-size: 13px;
}

.reviews-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--text-muted);
    font-size: 14px;
}

.reviews-pager button {
    margin: 0;
}

/* Red 18+ label on adult services */
.badge-adult {
    background: rgb(248 81 73 / 15%);
    border: 1px solid #F85149;
    color: #FF7B72;
}

.service-card .badge-adult {
    align-self: flex-start;
}

/* Locked 18+ service card: fake blurred text with the price and a lock on top */
.locked-card {
    position: relative;
    margin: 0;
    padding: 25px;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.locked-card:hover {
    background:
        linear-gradient(90deg, var(--brand-pink), var(--brand-gold)) top / 100% 4px no-repeat,
        var(--surface);
}

.locked-blur {
    filter: blur(6px);
    user-select: none;
}

.locked-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.locked-overlay p {
    margin: 0;
}

.age-gate-dialog h2 {
    margin-top: 0;
}

.adult-choice {
    margin: 6px 0;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.adult-choice legend {
    padding: 0 6px;
    font-weight: bold;
}

/* Age check part of the Become a Vendor form */
.age-check-heading {
    margin: 12px 0 0;
    padding: 10px 14px;
    background: var(--surface-raised);
    border-left: 3px solid var(--brand-gold);
    border-radius: 6px;
    font-weight: bold;
}

.selfie-instructions {
    margin: 0;
    padding-left: 20px;
    color: var(--text-muted);
    font-size: 14px;
    text-align: left;
}

.id-privacy-note {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
}

/* Extras tickboxes on a vendor's profile */
.extras-heading {
    margin: 4px 0 0;
}

.extra-choice {
    color: var(--text);
}

.extra-choice input {
    width: auto;
}

/* Extras list inside a service's Edit section */
.extras-editor {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.extras-editor h5 {
    margin: 0 0 8px;
    font-size: 15px;
}

.extra-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

.extra-row button,
.extra-add-form button {
    margin: 0;
    padding: 8px 12px;
}

.extra-add-form {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.extra-add-form input {
    flex: 1 1 100px;
    width: auto;
    padding: 10px;
}

.order-report {
    margin-top: 12px;
}

/* Cash-out and payout method buttons */
.payout-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.payout-buttons button {
    margin: 0;
}

/* The payment method a buyer picked */
.payout-buttons button.chosen {
    background: var(--brand-pink);
    color: white;
}

.payout-settings {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.payout-settings summary {
    color: var(--brand-pink-light);
    font-weight: bold;
    cursor: pointer;
}

/* 🔔 in the top menu with a pink unread count */
.nav-bell {
    position: relative;
}

.nav-bell-count {
    position: absolute;
    top: -8px;
    right: -12px;
    min-width: 18px;
    padding: 1px 5px;
    border-radius: 999px;
    background: var(--brand-pink);
    color: white;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
}

/* Notifications page */
.notification-item {
    display: block;
    margin: 10px 0;
    padding: 14px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text);
    text-decoration: none;
}

.notification-item.unread {
    border-left: 4px solid var(--brand-pink);
}

.notification-item p {
    margin: 4px 0;
}

main a.notification-item {
    color: var(--text);
}

/* Small grey "🚩 Report" links that turn red when pointed at */
.report-link {
    display: block;
    margin: 10px auto 0;
    padding: 4px 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
}

.report-link:hover {
    background: transparent;
    color: #FF7B72;
}

/* Urgent admin reports, e.g. someone looks under 18 */
.urgent-report {
    border-left: 4px solid #F85149;
    padding-left: 14px;
}

/* Admin note box on reports */
.admin-item textarea {
    box-sizing: border-box;
    width: 100%;
    margin-top: 8px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font: inherit;
    resize: vertical;
}

.order-report summary {
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
}

.order-report summary:hover {
    color: #FF7B72;
}

/* Softer outlined button for "say no" actions like Reject or Cancel */
.button-outline {
    background: transparent;
    border: 1px solid var(--brand-pink);
    color: var(--brand-pink-light);
}

.button-outline:hover {
    background: rgb(194 24 91 / 20%);
}

.order-item li {
    margin: 8px 0;
}

.order-role,
.order-status,
.order-message-meta {
    color: var(--text-muted);
}

.order-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.order-actions button {
    margin: 0;
}

.order-messages {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.order-messages summary {
    cursor: pointer;
    font-weight: bold;
}

/* Chat bubbles: the other person on the left in grey, me on the right in pink */
.order-message-item {
    max-width: 75%;
    margin: 8px 0;
    padding: 10px 14px;
    background: var(--surface-raised);
    border-radius: 14px 14px 14px 4px;
}

.order-message-item.mine {
    margin-left: auto;
    background: rgb(194 24 91 / 30%);
    border-radius: 14px 14px 4px 14px;
}

.order-message-item p {
    margin: 4px 0;
}

.order-message-meta {
    font-size: 12px;
}

.order-message-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.order-message-form textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font: inherit;
    resize: vertical;
}

.order-message-form button {
    align-self: flex-start;
    margin: 0;
}

.account-main {
    max-width: 1240px;
    margin: 0 auto;
}

/* Once signed in, the panel gets wider so 4 service cards fit in a row */
.account-panel:has(#signed-in-panel:not([hidden])) {
    max-width: 1200px;
}

/* ...but forms stay a comfortable width in the middle */
.signed-in-panel .account-form,
.vendor-application {
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}

.account-heading {
    background: transparent;
    padding: 0 0 25px;
}

.account-heading h1 {
    font-size: 36px;
}

.account-panel {
    max-width: 460px;
    margin: 0 auto;
    padding: 28px;
    background:
        linear-gradient(90deg, var(--brand-pink), var(--brand-gold)) top / 100% 4px no-repeat,
        var(--surface);
    border: 1px solid rgb(194 24 91 / 35%);
    border-radius: 14px;
    box-shadow: 0 0 24px rgb(194 24 91 / 20%);
    text-align: left;
}

.account-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.account-tabs button {
    margin: 0;
    background: transparent;
    color: var(--text);
    border-bottom: 2px solid var(--line);
}

.account-tabs button:hover,
.text-button:hover {
    background: transparent;
    color: var(--brand-pink-light);
}

.account-tabs button[aria-selected="true"] {
    border-bottom-color: var(--brand-pink);
    color: var(--brand-pink-light);
    font-weight: bold;
}

.text-button {
    margin: 14px 0 0;
    padding: 0;
    background: transparent;
    color: var(--brand-pink-light);
    text-decoration: underline;
}

.account-message {
    min-height: 24px;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.account-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.account-form label {
    font-weight: bold;
}

.account-form input {
    box-sizing: border-box;
    width: 100%;
}

.account-form textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font: inherit;
    resize: vertical;
}

.account-avatar:not([hidden]) {
    display: block;
    width: 128px;
    height: 128px;
    margin: 8px auto;
    object-fit: cover;
    object-position: center 25%;
    border-radius: 50%;
}

.avatar-form {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}

.account-submit {
    width: 100%;
    margin: 8px 0 0;
    background: var(--brand-pink);
    color: white;
}

.signed-in-panel {
    text-align: center;
    overflow-wrap: anywhere;
}

.wallet-balance {
    margin: 16px 0;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-weight: bold;
}

.vendor-application {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    text-align: left;
}

.vendor-application h2 {
    font-size: 24px;
    text-align: center;
}

.vendor-dashboard {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    text-align: left;
}

.vendor-dashboard > h2,
.vendor-dashboard > p {
    text-align: center;
}

.vendor-dashboard h3 {
    margin: 20px 0 10px;
}

.service-list-section {
    margin-top: 24px;
}

/* A sideways row of cards with ‹ › arrows either side */
.carousel {
    display: flex;
    align-items: center;
    gap: 8px;
}

.carousel-track {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
}

.carousel-arrow {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
}

.carousel-arrow:disabled {
    opacity: 0.25;
}

/* 4 square cards fit across, so each takes a quarter of the row minus the gaps */
.carousel-track .vendor-service-item {
    flex: 0 0 calc((100% - 3 * 14px) / 4);
    box-sizing: border-box;
    aspect-ratio: 1;
    margin-bottom: 0;
    scroll-snap-align: start;
    /* Fixed square: content is trimmed instead of stretching the card */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Every line keeps its full height - nothing gets squeezed to make room */
.carousel-track .vendor-service-item > * {
    flex-shrink: 0;
}

.carousel-track .vendor-service-item p {
    margin: 4px 0;
}

/* While the edit form is open, let the card grow so the form fits */
.carousel-track .vendor-service-item:has(details[open]) {
    aspect-ratio: auto;
    overflow: visible;
}

/* Long names and descriptions stop after 2 lines with "..." */
.carousel-track .vendor-service-item h4,
.carousel-track .vendor-service-item .service-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.carousel-track .service-edit {
    margin-top: auto;
}

.service-card-top .badge {
    flex-shrink: 0;
    white-space: nowrap;
}

.vendor-service-item {
    margin-bottom: 14px;
    padding: 18px;
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow-wrap: anywhere;
}

.vendor-service-item h4,
.vendor-service-item p {
    margin: 6px 0;
}

.vendor-service-item h4 {
    font-size: 18px;
}

.vendor-service-item p {
    color: var(--text-muted);
}

.service-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.service-category {
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

.vendor-service-item .starting-price {
    color: var(--brand-pink-light);
    font-size: 18px;
}

.badge-paused {
    background: var(--line);
    color: var(--text-muted);
}

.service-edit summary {
    margin-top: 12px;
    color: var(--brand-pink-light);
    font-weight: bold;
    cursor: pointer;
}

.service-edit-form {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.service-status {
    font-weight: bold;
}

.service-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.service-toggle input {
    width: auto;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

@media (max-width: 600px) {
    nav {
        flex-direction: column;
        gap: 15px;
    }

    nav div {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }

    nav a {
        margin-left: 0;
    }

    header {
        padding: 40px 15px;
    }

    header h1 {
        font-size: 32px;
    }

    .hero-title {
        font-size: 36px;
    }

    .hero-slogan {
        font-size: 17px;
    }

    header input,
    header select,
    header button {
        display: block;
        margin: 10px auto;
    }

    #vendor-search-form {
        flex-direction: column;
    }

    header input,
    header select {
        box-sizing: border-box;
        max-width: 300px;
        width: 100%;
    }

    main {
        padding: 25px 15px;
    }

    .order-item {
        padding: 18px;
    }

    .account-panel {
        padding: 22px;
    }

    .account-heading h1 {
        font-size: 32px;
    }

    /* On phones, show about one and a half cards so it's clear you can swipe */
    .carousel-track .vendor-service-item {
        flex-basis: 65%;
    }

    .carousel-arrow {
        width: 32px;
        height: 32px;
        font-size: 20px;
    }

    .split-section,
    .split-reverse {
        grid-template-columns: 1fr;
    }

    .split-reverse .split-text {
        order: 0;
    }

    .split-title {
        font-size: 30px;
    }

    .feature-card:nth-child(2) {
        margin-left: 0;
    }

    .footer-inner {
        flex-direction: column;
        text-align: center;
    }

    .social-buttons {
        justify-content: center;
    }

    /* Leave room so the phone menu bar never covers the page */
    body {
        padding-bottom: 80px;
    }

    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10;
        flex-direction: row;
        gap: 0;
        justify-content: space-around;
        padding: 10px 0;
        border-top: 2px solid var(--brand-gold);
        border-bottom: none;
    }

    .bottom-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        color: var(--text-muted);
        font-size: 11px;
        font-weight: bold;
        text-transform: uppercase;
    }

    .bottom-nav span {
        font-size: 22px;
    }
}
/* ===== Browse Sellers page ===== */
.browse-main {
    max-width: 1200px;
    margin: 0 auto;
}

.browse-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    text-align: left;
}

.notice-banner {
    display: flex;
    gap: 16px;
    align-items: center;
    max-width: 760px;
    margin: 10px auto 24px;
    padding: 18px 22px;
    border: 1px solid rgb(194 24 91 / 40%);
    border-left: 4px solid var(--brand-pink);
    border-radius: 16px;
    background: rgb(74 18 53 / 55%);
    text-align: left;
}

.notice-banner p {
    margin: 2px 0;
    color: var(--text-muted);
}

.notice-title {
    color: var(--text) !important;
    font-weight: bold;
}

.filter-panel {
    display: grid;
    grid-template-columns: 1.4fr 1fr auto;
    gap: 20px;
    align-items: end;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgb(24 23 28 / 85%);
    text-align: left;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-group label,
.filter-label {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.filter-group input,
.filter-group select {
    box-sizing: border-box;
    width: 100%;
}

.filter-chips {
    display: flex;
    gap: 8px;
}

.filter-chip {
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
}

.filter-chip:hover {
    background: rgb(194 24 91 / 15%);
}

.filter-chip[aria-pressed="true"] {
    border-color: var(--brand-pink);
    background: var(--brand-pink);
    color: white;
}

.browse-summary {
    margin: 24px 0 16px;
    color: var(--text-muted);
    text-align: left;
}

.pagination {
    position: static;
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 30px 0 10px;
    padding: 0;
    background: transparent;
    border: none;
    backdrop-filter: none;
}

.page-button {
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text);
}

.page-button.current {
    background: var(--brand-pink);
    border-color: var(--brand-pink);
}

.vendor-card-bio {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 14px;
}

.see-all-link {
    font-weight: bold;
}

@media (max-width: 800px) {
    .filter-panel {
        grid-template-columns: 1fr;
    }
}

/* ===== Seller profile page ===== */
.dynamic-profile {
    max-width: 1200px;
}

.owner-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding: 14px 20px;
    border: 1px solid var(--brand-gold);
    border-radius: 14px;
    background: rgb(212 175 55 / 12%);
}

.owner-bar p {
    margin: 0;
    font-weight: bold;
}

.profile-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 30px;
    align-items: start;
    padding: 34px;
    border: 1px solid rgb(194 24 91 / 35%);
    border-radius: 22px;
    background: rgb(24 23 28 / 90%);
    box-shadow: 0 10px 40px rgb(0 0 0 / 35%);
    text-align: left;
}

/* Round photo with a pink-to-gold glowing ring */
.profile-photo {
    width: 160px;
    height: 160px;
    padding: 4px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 25%;
    background: linear-gradient(135deg, var(--brand-pink), var(--brand-gold));
    box-shadow: 0 0 30px rgb(194 24 91 / 45%);
}

.profile-name {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font-size: 38px;
}

.verified-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-pink), #A23CD8);
    color: white;
    font-size: 14px;
}

.profile-bio {
    margin: 0 0 14px;
    color: var(--text-muted);
    font-size: 17px;
    white-space: pre-line;
}

.profile-badges {
    justify-content: flex-start;
    margin-bottom: 18px;
}

.profile-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.profile-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 96px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-raised);
}

.profile-stat strong {
    font-size: 22px;
}

.profile-stat span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

.profile-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.profile-actions .review-summary {
    margin: 0;
}

.profile-actions button {
    margin: 0;
}

.profile-awards {
    min-width: 170px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-raised);
    text-align: center;
}

.award-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}

.award {
    font-size: 34px;
    filter: drop-shadow(0 0 10px rgb(212 175 55 / 50%));
    cursor: help;
}

.profile-services {
    margin-top: 28px;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgb(24 23 28 / 80%);
    text-align: left;
}

.profile-services h2 {
    margin: 0;
    font-size: 26px;
}

.profile-services > .admin-meta {
    margin: 4px 0 20px;
}

/* "View service" opens the order form inside the tile */
.service-panel summary {
    display: inline-block;
    list-style: none;
    cursor: pointer;
}

.service-panel summary::-webkit-details-marker {
    display: none;
}

.service-panel[open] summary {
    margin-bottom: 12px;
}

.service-panel-description {
    color: var(--text-muted);
}

@media (max-width: 800px) {
    .profile-header {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }

    .profile-name,
    .profile-badges,
    .profile-stats,
    .profile-actions {
        justify-content: center;
    }
}

/* ===== Admin dashboard buttons ===== */
.admin-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.admin-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 26px 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgb(24 23 28 / 88%);
    color: var(--text);
    font-size: 15px;
    font-weight: bold;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.admin-tile:hover {
    transform: translateY(-4px);
    border-color: var(--brand-pink);
    background: rgb(24 23 28 / 88%);
}

.admin-tile-icon {
    font-size: 36px;
}

/* Number badge in the corner */
.admin-tile-count {
    position: absolute;
    top: 10px;
    right: 12px;
    min-width: 24px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--line);
    color: var(--text);
    font-size: 13px;
}

.admin-tile-count:empty {
    display: none;
}

/* Something is waiting for you */
.admin-tile.needs-action {
    border-color: var(--brand-pink);
    box-shadow: 0 0 22px rgb(194 24 91 / 40%);
}

.admin-tile.needs-action .admin-tile-count {
    background: var(--brand-pink);
    color: white;
}

/* A report says someone may be under 18 */
.admin-tile.urgent {
    border-color: #F85149;
    box-shadow: 0 0 26px rgb(248 81 73 / 55%);
}

.admin-tile.urgent .admin-tile-count {
    background: #F85149;
}

.admin-back {
    margin: 20px 0 0;
}

/* ===== Account page buttons ===== */
.tile-collapsed {
    display: none !important;
}

.account-tiles {
    margin: 10px 0 24px;
}

/* ===== Hover labels: add data-tip="..." to anything ===== */
[data-tip] {
    position: relative;
}

[data-tip]:hover::after,
[data-tip]:focus-visible::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    z-index: 50;
    width: max-content;
    max-width: 230px;
    padding: 7px 11px;
    border-radius: 8px;
    background: #F4EEF8;
    color: #1A1222;
    font-size: 13px;
    font-weight: normal;
    line-height: 1.35;
    text-align: center;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    box-shadow: 0 6px 18px rgb(0 0 0 / 35%);
    transform: translateX(-50%);
    pointer-events: none;
}

/* Little arrow under the label */
[data-tip]:hover::before,
[data-tip]:focus-visible::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    z-index: 50;
    border: 6px solid transparent;
    border-top-color: #F4EEF8;
    transform: translateX(-50%);
    pointer-events: none;
}

.name-awards {
    display: inline-flex;
    gap: 6px;
    font-size: 22px;
}

/* Labels in the header open downwards so they don't go off the top of the screen */
nav [data-tip]:hover::after,
nav [data-tip]:focus-visible::after {
    top: calc(100% + 10px);
    bottom: auto;
}

nav [data-tip]:hover::before,
nav [data-tip]:focus-visible::before {
    top: calc(100% - 2px);
    bottom: auto;
    border-top-color: transparent;
    border-bottom-color: #F4EEF8;
}

/* ===== My Account page, matching the rest of the site ===== */
#account-title {
    background: linear-gradient(90deg, var(--text) 30%, var(--brand-pink-light), var(--brand-gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 44px;
}

.account-summary {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: center;
    margin-bottom: 10px;
    padding: 26px;
    border: 1px solid rgb(194 24 91 / 35%);
    border-radius: 20px;
    background: linear-gradient(135deg, rgb(194 24 91 / 18%), rgb(232 100 44 / 8%));
    text-align: left;
}

.account-photo {
    width: 110px;
    height: 110px;
}

.account-summary-details h2 {
    margin: 0;
    font-size: 28px;
}

.account-summary-details .admin-meta {
    margin: 4px 0 12px;
}

.account-summary-details .profile-badges {
    margin-bottom: 14px;
}

.account-summary-details .hero-button {
    display: inline-block;
    padding: 10px 18px;
}

/* Big Tokon balance on the right */
.account-wallet {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 150px;
    padding: 18px 22px;
    border: 1px solid var(--brand-gold);
    border-radius: 16px;
    background: rgb(212 175 55 / 12%);
}

.account-wallet strong {
    color: var(--brand-gold);
    font-size: 30px;
}

.account-wallet span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

/* The summary card shows the balance, so the old text line isn't needed */
.signed-in-panel #tokon-balance {
    display: none;
}

/* Each opened section is its own card */
.signed-in-panel #profile-form,
.signed-in-panel #avatar-form,
.signed-in-panel #vendor-application-section,
.signed-in-panel #age-check-section,
.signed-in-panel #tokon-section,
.signed-in-panel #service-form,
.signed-in-panel .service-list-section {
    max-width: 640px;
    margin: 20px auto;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface-raised);
    text-align: left;
}

/* My Services needs the full width for its row of cards */
.signed-in-panel .service-list-section {
    max-width: none;
}

.signed-in-panel #profile-form h2,
.signed-in-panel #avatar-form h2,
.signed-in-panel #vendor-application-section h2,
.signed-in-panel #age-check-section h2,
.signed-in-panel #tokon-section h2 {
    margin-top: 0;
    text-align: left;
}

.signed-in-panel .account-form label {
    color: var(--text-muted);
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.signed-in-panel .account-submit {
    background: linear-gradient(90deg, var(--brand-pink), #A23CD8);
}

/* The account panel is just a frame now - the cards inside carry the style */
.account-panel:has(#signed-in-panel:not([hidden])) {
    background: rgb(24 23 28 / 70%);
}

@media (max-width: 800px) {
    .account-summary {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .account-summary-details .profile-badges {
        justify-content: center;
    }
}

/* ===== Name colours and new badges ===== */
.styled-name {
    text-shadow: 0 0 14px rgb(255 255 255 / 18%);
}

/* Gradient names can't have a text shadow, so they glow with a filter instead */
.styled-name[style*="background"] {
    text-shadow: none;
    filter: drop-shadow(0 0 8px rgb(255 120 200 / 35%));
}

.badge-frenzy {
    background: rgb(242 201 76 / 18%);
    border: 1px solid #F2C94C;
    color: #F2C94C;
}

.badge-discord {
    background: rgb(88 101 242 / 22%);
    border: 1px solid #5865F2;
    color: #A9B1FF;
}

.signed-in-panel #name-colour-section {
    max-width: 640px;
    margin: 20px auto;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface-raised);
    text-align: left;
}

.signed-in-panel #name-colour-section h2 {
    margin-top: 0;
}

.name-preview-box {
    font-size: 22px;
}

.name-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin: 14px 0 24px;
}

.name-swatch {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    text-align: left;
}

.name-swatch:hover {
    border-color: var(--brand-pink);
    background: var(--surface);
}

.name-swatch.chosen {
    border-color: var(--brand-gold);
    box-shadow: 0 0 0 2px var(--brand-gold);
}

.name-swatch.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.name-swatch-sample {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgb(255 255 255 / 25%);
}

/* ===== Profile photo cropper ===== */
.photo-cropper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 6px 0;
}

.crop-viewport {
    position: relative;
    width: 240px;
    height: 240px;
    overflow: hidden;
    border-radius: 50%;
    border: 3px solid var(--brand-pink);
    box-shadow: 0 0 24px rgb(194 24 91 / 40%);
    background: var(--surface);
    cursor: grab;
    touch-action: none;
}

.crop-viewport:active {
    cursor: grabbing;
}

.crop-image {
    position: absolute;
    max-width: none;
    user-select: none;
    pointer-events: none;
}

.crop-zoom {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 240px;
    text-transform: none !important;
}

.crop-zoom input {
    flex: 1;
    padding: 0;
}

/* =====================================================================
   VISUAL UPGRADE - fonts, custom icons, glass cards, polished controls
   (added last so it refines everything above on every page)
   ===================================================================== */

:root {
    --glass: rgb(26 20 36 / 72%);
    --glass-border: rgb(255 255 255 / 8%);
    --glow-pink: 0 0 0 1px rgb(255 111 168 / 25%), 0 10px 30px rgb(194 24 91 / 25%);
    --radius-lg: 20px;
    --radius-md: 14px;
    --font-heading: "Outfit", "Segoe UI", Arial, sans-serif;
    --font-body: "Inter", "Segoe UI", Arial, sans-serif;
}

body {
    font-family: var(--font-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5,
.logo, .stat-number, .profile-stat strong, .admin-tile-name {
    font-family: var(--font-heading);
    letter-spacing: -0.02em;
}

::selection {
    background: rgb(255 111 168 / 45%);
    color: white;
}

/* Slim scrollbar in the theme */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #120A1A;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(#C2185B, #8E3CC8);
    border-radius: 999px;
}

/* ----- Custom icons (replace default emojis) ----- */
.bk-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: -0.16em;
    line-height: 0;
}

.bk-icon svg {
    width: 1.15em;
    height: 1.15em;
    stroke: url(#bk-icon-gradient);
    stroke-width: 2;
    filter: drop-shadow(0 0 6px rgb(255 111 168 / 35%));
}

/* On solid pink buttons the gradient would disappear, so icons follow the text colour there */
button:not(.button-outline):not(.filter-chip):not(.name-swatch):not(.admin-tile):not(.service-tile):not(.report-link) .bk-icon svg,
.vendor-link:not(.vendor-link-outline) .bk-icon svg,
.hero-button-primary .bk-icon svg,
.badge-top .bk-icon svg,
.badge-featured .bk-icon svg,
.status-accepted .bk-icon svg,
.status-in_progress .bk-icon svg {
    stroke: currentColor;
    filter: none;
}

/* ----- Header ----- */
nav {
    padding: 14px 28px;
    background: rgb(14 8 22 / 78%);
    border-bottom: 1px solid rgb(242 201 76 / 35%);
    box-shadow: 0 8px 30px rgb(0 0 0 / 35%);
}

/* "Elegant Italic" logo: gold-to-pink name with a crown flourish underneath */
.logo {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-left: 0; /* the header links rule above adds 20px, which would push the logo off-centre */
    text-decoration: none;
}

.logo-text {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 28px;
    letter-spacing: normal;
    padding: 0 4px;
    background-image: linear-gradient(90deg, #FFD27A, #FF9BC9);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.logo-flourish {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.logo-line {
    flex: 1;
    height: 1.5px;
}

.logo-line-left {
    background: linear-gradient(90deg, transparent, #FFD27A);
}

.logo-line-right {
    background: linear-gradient(90deg, #FF9BC9, transparent);
}

nav:not(.bottom-nav) div a {
    margin-left: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
}

nav:not(.bottom-nav) div a:hover {
    background: rgb(255 255 255 / 7%);
    color: white;
}

/* ----- Buttons ----- */
button,
.vendor-link,
.hero-button {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: transform 0.15s, box-shadow 0.2s, background 0.2s, border-color 0.2s;
}

.primary-look,
button:not(.button-outline):not(.filter-chip):not(.name-swatch):not(.admin-tile):not(.service-tile):not(.report-link):not(.text-button):not(.page-button):not(.reviews-close-x):not(.locked-card):not(.fav-heart),
.vendor-link:not(.vendor-link-outline) {
    background: linear-gradient(135deg, #E0307A, #A23CD8);
    box-shadow: 0 6px 18px rgb(194 24 91 / 30%);
}

.star-picker button {
    background: transparent !important;
    box-shadow: none !important;
}

button:not(:disabled):hover,
.vendor-link:hover,
.hero-button:hover {
    transform: translateY(-2px);
}

button:not(.button-outline):not(.filter-chip):not(.name-swatch):not(.admin-tile):not(.service-tile):not(.report-link):not(.text-button):not(.page-button):not(.reviews-close-x):not(.locked-card):not(:disabled):hover,
.vendor-link:not(.vendor-link-outline):hover {
    background: linear-gradient(135deg, #F0408A, #B24CE8);
    box-shadow: 0 10px 26px rgb(194 24 91 / 45%);
}

.button-outline,
.vendor-link-outline {
    border: 1px solid rgb(255 111 168 / 55%);
    background: rgb(255 111 168 / 6%);
    color: #FFB3D4;
}

.button-outline:hover,
.vendor-link-outline:hover {
    background: rgb(255 111 168 / 16%);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #FFD36E;
    outline-offset: 3px;
}

/* ----- Form fields ----- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,
textarea {
    padding: 13px 16px;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 12px;
    background-color: rgb(12 8 18 / 55%);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 15px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
select:focus,
textarea:focus {
    border-color: #FF6FA8;
    box-shadow: 0 0 0 4px rgb(255 111 168 / 18%);
    outline: none;
}

input::placeholder,
textarea::placeholder {
    color: rgb(255 255 255 / 35%);
}

/* Dropdowns with a custom pink arrow */
select {
    appearance: none;
    padding-right: 42px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FF8FC7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
}

select option {
    background: #1C1426;
    color: var(--text);
}

/* File pickers */
input[type="file"] {
    padding: 12px;
    border: 1px dashed rgb(255 111 168 / 45%);
    border-radius: 12px;
    background: rgb(255 111 168 / 5%);
    color: var(--text-muted);
    font-family: var(--font-body);
}

input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 8px 14px;
    border: none;
    border-radius: 9px;
    background: linear-gradient(135deg, #E0307A, #A23CD8);
    color: white;
    font-weight: 600;
    cursor: pointer;
}

input[type="checkbox"],
input[type="radio"],
input[type="range"] {
    accent-color: #FF6FA8;
}

input[type="checkbox"],
input[type="radio"] {
    width: 18px;
    height: 18px;
}

/* Choice labels keep normal capitals (the form label style was making them SHOUT) */
.signed-in-panel .account-form label.service-toggle,
.account-form .service-toggle,
.signed-in-panel .account-form .adult-choice label,
.adult-choice label {
    color: var(--text);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
}

/* The 18+ choice as two tappable pills */
.adult-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 16px;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 14px;
    background: rgb(12 8 18 / 35%);
}

.adult-choice legend {
    padding: 0 8px;
    font-family: var(--font-heading);
    font-size: 15px;
}

.adult-choice label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 12px;
    background: rgb(255 255 255 / 3%);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.adult-choice label:hover {
    border-color: rgb(255 111 168 / 50%);
}

.adult-choice label:has(input:checked) {
    border-color: #FF6FA8;
    background: rgb(255 111 168 / 14%);
    box-shadow: 0 0 0 3px rgb(255 111 168 / 15%);
}

.adult-choice label:has(input:disabled) {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ----- Glass cards everywhere ----- */
.card,
.about-card,
.order-item,
.feature-card,
.perk-row,
.profile-header,
.profile-services,
.filter-panel,
.service-tile,
.account-panel,
.admin-tile,
.notification-item,
.community-card,
.review-item,
.order-dialog {
    background-color: var(--glass);
    backdrop-filter: blur(14px);
    border-color: var(--glass-border);
}

.card:hover,
.service-tile:hover,
.feature-card:hover,
.admin-tile:hover,
.community-card:not(.coming-soon):hover {
    box-shadow: var(--glow-pink);
}

/* Admin items become their own cards instead of lines */
.admin-item {
    margin: 14px 0;
    padding: 20px 22px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: var(--glass);
}

.admin-main,
.orders-main {
    max-width: 1000px;
}

.admin-main > h1,
.orders-main > h1 {
    font-size: 42px;
    background: linear-gradient(90deg, var(--text) 30%, #FF8FC7, #FFD36E);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.admin-tile {
    border-radius: var(--radius-lg);
}

.admin-tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgb(255 111 168 / 18%), rgb(242 201 76 / 12%));
    font-size: 30px;
}

.admin-tile-icon .bk-icon svg {
    width: 1em;
    height: 1em;
}

/* ----- Badges ----- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    font-family: var(--font-heading);
    font-size: 11.5px;
    letter-spacing: 0.04em;
}

/* ----- Section titles ----- */
.home-section h2,
.profile-services h2 {
    font-size: 32px;
}

.service-category {
    letter-spacing: 0.06em;
}

/* Gentle fade-in as pages load */
@media (prefers-reduced-motion: no-preference) {
    .hero,
    .home-section,
    .split-section,
    .profile-header,
    .profile-services,
    .account-summary,
    .admin-tiles,
    .browse-main > * {
        animation: fade-up 0.5s ease both;
    }

    @keyframes fade-up {
        from {
            opacity: 0;
            transform: translateY(12px);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }
}

/* ----- Big decorative icons ----- */
.hero-crown {
    font-size: 64px;
}

.hero-crown .bk-icon svg,
.footer-crown .bk-icon svg,
.feature-icon .bk-icon svg,
.community-icon .bk-icon svg,
.service-tile-placeholder .bk-icon svg,
.award .bk-icon svg {
    width: 1em;
    height: 1em;
    stroke-width: 1.7;
}

.community-icon .bk-icon svg {
    stroke: white;
    filter: none;
}

.service-tile-placeholder {
    font-size: 72px;
}

/* ----- Footer ----- */
.site-footer {
    background: rgb(10 6 16 / 70%);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgb(242 201 76 / 30%);
}

.social-button {
    background: var(--glass);
    border-color: var(--glass-border);
}

/* =====================================================================
   TOP UP TOKONS page (tokons.html)
   ===================================================================== */
.buy-main {
    max-width: 960px;
    margin: 0 auto;
    padding: 40px 20px 60px;
}

.buy-title {
    margin: 0;
    font-size: 44px;
}

.buy-title span {
    background: linear-gradient(90deg, #FF9BC9, #C77DFF);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.buy-subtitle {
    margin: 6px 0 28px;
    color: var(--text-muted);
}

.buy-card {
    margin-bottom: 22px;
    padding: 24px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    background: var(--glass);
    backdrop-filter: blur(14px);
}

.buy-card h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    font-size: 20px;
}

.buy-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #E0307A, #A23CD8);
    color: white;
    font-size: 14px;
}

/* Wallet / topping up / total boxes */
.buy-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.buy-summary-box {
    padding: 18px 12px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: rgb(12 8 18 / 45%);
    text-align: center;
}

.buy-summary-adding {
    border-color: rgb(255 111 168 / 45%);
    background: rgb(255 111 168 / 10%);
}

.buy-summary-label {
    margin: 0;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.buy-summary-value {
    margin: 6px 0 2px;
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 800;
}

.buy-gold {
    color: #FFD27A;
}

.buy-pink {
    color: #FF9BC9;
}

.buy-summary-sub {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
}

/* - [ amount ] + */
.buy-stepper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 24px 0 18px;
}

.buy-stepper #buy-amount {
    width: 110px;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
}

.buy-stepper .buy-stepper-button {
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border-radius: 12px;
    font-size: 24px;
    line-height: 1;
}

.buy-quick-label {
    margin: 0 0 10px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

.buy-quick {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.buy-quick .filter-chip {
    min-width: 64px;
}

.buy-fine-print {
    margin: 16px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    font-style: italic;
    text-align: center;
}

/* Payment method cards */
.buy-methods {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

.buy-method {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 16px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: rgb(12 8 18 / 45%);
    text-align: center;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.buy-method:hover,
.buy-method.chosen {
    border-color: #FF6FA8;
    box-shadow: var(--glow-pink);
}

.buy-method-icon {
    margin: 0;
    font-size: 34px;
}

.buy-method-icon .bk-icon svg {
    width: 1em;
    height: 1em;
    stroke-width: 1.7;
}

.buy-method h3 {
    margin: 0;
    font-size: 17px;
}

.buy-method button {
    width: 100%;
    margin: 0;
}

.buy-method-tag {
    padding: 3px 10px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 11px;
}

.buy-method-soon {
    opacity: 0.55;
}

.buy-method-soon:hover {
    border-color: var(--glass-border);
    box-shadow: none;
}

.buy-login-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.buy-login-note p {
    flex-basis: 100%;
    margin: 0;
}

/* Step 3: where to send it */
.buy-instructions {
    margin: 0 0 18px;
    padding-left: 20px;
    line-height: 1.8;
}

.buy-send-to {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
}

.buy-send-to code {
    padding: 8px 12px;
    border: 1px dashed rgb(255 210 122 / 55%);
    border-radius: 10px;
    background: rgb(255 210 122 / 8%);
    color: #FFD27A;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.buy-send-to button {
    margin: 0;
    padding: 8px 14px;
}

/* Help card */
.buy-help {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
    padding: 22px 24px;
    border: 1px solid rgb(90 220 200 / 30%);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgb(20 60 70 / 45%), rgb(26 20 36 / 72%));
}

.buy-help div {
    flex: 1;
}

.buy-help h2 {
    margin: 0 0 4px;
    font-size: 18px;
}

.buy-help p {
    margin: 0;
    color: var(--text-muted);
}

.buy-help-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border: 1px solid rgb(90 220 200 / 35%);
    border-radius: 16px;
    background: rgb(90 220 200 / 10%);
    font-size: 26px;
}

.buy-help-icon .bk-icon svg {
    width: 1em;
    height: 1em;
}

.buy-footnote {
    max-width: 640px;
    margin: 30px auto 0;
    padding: 16px 20px;
    border: 1px solid rgb(255 111 168 / 30%);
    border-radius: var(--radius-md);
    background: rgb(255 111 168 / 6%);
    font-size: 14px;
    text-align: center;
}

/* Phones: stack the boxes and the help card */
@media (max-width: 600px) {
    .buy-title {
        font-size: 34px;
    }

    .buy-summary {
        grid-template-columns: 1fr;
    }

    .buy-help {
        flex-direction: column;
        text-align: center;
    }
}

/* ----- Top-ups: PayPal, reference codes, success, admin checks ----- */
.buy-method-body {
    width: 100%;
}

.buy-method-body .account-message {
    margin: 8px 0 0;
    font-size: 13px;
}

.buy-method-instant {
    border-color: rgb(255 210 122 / 35%);
}

.buy-method-instant .buy-method-tag {
    border-color: rgb(255 210 122 / 45%);
    color: #FFD27A;
}

/* PayPal draws its own button inside this box */
.buy-paypal-button {
    min-height: 48px;
}

.buy-reference-code {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

p.buy-reference-code {
    margin: 4px 0 8px;
    color: #FFD27A;
}

.buy-success {
    border-color: rgb(120 220 160 / 45%);
    background: linear-gradient(135deg, rgb(30 80 55 / 45%), var(--glass));
    text-align: center;
}

.buy-success h2 {
    justify-content: center;
}

#buy-cancel {
    display: block;
    margin: 10px auto 0;
}

.buy-history-row {
    flex-wrap: wrap;
    gap: 8px;
}

.buy-history-row button {
    margin: 0;
    padding: 6px 12px;
}

.top-up-log {
    margin-top: 18px;
}

.top-up-log summary {
    cursor: pointer;
    color: var(--text-muted);
}

.top-up-quiet {
    margin: 12px 0;
    padding: 16px 18px;
    border: 1px dashed var(--glass-border);
    border-radius: var(--radius-md);
    background: rgb(12 8 18 / 35%);
}

/* =====================================================================
   BECOME A VENDOR page (become-a-vendor.html)
   ===================================================================== */
.vendor-apply-main {
    max-width: 1120px;
    margin: 0 auto;
    padding: 40px 20px 60px;
}

.vendor-apply-label {
    display: inline-block;
    margin: 0 0 12px;
    padding: 6px 14px;
    border: 1px solid rgb(255 210 122 / 40%);
    border-radius: 999px;
    background: rgb(255 210 122 / 8%);
    color: #FFD27A;
    font-size: 14px;
    font-weight: 600;
}

/* Two cards side by side; the form side is a little wider */
.vendor-apply-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 22px;
    align-items: start;
    text-align: left;
}

.vendor-apply-points {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.vendor-apply-points li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.vendor-apply-point-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgb(255 155 201 / 30%);
    border-radius: 12px;
    background: rgb(255 155 201 / 10%);
    font-size: 20px;
}

.vendor-apply-points h3 {
    margin: 0 0 4px;
    font-size: 16px;
}

.vendor-apply-points p {
    margin: 0;
    color: var(--text-muted);
}

.vendor-apply-checklist-title {
    margin: 0 0 10px;
    font-size: 16px;
}

.vendor-apply-checklist {
    margin: 0 0 18px;
    padding-left: 22px;
    color: var(--text-muted);
    line-height: 1.7;
}

.vendor-apply-note {
    margin: 0;
    padding: 12px 14px;
    border-left: 3px solid #FFD27A;
    border-radius: 8px;
    background: rgb(12 8 18 / 45%);
    color: var(--text-muted);
    font-size: 14px;
}

/* "Discord required" warning */
.vendor-apply-warning {
    padding: 18px;
    border: 1px solid rgb(255 159 69 / 55%);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgb(255 79 163 / 14%), rgb(255 159 69 / 12%));
}

.vendor-apply-warning h3 {
    margin: 0 0 6px;
    color: #FFB86B;
}

.vendor-apply-warning p {
    margin: 0 0 14px;
}

/* Pending / approved / not approved */
.vendor-apply-badge {
    display: inline-block;
    margin: 0 0 10px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgb(255 210 122 / 14%);
    color: #FFD27A;
    font-weight: 700;
}

.vendor-apply-reason {
    padding: 12px 14px;
    border-left: 3px solid var(--brand-pink-light);
    border-radius: 8px;
    background: rgb(12 8 18 / 45%);
}

.vendor-apply-status button {
    margin-top: 6px;
}

.vendor-apply-fieldset {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
}

.vendor-apply-fieldset legend {
    padding: 0 6px;
    font-weight: bold;
}

.vendor-apply-types {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
}

.account-form .vendor-apply-small-label {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

.vendor-apply-prices {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    gap: 10px;
    align-items: center;
}

.vendor-apply-previews {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vendor-apply-previews img {
    width: 72px;
    height: 72px;
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    object-fit: cover;
}

.vendor-apply-rules {
    padding: 10px 14px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: rgb(12 8 18 / 35%);
}

.vendor-apply-rules summary {
    cursor: pointer;
    font-weight: 600;
}

.vendor-apply-rules ul {
    margin: 10px 0;
    padding-left: 20px;
    color: var(--text-muted);
}

/* Phones and small tablets: one card under the other */
@media (max-width: 860px) {
    .vendor-apply-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .vendor-apply-main {
        padding: 28px 16px 60px;
    }

    .vendor-apply-types {
        grid-template-columns: minmax(0, 1fr);
    }

    .vendor-apply-prices {
        grid-template-columns: auto 1fr;
    }
}

/* Work photos on admin vendor applications */
.admin-work-photos {
    margin: 10px 0;
}

.admin-work-photos img {
    width: 96px;
    height: 96px;
}

/* =====================================================================
   POLISH PASS (5 Nov 2026) - fixes and finishing touches for every page
   ===================================================================== */

/* The footer sits at the bottom of the window, even on short pages */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body > main {
    flex: 1 0 auto;
    box-sizing: border-box;
    width: 100%;
}

body > nav,
body > header,
body > footer {
    flex-shrink: 0;
}

/* Links inside pages are pink, but big buttons keep their own colours */
main a.hero-button-primary {
    color: white;
}

main a.hero-button-secondary {
    color: var(--brand-gold);
}

/* Sign Up / Login tabs: one clear selected tab */
.account-tabs {
    padding: 5px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: rgb(12 8 18 / 55%);
}

.account-tabs button {
    border: 0;
    border-radius: 10px;
}

.account-tabs button:not([aria-selected="true"]) {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text-muted) !important;
}

.account-tabs button:not([aria-selected="true"]):hover {
    color: var(--text) !important;
    background: rgb(255 255 255 / 6%) !important;
}

.account-tabs button[aria-selected="true"] {
    color: white !important;
}

/* "Nothing here yet" messages look like a friendly card, not loose text */
#top-services-message:not(:empty),
#featured-services-message:not(:empty),
#all-services-message:not(:empty),
#notifications-message:not(:empty),
.service-grid > p:only-child {
    max-width: 560px;
    margin: 10px auto;
    padding: 22px 24px;
    border: 1px dashed rgb(255 155 201 / 30%);
    border-radius: var(--radius-md);
    background: rgb(12 8 18 / 35%);
    color: var(--text-muted);
    text-align: center;
}

.service-grid > p:only-child {
    grid-column: 1 / -1;
    max-width: none;
}

/* Quieter secondary buttons */
#sign-out-button,
#refresh-orders {
    padding: 10px 20px;
    border: 1px solid rgb(255 111 168 / 55%) !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--brand-pink-light);
}

#sign-out-button:hover,
#refresh-orders:hover {
    background: rgb(255 111 168 / 10%) !important;
}

/* ----- Admin dashboard: buttons grouped under small headings ----- */
.admin-tile-groups {
    max-width: 1000px;
    margin: 0 auto;
    text-align: left;
}

.admin-tile-group h3 {
    margin: 30px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-tile-group .admin-tiles {
    margin-top: 12px;
}

.admin-attention {
    display: table;
    margin: 4px auto 0;
    padding: 8px 18px;
    border: 1px solid rgb(120 220 160 / 40%);
    border-radius: 999px;
    background: rgb(30 80 55 / 35%);
    color: #A8EBC4;
    font-weight: 600;
}

.admin-attention.is-waiting {
    border-color: rgb(255 111 168 / 55%);
    background: rgb(255 111 168 / 12%);
    color: #FFB3D1;
}

/* Admin and account section cards a little roomier */
.admin-section,
.signed-in-panel .account-form,
.vendor-application,
.vendor-dashboard {
    line-height: 1.55;
}

.admin-item {
    padding: 20px 0;
}

.admin-item h3 {
    font-size: 18px;
}

/* ----- Terms, Privacy, Refunds: easier to read ----- */
.rules-card {
    max-width: 760px;
    padding: 30px 34px;
}

.rules-card h2 {
    font-size: 22px;
}

.rules-card h3 {
    margin: 26px 0 8px;
    padding-top: 20px;
    border-top: 1px solid var(--glass-border);
    color: var(--text);
}

.rules-card h3:first-of-type {
    padding-top: 0;
    border-top: 0;
}

.rules-card li {
    margin: 7px 0;
    line-height: 1.65;
}

.rules-card > p {
    margin-top: 10px;
}

/* ----- Contact page ----- */
.about-card p + p {
    margin-top: 12px;
}

/* ----- About page ----- */
.about-main {
    max-width: 1040px;
    margin: 0 auto;
    padding: 40px 20px 60px;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 4px;
    text-align: left;
}

.about-step h2 {
    margin: 14px 0 6px;
}

.about-step p,
.about-cta p {
    margin: 0;
    color: var(--text-muted);
}

.about-why {
    text-align: left;
}

.about-why .vendor-apply-points {
    margin: 0;
}

.about-cta {
    text-align: center;
}

.about-cta h2 {
    justify-content: center;
    margin-bottom: 6px;
}

.about-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
}

/* ----- Phones ----- */
@media (max-width: 800px) {
    .about-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .rules-card {
        padding: 22px 18px;
    }

    .about-main {
        padding: 28px 16px 60px;
    }

    .admin-tile-group h3 {
        text-align: center;
    }
}

/* Phones: the bottom menu already has Browse, Orders, Tokons and Account,
   so the top menu only keeps what isn't down there (one tidy row) */
@media (max-width: 600px) {
    nav:not(.bottom-nav) {
        gap: 10px;
        padding: 12px 16px;
    }

    nav:not(.bottom-nav) > div {
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
    }

    nav:not(.bottom-nav) > div > a[href="index.html"],
    nav:not(.bottom-nav) > div > a[href="vendors.html"],
    nav:not(.bottom-nav) > div > a[href="orders.html"],
    nav:not(.bottom-nav) > div > a[href="account.html"],
    nav:not(.bottom-nav) > div > a[href="account.html#login"] {
        display: none;
    }

    nav:not(.bottom-nav) > div > a {
        font-size: 14px;
        white-space: nowrap;
    }

    nav:not(.bottom-nav) > div > a[href="account.html#signup"] {
        padding: 7px 14px;
        border-radius: 999px;
        background: linear-gradient(135deg, #E0307A, #A23CD8);
    }
}

/* FIX: the top menu's "stick to the top" rule also hit the phone bottom bar,
   which stretched it over the whole screen (blurred page, taps blocked) */
.bottom-nav {
    top: auto;
}

@media (max-width: 600px) {
    .bottom-nav {
        top: auto;
        height: auto;
        padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
        background: rgb(14 8 22 / 94%);
        box-shadow: 0 -8px 24px rgb(0 0 0 / 35%);
    }
}

/* Phones: the footer stacks without big empty gaps */
@media (max-width: 600px) {
    .site-footer {
        margin-top: 24px;
        padding: 28px 16px;
    }

    .footer-inner {
        gap: 16px;
    }

    .footer-middle {
        flex: 0 0 auto;
    }

    .footer-crown {
        font-size: 52px;
    }

    .footer-links {
        gap: 10px 18px;
    }
}

/* Phones: account and admin buttons two per row instead of one long list */
@media (max-width: 600px) {
    .admin-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .admin-tile {
        padding: 18px 10px;
        font-size: 13px;
    }
}

/* When signed in, both Sign Up / Login tabs are hidden - hide their holder too */
.account-tabs:not(:has(button:not([hidden]))) {
    display: none;
}

/* ----- My Services cards (My Account): show everything, nothing cut off ----- */
.carousel-track {
    gap: 16px;
    padding: 4px 2px 10px;
}

.carousel-track .vendor-service-item {
    flex: 0 0 calc((100% - 2 * 16px) / 3);
    min-width: 240px;
    min-height: 270px;
    aspect-ratio: auto;
    overflow: visible;
    padding: 20px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: linear-gradient(160deg, rgb(255 155 201 / 7%), rgb(12 8 18 / 55%));
    text-align: left;
}

.carousel-track .vendor-service-item h4 {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
}

.carousel-track .vendor-service-item .service-category {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    color: var(--text-muted);
}

.carousel-track .vendor-service-item .service-description {
    margin-top: 8px;
}

.carousel-track .vendor-service-item .starting-price {
    margin-top: 10px;
    font-size: 20px;
    font-weight: 700;
}

/* Active switch and Edit button always sit together at the bottom of the card */
.carousel-track .vendor-service-item > .service-toggle {
    display: flex;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--glass-border);
    color: var(--text);
    font-weight: 600;
}

.carousel-track .vendor-service-item > .service-toggle input {
    width: 18px;
    height: 18px;
    accent-color: #E0307A;
}

.carousel-track .service-edit {
    margin-top: 10px;
}

.carousel-track .service-edit > summary {
    display: block;
    margin: 0;
    padding: 9px 14px;
    border: 1px solid rgb(255 111 168 / 50%);
    border-radius: 10px;
    text-align: center;
    list-style: none;
}

.carousel-track .service-edit > summary::-webkit-details-marker {
    display: none;
}

.carousel-track .service-edit > summary:hover {
    background: rgb(255 111 168 / 10%);
}

.carousel-track .service-edit[open] > summary {
    background: rgb(255 111 168 / 14%);
}

/* While editing, the card takes the whole row so the form has room */
.carousel-track .vendor-service-item:has(details[open]) {
    flex-basis: 100%;
}

@media (max-width: 860px) {
    .carousel-track .vendor-service-item {
        flex-basis: calc((100% - 16px) / 2);
    }
}

@media (max-width: 600px) {
    .carousel-track .vendor-service-item {
        flex-basis: 80%;
        min-width: 0;
    }
}

.carousel-track .service-edit-form {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* =====================================================================
   SERVICE page (service.html)
   ===================================================================== */
.sp-main {
    max-width: 1160px;
    margin: 0 auto;
    padding: 28px 20px 60px;
    text-align: left;
}

main a.sp-back {
    display: inline-block;
    margin-bottom: 14px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 14px;
}

main a.sp-back:hover {
    color: var(--text);
}

.sp-header {
    margin-bottom: 18px;
}

.sp-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.sp-badge {
    padding: 5px 12px;
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    background: rgb(255 255 255 / 6%);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sp-badge-gold {
    border-color: rgb(255 210 122 / 45%);
    background: rgb(255 210 122 / 10%);
    color: #FFD27A;
    text-transform: none;
}

.sp-title {
    margin: 12px 0 6px;
    font-size: 36px;
    line-height: 1.2;
}

.sp-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
}

/* Big picture with thumbnails beside it */
.sp-media-card h2,
.sp-order-card h2,
.sp-about-card h2 {
    margin-bottom: 14px;
}

.sp-media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 16px;
    padding: 14px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: rgb(12 8 18 / 55%);
}

.sp-viewer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    overflow: hidden;
    border-radius: 12px;
    background: rgb(12 8 18 / 70%);
}

.sp-viewer img {
    display: block;
    max-width: 100%;
    max-height: 560px;
    object-fit: contain;
}

.sp-viewer .service-tile-placeholder {
    font-size: 96px;
}

.sp-thumbs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
    gap: 10px;
}

.sp-thumb {
    aspect-ratio: 1;
    margin: 0;
    padding: 0 !important;
    overflow: hidden;
    border: 2px solid transparent !important;
    border-radius: 12px;
    background: rgb(255 255 255 / 5%) !important;
    box-shadow: none !important;
    cursor: pointer;
}

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

.sp-thumb.chosen,
.sp-thumb:hover {
    border-color: #FF9BC9 !important;
}

/* Order card on the left, About on the right */
.sp-lower {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 22px;
    align-items: start;
}

.sp-sub {
    margin: -6px 0 16px;
    color: var(--text-muted);
    font-size: 14px;
}

.sp-label {
    margin: 0 0 8px;
    padding: 0;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sp-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid rgb(255 111 168 / 40%);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgb(255 79 163 / 14%), rgb(12 8 18 / 40%));
}

.sp-balance .sp-label {
    margin-bottom: 2px;
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
}

.sp-balance-value {
    margin: 0;
    color: #FF9BC9;
    font-weight: 700;
}

main a.sp-pill {
    padding: 6px 12px;
    border: 1px solid rgb(120 220 160 / 45%);
    border-radius: 999px;
    color: #A8EBC4;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

main a.sp-pill.sp-pill-short {
    border-color: rgb(255 111 168 / 60%);
    color: #FFB3D1;
}

.sp-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}

.sp-choice,
.sp-extra {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    background: rgb(12 8 18 / 45%);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.sp-choice:hover,
.sp-extra:hover {
    border-color: rgb(255 155 201 / 45%);
}

.sp-choice:has(input:checked),
.sp-extra:has(input:checked) {
    border-color: #FF9BC9;
    background: rgb(255 111 168 / 12%);
}

.sp-choice input,
.sp-extra input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #E0307A;
    flex-shrink: 0;
}

.sp-choice > span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sp-choice-sub {
    color: var(--text-muted);
    font-size: 13px;
}

.sp-group #sp-custom-name {
    box-sizing: border-box;
    width: 100%;
}

.sp-extras {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sp-extra-name {
    flex: 1;
    font-weight: 600;
}

.sp-extra-price {
    padding: 4px 10px;
    border: 1px solid rgb(255 210 122 / 40%);
    border-radius: 999px;
    color: #FFD27A;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.sp-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 14px;
    border-top: 1px solid var(--glass-border);
    font-size: 17px;
}

.sp-total strong {
    color: #FFD27A;
    font-size: 22px;
}

.sp-order-button {
    width: 100%;
    margin-top: 6px;
    padding: 15px;
    font-size: 16px;
}

.sp-success {
    padding: 20px;
    border: 1px solid rgb(120 220 160 / 45%);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgb(30 80 55 / 45%), rgb(12 8 18 / 40%));
}

.sp-success-title {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
}

.sp-success p {
    color: var(--text);
}

.sp-success-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.sp-description {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.sp-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

@media (max-width: 900px) {
    .sp-media {
        grid-template-columns: minmax(0, 1fr);
    }

    .sp-thumbs {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .sp-lower {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .sp-main {
        padding: 20px 16px 60px;
    }

    .sp-title {
        font-size: 28px;
    }

    .sp-viewer {
        min-height: 280px;
    }

    .sp-thumbs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Seller's sample editor (Edit service) */
.sample-editor-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 8px 0 12px;
}

.sample-editor-item {
    position: relative;
    width: 84px;
    height: 84px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    border-radius: 10px;
}

.sample-editor-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sample-editor-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    font-size: 13px;
    line-height: 1;
}

/* The general "header" style (homepage hero) shouldn't apply to the Service page title */
header.sp-header {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    text-align: left;
}

button.sp-order-button {
    margin: 6px 0 0;
}

/* While a service is being edited, the cards wrap so the open one gets its own full-width row
   (otherwise a card further along the row would stick out of the right-hand side) */
.carousel-track:has(details[open]) {
    flex-wrap: wrap;
    overflow-x: visible;
    scroll-snap-type: none;
}

.carousel-track .vendor-service-item:has(details[open]) {
    order: -1;
    flex: 0 0 100%;
    min-width: 0;
    box-sizing: border-box;
}

.carousel:has(details[open]) .carousel-arrow {
    visibility: hidden;
}

/* =====================================================================
   ORDER page (order.html) - chat on the left, tracker on the right
   ===================================================================== */
.op-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px 48px;
    text-align: left;
    color: #F6E9F1;
}

.op-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.op-top-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

main a.op-back {
    color: #CDB3C6;
    font-size: 14px;
    text-decoration: none;
}

.op-title {
    margin: 0;
    font-size: 28px;
}

.op-subtitle {
    margin: 0;
    color: #CDB3C6;
}

.op-status {
    padding: 8px 16px;
    border: 1px solid #FF9BC9;
    border-radius: 999px;
    background: #3A1634;
    color: #FFC2DF;
    font-size: 14px;
    font-weight: 600;
}

.op-status.status-completed {
    border-color: rgb(120 220 160 / 60%);
    background: rgb(30 80 55 / 40%);
    color: #A8EBC4;
}

.op-status.status-cancelled,
.op-status.status-rejected,
.op-status.status-refunded {
    border-color: #5A3553;
    background: #2E1229;
    color: #CDB3C6;
}

.op-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
}

.op-card {
    box-sizing: border-box;
    border: 1px solid #3B1B37;
    border-radius: 18px;
    background: #241022;
}

.op-card h2 {
    margin: 0 0 16px;
    font-size: 18px;
}

/* ----- Chat ----- */
.op-chat {
    display: flex;
    flex: 999 1 560px;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.op-chat-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #3B1B37;
}

.op-avatar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-image: linear-gradient(135deg, #FFD27A, #FF9BC9);
    color: #1A0B19;
    font-size: 18px;
    font-weight: 700;
}

.op-chat-who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.op-chat-name {
    font-size: 16px;
    font-weight: 700;
}

.op-chat-role {
    color: #CDB3C6;
    font-size: 13px;
}

.op-chat-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 470px;
    padding: 20px;
    overflow-y: auto;
}

.op-day {
    align-self: center;
    color: #B89AAF;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.op-event {
    align-self: center;
    max-width: 90%;
    padding: 6px 14px;
    border: 1px solid #4A2142;
    border-radius: 999px;
    background: #2E1229;
    color: #E9D6E4;
    font-size: 13px;
    text-align: center;
}

.op-msg {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    gap: 4px;
    max-width: 75%;
}

.op-msg.mine {
    align-self: flex-end;
    align-items: flex-end;
}

.op-bubble {
    padding: 10px 14px;
    border-radius: 16px 16px 16px 4px;
    background: #33162F;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.op-msg.mine .op-bubble {
    border-radius: 16px 16px 4px 16px;
    background-image: linear-gradient(135deg, #FFD27A, #FF9BC9);
    color: #1A0B19;
    font-weight: 500;
}

.op-msg-meta {
    color: #B89AAF;
    font-size: 12px;
}

.op-chat-empty {
    margin: auto 0;
    color: #B89AAF;
    text-align: center;
}

.op-chat-form {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid #3B1B37;
}

.op-chat-form input {
    flex: 1;
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    height: 44px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid #4A2142;
    border-radius: 12px;
    background: #1A0B19;
    color: #F6E9F1;
}

button.op-send,
button.op-primary-button {
    flex-shrink: 0;
    min-height: 44px;
    margin: 0;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(90deg, #FFD27A, #FF9BC9) !important;
    box-shadow: none !important;
    color: #1A0B19;
    font-weight: 700;
}

.op-chat-note {
    margin: 0;
    padding: 0 20px 14px;
    color: #B89AAF;
    font-size: 12px;
}

#op-chat-closed {
    padding-top: 14px;
    border-top: 1px solid #3B1B37;
}

/* ----- Right side ----- */
.op-side {
    display: flex;
    flex: 1 1 340px;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.op-progress,
.op-summary {
    padding: 20px;
}

.op-state-note {
    margin: -4px 0 16px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #2E1229;
    color: #E9D6E4;
    font-size: 14px;
}

.op-steps {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.op-step {
    display: flex;
    gap: 14px;
}

.op-rail {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;
    width: 34px;
}

.op-dot {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 2px solid #5A3553;
    border-radius: 50%;
    color: #B89AAF;
    font-size: 14px;
    font-weight: 600;
}

.op-step.done .op-dot {
    border: 0;
    background-image: linear-gradient(135deg, #FFD27A, #FF9BC9);
    color: #1A0B19;
    font-weight: 800;
}

.op-step.current .op-dot {
    border: 3px solid #FF9BC9;
    box-shadow: 0 0 0 5px rgb(255 155 201 / 18%);
}

.op-step.current .op-dot::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #FF9BC9;
}

.op-rail .op-line {
    flex: 1;
    width: 2px;
    min-height: 24px;
    margin: 4px 0;
    background: #5A3553;
}

.op-rail .op-line.done {
    background: #FFD27A;
}

.op-step-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 4px 0 20px;
}

.op-step-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px;
}

.op-step-title {
    color: #B89AAF;
    font-weight: 700;
}

.op-step.done .op-step-title,
.op-step.current .op-step-title {
    color: #F6E9F1;
}

.op-step-meta {
    color: #B89AAF;
    font-size: 13px;
}

.op-step.current .op-step-meta {
    color: #FF9BC9;
}

.op-step-text {
    color: #CDB3C6;
    font-size: 14px;
}

.op-label {
    color: #FFD27A;
    font-size: 13px;
    font-weight: 600;
}

.op-requests,
.op-delivery,
.op-revision {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}

.op-requests input,
.op-requests textarea,
.op-revision textarea {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #4A2142;
    border-radius: 12px;
    background: #1A0B19;
    color: #F6E9F1;
    font: inherit;
    font-size: 14px;
    resize: vertical;
}

.op-requests-text {
    margin: 0;
    color: #E9D6E4;
    font-size: 14px;
    white-space: pre-wrap;
}

.op-requests-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.op-saved {
    color: #B89AAF;
    font-size: 13px;
}

button.op-outline-button {
    align-self: flex-start;
    min-height: 40px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid #FF9BC9;
    border-radius: 10px;
    background: transparent !important;
    box-shadow: none !important;
    color: #FFC2DF;
    font-size: 14px;
}

.op-delivery-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

button.op-secondary-button {
    min-height: 44px;
    margin: 0;
    padding: 0 18px;
    border: 1px solid #4A2142;
    border-radius: 12px;
    background: #2E1229 !important;
    box-shadow: none !important;
    color: #F6E9F1;
}

button.op-file {
    align-self: flex-start;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid #4A2142;
    border-radius: 10px;
    background: #2E1229 !important;
    box-shadow: none !important;
    color: #F6E9F1;
    font-size: 14px;
    text-align: left;
}

.op-cancel {
    padding-left: 48px;
}

/* ----- Summary ----- */
.op-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.op-summary h2 {
    margin: 0;
}

.op-lines {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.op-lines .op-line,
.op-line-total {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #CDB3C6;
    font-variant-numeric: tabular-nums;
}

.op-line-total {
    padding-top: 12px;
    border-top: 1px solid #3B1B37;
    color: #F6E9F1;
    font-weight: 700;
}

#op-total {
    color: #FFD27A;
}

.op-safe {
    margin: 0;
    padding: 12px;
    border-radius: 12px;
    background: #2E1229;
    color: #E9D6E4;
    font-size: 13px;
}

.op-help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    font-size: 14px;
}

main .op-help a {
    color: #FF9BC9;
    cursor: pointer;
}

button.op-link-button {
    margin: 0;
    padding: 0;
    border: 0;
    background: none !important;
    box-shadow: none !important;
    color: #CDB3C6;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
}

button.op-link-button:disabled {
    opacity: 0.55;
}

/* Phones: chat on top, tracker below */
@media (max-width: 600px) {
    .op-main {
        padding: 18px 16px 48px;
    }

    .op-title {
        font-size: 24px;
    }

    .op-chat-list {
        height: 380px;
        padding: 14px;
    }

    .op-msg {
        max-width: 85%;
    }
}

/* "View order" on My Orders and "Open chat" on notifications */
.order-view-link {
    display: inline-block;
    margin: 4px 0 10px;
    padding: 9px 16px;
    font-size: 14px;
}

.notification-chat {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, #E0307A, #A23CD8);
    color: white;
    font-size: 14px;
    font-weight: 600;
}

/* Only takes up space when there is something to say */
#op-action-message:empty {
    display: none;
}

/* Special name colours: Pink Glow glows, Rainbow slowly moves along the name */
.styled-name.name-glow {
    filter: drop-shadow(0 0 5px rgb(255 79 163 / 80%)) drop-shadow(0 0 14px rgb(255 79 163 / 45%));
}

/* Seller's photo in the Order page chat header */
.op-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.op-avatar:has(img) {
    padding: 2px;
    box-sizing: border-box;
}

/* Gradient names hug the name itself, so the whole gradient shows even in a wide space.
   inline-block (not a fixed width) keeps the name centred or left-aligned like the text around it. */
.styled-name[style*="background"] {
    display: inline-block;
    max-width: 100%;
}

.op-chat-name {
    align-self: flex-start;
}

/* Buttons on order notifications (buyers and sellers) */
.notification-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.notification-actions .notification-chat {
    margin-top: 0;
    text-decoration: none;
}

main a.notification-chat {
    color: white;
}

main a.notification-chat-outline {
    border: 1px solid rgb(255 111 168 / 55%);
    background: transparent;
    color: #FFB3D1;
}

main a.notification-chat:hover {
    filter: brightness(1.12);
}

/* =====================================================================
   NOTIFICATIONS page - chat-list layout with filters and ticks
   ===================================================================== */
.nt-main {
    max-width: 860px;
}

.nt-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.nt-filters {
    margin: 0;
}

.nt-search {
    box-sizing: border-box;
    flex: 1 1 220px;
    max-width: 300px;
    margin: 0;
}

.nt-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.nt-card {
    display: flex;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid #3B1B37;
    border-radius: 16px;
    background: #241022;
    color: #F6E9F1;
    text-decoration: none;
}

main a.nt-card {
    color: #F6E9F1;
}

.nt-card.unread {
    border-color: rgb(255 155 201 / 55%);
    background: linear-gradient(135deg, rgb(255 79 163 / 10%), #241022 60%);
}

.nt-avatar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    overflow: hidden;
    border-radius: 50%;
    background-image: linear-gradient(135deg, #FFD27A, #FF9BC9);
    color: #1A0B19;
    font-size: 18px;
    font-weight: 700;
}

.nt-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nt-avatar-bell {
    background: #2E1229;
    font-size: 20px;
}

.nt-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.nt-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.nt-title {
    margin: 0;
    overflow: hidden;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nt-order-word {
    color: #CDB3C6;
    font-weight: 600;
}

.nt-time {
    flex-shrink: 0;
    color: #B89AAF;
    font-size: 12px;
}

.nt-card.unread .nt-top > .nt-time {
    color: #FF9BC9;
    font-weight: 600;
}

.nt-meta {
    margin: 0;
    color: #B89AAF;
    font-size: 12px;
    text-transform: capitalize;
}

.nt-preview {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: #E9D6E4;
    font-size: 14px;
}

.nt-preview-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nt-badge {
    flex-shrink: 0;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 999px;
    background: linear-gradient(135deg, #E0307A, #A23CD8);
    color: white;
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

.nt-other-text {
    margin: 0;
    font-size: 15px;
}

.nt-updates {
    margin-top: 6px;
    font-size: 13px;
}

.nt-updates summary {
    color: #B89AAF;
    cursor: pointer;
}

.nt-updates ul {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.nt-updates li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #2E1229;
    color: #E9D6E4;
}

.nt-updates li.unread {
    border-left: 3px solid #FF9BC9;
}

/* WhatsApp-style ticks: ✓ sent, ✓✓ delivered, glowing green ✓✓ read */
.msg-ticks {
    flex-shrink: 0;
    color: #B89AAF;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.2em;
    padding-right: 0.2em;
}

.msg-ticks.read {
    color: #5CFF9D;
    text-shadow: 0 0 6px rgb(60 255 140 / 90%), 0 0 12px rgb(60 255 140 / 50%);
}

@media (max-width: 600px) {
    .nt-search {
        max-width: none;
    }

    .nt-card {
        padding: 14px;
    }

    .nt-avatar {
        width: 40px;
        height: 40px;
    }
}

.op-msg-meta .msg-ticks {
    margin-left: 5px;
}

/* =====================================================================
   Flowing name colours (drawn entirely by these classes)
   ===================================================================== */
/* Flowing Rainbow (two classes so it beats page rules like ".service-tile-seller strong") */
.styled-name.bk-name-rainbow, .bk-name-rainbow {
  display: inline-block;
  max-width: 100%;
  background-image: linear-gradient(90deg, #ff5f6d, #ffb347, #ffe66d, #5ee39a, #4fc3ff, #a77bff, #ff6fd8, #ff5f6d);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  animation: bk-flow 3s linear infinite;
}

@keyframes bk-flow { to { background-position: 200% center; } }

/* Stop moving for people who turn animations off */
@media (prefers-reduced-motion: reduce) {
  .bk-name-rainbow { animation: none; }
}

/* Save button under the name colours */
button.name-colour-save {
    margin: 14px 0 0;
    padding: 11px 24px;
}

/* Gothic name colour: a faint light outline keeps the black parts readable on the dark site */
.styled-name.name-gothic {
    filter: drop-shadow(0 0 1px rgb(255 255 255 / 70%)) drop-shadow(0 0 6px rgb(255 255 255 / 25%));
}

/* Gold - moving "Royal Yellow" with a twinkling star after the name */
.styled-name.bk-name-gold, .bk-name-gold {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin-right: 0.6em; /* room for the star so it doesn't touch what's next to the name */
  background-image: linear-gradient(90deg, #FFD23F, #FFF3B0, #FFB703, #FFE066, #FFD23F);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  animation: bk-flow 4s linear infinite;
}
.bk-name-gold::after {
  content: "\2726";
  position: absolute; top: -0.35em; right: -0.55em; font-size: .55em;
  color: #FFF3B0; -webkit-text-fill-color: #FFF3B0;
  animation: bk-twinkle 1.8s ease-in-out infinite;
}

@keyframes bk-twinkle {
  0%, 100% { opacity: .2; transform: scale(.6) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(45deg); }
}

/* Stop moving for people who turn animations off */
@media (prefers-reduced-motion: reduce) {
  .bk-name-gold, .bk-name-gold::after { animation: none; }
}

/* =====================================================================
   Design review upgrades: How it works, browse sort, seller badges, favourites, 404
   ===================================================================== */
/* How it works (homepage, under the hero) */
.how-it-works {
    margin-top: 10px;
}
.how-steps {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.how-step {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px;
    text-align: left;
    background: var(--surface);
    border: 1px solid rgb(194 24 91 / 35%);
    border-radius: 16px;
}
.how-step h3 {
    margin: 8px 0 0;
    font-size: 18px;
}
.how-step p {
    margin: 0;
    color: var(--text-muted);
}
.how-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #E0307A, #A23CD8);
    box-shadow: 0 6px 18px rgb(194 24 91 / 30%);
    color: white;
    font-family: var(--font-heading);
    font-weight: 800;
}
@media (max-width: 720px) {
    .how-steps {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Browse All Services: search, category and sort */
.browse-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 10px;
}
.browse-controls input {
    flex: 1 1 240px;
    min-width: 0;
    margin: 0;
}
.browse-controls select {
    flex: 1 1 200px;
    max-width: 320px;
    min-width: 0;
    margin: 0;
}
.browse-sort {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.browse-sort .sort-chip {
    padding: 9px 16px;
}
.browse-count {
    margin: 14px 0 16px;
    color: var(--text-muted);
    text-align: left;
}
button.browse-more {
    display: block;
    margin: 24px auto 0;
}

/* Seller badges: New, Rising, Top Seller, reply and delivery times */
.seller-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 8px 0;
}
.seller-chip {
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid #5A2A52;
    background: #3A1634;
    color: #FFC2DF;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}
.seller-chip.top {
    border-color: transparent;
    background: linear-gradient(90deg, #FFD27A, #FF9BC9);
    color: #1A0B19;
}
.profile-details .seller-chips {
    justify-content: flex-start;
}

/* Favourites heart */
.vendor-card {
    position: relative;
}
.vendor-card > .badges {
    margin: 0 28px;
}
button.fav-heart {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 1px solid rgb(255 155 201 / 40%);
    border-radius: 50%;
    background: rgb(17 8 16 / 78%);
    color: #FF9BC9;
    box-shadow: none;
}
button.fav-heart svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}
button.fav-heart.saved svg {
    fill: currentColor;
}
button.fav-heart:hover {
    background: rgb(58 22 52 / 92%);
}
button.fav-heart-labelled {
    position: static;
    width: auto;
    padding: 0 16px;
    border-radius: 999px;
    font-weight: 600;
}
button.fav-heart:focus-visible {
    outline: 2px solid #FF9BC9;
    outline-offset: 2px;
}

/* 404 page */
.nf-main {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 60px 16px;
    text-align: center;
    background: radial-gradient(ellipse 60% 60% at 50% 30%, rgb(255 95 170 / 18%), transparent 70%);
}
.nf-main .nf-big {
    margin: 0;
    padding: 0 8px 8px;
    font-family: "Playfair Display", Georgia, serif;
    font-style: italic;
    font-weight: 700;
    font-size: clamp(80px, 18vw, 140px);
    line-height: 1;
    background-image: linear-gradient(90deg, #FFD27A, #FF9BC9);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.nf-main h1 {
    margin: 0;
    font-size: clamp(22px, 4vw, 30px);
}
.nf-main p:not(.nf-big) {
    margin: 0;
    color: var(--text-muted);
}
.nf-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}

/* ===== Loading placeholders (js/placeholders.js) ===== */
.sk-wrap {
    display: grid;
    gap: 14px;
    width: 100%;
    text-align: left;
}

.sk-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.sk-bar {
    display: block;
    height: 12px;
    border-radius: 7px;
    background: linear-gradient(90deg, #2E1229 0%, #4A2142 50%, #2E1229 100%);
    background-size: 200% 100%;
    animation: bk-shimmer 1.4s linear infinite;
}

@keyframes bk-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

.sk-w30 { width: 30%; }
.sk-w45 { width: 45%; }
.sk-w55 { width: 55%; }
.sk-w60 { width: 60%; }
.sk-w70 { width: 70%; }
.sk-w80 { width: 80%; }
.sk-pill { height: 22px; border-radius: 999px; }
.sk-big { height: 26px; }

.sk-cards {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.sk-card,
.sk-row,
.sk-tile {
    background: rgb(36 16 34 / 78%);
    border: 1px solid #3B1B37;
    border-radius: 16px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sk-media {
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
}

.sk-row {
    flex-direction: row;
    align-items: center;
    gap: 14px;
}

.sk-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sk-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sk-chat {
    gap: 12px;
    padding: 6px 2px;
}

.sk-bubble {
    height: 38px;
    border-radius: 16px 16px 16px 4px;
}

.sk-bubble.sk-mine {
    justify-self: end;
    border-radius: 16px 16px 4px 16px;
}

.sk-tiles {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.sk-lines-wrap,
.sk-lines {
    min-width: 0;
}

/* People who turn animations off get still shapes */
@media (prefers-reduced-motion: reduce) {
    .sk-bar {
        animation: none;
        background: #3A1634;
    }
}

/* ===== Friendly empty messages (js/placeholders.js) ===== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    padding: 30px 18px;
    margin: 6px auto;
    max-width: 460px;
    background: rgb(36 16 34 / 70%);
    border: 1px dashed #4A2142;
    border-radius: 18px;
    grid-column: 1 / -1;
}

.empty-state-icon {
    color: #FF9BC9;
    display: inline-flex;
    margin-bottom: 4px;
}

.empty-state-title {
    margin: 0;
    font-weight: 700;
    font-size: 1.08rem;
    color: var(--text);
}

.empty-state-text {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 36ch;
}

.empty-state-button {
    margin-top: 8px;
}

.empty-state-small {
    padding: 18px 14px;
    gap: 6px;
}

.empty-state-small .empty-state-title {
    font-size: 1rem;
}

/* ===== Account: email alerts, seller checklist + rank, welcome bonus, suspended banner, sample clips ===== */
.account-summary > .sk-wrap {
    grid-column: 1 / -1;
}

/* Email alert switches */
.email-switches {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.account-form label.email-switch {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid #3B1B37;
    border-radius: 14px;
    background: rgb(36 16 34 / 70%);
    font-weight: normal;
    cursor: pointer;
}

.account-form .email-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.email-switch-track {
    position: relative;
    flex-shrink: 0;
    width: 46px;
    height: 26px;
    margin-top: 2px;
    border-radius: 999px;
    background: #3A1634;
    border: 1px solid #5A3553;
    transition: background 0.2s;
}

.email-switch-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #CDB3C6;
    transition: transform 0.2s, background 0.2s;
}

.email-switch input:checked + .email-switch-track {
    background: linear-gradient(90deg, #FFD27A, #FF9BC9);
    border-color: transparent;
}

.email-switch input:checked + .email-switch-track::after {
    transform: translateX(20px);
    background: #1A0B19;
}

.email-switch input:focus-visible + .email-switch-track {
    outline: 2px solid #FFD27A;
    outline-offset: 2px;
}

.email-switch input:disabled + .email-switch-track {
    opacity: 0.55;
}

.email-switch-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    line-height: 1.4;
}

.email-switch-text span {
    color: var(--text-muted);
    font-size: 0.92rem;
}

/* Seller area at the top of My Account */
.seller-home {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 14px;
    text-align: left;
}

.seller-home:empty {
    display: none;
}

.seller-rank-card,
.seller-checklist {
    padding: 16px 20px;
    border: 1px solid #3B1B37;
    border-radius: 18px;
    background: rgb(36 16 34 / 80%);
}

.seller-rank-card {
    display: flex;
    align-items: center;
    gap: 14px;
    border-color: rgb(255 155 201 / 40%);
}

.seller-rank-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgb(255 210 122 / 12%);
    font-size: 20px;
}

.seller-rank-text p {
    margin: 0;
}

.seller-rank-line {
    font-size: 1.02rem;
}

.seller-rank-line strong {
    color: #FFD27A;
}

.seller-rank-next {
    margin-top: 3px !important;
    color: var(--text-muted);
    font-size: 0.93rem;
}

.seller-checklist-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.seller-checklist-title {
    margin: 0;
    font-size: 1.15rem;
}

.seller-checklist-count {
    color: var(--text-muted);
    font-size: 0.92rem;
}

.seller-checklist-bar {
    height: 8px;
    margin: 12px 0 14px;
    overflow: hidden;
    border-radius: 999px;
    background: #3A1634;
}

.seller-checklist-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #FFD27A, #FF9BC9);
}

.seller-checklist-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.seller-check {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.seller-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 2px solid #5A3553;
    border-radius: 50%;
    box-sizing: border-box;
}

.seller-check.done .seller-tick {
    border: 0;
    background: linear-gradient(135deg, #FFD27A, #FF9BC9);
}

.seller-check.done .seller-check-label {
    color: var(--text);
}

button.text-button.seller-check-link {
    margin: 0;
    min-height: 32px;
    color: #FFC2DF;
    text-align: left;
    font-size: 1rem;
    box-shadow: none;
}

.seller-check-hint {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Welcome bonus banner (Top Up page) */
.welcome-bonus {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 720px;
    margin: 0 auto 22px;
    padding: 16px 18px;
    border: 1px solid rgb(255 155 201 / 50%);
    border-radius: 16px;
    background: linear-gradient(110deg, rgb(255 210 122 / 18%), rgb(255 155 201 / 18%));
    text-align: left;
}

.welcome-bonus p {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.45;
}

.welcome-bonus strong {
    color: #FFD27A;
}

.welcome-bonus-icon {
    flex-shrink: 0;
}

/* Suspended account banner (every page, from nav.js) */
.suspended-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    box-sizing: border-box;
    width: calc(100% - 32px);
    max-width: 900px;
    margin: 18px auto;
    padding: 16px 18px;
    border: 1px solid #6A4220;
    border-radius: 16px;
    background: #2A1810;
    color: #FFE3C2;
    text-align: left;
}

.suspended-banner-icon {
    flex-shrink: 0;
    font-size: 22px;
    line-height: 1.2;
}

.suspended-banner p {
    margin: 0;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.suspended-banner-title {
    margin-bottom: 4px !important;
    color: #FFB65C;
    font-weight: 700;
}

main .suspended-banner a {
    color: #FFD27A;
    font-weight: 600;
}

/* Sample clips and the SAMPLE mark in the seller's editor */
.sample-editor-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #1A0B19;
}

.sample-mark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-28deg);
    color: rgb(255 255 255 / 60%);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-shadow: 0 1px 3px rgb(0 0 0 / 55%);
    pointer-events: none;
}

.sample-play-badge {
    position: absolute;
    bottom: 5px;
    left: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgb(0 0 0 / 55%);
    color: #FFFFFF;
    font-size: 9px;
    pointer-events: none;
}

.sample-clip-length {
    position: absolute;
    bottom: 6px;
    right: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgb(0 0 0 / 55%);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    pointer-events: none;
}

@media (max-width: 600px) {
    .seller-rank-card,
    .seller-checklist {
        padding: 14px 16px;
    }

    .welcome-bonus {
        margin-left: 0;
        margin-right: 0;
    }

    .suspended-banner {
        width: calc(100% - 24px);
        margin: 12px auto;
    }
}

/* ===== Admin: money dashboard, fraud flags, accounts, activity log, trending ===== */
.money-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 6px;
}

.money-filters .filter-chip {
    padding: 9px 16px;
}

.money-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.money-tile {
    background: rgb(46 18 41 / 85%);
    border: 1px solid #3B1B37;
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.money-tile-label {
    font-size: 13px;
    color: #CDB3C6;
}

.money-tile-value {
    font-size: 26px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #F6E9F1;
}

.money-tile-value.money-gradient {
    background-image: linear-gradient(90deg, #FFD27A, #FF9BC9);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    align-self: flex-start;
}

.money-tile-note {
    font-size: 12px;
    color: #B89AAF;
}

.money-chart-card {
    margin-top: 18px;
    background: rgb(36 16 34 / 80%);
    border: 1px solid #3B1B37;
    border-radius: 16px;
    padding: 16px;
}

.money-chart-card h3 {
    margin: 0 0 2px;
}

.money-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 180px;
    margin-top: 14px;
    padding: 0 4px;
    border-bottom: 1px solid #4A2142;
    background-image: linear-gradient(to top, rgb(255 255 255 / 6%) 1px, transparent 1px);
    background-size: 100% 25%;
}

.money-bar-column {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    gap: 4px;
    border-radius: 6px 6px 0 0;
    outline-offset: 2px;
}

.money-bar-column:focus-visible {
    outline: 2px solid #FFD27A;
}

.money-bar-value {
    font-size: 11px;
    color: #CDB3C6;
    text-align: center;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-height: 14px;
}

.money-bar {
    display: block;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, #FF9BC9, #B0507F);
    max-height: calc(100% - 18px);
}

.money-bar.this-week {
    background: linear-gradient(180deg, #FFD27A, #FF9BC9);
}

.money-bar-column:hover .money-bar {
    filter: brightness(1.15);
}

.money-bar-labels {
    display: flex;
    gap: 8px;
    padding: 6px 4px 0;
}

.money-bar-labels span {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: 11px;
    color: #B89AAF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.money-bar-labels .this-week {
    color: #FFD27A;
    font-weight: 700;
}

.money-table {
    margin-top: 12px;
    font-size: 14px;
}

.money-table summary {
    cursor: pointer;
    color: #FF9BC9;
}

.money-table table {
    margin-top: 8px;
    border-collapse: collapse;
    width: 100%;
    max-width: 360px;
}

.money-table th,
.money-table td {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid #3B1B37;
    font-variant-numeric: tabular-nums;
}

/* Fraud warning chips */
.flag-chip-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 8px 0;
}

.flag-chip {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    padding: 4px 10px;
    border-radius: 999px;
    background: #3A2412;
    color: #FFB65C;
    border: 1px solid #6A4220;
}

.flag-chip-done {
    background: #2A1427;
    color: #B89AAF;
    border-color: #4A2142;
}

.admin-item button.flag-review-button,
.flag-review-button {
    margin: 0;
    padding: 5px 14px;
    font-size: 13px;
    border-radius: 999px;
}

.admin-account-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.admin-account-top h3 {
    margin: 4px 0;
}

.admin-suspended-badge {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgb(255 123 114 / 15%);
    color: #FF9C94;
    border: 1px solid rgb(255 123 114 / 45%);
}

.admin-suspend-reason {
    margin: 4px 0;
    color: #E9D6E4;
}

.admin-suspend-form {
    margin-top: 12px;
    padding: 14px;
    border-radius: 14px;
    background: rgb(46 18 41 / 85%);
    border: 1px solid #4A2142;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-suspend-form label {
    font-size: 14px;
    color: #CDB3C6;
}

.admin-suspend-form textarea {
    width: 100%;
    box-sizing: border-box;
}

.admin-suspend-form .admin-meta {
    margin: 0;
}

.admin-search-form {
    display: flex;
    gap: 8px;
    margin: 12px 0;
}

.admin-search-form input {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.admin-search-form button {
    margin: 0;
}

.admin-trend-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.admin-trend-rank {
    width: 44px;
    flex-shrink: 0;
    text-align: center;
    font-family: "Playfair Display", Georgia, serif;
    font-style: italic;
    font-weight: 700;
    font-size: 24px;
    color: #CDB3C6;
}

.admin-trend-rank.rank-1 { color: #FFD27A; }
.admin-trend-rank.rank-2 { color: #E3D2DD; }
.admin-trend-rank.rank-3 { color: #E8B48A; }

.admin-trend-body {
    min-width: 0;
    flex: 1;
}

.admin-trend-body .admin-meta {
    margin: 2px 0 0;
}

/* Review panel */
.admin-review-dialog {
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    box-sizing: border-box;
    padding: 0;
    border: 1px solid #4A2142;
    border-radius: 18px;
    background: #1F0D1C;
    color: var(--text);
    text-align: left;
}

.admin-review-dialog::backdrop {
    background: rgb(10 4 10 / 70%);
}

.admin-review-head {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: #1F0D1C;
    border-bottom: 1px solid #3B1B37;
}

.admin-review-head h2 {
    margin: 0;
    font-size: 20px;
    overflow-wrap: anywhere;
}

.admin-review-close {
    background: transparent;
    border: 1px solid #4A2142;
    color: #CDB3C6;
    border-radius: 999px;
    width: 40px;
    height: 40px;
    padding: 0;
    flex-shrink: 0;
    cursor: pointer;
}

.admin-review-content {
    padding: 6px 18px 18px;
}

.admin-review-content h3 {
    margin: 16px 0 6px;
    font-size: 15px;
}

.admin-review-state {
    margin: 8px 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgb(46 18 41 / 85%);
}

.admin-review-state.is-suspended {
    background: rgb(255 123 114 / 12%);
    color: #FF9C94;
}

.admin-review-flags,
.admin-review-history {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 6px;
    font-size: 14px;
}

.admin-review-flags {
    list-style: none;
    padding-left: 0;
}

.admin-review-note {
    margin: 10px 0 0;
    font-size: 13px;
    color: #FFB65C;
}

@media (max-width: 760px) {
    .money-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .money-tile-value {
        font-size: 22px;
    }
}

@media (max-width: 480px) {
    .money-bars {
        gap: 4px;
        height: 150px;
    }

    .money-bar-labels {
        gap: 4px;
    }

    .money-bar-value {
        font-size: 9px;
    }

    .money-bar-labels span {
        font-size: 9px;
    }
}

/* ===== Shop: Trending this week podium, sample previews, loading states ===== */
.trending-section {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    padding: 26px 24px 0;
    border: 1px solid #3B1B37;
    border-radius: 20px;
    background: rgb(36 16 34 / 78%);
}

.trending-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 6px 12px;
    margin-bottom: 34px;
}

.trending-head h2 {
    margin: 0;
}

.trending-title-text {
    font-weight: 800;
    background-image: linear-gradient(90deg, #FFD27A, #FF9BC9);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.trending-note {
    font-size: 13px;
    color: #B89AAF;
}

.podium {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 620px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
}

/* #2 left, #1 middle, #3 right (the list itself stays in rank order for screen readers) */
.pod-1 { order: 2; }
.pod-2 { order: 1; }
.pod-3 { order: 3; }

.pod-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    text-align: center;
    text-decoration: none;
    color: var(--text);
    border-radius: 14px 14px 0 0;
}

main a.pod-link {
    color: var(--text);
}

.pod-link:focus-visible {
    outline: 2px solid #FFD27A;
    outline-offset: 4px;
}

.pod-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.pod-ring {
    position: relative;
    display: block;
    box-sizing: border-box;
    padding: 4px;
    border-radius: 50%;
    transition: transform 0.2s;
}

.pod-link:hover .pod-ring {
    transform: translateY(-3px);
}

.pod-1 .pod-ring { width: 100px; height: 100px; background: linear-gradient(135deg, #FFD27A, #FF9BC9); }
.pod-2 .pod-ring { width: 78px; height: 78px; background: #E3D2DD; }
.pod-3 .pod-ring { width: 72px; height: 72px; background: #E8B48A; }

.pod-face {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 3px solid #241022;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FFD27A, #FF9BC9);
    color: #1A0B19;
    font-weight: 800;
    font-size: 26px;
}

.pod-1 .pod-face { font-size: 32px; }

.pod-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pod-crown {
    position: absolute;
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
    filter: drop-shadow(0 2px 6px rgb(255 210 122 / 45%));
}

.pod-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    font-size: 16px;
}

.pod-category {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: #B89AAF;
}

.pod-step {
    width: 100%;
    margin-top: 4px;
    border-radius: 14px 14px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    padding-top: 10px;
    box-sizing: border-box;
}

.pod-1 .pod-step { height: 136px; background: linear-gradient(180deg, #FFD27A, #FF9BC9); }
.pod-2 .pod-step { height: 96px; background: linear-gradient(180deg, #F1E3EC, #B48AA4); }
.pod-3 .pod-step { height: 72px; background: linear-gradient(180deg, #F2C9A6, #B07A55); }

.pod-rank {
    font-family: "Playfair Display", Georgia, serif;
    font-style: italic;
    font-weight: 700;
    font-size: 38px;
    line-height: 1;
    color: #1A0B19;
}

.pod-views {
    font-size: 12px;
    font-weight: 700;
    color: rgb(26 11 25 / 78%);
}

@media (max-width: 560px) {
    .trending-section {
        padding: 20px 12px 0;
    }

    .trending-head {
        margin-bottom: 28px;
    }

    .podium {
        gap: 8px;
    }

    .pod-1 .pod-ring { width: 78px; height: 78px; }
    .pod-2 .pod-ring { width: 62px; height: 62px; }
    .pod-3 .pod-ring { width: 58px; height: 58px; }
    .pod-face { font-size: 21px; }
    .pod-1 .pod-face { font-size: 26px; }

    .pod-crown {
        width: 32px;
        height: 24px;
        top: -21px;
    }

    .pod-name { font-size: 14px; }
    .pod-category { font-size: 11.5px; }
    .pod-1 .pod-step { height: 112px; }
    .pod-2 .pod-step { height: 80px; }
    .pod-3 .pod-step { height: 60px; }
    .pod-rank { font-size: 30px; }
    .pod-views { font-size: 11px; }
}

/* Sample thumbnails on service cards */
.tile-samples {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 6px 0 2px;
    text-decoration: none;
    border-radius: 10px;
}

.tile-samples:focus-visible {
    outline: 2px solid #FFD27A;
    outline-offset: 3px;
}

.tile-sample {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 10px;
    background: linear-gradient(150deg, #5A2A52, #2A0F27);
}

.tile-sample img,
.tile-sample video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tile-sample-count {
    white-space: nowrap;
}

/* The diagonal "SAMPLE" word over every sample (never blocks taps or video controls) */
.bk-sample-mark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: hidden;
}

.bk-sample-mark span {
    transform: rotate(-28deg);
    font: 800 11px/1 Arial, sans-serif;
    letter-spacing: 0.2em;
    color: rgb(255 255 255 / 62%);
    text-shadow: 0 1px 3px rgb(0 0 0 / 55%);
}

.bk-sample-mark-big span {
    font-size: clamp(30px, 7vw, 64px);
    letter-spacing: 0.25em;
    color: rgb(255 255 255 / 34%);
}

.sample-play {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgb(0 0 0 / 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Service page: clips in the big viewer and thumbnails */
.sp-viewer video {
    display: block;
    max-width: 100%;
    max-height: 560px;
}

.sp-thumb {
    position: relative;
}

.sp-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sp-loading {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    gap: 18px;
}

.sp-loading .sk-cards {
    grid-template-columns: minmax(0, 640px);
}

/* Browse: old cards fade while a new search or sort loads */
.service-grid.is-reloading {
    opacity: 0.55;
    transition: opacity 0.2s;
}

.fav-state:empty,
.sp-loading:empty {
    display: none;
}

.apply-loading .sk-wrap {
    margin-top: 6px;
}

/* ===== Orders: seller order button (js/seller-order-button.js) ===== */
.sob {
    text-align: left;
}

.sob-actions {
    display: contents;
}

.sob-row.notification-actions {
    align-items: center;
}

button.text-button.sob-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 0;
    padding: 0 18px;
    border-radius: 12px;
    box-shadow: none;
    font: 700 15px Outfit, Inter, Arial, sans-serif;
    text-align: center;
    text-decoration: none;
    line-height: 1.2;
}

button.text-button.sob-primary {
    border: 0;
    background: linear-gradient(90deg, #E0408F, #A64BD6);
    color: #FFFFFF;
}

button.text-button.sob-primary:hover {
    background: linear-gradient(90deg, #EC529B, #B45BE2);
    color: #FFFFFF;
}

button.text-button.sob-decline {
    border: 1px solid #5A3553;
    background: transparent;
    color: #CDB3C6;
    font-weight: 600;
    padding: 0 16px;
}

button.text-button.sob-decline:hover {
    border-color: #FF9BC9;
    color: #FFC2DF;
}

button.text-button.sob-locked,
button.text-button.sob-locked:hover {
    border: 1px dashed;
    cursor: not-allowed;
    font-weight: 600;
    opacity: 1;
    transform: none;
}

button.text-button.sob-locked-wait {
    border-color: #7A5A73;
    background: #2A1427;
    color: #D9C2D3;
}

button.text-button.sob-locked-done {
    border-color: #FFD27A;
    background: rgb(255 210 122 / 12%);
    color: #FFD27A;
}

button.text-button.sob-locked-no {
    border-color: #5A3553;
    background: #2A1427;
    color: #B89AAF;
}

/* "Open chat" next to the seller's button */
main .sob-row a.notification-chat {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid #FF9BC9;
    border-radius: 12px;
    background: transparent;
    color: #FFC2DF;
    font-size: 15px;
}

/* Bar above the message box on the Order page */
.sob-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-top: 1px solid #3B1B37;
    background: #1F0D1C;
}

.sob-hint {
    flex: 1 1 220px;
    color: #E9D6E4;
    font-size: 14px;
}

.sob-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Upload box ("Send work") */
.sob-upload {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
    padding: 14px;
    border: 1px solid #FF9BC9;
    border-radius: 14px;
    background: #2E1229;
}

.sob-layout-bar .sob-upload {
    margin: 0 14px 12px;
}

.sob-upload-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

button.text-button.sob-cancel {
    min-height: 32px;
    margin: 0;
    color: #CDB3C6;
    font-weight: 600;
    text-decoration: none;
}

.sob-drop {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 2px dashed #5A3553;
    border-radius: 12px;
    cursor: pointer;
}

.sob-drop:hover,
.sob-drop.is-over,
.sob-file-input:focus-visible + .sob-drop {
    border-color: #FF9BC9;
}

.sob-drop svg {
    flex-shrink: 0;
}

.sob-drop-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sob-file-names {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.sob-file-meta {
    color: #B89AAF;
    font-size: 13px;
}

.sob-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.sob-note-label {
    color: #CDB3C6;
    font-size: 13px;
}

input.sob-note {
    box-sizing: border-box;
    width: 100%;
    height: 42px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid #4A2142;
    border-radius: 10px;
    background: #1A0B19;
    color: #F6E9F1;
}

button.text-button.sob-send,
button.text-button.review-box-submit {
    align-self: flex-start;
    min-height: 44px;
    margin: 0;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(90deg, #FFD27A, #FF9BC9);
    color: #1A0B19;
    font-weight: 700;
    text-decoration: none;
}

button.text-button.sob-send:hover,
button.text-button.review-box-submit:hover {
    color: #1A0B19;
    filter: brightness(1.06);
}

.sob-status,
.sob-message {
    margin: 0;
    color: #FFC2DF;
    font-size: 14px;
}

.sob-message {
    margin-top: 8px;
}

.sob-layout-bar .sob-message {
    margin: 0;
    padding: 0 14px 10px;
    background: #1F0D1C;
}

.sob-status:empty,
.sob-message:empty {
    display: none;
}

.order-seller-button {
    margin: 12px 0;
}

/* Status word on the seller's notification card */
.nt-status {
    font-weight: 600;
}

.nt-status.tone-new { color: #FF9BC9; }
.nt-status.tone-accepted { color: #FFC2DF; }
.nt-status.tone-changes { color: #FFB65C; }
.nt-status.tone-delivered { color: #D9C2D3; }
.nt-status.tone-done { color: #FFD27A; }
.nt-status.tone-closed { color: #B89AAF; }

/* ===== Orders: chat update lines in My Orders ===== */
.order-event-line {
    width: fit-content;
    max-width: 90%;
    margin: 8px auto;
    padding: 6px 14px;
    border: 1px solid #4A2142;
    border-radius: 999px;
    background: #2E1229;
    color: #E9D6E4;
    font-size: 13px;
    text-align: center;
}

/* ===== Orders: "How was your fansign?" review box (js/review-box.js) ===== */
.review-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 14px 0 0;
    padding: 16px;
    border: 1px solid #4A2142;
    border-radius: 14px;
    background: #1A0B19;
    text-align: left;
}

.review-box-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.review-box-stars,
.review-box-stars-static {
    display: flex;
    gap: 4px;
}

button.text-button.review-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
}

button.text-button.review-star:hover {
    transform: scale(1.08);
}

button.text-button.review-star:focus-visible {
    outline: 2px solid #FFD27A;
    outline-offset: 2px;
}

.review-box-label,
.review-box-check {
    color: #CDB3C6;
    font-size: 13px;
}

.review-box-check {
    display: flex;
    align-items: center;
    gap: 8px;
}

.review-box-check input {
    width: auto;
    margin: 0;
}

textarea.review-box-comment-input {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #4A2142;
    border-radius: 10px;
    background: #241022;
    color: #F6E9F1;
    font: inherit;
}

.review-box-comment {
    margin: 0;
    color: #E9D6E4;
}

.review-box-status {
    margin: 0;
    color: #FFC2DF;
    font-size: 14px;
}

.review-box-status:empty {
    display: none;
}

.review-box.is-saved .review-box-title {
    color: #FFD27A;
}

.op-review .review-box {
    margin: 0 0 16px;
}

/* ===== Orders: Order page loading shapes ===== */
.op-loading .op-loading-chat {
    flex: 999 1 560px;
    min-height: 420px;
    padding: 20px;
}

.op-loading .op-loading-side {
    flex: 1 1 340px;
    padding: 20px;
}

@media (max-width: 600px) {
    .sob-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .sob-buttons,
    .sob-row.notification-actions {
        width: 100%;
    }

    .sob-buttons > *,
    .sob-buttons .sob-actions > * {
        flex: 1 1 auto;
    }

    .sob-layout-bar .sob-upload {
        margin: 0 10px 10px;
    }
}

/* ===== Shop: podium name fixes (room for Gold's star, no clipped glow) ===== */
.pod-name {
    display: block;
    padding: 0.4em 0.35em 0.1em;
    box-sizing: border-box;
}

.pod-name .styled-name:not([style*="background"]):not(.bk-name-gold):not(.bk-name-rainbow) {
    text-shadow: none;
}

/* ===== Shop: keep "SAMPLE" on one line; sample count under the thumbnails ===== */
.bk-sample-mark span {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    flex-shrink: 0;
}

.tile-samples-caption {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
}

/* ===== Orders: notification filters wrap on phones (they made the page scroll sideways) ===== */
.nt-filters.filter-chips {
    flex-wrap: wrap;
}

/* ===== Admin: hide empty status lines in the new sections ===== */
#money-message:empty,
#money-bonus-line:empty,
#fraud-flags-message:empty,
#accounts-message:empty,
#activity-log-message:empty,
#admin-trending-message:empty {
    display: none;
}

/* ===== Account: fixes for the email switches and Top Up shimmer ===== */
.account-form label.email-switch,
.account-form label.email-switch .email-switch-text,
.account-form label.email-switch .email-switch-text span {
    text-transform: none;
    letter-spacing: normal;
}

.account-form label.email-switch .email-switch-text span {
    font-weight: normal;
}

.buy-methods > .sk-wrap {
    grid-column: 1 / -1;
}

.buy-methods > .sk-wrap .sk-row {
    min-height: 44px;
}

.signed-in-panel .account-form label.email-switch {
    color: var(--text);
    font-size: 15px;
}

.signed-in-panel .account-form label.email-switch .email-switch-text span {
    font-size: 13.5px;
}

/* ===== Orders: fixes for the seller bar on phones and the Open chat icon gap ===== */
main .sob-row a.notification-chat {
    gap: 6px;
}

@media (max-width: 600px) {
    .sob-bar .sob-hint {
        flex: 0 0 auto;
    }
}