body[data-chatroom-status="private"][data-chatroom-level="voyeur"] .cam .stage {
  padding: 0;
}


@media (max-width: 568px) {
  .top-tage-sec {
    display: block;
    margin-bottom: 0;
  }
  .tag-item-col {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .tag-item-col a {
    font-size: 16px;
  }
  .item-col.-webcam-item {
    flex: 1 0 50%;
  }
  .top-tags-col > .inner-col {
    margin-bottom: 0;
  }
}
@media (max-width: 414px) {
  .item-col .info .name {
    max-width: calc(100% - 70px);
  }
}

[data-item="audio-disabled"] {
  left: auto;
  right: 0px;
  transform: translateX(-4%);
}
body {
  margin: 0;
  background: #ffffff;
  font-family: "Inter", sans-serif;
  padding-bottom: 120px;
}
/* ===== ASIANSLIVE CUSTOM STYLES ===== */

/* ── Webcam grid card — all states ──── */

/* 1. Outer item-col: uniform gap */
.item-col.col.-webcam-item,
.item-col.col.-webcam-item.-public,
.item-col.col.-webcam-item.-private,
.item-col.col.-webcam-item.-true-private,
.item-col.col.-webcam-item.-group,
.item-col.col.-webcam-item.-processed,
.item-col.col.-webcam-item.-offline {
  padding: 0 4px !important;
  margin-bottom: 10px !important;
  box-sizing: border-box !important;
  position: relative;
}

/* 2. Inner wrapper reset (item-inner-col / inner-col / tranny_model) */
.item-col.-webcam-item .item-inner-col,
.item-col.-webcam-item .inner-col,
.item-col.-webcam-item .tranny_model {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  height: auto !important;
}

 
.item-col.-webcam-item .model-card:hover {
  text-decoration: none !important;
  color: inherit !important;
}

/* 4. model-image */
/* .item-col.-webcam-item .model-card .model-image {
  position: relative !important;
  display: block !important;
  aspect-ratio: 3/2.4 !important;
  overflow: hidden !important;
  outline: none !important;
  border: none !important;
  border-radius: 0 !important;
  background: #131313 !important;
  height: auto !important;
  padding: 0 !important;
}
.item-col.-webcam-item .model-card .model-image > img {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transform: none !important;
} */

/* 5. webcam-preview span (only on -public desktop) — must overlay image */
.item-col.-webcam-item .model-card .model-image .webcam-preview {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  display: block !important;
}
 
.item-col.-webcam-item .model-card .badge-view {
  left: 8px !important;
}
.item-col.-webcam-item .model-card .badge-rating {
  left: 58px !important;
}
.item-col.-webcam-item .model-card .badge-online {
  right: 8px !important;
  left: auto !important;
}

/* 7. Overlay (private/group) */
.item-col.-webcam-item .model-card .overlay {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(10, 10, 10, 0.64) !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  z-index: 3 !important;
}
.item-col.-webcam-item.-private .model-card .overlay,
.item-col.-webcam-item.-true-private .model-card .overlay,
.item-col.-webcam-item.-group .model-card .overlay {
  display: flex !important;
}
.item-col.-webcam-item .model-card .overlay .label {
  background: #0a0a0a !important;
  color: #fff !important;
  padding: 0 20px !important;
  height: 33px !important;
  line-height: 33px !important;
  font-size: 13px !important;
  border-radius: 3px !important;
  text-transform: uppercase !important;
}

/* 8. Info row below image */
.item-col.-webcam-item .model-card .model-info {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 6px 8px !important;
  gap: 4px !important;
  background: #fff !important;
}
.item-col.-webcam-item .model-card .profile-info {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  flex: 1 !important;
}
.item-col.-webcam-item .model-card .profile-info img {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25) !important;
}
.item-col.-webcam-item .model-card .profile-info h4 {
  font-size: 12px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  color: #111827 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.3 !important;
}


/* ── Global helpers (unscoped, low-specificity defaults) ─────────── */
.model-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.model-card:hover {
  text-decoration: none;
  color: inherit;
}
.model-image {
  position: relative;
  aspect-ratio: 3/2.4;
  overflow: hidden;
  display: block;
  background: #f4f4f4;
}
.model-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.model-image .webcam-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.badge-view,
.badge-rating,
.badge-online {
  position: absolute;
  top: 8px;
  z-index: 2;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 9px;
  padding: 3px 7px;
  border-radius: 20px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3px;
}
.badge-view {
  left: 8px;
}
.badge-rating {
  left: 58px;
}
.badge-online {
  right: 8px;
}
.dot {
  width: 7px;
  height: 7px;
  background: #2ecc71;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.dot.-offline {
  background: #aaa;
}
.model-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  gap: 4px;
  background: #fff;
}
.profile-info {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.profile-info img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
}
.profile-info h4 {
  font-size: 12px;
  font-weight: 600;
  margin: 0;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flag {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

/* categories slider */
.categories-section {
  padding: 10px 0;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
}
.categories-slider {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 5px 15px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.categories-slider::-webkit-scrollbar {
  display: none;
}
.category-item {
  flex: 0 0 auto;
  text-align: center;
  text-decoration: none;
  color: #444;
  min-width: 76px;
  transition: 0.25s;
}
.category-item img {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid #ffc000;
  padding: 3px;
  background: linear-gradient(135deg, #fff 0%, #f5f5f5 45%, #e9e9e9 100%);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.12);
  display: block;
  margin: 0 auto;
  transition:
    border-color 0.25s,
    box-shadow 0.25s;
}
.category-item span {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  color: #444;
  transition:
    color 0.25s,
    font-weight 0.1s;
}
.category-item:hover {
  text-decoration: none;
}

/* Active — single blue ring only */
.category-item.active img {
  border: 3px solid #0088ff !important;
  box-shadow: 0 0 0 3px rgba(0, 136, 255, 0.25) !important;
}
.category-item.active span {
  color: #0088ff !important;
  font-weight: 700 !important;
}

/* header */
header.header {
  position: sticky;
  top: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: #fff;
  padding: 0;
  z-index: 9999;
  box-sizing: border-box;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
header.header .header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  width: 100%;
  box-shadow:
    0 0 8px rgba(0, 0, 0, 0.2),
    inset 0 0 8px rgba(255, 255, 255, 0.7);
}
header.header .logo-col {
  display: flex;
  align-items: center;
}
header.header img.logo {
  max-width: 145px;
  display: block;
}
header.header .header-right {
  display: flex;
  align-items: center;
  gap: 4px;
}
.header-right .join-btn {
  border: none;
  background: #ffc400;
  color: #000;
  padding: 8px 16px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  background: linear-gradient(180deg, #ffd84d 0%, #ffc400 45%, #f0b400 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 4px 12px rgba(255, 196, 0, 0.35);
  white-space: nowrap;
  cursor: pointer;
  transition: 0.3s;
}
header.header .search-btn {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff 0%, #f5f5f5 45%, #e9e9e9 100%);
  box-shadow:
    0 0 8px rgba(0, 0, 0, 0.2),
    inset 0 0 8px rgba(255, 255, 255, 0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #333;
}

.main-header {
  background: linear-gradient(135deg, #fff 0%, #f5f5f5 45%, #e9e9e9 100%);
  box-shadow:
    0 0 8px rgba(0, 0, 0, 0.2),
    inset 0 0 8px rgba(255, 255, 255, 0.7);
}

.main-header .wrapper {
  width: 100%;
}
#main-search-col .search-box {
  padding: 8px 15px;
}
#main-search-col .search-box input[type="text"] {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 8px 15px;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}
.user-box {
  display: flex;
  align-items: center;
  gap: 15px;
}

.user-box .btn .label {
  font-size: 15px;
  text-align: right;
}

.user-box .btn .label .sub-label {
  display: block;
  color: #000;
  text-transform: capitalize;
  font-weight: 500;
}
.user-box .btn .label .desc {
  color: #1873cf;
  font-weight: 600;
}
.search-col {
  flex: 1 1;
  max-width: 470px;
  margin-left: auto;
  display: flex;
  align-items: center;
}
.search-box {
  flex: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.heading-cols {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
}
.heading-cols h1 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: #222;
}

.title-col .title-counter {
  background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 45%, #e9e9e9 100%);
  box-shadow:
    0 0 8px rgba(0, 0, 0, 0.2),
    inset 0 0px 8px rgba(255, 255, 255, 0.7);
  padding: 6px 12px;
  border-radius: 30px;
  font-size: 12px;
  color: #222;
}

.title-col .title-counter [data-count] {
  display: inline-block;
  margin-right: 0.25em;
  font-weight: 600;
}

.title-col .title-counter [data-count]:empty {
  margin: 0;
}

/* bottom nav */
.bottom-nav {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50px;
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  z-index: 999;
}
.bottom-nav .nav-item {
  width: 70px;
  height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 50%;
  color: #111;
  font-size: 11px;
  font-weight: 500;
  gap: 0;
}
.nav-item img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}
.nav-item.active {
  background: linear-gradient(180deg, #ffd84d 0%, #ffc400 45%, #f0b400 100%);
}
.bottom-nav .token-btn {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(180deg, #1e88f5 0%, #1976d2 55%, #1565c0 100%);
  border: 2px solid #fff;
  margin-top: -55px;
  box-shadow:
    0 8px 20px rgba(21, 101, 192, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.15);
  color: #fff;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  gap: 4px;
}
.token-btn img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  margin-bottom: 0;
}
.bottom-nav .token-btn i {
  font-size: 22px;
}

.access-sec {
  min-height: 100vh;
  background: linear-gradient(180deg, #e8a000 0%, #d9a15d 100%);
  display: flex;
  align-items: center;
  padding: 40px 15px;
}

.access-col > .inner-col {
  display: block;
  padding: 30px 20px;
  background: #ede3d2;
  border: 2px solid #fff;
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

@media (min-width: 768px) {
  .access-col > .inner-col {
    padding: 40px 45px;
  }
}

.access-sec .logo-col,
.access-sec .access-inner-col .logo {
  text-align: center;
  margin-bottom: 16px;
}

.access-sec .logo-col img,
.access-sec .access-inner-col .logo img {
  max-width: 220px;
  width: 100%;
}
 
.item-col.-webcam-item.-tap-preview .model-card .model-image::after {
  content: "Tap again to enter";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11px;
  text-align: center;
  padding: 6px 0;
}

/* New side navbar discover page */
.main-col.content {
  display: flex;
  gap: 15px;
}
.main-col.content .side-navbar {
  flex: 0 0 200px;
  height: 78vh;
  position: sticky;
  top: 163px;
  overflow-y: scroll;
  overscroll-behavior: none;
  padding-top: 0;
  transition: scrollbar-color 1ms ease-in-out 1.5s;
  scrollbar-color: #272727 transparent;
  scrollbar-gutter: auto;
  scrollbar-width: thin;
}
.main-col.content .side-navbar .tag-item-col {
  margin-top: 0;
  margin-bottom: 4px;
}
.main-col.content .main-content {
  flex: auto;
}

/* ===== WEBCAM PAGE — FULL-SCREEN DESIGN ===== */
body:has([data-container="webcam-section"]) header.header {
  display: none !important;
}
body:has([data-container="webcam-section"]) .bottom-nav {
  display: none !important;
}
body:has([data-container="webcam-section"]) {
  padding-bottom: 0 !important;
}
body:has([data-container="webcam-section"]) .page-wrap {
  overflow: hidden !important;
}
[data-container="webcam-section"] .wrapper {
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}
[data-container="webcam-section"] .row {
  margin: 0 !important;
}
[data-container="webcam-section"] .main-col {
  padding: 0 !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}
[data-container="webcam-section"] .chat-col {
  min-height: 100vh !important;
}
[data-container="webcam-section"] .cam-box {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  flex: none !important;
  overflow: hidden !important;
  z-index: 1 !important;
}
[data-container="webcam-section"] .cam {
  height: 100% !important;
  display: block !important;
}
/* [data-container="webcam-section"] .cam .stage {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 0 !important;
  height: auto !important;
} */
/* [data-container="webcam-section"] .cam .stage .model-video,
[data-container="webcam-section"] .cam .stage .model-background {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top !important;
} */
[data-container="webcam-section"] .cam .stage .spinner {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 5 !important;
}
[data-container="webcam-section"] .access-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
}
[data-container="webcam-section"] .webcam-app-wrapper.member-local-stream {
  position: fixed !important;
  top: 65px !important;
  right: 10px !important;
  width: 110px !important;
  height: 140px !important;
  z-index: 22 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
}
[data-container="webcam-section"]
  .webcam-app-wrapper.member-local-stream
  video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
[data-container="webcam-section"] .webcam-header.fullscreen-visible {
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 20 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  pointer-events: none !important;
}
[data-container="webcam-section"] .webcam-header.fullscreen-visible * {
  pointer-events: auto !important;
}
[data-container="webcam-section"] .webcam-header.fullscreen-visible .home {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: block !important;
  background: transparent !important;
  pointer-events: none !important;
}
[data-container="webcam-section"] .webcam-header.fullscreen-visible .home * {
  pointer-events: auto !important;
}
[data-container="webcam-section"]
  .webcam-header
  .home
  a[data-trigger="toggle-fullscreen"] {
  position: absolute !important;
  top: 15px !important;
  left: 15px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 18px !important;
  text-decoration: none !important;
}
[data-container="webcam-section"]
  .webcam-header
  .home
  a[data-trigger="toggle-fullscreen"]
  span {
  display: none !important;
}
[data-container="webcam-section"]
  .webcam-header
  .home
  a[data-trigger="toggle-fullscreen"]
  i {
  display: none !important;
}
[data-container="webcam-section"]
  .webcam-header
  .home
  a[data-trigger="toggle-fullscreen"]::after {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  content: "\f053" !important;
  font-size: 16px !important;
  color: #fff !important;
}
[data-container="webcam-section"] .webcam-header .home .btn-tokens {
  position: absolute !important;
  top: 15px !important;
  right: 10px !important;
  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 50% !important;
  background: rgba(255, 196, 0, 0.85) !important;
  color: #111 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  font-size: 16px !important;
}
[data-container="webcam-section"] .webcam-header .home .btn-tokens .btn-label {
  display: none !important;
}
[data-container="webcam-section"] .viewport-actions.visible:not(.-right) {
  position: fixed !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  right: auto !important;
  z-index: 18 !important;
  background: rgba(35, 35, 35, 0.78) !important;
  border-radius: 40px !important;
  padding: 10px 0 !important;
  width: 54px !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
[data-container="webcam-section"] .viewport-actions.visible:not(.-right) ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}
[data-container="webcam-section"] .viewport-actions.visible:not(.-right) li {
  display: flex !important;
  width: 54px !important;
  min-height: 44px !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}
[data-container="webcam-section"] .viewport-actions.visible:not(.-right) li a {
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 20px !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
}
[data-container="webcam-section"]
  .viewport-actions.visible:not(.-right)
  li
  a
  i {
  font-size: 20px !important;
  color: rgba(255, 255, 255, 0.88) !important;
  pointer-events: none !important;
}
[data-container="webcam-section"]
  .viewport-actions.visible:not(.-right)
  li
  a
  i.active {
  color: #ffc400 !important;
}
[data-container="webcam-section"] .viewport-actions.-right.-top {
  display: none !important;
}
[data-container="webcam-section"] .webcam-header .model-name {
  width: 92%;
  position: absolute;
  left: 15px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 6px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 10;
}
[data-container="webcam-section"] .webcam-header .model-name .avatar {
  display: flex !important;
  flex-shrink: 0 !important;
}
[data-container="webcam-section"] .webcam-header .model-name .avatar img {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid #fff !important;
}
[data-container="webcam-section"] .webcam-header .model-name .sub-label {
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  display: block !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
[data-container="webcam-section"] .webcam-header .model-name .sub-label::after {
  content: "Online Now" !important;
  display: block !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.85) !important;
}
[data-container="webcam-section"].-offline
  .webcam-header
  .model-name
  .sub-label::after {
  content: "Offline" !important;
  color: rgba(255, 120, 120, 0.9) !important;
}
[data-container="webcam-section"] .user-tabs-outer {
  display: none !important;
}
[data-container="webcam-section"] .acm-sidebar {
  position: fixed !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  left: auto !important;
  bottom: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  background: rgba(35, 35, 35, 0.78) !important;
  border-radius: 40px !important;
  padding: 10px 0 !important;
  z-index: 18 !important;
  width: 54px !important;
  border-top: none !important;
}
[data-container="webcam-section"] .acm-sidebar .cam-action {
  display: flex;
  flex: auto;
  flex-direction: column;
  align-items: center;
  width: 54px;
}
[data-container="webcam-section"]
  .acm-sidebar
  .cam-action
  .btn:not(.btn-reviews-add) {
  width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}
[data-container="webcam-section"]
  .acm-sidebar
  .cam-action
  .btn:not(.btn-reviews-add)
  .btn-label {
  font-size: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
[data-container="webcam-section"]
  .acm-sidebar
  .cam-action
  .btn:not(.btn-reviews-add)
  .btn-label
  i {
  font-size: 22px !important;
  color: rgba(255, 255, 255, 0.88) !important;
  display: block !important;
}
[data-container="webcam-section"]
  .acm-sidebar
  .cam-action
  .btn:not(.btn-reviews-add)
  i {
  font-size: 22px !important;
  color: rgba(255, 255, 255, 0.88) !important;
  display: block !important;
  pointer-events: none !important;
  margin: 0;
}
[data-container="webcam-section"] .acm-sidebar .cam-action .btn-yellow i {
  color: #ffc400 !important;
}
[data-container="webcam-section"] .acm-sidebar .cam-action .btn-blue i {
  color: #64b5f6 !important;
}
[data-container="webcam-section"] .acm-sidebar .cam-action .btn-red i {
  color: #ef5350 !important;
}
[data-container="webcam-section"] .chat-box {
  display: none !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 15 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  flex: none !important;
  background: transparent !important;
  border-left: none !important;
}
[data-container="webcam-section"] .chat-info {
  display: none !important;
}
[data-container="webcam-section"] .chat-trigger a {
  background: rgba(0, 0, 0, 0.5) !important;
  color: rgba(255, 255, 255, 0.8) !important;
}
[data-container="webcam-section"] .chat {
  background: rgba(0, 0, 0, 0.75) !important;
  max-height: 35vh !important;
}
[data-container="webcam-section"] .chat-messages {
  background: transparent !important;
}
[data-container="webcam-section"] .scrollbar-content {
  padding: 5px 10px !important;
}

[data-container="webcam-section"] .msg-box .user {
  color: #ffc400 !important;
  text-transform: capitalize;
}
[data-container="webcam-section"] .msg-box .message {
  color:#222;
}
[data-container="webcam-section"] .msg-box.-model .user {
  color: #0089ff !important;
}
[data-container="webcam-section"] .msg-box .tip {
  color: #2ecc71 !important;
}
[data-container="webcam-section"] .chat-form {
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 8px !important;
}
[data-container="webcam-section"] .chat-form .input-box input[type="text"] {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}


/* ===== MOBILE WEBCAM (webcam.mobile.php) — FULL-SCREEN DESIGN ===== */
/* Section wrapper — override flex-column layout */
/* Full-screen video stack */
.webcam-box .model-video {
  width: 100%;
  height: calc(100vh - 10px);
}
[data-container="webcam-section"] .model-background {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  object-position: top;
  position: absolute;
  z-index: -1;
  object-fit: cover;
  filter: blur(50px);
}
/* Mobile .home = top-right row of icon buttons (audio, tokens, home) */
[data-container="webcam-section"]
  .webcam-header:not(.fullscreen-visible)
  .home {
  position: absolute !important;
  top: 15px !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  pointer-events: auto !important;
  background: transparent !important;
}
[data-container="webcam-section"] .webcam-header .home .-tokens,
[data-container="webcam-section"] .webcam-header .home .-audio,
[data-container="webcam-section"] .webcam-header .home .-home {
  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
  font-size: 18px !important;
  text-decoration: none !important;
  padding: 0 !important;
}
[data-container="webcam-section"] .webcam-header .home .-tokens {
  background: rgba(255, 196, 0, 0.85) !important;
  color: #111 !important;
  border: none !important;
}
/* Left controls pill (heart, envelope, camera, film) — override chatting hide */
body [data-container="webcam-section"] .webcam-controls.visible:not(.-right) {
  position: fixed !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 18 !important;
  background: rgba(35, 35, 35, 0.78) !important;
  border-radius: 40px !important;
  padding: 10px 0 !important;
  width: 54px !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
[data-container="webcam-section"] .webcam-controls.visible:not(.-right) a {
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 20px !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
}
[data-container="webcam-section"] .webcam-controls.visible:not(.-right) a i {
  font-size: 20px !important;
  color: rgba(255, 255, 255, 0.88) !important;
  pointer-events: none !important;
}
/* Right cam controls — hide (cam2cam, mic, flip go in right pill if enabled) */
[data-container="webcam-section"] .webcam-controls.-right {
  display: none !important;
}
/* Cam actions — right-side vertical pill (mobile uses .webcam-footer.cam-actions) */
[data-container="webcam-section"] .webcam-footer.cam-actions {
  position: fixed !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  left: auto !important;
  bottom: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  background: rgba(35, 35, 35, 0.78) !important;
  border-radius: 40px !important;
  padding: 10px 0 !important;
  z-index: 18 !important;
  width: 54px !important;
  border-top: none !important;
}
[data-container="webcam-section"] .webcam-footer.cam-actions .cam-action {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 54px !important;
}
[data-container="webcam-section"] .webcam-footer.cam-actions .cam-action .btn {
  width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}
[data-container="webcam-section"]
  .webcam-footer.cam-actions
  .cam-action
  .btn
  .btn-label {
  font-size: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
[data-container="webcam-section"]
  .webcam-footer.cam-actions
  .cam-action
  .btn
  .btn-label
  i {
  font-size: 22px !important;
  color: rgba(255, 255, 255, 0.88) !important;
  display: block !important;
}
[data-container="webcam-section"]
  .webcam-footer.cam-actions
  .cam-action
  .btn
  i {
  font-size: 22px !important;
  color: rgba(255, 255, 255, 0.88) !important;
  display: block !important;
  pointer-events: none !important;
}
[data-container="webcam-section"]
  .webcam-footer.cam-actions
  .cam-action
  .btn-yellow
  i {
  color: #ffc400 !important;
}
[data-container="webcam-section"]
  .webcam-footer.cam-actions
  .cam-action
  .btn-red
  i {
  color: #ef5350 !important;
}
[data-container="webcam-section"]
  .webcam-footer.cam-actions
  .cam-action
  .btn-blue
  i {
  color: #64b5f6 !important;
}
/* Webcam-middle — fixed at bottom, wraps chat */
[data-container="webcam-section"] .webcam-middle {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  z-index: 15 !important;
  background: transparent !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Hide left tab sidebar, flatten chat layout */
[data-container="webcam-section"] .chat-tabs {
  display: block !important;
  background: transparent !important;
}
[data-container="webcam-section"] .chat-tabs .nav {
  display: none !important;
}
[data-container="webcam-section"] .chat-tabs .chat-webcam-area {
  padding-top: 0 !important;
  flex: none !important;
}
[data-container="webcam-section"] .main-chat {
	background-color: rgba(255, 255, 255, 1);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}
[data-container="webcam-section"] .main-chat .scrollbar-inner {
  background: transparent !important;
}
/* Override .chat-box .chat-form{position:absolute;top:0;left:51px} from inline style */
[data-container="webcam-section"] .chat-box .chat-form {
  position: relative !important;
  top: auto !important;
  left: 0 !important;
  right: auto !important;
  height: auto !important;
}
[data-container="webcam-section"] .chat-form-wrapper {
  height: auto !important;
}
[data-container="webcam-section"] .chat-form-wrapper input[type="text"] {
  height: 44px !important;
  line-height: 44px !important;
  padding-right: 5px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #000000 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Fix em.-tk price text visible (inline CSS .cam-action .btn .-tk{font-size:14px} beats inherited 0) */
[data-container="webcam-section"]
  .webcam-footer.cam-actions
  .cam-action
  .btn
  .-tk {
  font-size: 0 !important;
  line-height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  display: inline-block !important;
}

/* Inject FA icons via ::before for mobile buttons that lack <i> tags */
[data-container="webcam-section"]
  .webcam-footer.cam-actions
  .cam-action.-private
  [data-button="start-private"]::before {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  content: "\f023" !important;
  font-size: 22px !important;
  color: rgba(255, 255, 255, 0.88) !important;
  display: block !important;
}
[data-container="webcam-section"]
  .webcam-footer.cam-actions
  .cam-action.-private
  [data-button="stop-private"]::before {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  content: "\f2f5" !important;
  font-size: 22px !important;
  color: #ef5350 !important;
  display: block !important;
}
[data-container="webcam-section"]
  .webcam-footer.cam-actions
  .cam-action.-group:not(.-upgrade)
  [data-button="start-private"]::before {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  content: "\f0c0" !important;
  font-size: 22px !important;
  color: #ffc400 !important;
  display: block !important;
}
[data-container="webcam-section"]
  .webcam-footer.cam-actions
  .cam-action.-group:not(.-upgrade)
  [data-button="stop-private"]::before {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  content: "\f2f5" !important;
  font-size: 22px !important;
  color: #ef5350 !important;
  display: block !important;
}
[data-container="webcam-section"]
  .webcam-footer.cam-actions
  .cam-action.-group.-upgrade
  .btn::before {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  content: "\f521" !important;
  font-size: 22px !important;
  color: rgba(255, 255, 255, 0.88) !important;
  display: block !important;
}

/* Fix viewport-actions left pill height — ensure it never clips on short/narrow viewports */
[data-container="webcam-section"] .viewport-actions.visible:not(.-right) ul {
  height: auto !important;
  overflow: visible !important;
}
[data-container="webcam-section"] .viewport-actions.visible:not(.-right) {
  overflow: visible !important;
}

/* Mobile webcam: viewport-actions pill positioned on the RIGHT (matches former webcam-footer.cam-actions placement) */
.webcam-sec .viewport-actions.visible:not(.-right) {
  left: auto !important;
  right: 10px !important;
}

/* ============================================================
   Contact Us Page  (cu- = scoped prefix)
   ============================================================ */

/* Page wrapper */
.cu-page {
  background: #f4f4f8;
  padding-bottom: 100px; /* clear bottom nav */
}

/* Shared inner container */
.cu-inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ── Form section ─────────────────────────── */
.cu-form-sec {
  padding: 28px 0 0;
}

.cu-header {
  margin-bottom: 20px;
}

.cu-header h1 {
  font-size: 22px;
  font-weight: 700;
  color: #111;
  margin: 0 0 6px;
}

.cu-header p {
  font-size: 14px;
  color: #666;
  margin: 0;
  line-height: 1.55;
}

/* success banner */
.cu-success {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #ecfdf5;
  border: 1px solid #6ee7b7;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
}

.cu-success i {
  font-size: 22px;
  color: #10b981;
  flex-shrink: 0;
  margin-top: 1px;
}

.cu-success strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #065f46;
}

.cu-success span {
  font-size: 13px;
  color: #047857;
}

/* error banner */
.cu-error-banner {
  background: #fff0f0;
  border: 1px solid #fca5a5;
  color: #b91c1c;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  margin-bottom: 18px;
}

/* form */
.cu-form {
  background: #fff;
  border-radius: 14px;
  padding: 20px 18px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cu-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cu-field label {
  font-size: 13px;
  font-weight: 600;
  color: #333;
}

.cu-req {
  color: #e8a000;
}

.cu-field input,
.cu-field textarea {
  width: 100%;
  box-sizing: border-box;
  background: #f7f7f9;
  border: 1.5px solid #e2e2ea;
  border-radius: 8px;
  padding: 11px 13px;
  font-size: 14px;
  color: #111;
  font-family: inherit;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  resize: vertical;
}

.cu-field input:focus,
.cu-field textarea:focus {
  border-color: #f5a623;
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.13);
  background: #fff;
}

.cu-field--err input,
.cu-field--err textarea {
  border-color: #ef4444;
}

.cu-err-msg {
  font-size: 12px;
  color: #ef4444;
}

.cu-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: linear-gradient(135deg, #f5a623 0%, #e8a000 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 14px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition:
    opacity 0.2s,
    transform 0.15s;
  letter-spacing: 0.3px;
}

.cu-submit:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
.cu-submit:active {
  transform: translateY(0);
}

/* ── Support section ──────────────────────── */
.cu-support-sec {
  padding: 32px 0 0;
}

.cu-support-title {
  font-size: 16px;
  font-weight: 700;
  color: #444;
  margin: 0 0 14px;
  padding: 0 16px;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.cu-support-grid {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Quick Links card spans full width */
.cu-support-grid .cu-support-card:first-child {
  grid-column: 1 / -1;
}

.cu-support-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.cu-card-head {
  background: #1e1e2e;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.2px;
}

.cu-card-head i {
  font-size: 12px;
  color: #f5a623;
}

.cu-card-links {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.cu-card-links li {
  border-bottom: 1px solid #f0f0f5;
}

.cu-card-links li:last-child {
  border-bottom: none;
}

.cu-card-links li a,
.cu-card-links li .cu-address {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 14px;
  font-size: 13px;
  color: #333;
  text-decoration: none;
  transition: background 0.15s;
}

.cu-card-links li a:hover {
  background: #f7f7fb;
  color: #111;
}

.cu-card-links li a i,
.cu-card-links li .cu-address i {
  font-size: 11px;
  color: #f5a623;
  margin-top: 3px;
  flex-shrink: 0;
}

.cu-address {
  font-size: 13px;
  color: #555;
  line-height: 1.5;
}

/* Quick Links card: 2-col link list */
.cu-support-grid .cu-support-card:first-child .cu-card-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px 0;
}

.cu-support-grid .cu-support-card:first-child .cu-card-links li {
  border-bottom: none;
  border-right: 1px solid #f0f0f5;
}

.cu-support-grid .cu-support-card:first-child .cu-card-links li a {
  font-size: 13px;
  padding: 10px 14px;
}

/* contact-us section old classes — unused, kept for safety */
.contact-us-sec {
  padding: 60px 0 80px;
  background: #f7f7f9;
  min-height: calc(100vh - 120px);
}

.contact-us-wrap {
  display: flex;
  gap: 50px;
  align-items: flex-start;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- Left info panel --- */
.contact-us-info {
  flex: 0 0 300px;
  padding-top: 10px;
}

.contact-us-heading {
  font-size: 32px;
  font-weight: 700;
  color: #111;
  margin: 0 0 14px;
  line-height: 1.2;
}

.contact-us-sub {
  font-size: 15px;
  color: #555;
  line-height: 1.65;
  margin: 0 0 28px;
}

.contact-us-details {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-us-details li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #444;
}

.contact-us-details li i {
  width: 18px;
  color: #e8a000;
  font-size: 15px;
}

.contact-us-details li a {
  color: #444;
  text-decoration: none;
  transition: color 0.2s;
}

.contact-us-details li a:hover {
  color: #e8a000;
}

/* --- Right form panel --- */
.contact-us-form-wrap {
  flex: 1;
  background: #fff;
  border-radius: 14px;
  padding: 36px 40px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
}

/* success banner */
.contact-us-success {
  text-align: center;
  padding: 30px 20px 10px;
  margin-bottom: 24px;
}

.contact-us-success i {
  font-size: 48px;
  color: #2ecc71;
  margin-bottom: 12px;
  display: block;
}

.contact-us-success h3 {
  font-size: 22px;
  font-weight: 700;
  color: #111;
  margin: 0 0 8px;
}

.contact-us-success p {
  font-size: 14px;
  color: #555;
  margin: 0;
}

/* error alert */
.contact-us-alert {
  background: #fff0f0;
  border: 1px solid #f5c6c6;
  color: #c0392b;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  margin-bottom: 20px;
}

/* form layout */
.contact-us-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-field-row {
  display: flex;
  gap: 16px;
}

.contact-field-row .contact-field-group {
  flex: 1;
}

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

.contact-field-group label {
  font-size: 13px;
  font-weight: 600;
  color: #222;
}

.contact-field-group label span {
  color: #e8a000;
}

.contact-field-group input,
.contact-field-group textarea {
  width: 100%;
  box-sizing: border-box;
  background: #f7f7f9;
  border: 1.5px solid #e0e0e6;
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 14px;
  color: #111;
  font-family: inherit;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  outline: none;
  resize: vertical;
}

.contact-field-group input:focus,
.contact-field-group textarea:focus {
  border-color: #e8a000;
  box-shadow: 0 0 0 3px rgba(232, 160, 0, 0.12);
  background: #fff;
}

.contact-field-group.has-error input,
.contact-field-group.has-error textarea {
  border-color: #e74c3c;
}

.contact-field-error {
  font-size: 12px;
  color: #e74c3c;
  margin-top: 2px;
}

/* submit button */
.contact-us-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #f5a623 0%, #e8a000 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 13px 28px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition:
    opacity 0.2s,
    transform 0.15s;
  align-self: flex-start;
}

.contact-us-submit:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.contact-us-submit:active {
  transform: translateY(0);
}

/* responsive */
@media (max-width: 900px) {
  .contact-us-wrap {
    flex-direction: column;
    gap: 30px;
  }
  .contact-us-info {
    flex: none;
  }
}

@media (max-width: 568px) {
  .contact-us-sec {
    padding: 30px 0 60px;
  }
  .contact-us-form-wrap {
    padding: 24px 18px;
    border-radius: 10px;
  }
  .contact-field-row {
    flex-direction: column;
    gap: 20px;
  }
  .contact-us-heading {
    font-size: 24px;
  }
  .contact-us-submit {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   Edit Profile Page — exact reference design, scoped
   ============================================================ */

.edit-profile-page {
  padding: 10px;
  background: #fff;
  min-height: 100vh;
  font-family: "Inter", sans-serif;
  padding-bottom: 110px;
  padding-left: 325px;
}

/* page title row */
.edit-profile-page .page-title {
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 10px;
}

.edit-profile-page .page-title h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: #111;
  display: flex;
  flex: 0 0 100%;
  justify-content: center;
  transform: translateX(-36px);
}

.edit-profile-page .back-btn {
  color: #111;
  font-size: 22px;
  text-decoration: none;
  width: 36px;
  flex: 0 0 36px;
  text-align: center;
  z-index: 1;
}

.edit-profile-page .back-btn:hover {
  text-decoration: none;
  color: #333;
}

/* profile image circle */
.edit-profile-page .profile-image {
  width: 145px;
  height: 145px;
  margin: 0 auto 24px;
  position: relative;
  border: 3px solid #1a7bdb;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* no overflow:hidden — camera-btn must not be clipped */
}

/* initial letter avatar inside the circle */
.profile-initial-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e88f5 0%, #1565c0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  user-select: none;
}

/* camera button */
.edit-profile-page .camera-btn {
  position: absolute;
  right: 2px;
  bottom: 8px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(180deg, #1e88f5 0%, #1976d2 55%, #1565c0 100%);
  box-shadow:
    0 8px 20px rgba(21, 101, 192, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.15);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  z-index: 2;
}

/* form groups */
.edit-profile-page .form-group {
  margin-bottom: 18px;
}

.edit-profile-page .form-group label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #111;
}

.edit-profile-page .form-group > input[type="text"],
.edit-profile-page .form-group > input[type="email"] {
  width: 100%;
  height: 46px;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0 14px;
  font-size: 14px;
  font-family: "Inter", sans-serif;
  box-sizing: border-box;
  outline: none;
  background: #fff;
  color: #111;
}

.edit-profile-page .form-group > input[disabled] {
  background: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

.edit-profile-page .form-note {
  display: block;
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

/* select box wrapper */
.edit-profile-page .select-box {
  position: relative;
}

.edit-profile-page .select-box select,
.edit-profile-page .select-box input[type="text"] {
  width: 100%;
  height: 48px;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0 14px;
  font-size: 14px;
  font-family: "Inter", sans-serif;
  background: #fff;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  box-sizing: border-box;
  color: #111;
}

.edit-profile-page .select-box > i {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #111;
  font-size: 14px;
}

/* save button */
.edit-profile-page .save-btn {
  display: block;
  margin: auto;
  border: none;
  padding: 8px 48px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  background: linear-gradient(180deg, #ffd84d 0%, #ffc400 45%, #f0b400 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 4px 12px rgba(255, 196, 0, 0.35);
  white-space: nowrap;
  cursor: pointer;
  transition: 0.3s;
  color: #222;
}

.edit-profile-page .save-btn:hover {
  opacity: 0.9;
}

/* ===== Password Recovery Modal ===== */
.ajax-modal .modal-dialog {
  max-width: 420px;
  margin: 60px auto;
}

.ajax-modal .modal-content {
  border-radius: 10px;
  border: none;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  font-family: "Inter", sans-serif;
}

.ajax-modal .modal-header {
  background: linear-gradient(180deg, #e8a000 0%, #d49a50 100%);
  border-bottom: none;
  padding:15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ajax-modal .modal-header .modal-title {
  color: #222;
  font-size: 17px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  margin: 0;
}

.ajax-modal .modal-header .close {
  color: red;
  opacity: 0.85;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  margin: 0;
  text-shadow: none;
}

.ajax-modal .modal-header .close:hover {
  opacity: 1;
}

.ajax-modal .modal-body {
  padding: 26px 22px 18px;
  background: #fff;
}

.ajax-modal .modal-body [data-container="notifications"]:not(:empty) {
  margin-bottom: 14px;
  font-size: 13px;
}

.ajax-modal .modal-body .form-item.-full input[type="text"],
.ajax-modal .modal-body .form-item.-full input[type="email"],
.ajax-modal .modal-body .form-item.-full input[type="password"] {
  width: 100%;
  height: 36px;
  border: 1px solid #dce0e4;
  border-radius: 4px;
  background: #f5f5f5;
  font-size: 14px;
  font-family: "Inter", sans-serif;
  padding: 0 16px 0 30px;
  box-sizing: border-box;
  outline: none;
  color: #333;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.ajax-modal .modal-body .form-item.-full input[type="text"]:focus,
.ajax-modal .modal-body .form-item.-full input[type="email"]:focus,
.ajax-modal .modal-body .form-item.-full input[type="password"]:focus {
  border-color: #ffd400;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 212, 0, 0.18);
}

.ajax-modal .modal-footer {
  background: #fff;
  border-top: 1px solid #f0f0f2;
  padding: 14px 22px 22px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ajax-modal .modal-footer .form-item.-full {
  margin: 0;
  width: 100%;
}

.ajax-modal .modal-footer .btn {
	height: 40px;
	line-height: 40px;
	padding: 0 12px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	font-family: "Inter", sans-serif;
	flex: 1;
	min-width: 0;
	border: none;
	cursor: pointer;
	transition: opacity 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.ajax-modal .modal-footer .btn-blue {
  background: linear-gradient(180deg, #ffd84d 0%, #ffc400 45%, #f0b400 100%);
  color: #1a1a1a;
  box-shadow:
    0 4px 14px rgba(255, 196, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.ajax-modal .modal-footer .btn-blue:hover {
  opacity: 0.9;
}

/* ===== Profile Content All (PPV + Top5) Page ===== */

/* Page background — scoped via unique page IDs */
.content-sec:has(#content-grid),
.content-sec:has(#members-favorites),
.content-sec:has(#browse-grid) {
  background: #f4f6f9;
  min-height: 100vh;
}

.content-sec:has(#content-grid) .wrapper,
.content-sec:has(#members-favorites) .wrapper,
.content-sec:has(#browse-grid) .wrapper {
  padding-top: 10px;
  padding-bottom: 20px;
}

/* Section cards */
.dashboard-col:has(#content-grid) > .inner-col,
.dashboard-col:has(#content-top5-grid) > .inner-col,
.dashboard-col:has(#content-top5-tranny-grid) > .inner-col,
.dashboard-col:has(#members-favorites) > .inner-col,
.dashboard-col:has(#browse-grid) > .inner-col {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  padding: 10px;
  margin-bottom: 15px;
}

/* Section title row */
.dashboard-col:has(#content-grid) .title-col,
.dashboard-col:has(#content-top5-grid) .title-col,
.dashboard-col:has(#content-top5-tranny-grid) .title-col,
.dashboard-col:has(#members-favorites) .title-col,
.dashboard-col:has(#browse-grid) .title-col {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #f0f0f2;
  margin-bottom: 10px;
}

.dashboard-col:has(#content-grid) .title-col h1,
.dashboard-col:has(#content-top5-grid) .title-col h1,
.dashboard-col:has(#content-top5-tranny-grid) .title-col h1,
.dashboard-col:has(#members-favorites) .title-col h1,
.dashboard-col:has(#browse-grid) .title-col h1 {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  padding-left: 14px;
  position: relative;
  letter-spacing: -0.01em;
}

.dashboard-col:has(#content-grid) .title-col h1::before,
.dashboard-col:has(#content-top5-grid) .title-col h1::before,
.dashboard-col:has(#content-top5-tranny-grid) .title-col h1::before,
.dashboard-col:has(#members-favorites) .title-col h1::before,
.dashboard-col:has(#browse-grid) .title-col h1::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 18px;
  border-radius: 3px;
  background: linear-gradient(180deg, #ffd84d 0%, #f0b400 100%);
}

/* Title action buttons group */
.dashboard-col:has(#content-grid) .title-col .col.-half.-right {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* Bulk Remove button */
[data-button-type="bulk-delete"] {
  background: linear-gradient(
    180deg,
    #ffd84d 0%,
    #ffc400 45%,
    #f0b400 100%
  ) !important;
  color: #1a1a1a !important;
  border: none !important;
  border-radius: 30px !important;
  padding: 7px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: "Inter", sans-serif !important;
  height: auto !important;
  box-shadow:
    0 3px 10px rgba(255, 196, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Remove Selected button */
[data-button-type="bulk-delete-proceed"] {
  background: #e53935 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 30px !important;
  padding: 7px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: "Inter", sans-serif !important;
  height: auto !important;
  box-shadow: 0 3px 10px rgba(229, 57, 53, 0.25) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Cancel button */
[data-button-type="bulk-delete-cancel"] {
  background: transparent !important;
  color: #555 !important;
  border: 1.5px solid #d0d5dd !important;
  border-radius: 30px !important;
  padding: 7px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: "Inter", sans-serif !important;
  height: auto !important;
  box-shadow: none !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

[data-button-type="bulk-delete-cancel"]:hover {
  background: #f5f5f5 !important;
}

/* Content grid — 2 columns on all screen sizes */
/* #content-grid .item-col,
#content-top5-grid .item-col,
#content-top5-tranny-grid .item-col,
#members-favorites .item-col,
#browse-grid .item-col,
#content-purchased-grid .item-col,
#videos-grid .item-col {
  max-width: 50% !important;
  width: 50% !important;
  flex: 0 0 50% !important;
  padding: 0 6px;
  box-sizing: border-box;
  margin-bottom: 12px;
} */

#content-grid,
#content-top5-grid,
#content-top5-tranny-grid,
#members-favorites,
#browse-grid,
#content-purchased-grid,
#videos-grid {
  margin-left: -6px;
  margin-right: -6px;
  margin-top: 4px;
}

/* Videos page — filter row: 2 columns x 2 rows */
[data-form="search"] > .row {
  gap:5px;
}
[data-form="search"] > .row .form-item.col.-fourth {
  flex: 0 0 calc(16% - 0px);
  max-width: calc(16% - 0px);
  width: calc(16% - 0px);
  padding: 0;
  min-width: 0;
  box-sizing: border-box;
}
[data-form="search"] > .row .form-item.col.-fourth .btn-submit {
  width: 100%;
}

/* Browsing History show more */
#more-browse-button .inner-block {
  text-align: center;
  margin-top: 24px;
}

#more-browse-button .btn-blue {
  background: linear-gradient(180deg, #ffd84d 0%, #ffc400 45%, #f0b400 100%);
  color: #1a1a1a;
  border: none;
  border-radius: 30px;
  padding: 10px 36px;
  font-size: 14px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  box-shadow:
    0 4px 14px rgba(255, 196, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  display: inline-block;
}

#more-browse-button .btn-blue:hover {
  opacity: 0.9;
}

/* ===== Buy Tokens Modal — Billing Options ===== */

#modal--buy-tokens .modal-content {
  border-radius: 10px;
  border: none;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  font-family: "Inter", sans-serif;
}

#modal--buy-tokens .modal-header {
  background: linear-gradient(180deg, #e8a000 0%, #d49a50 100%);
  border-bottom: none;
  padding: 16px 20px;
}

#modal--buy-tokens .modal-header .modal-title {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  font-family: "Inter", sans-serif;
}

#modal--buy-tokens .modal-header .close {
  color: #fff;
  opacity: 0.85;
  text-shadow: none;
  font-size: 22px;
}

#modal--buy-tokens .modal-body {
  background: #f8f9fb;
  padding: 20px 16px;
}

#modal--buy-tokens .modal-footer {
  background: #fff;
  border-top: 1px solid #f0f0f2;
  padding: 12px 16px;
  display: flex;
  gap: 10px;
}

#modal--buy-tokens .modal-footer .btn {
  flex: 1;
  height: 44px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

#modal--buy-tokens .modal-footer .btn-red {
  background: #f3f4f6;
  color: #6b7280;
}

#modal--buy-tokens .modal-footer .btn-blue {
  background: linear-gradient(180deg, #ffd84d 0%, #ffc400 45%, #f0b400 100%);
  color: #1a1a1a;
  box-shadow: 0 3px 10px rgba(255, 196, 0, 0.3);
}

/* Billing options grid */
#modal--buy-tokens .-join-options {
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

#modal--buy-tokens .-join-options .-square {
  flex: none !important;
  min-width: 0 !important;
  width: 100% !important;
}

/* Each billing card */
#modal--buy-tokens .-join-options .-square .box {
  background: #fff !important;
  border: 1.5px solid #eef0f3 !important;
  border-radius: 14px !important;
  padding: 20px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  text-align: center !important;
  min-height: 120px !important;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.15s !important;
  position: relative !important;
}

#modal--buy-tokens .-join-options .-square a:hover .box {
  border-color: #ffc400 !important;
  box-shadow: 0 4px 16px rgba(255, 196, 0, 0.2) !important;
  transform: translateY(-2px) !important;
}

/* Logo image */
#modal--buy-tokens .-join-options .-square .box img {
  max-height: 40px !important;
  max-width: 100% !important;
  width: auto !important;
  object-fit: contain !important;
  background: transparent !important;
  padding: 0 !important;
  display: block !important;
}

/* Title text */
#modal--buy-tokens .-join-options .-square .box .title {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  font-family: "Inter", sans-serif !important;
  line-height: 1.3 !important;
  height: auto !important;
  display: block !important;
}

/* Info icon */
#modal--buy-tokens .-join-options .-square .box .-info {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  font-size: 13px !important;
  color: #d1d5db !important;
}

#modal--buy-tokens .-join-options .-square .box .-info:hover {
  color: #9ca3af !important;
}

/* Remove link underline */
#modal--buy-tokens .-join-options .-square a {
  text-decoration: none !important;
  display: block !important;
  width: 100% !important;
}

/* Favorites show more */
#more-favorites-button .inner-block {
  text-align: center;
  margin-top: 24px;
}

#more-favorites-button .btn-blue {
  background: linear-gradient(180deg, #ffd84d 0%, #ffc400 45%, #f0b400 100%);
  color: #1a1a1a;
  border: none;
  border-radius: 30px;
  padding: 10px 36px;
  font-size: 14px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  box-shadow:
    0 4px 14px rgba(255, 196, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  display: inline-block;
}

#more-favorites-button .btn-blue:hover {
  opacity: 0.9;
}

/* Show more button */
#more-content-button .inner-block {
  text-align: center;
  margin-top: 24px;
}

#more-content-button .btn-blue {
  background: linear-gradient(180deg, #ffd84d 0%, #ffc400 45%, #f0b400 100%);
  color: #1a1a1a;
  border: none;
  border-radius: 30px;
  padding: 10px 36px;
  font-size: 14px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  box-shadow:
    0 4px 14px rgba(255, 196, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  display: inline-block;
}

#more-content-button .btn-blue:hover {
  opacity: 0.9;
}

/* ===== Notifications Page ===== */

/* Page background */
.content-sec:has(#notifications-list) {
  background: #f4f6f9;
  min-height: 100vh;
  padding-top: 10px;
}

/* Section card */
.dashboard-col:has(#notifications-list) > .inner-col {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  padding: 0;
  margin-bottom: 15px;
  margin-top: 10px;
}

/* Title */
.dashboard-col:has(#notifications-list) .title-col {
  padding: 0 15px 15px;
  border-bottom: 1px solid #f0f0f2;
  margin-bottom: 0;
}

.dashboard-col:has(#notifications-list) .title-col h1 {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  padding-left: 14px;
  position: relative;
}

.dashboard-col:has(#notifications-list) .title-col h1::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 18px;
  border-radius: 3px;
  background: linear-gradient(180deg, #ffd84d 0%, #f0b400 100%);
}

/* Notification list container */
#notifications-list {
  flex-direction: column;
  display: flex;
}

/* Individual activity item */
#notifications-list .activity-item.-full {
  background: #fff !important;
  border-top: none !important;
  border-bottom: 1px solid #f3f4f6 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 0 !important;
  transition: background 0.15s;
}

#notifications-list .activity-item.-full:last-child {
  border-bottom: none !important;
}

#notifications-list .activity-item.-full:hover {
  background: #fafbfc !important;
}

/* Row link */
#notifications-list .activity-item .link {
  display: flex;
  align-items: center;
  padding: 15px;
  height: auto;
  min-height: 50px;
  line-height: 1.4;
  gap: 14px;
  position: relative;
}

/* Icon badge */
#notifications-list .activity-item .-icon {
	position: relative;
	right: auto;
	top: auto;
	transform: none;
	flex: 0 0 30px;
	width: 29px;
	height: 30px;
	border-radius: 4px;
	font-size: 15px;
	line-height: 30px;
	text-align: center;
	color: #fff;
	float: none;
	order: -1;
}

#notifications-list .activity-item .-icon.-success {
  background: #22c55e !important;
}

#notifications-list .activity-item .-icon.-failed {
  background: #ef4444 !important;
}

#notifications-list .activity-item .-icon.-avatar,
#notifications-list .activity-item .-icon.-membership {
  background: #8b5cf6 !important;
}

#notifications-list .activity-item .-icon.-tokens {
  background: linear-gradient(135deg, #ffd84d 0%, #f0b400 100%) !important;
  color: #1a1a1a !important;
}

#notifications-list .activity-item .-icon.-profile {
  background: #e0f2fe !important;
  color: #0369a1 !important;
}

#notifications-list .activity-item .-icon.-photo,
#notifications-list .activity-item .-icon.-video,
#notifications-list .activity-item .-icon.-gallery {
  background: #3b82f6 !important;
}

/* Text block */
#notifications-list .activity-item .text {
  color: #1a1a1a;
  font-size: 13px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  padding-right: 0;
  line-height: 1.4;
  flex: 1;
}

/* Timestamp */
#notifications-list .activity-item .time {
  font-size: 11px;
  color: #9ca3af;
  font-family: "Inter", sans-serif;
  display: block;
  margin-top: 3px;
  font-weight: 400;
}

/* Show more */
#more-notifications-button .inner-block {
  text-align: center;
  padding: 16px 0 8px;
}

#more-notifications-button .btn-blue {
  background: linear-gradient(180deg, #ffd84d 0%, #ffc400 45%, #f0b400 100%);
  color: #1a1a1a;
  border: none;
  border-radius: 30px;
  padding: 10px 36px;
  font-size: 14px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  box-shadow:
    0 4px 14px rgba(255, 196, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  display: inline-block;
}

#more-notifications-button .btn-blue:hover {
  opacity: 0.9;
}

/* ===== Chat Logs Page ===== */

/* Page background */
.content-sec:has(.chat-logs-filter) {
  background: #f4f6f9;
  min-height: 100vh;
}

.content-sec:has(.chat-logs-filter) .wrapper {
  padding-top: 10px;
  padding-bottom: 40px;
}

/* Section card */
.dashboard-col:has(.chat-logs-filter) > .inner-col {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  padding:10px;
  margin-bottom: 15px;
}

/* Title */
.dashboard-col:has(.chat-logs-filter) .title-col h1 {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  padding-left: 14px;
  position: relative;
}

.dashboard-col:has(.chat-logs-filter) .title-col h1::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 18px;
  border-radius: 3px;
  background: linear-gradient(180deg, #ffd84d 0%, #f0b400 100%);
}

/* ---- Date Filter ---- */
.chat-logs-filter.-dates {
  background: #f8f9fb;
  border: 1px solid #eef0f3;
  border-radius: 12px;
  padding: 2px 14px;
  margin-bottom: 20px;
}

.filter-inner {
	display: flex;
	gap: 10px;
	justify-content: space-between;
}

.chat-logs-filter.-dates .row {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.chat-logs-filter.-dates .cell {
  padding-left: 0 !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-logs-filter.-dates .label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  font-family: "Inter", sans-serif;
  margin-bottom: 0;
  white-space: nowrap;
}

.chat-logs-filter.-dates .options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Month dropdown */
.chat-logs-filter.-dates .month-dropdown-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.chat-logs-filter.-dates .month-select {
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 30px;
  padding: 6px 36px 6px 16px;
  font-size: 13px;
  font-weight: 500;
  font-family: "Inter", sans-serif;
  color: #1a1a1a;
  cursor: pointer;
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  min-width: 100px;
  line-height: normal;
}

.chat-logs-filter.-dates .month-select:focus {
  border-color: #ffc400;
  box-shadow: 0 0 0 3px rgba(255, 196, 0, 0.15);
}

.chat-logs-filter.-dates .month-dropdown-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 11px;
  color: #6b7280;
}

/* Gray (inactive) filter buttons */
.chat-logs-filter.-dates .btn-gray {
  background: #fff !important;
  color: #374151 !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 30px !important;
  padding: 5px 14px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-family: "Inter", sans-serif !important;
  height: auto !important;
  box-shadow: none !important;
  transition:
    border-color 0.15s,
    color 0.15s !important;
}

.chat-logs-filter.-dates .btn-gray:hover {
  border-color: #ffc400 !important;
  color: #111 !important;
}

/* Yellow (active) filter buttons */
.chat-logs-filter.-dates .btn-yellow {
  background: linear-gradient(
    180deg,
    #ffd84d 0%,
    #ffc400 45%,
    #f0b400 100%
  ) !important;
  color: #1a1a1a !important;
  border: none !important;
  border-radius: 30px !important;
  padding: 5px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: "Inter", sans-serif !important;
  height: auto !important;
  box-shadow: 0 2px 8px rgba(255, 196, 0, 0.3) !important;
}

/* ---- Log List Table ---- */
.earnings-table {
  overflow-x: auto;
  border-radius: 6px;
  border: 1px solid #eef0f3;
}

.earnings-table .table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: #374151;
  border-color: transparent !important;
  margin: 0;
}

.earnings-table .table thead tr {
  background: #f8f9fb;
  border-bottom: 1px solid #eef0f3;
}

.earnings-table .table thead th {
  padding: 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #222;
  border: none !important;
  white-space: nowrap;
}

.earnings-table .table tbody tr {
  border-bottom: 1px solid #f3f4f6;
  transition: background 0.12s;
}

.earnings-table .table tbody tr:last-child {
  border-bottom: none;
}

.earnings-table .table tbody tr:hover {
  background: #fafbfc;
}

.earnings-table .table tbody td {
  padding:4px;
  border: none !important;
  vertical-align: middle;
  color: #222;
}

.earnings-table .table tbody td a {
  color: #1e88f5;
  text-decoration: none;
  font-weight: 500;
}

.earnings-table .table tfoot td {
  padding: 12px 14px;
  border-top: 1px solid #eef0f3 !important;
  border-bottom: none !important;
}

/* Action buttons in table */
.earnings-table .btn-small {
  padding: 5px 10px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
  height: auto !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.earnings-table .btn-yellow {
  background: linear-gradient(
    180deg,
    #ffd84d 0%,
    #ffc400 45%,
    #f0b400 100%
  ) !important;
  color: #1a1a1a !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(255, 196, 0, 0.25) !important;
}

.earnings-table .btn-green {
  background: #22c55e !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.2) !important;
}

.earnings-table .btn-red {
  background: #ef4444 !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.2) !important;
}

.earnings-table .btn-default {
  background: #f3f4f6 !important;
  color: #374151 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: none !important;
}

/* ---- Chatroom Detail View ---- */

/* Force stacked card layout — override the broken 3-col flex */
.dashboard-col:has(.chat-logs-filter) .row:has(.chat-messages) {
  flex-direction: column !important;
  gap: 16px;
}

.dashboard-col:has(.chat-logs-filter) .row:has(.chat-messages) > .col {
  max-width: 100% !important;
  width: 100% !important;
  flex: 0 0 100% !important;
  padding: 0 !important;
}

/* Reorder: video → details → messages */
.dashboard-col:has(.chat-logs-filter)
  .row:has(.chat-messages)
  > .col:first-child {
  order: 2;
  background: #f8f9fb;
  border: 1px solid #eef0f3;
  border-radius: 12px;
  overflow: hidden;
}

.dashboard-col:has(.chat-logs-filter)
  .row:has(.chat-messages)
  > .col:has(video) {
  order: 1;
}

.dashboard-col:has(.chat-logs-filter)
  .row:has(.chat-messages)
  > .col:last-child {
  order: 3;
}

/* Details table */
.dashboard-col:has(.chat-logs-filter) .col > .table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  margin: 0;
}

.dashboard-col:has(.chat-logs-filter) .col > .table thead th {
  background: #fff;
  color: #1a1a1a;
  font-size: 13px;
  font-weight: 700;
  padding: 14px 16px;
  border-bottom: 1px solid #eef0f3 !important;
  border-color: #eef0f3 !important;
  letter-spacing: 0;
}

.dashboard-col:has(.chat-logs-filter) .col > .table tbody tr {
  border-bottom: 1px solid #f3f4f6;
}

.dashboard-col:has(.chat-logs-filter) .col > .table tbody tr:last-child {
  border-bottom: none;
}

.dashboard-col:has(.chat-logs-filter) .col > .table tbody td {
  padding: 11px 16px;
  color: #374151;
  font-size: 13px;
  border: none !important;
  vertical-align: middle;
}

.dashboard-col:has(.chat-logs-filter) .col > .table tbody td.-left:first-child {
  color: #6b7280;
  font-weight: 600;
  font-size: 12px;
  width: 38%;
  white-space: nowrap;
}

.dashboard-col:has(.chat-logs-filter) .col > .table tbody td a {
  color: #1e88f5;
  font-weight: 500;
  text-decoration: none;
}

/* Nested action button row inside the table */
.dashboard-col:has(.chat-logs-filter) .col > .table table {
  border: none !important;
  margin: 0 !important;
}

.dashboard-col:has(.chat-logs-filter) .col > .table table td {
  padding: 8px 4px 4px !important;
  border: none !important;
}

/* Detail action buttons */
.dashboard-col:has(.chat-logs-filter) .btn-small {
  padding: 7px 14px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
  height: auto !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 !important;
}

.dashboard-col:has(.chat-logs-filter) .-download.btn-small {
  background: transparent !important;
  color: #1e88f5 !important;
  border: none !important;
  box-shadow: none !important;
  padding: 7px 0 !important;
}

.dashboard-col:has(.chat-logs-filter) .-save.btn-small {
  background: #22c55e !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.25) !important;
}

.dashboard-col:has(.chat-logs-filter) .-delete.btn-small {
  background: #ef4444 !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.2) !important;
}

/* Video card */
.dashboard-col:has(.chat-logs-filter)
  .row:has(.chat-messages)
  .col:has(video)
  .chat-messages.-dark {
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

.dashboard-col:has(.chat-logs-filter)
  .row:has(.chat-messages)
  .col:has(video)
  video {
  width: 100% !important;
  display: block;
  border-radius: 12px;
}

/* Chat messages card */
.dashboard-col:has(.chat-logs-filter)
  .row:has(.chat-messages)
  .col:last-child
  .chat-messages.-dark {
  border-radius: 12px;
  max-height: 360px;
}

/* ---- Chat Messages Box ---- */
.chat-messages.-dark {
  background: #1e2433;
  border-radius: 12px;
  padding: 14px;
  min-height: 180px;
  max-height: 480px;
  overflow-y: auto;
  font-family: "Inter", sans-serif;
}

.chat-messages.-dark .msg-box {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 5px 0;
  font-size: 13px;
  line-height: 1.5;
}

.chat-messages.-dark .user {
  font-weight: 700;
  color: #93c5fd;
  white-space: nowrap;
  flex-shrink: 0;
}

.chat-messages.-dark .user.-model {
  color: #fbbf24;
}

.chat-messages.-dark .user.-admin,
.chat-messages.-dark .user.-staff {
  color: #f87171;
}

.chat-messages.-dark .message {
  color: #e2e8f0;
  word-break: break-word;
}

.chat-messages.-dark .message .time {
  font-size: 10px;
  color: #64748b;
  margin-left: 6px;
}

/* Tip message */
.chat-messages.-dark .tip {
  background: rgba(255, 196, 0, 0.12);
  border-left: 3px solid #ffc400;
  border-radius: 6px;
  padding: 5px 10px;
  width: 100%;
  font-size: 12px;
  color: #fcd34d;
  font-weight: 600;
}

.chat-messages.-dark .tip .user {
  color: #fcd34d;
}

/* ===== Change Password Page ===== */

/* Page background */
.content-sec:has([data-current-form="change-password"]) {
  background: #f4f6f9;
  min-height: 100vh;
}

.content-sec:has([data-current-form="change-password"]) .wrapper {
  padding-top: 20px;
  padding-bottom: 40px;
}

/* Section card */
.dashboard-col:has([data-current-form="change-password"]) > .inner-col {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  padding: 24px 20px 28px;
  width: 600px;
  max-width: 100%;
  margin: 0 auto;
}

/* Title */
.dashboard-col:has([data-current-form="change-password"]) .title-col {
  padding-bottom: 18px;
  border-bottom: 1px solid #f0f0f2;
  margin-bottom: 22px;
}

.dashboard-col:has([data-current-form="change-password"]) .title-col h1 {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  padding-left: 14px;
  position: relative;
}

.dashboard-col:has([data-current-form="change-password"])
  .title-col
  h1::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 18px;
  border-radius: 3px;
  background: linear-gradient(180deg, #ffd84d 0%, #f0b400 100%);
}

/* Form item labels */
form[data-current-form="change-password"] .form-item label {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 7px;
}

/* Input wrapper with prefix icon */
form[data-current-form="change-password"] .input-holder.-prefix {
  position: relative !important;
  display: block !important;
}

/* Kill platform's grey prefix box */
form[data-current-form="change-password"] .input-holder.-prefix .prefix {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
  pointer-events: none !important;
  color: #adb5bd !important;
  font-size: 0 !important;
}

form[data-current-form="change-password"] .input-holder.-prefix .prefix svg {
  width: 16px !important;
  height: 16px !important;
  stroke: #adb5bd !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* Override platform's border-radius cut on -prefix input */
form[data-current-form="change-password"]
  .input-holder.-prefix  input[type="password"] {
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    background: #f9fafb;
    font-size: 14px;
    padding: 0 14px 0 44px;
    transition: border-color 0.2s,;
}

form[data-current-form="change-password"]
  .input-holder.-prefix
  input[type="password"]:focus {
  border-color: #ffc400 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(255, 196, 0, 0.15) !important;
}

/* Fix browser autofill yellow background */
form[data-current-form="change-password"] input:-webkit-autofill,
form[data-current-form="change-password"] input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px #f9fafb inset !important;
  -webkit-text-fill-color: #1a1a1a !important;
  border-color: #e5e7eb !important;
}

/* Force all three fields to full-width stacked */
form[data-current-form="change-password"] .row {
  display: flex;
  flex-direction: column !important;
  gap: 0;
  flex-wrap: nowrap;
}

form[data-current-form="change-password"] .row .form-item.col.-half {
  max-width: 100% !important;
  width: 100% !important;
  flex: 0 0 100% !important;
  padding: 0 !important;
  margin-bottom: 18px;
}

/* Description hint */
form[data-current-form="change-password"] small.description {
  display: block;
  font-size: 11px;
  color: #9ca3af;
  font-family: "Inter", sans-serif;
  margin-top: 5px;
}

/* Validation error */
form[data-current-form="change-password"] .context-message small.error {
  display: block;
  font-size: 11px;
  color: #ef4444;
  font-family: "Inter", sans-serif;
  margin-top: 5px;
}

/* Spacing between form items */
form[data-current-form="change-password"] .form-item.-full {
  margin-bottom: 18px;
}

/* Submit button */
form[data-current-form="change-password"] .form-item.-action {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

form[data-current-form="change-password"] .form-item.-action .btn-blue {
  background: linear-gradient(180deg, #ffd84d 0%, #ffc400 45%, #f0b400 100%);
  color: #1a1a1a;
  border: none;
  border-radius: 30px;
  padding: 12px 44px;
  font-size: 14px;
  font-weight: 700;
  font-family: "Inter", sans-serif;
  box-shadow:
    0 4px 14px rgba(255, 196, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: opacity 0.2s;
  height: auto;
}

form[data-current-form="change-password"] .form-item.-action .btn-blue:hover {
  opacity: 0.9;
}

/* ===== Change Email Page ===== */

.content-sec:has([data-current-form="change-email"]) {
  background: #f4f6f9;
  min-height: 100vh;
}

.content-sec:has([data-current-form="change-email"]) .wrapper {
  padding-top: 20px;
  padding-bottom: 40px;
}

.dashboard-col:has([data-current-form="change-email"]) > .inner-col {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  padding: 24px 20px 28px;
  max-width: 560px;
  margin: 0 auto;
}

.dashboard-col:has([data-current-form="change-email"]) .title-col {
  padding-bottom: 18px;
  border-bottom: 1px solid #f0f0f2;
  margin-bottom: 22px;
}

.dashboard-col:has([data-current-form="change-email"]) .title-col h1 {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  padding-left: 14px;
  position: relative;
}

.dashboard-col:has([data-current-form="change-email"]) .title-col h1::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 18px;
  border-radius: 3px;
  background: linear-gradient(180deg, #ffd84d 0%, #f0b400 100%);
}

/* Labels */
form[data-current-form="change-email"] .form-item label {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 7px;
}

/* Field hint text */
form[data-current-form="change-email"] .field-hint {
  display: block;
  font-size: 12px;
  color: #9ca3af;
  font-family: "Inter", sans-serif;
  margin-bottom: 8px;
  font-style: italic;
  line-height: 1.4;
}

/* Input holder */
form[data-current-form="change-email"] .input-holder.-prefix {
  position: relative !important;
  display: block !important;
}

/* Kill platform grey box on prefix */
form[data-current-form="change-email"] .input-holder.-prefix .prefix {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
  pointer-events: none !important;
  font-size: 0 !important;
}

form[data-current-form="change-email"] .input-holder.-prefix .prefix svg {
  width: 16px !important;
  height: 16px !important;
  stroke: #adb5bd !important;
  display: block !important;
}

/* Inputs with icon */
form[data-current-form="change-email"] .input-holder.-prefix input {
  width: 100% !important;
  height: 48px !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 10px !important;
  background: #f9fafb !important;
  font-size: 14px !important;
  font-family: "Inter", sans-serif !important;
  padding: 0 14px 0 44px !important;
  box-sizing: border-box !important;
  outline: none !important;
  color: #1a1a1a !important;
  transition:
    border-color 0.2s,
    box-shadow 0.2s !important;
}

/* Readonly current email */
form[data-current-form="change-email"] input[name="email[old]"] {
  background: #f3f4f6 !important;
  color: #9ca3af !important;
  cursor: not-allowed !important;
}

form[data-current-form="change-email"] .input-holder.-prefix input:focus {
  border-color: #ffc400 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(255, 196, 0, 0.15) !important;
}

/* Validation error */
form[data-current-form="change-email"] .context-message small.error {
  display: block;
  font-size: 11px;
  color: #ef4444;
  font-family: "Inter", sans-serif;
  margin-top: 5px;
}

/* Spacing between items */
form[data-current-form="change-email"] .form-item.-full {
  margin-bottom: 18px;
}

/* Autofill fix */
form[data-current-form="change-email"] input:-webkit-autofill,
form[data-current-form="change-email"] input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px #f9fafb inset !important;
  -webkit-text-fill-color: #1a1a1a !important;
  border-color: #e5e7eb !important;
}

/* Submit button */
form[data-current-form="change-email"] .form-item.-action {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

form[data-current-form="change-email"] .form-item.-action .btn-blue {
  background: linear-gradient(180deg, #ffd84d 0%, #ffc400 45%, #f0b400 100%);
  color: #1a1a1a;
  border: none;
  border-radius: 30px;
  padding: 12px 44px;
  font-size: 14px;
  font-weight: 700;
  font-family: "Inter", sans-serif;
  box-shadow:
    0 4px 14px rgba(255, 196, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: opacity 0.2s;
  height: auto;
}

form[data-current-form="change-email"] .form-item.-action .btn-blue:hover {
  opacity: 0.9;
}

/* ===== Webcam Mobile Modals ===== */

/* Dialog sizing — full-width on mobile with small margins */
#modal--start-private .modal-dialog,
#modal--upgrade-private .modal-dialog,
#goCam2Cam .modal-dialog,
#modal--guest-login .modal-dialog,
#guestTimeout .modal-dialog,
#pushNotificationsModal .modal-dialog {
  margin: 20px auto;
  max-width: min(440px, calc(100% - 24px));
}
 
#modal--start-private .modal-title,
#modal--upgrade-private .modal-title,
#goCam2Cam .modal-title,
#modal--guest-login .modal-title,
#guestTimeout .modal-title,
#pushNotificationsModal .modal-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  font-family: "Inter", sans-serif !important;
}

#modal--start-private .close,
#modal--upgrade-private .close,
#goCam2Cam .close,
#modal--guest-login .close,
#pushNotificationsModal .close {
  opacity: 0.5 !important;
  font-size: 18px !important;
  color: #1a1a1a !important;
  text-shadow: none !important;
}

/* Body */
#modal--start-private .modal-body,
#modal--upgrade-private .modal-body,
#goCam2Cam .modal-body,
#modal--guest-login .modal-body,
#guestTimeout .modal-body,
#pushNotificationsModal .modal-body {
  background: #f8f9fb !important;
  padding: 14px !important;
  font-family: "Inter", sans-serif !important;
  font-size: 13px !important;
}

/* Inline alert notifications */
#modal--start-private .notification.alert,
#modal--upgrade-private .notification.alert {
  font-size: 12px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  margin-bottom: 10px !important;
}

/* ---- Chat-type option cards ---- */

/* Stack cards vertically */
#modal--start-private .form-content.-full.-join-options,
#modal--upgrade-private .form-content.-full.-join-options,
#goCam2Cam .form-content.-full.-join-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 !important;
}

#modal--start-private .-join-options .-square,
#modal--upgrade-private .-join-options .-square,
#goCam2Cam .-join-options .-square {
  flex: none !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Card box: icon left + label right row */
#modal--start-private .-join-options .-square .box,
#modal--upgrade-private .-join-options .-square .box,
#goCam2Cam .-join-options .-square .box {
  background: #fff !important;
  border: 1.5px solid #eef0f3 !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  min-height: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  text-align: left !important;
  transition: border-color 0.2s !important;
}

/* Icon */
#modal--start-private .-join-options .-icon,
#goCam2Cam .-join-options .-icon {
  font-size: 20px !important;
  color: #ffc400 !important;
  flex-shrink: 0 !important;
  width: 26px !important;
  text-align: center !important;
}

/* Label column */
#modal--start-private .-join-options .label,
#modal--upgrade-private .-join-options .label,
#goCam2Cam .-join-options .label {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  flex: 1 !important;
}

/* Title */
#modal--start-private .-join-options .title,
#modal--upgrade-private .-join-options .title,
#goCam2Cam .-join-options .title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  height: auto !important;
  display: block !important;
}

/* Price */
#modal--start-private .-join-options .-square .box b,
#modal--upgrade-private .-join-options .-square .box b {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #374151 !important;
}

/* Hint */
#modal--start-private .-join-options .hint,
#modal--upgrade-private .-join-options .hint {
  font-size: 11px !important;
  color: #9ca3af !important;
  display: block !important;
}

/* flex-break is not needed in row layout */
#modal--start-private .-join-options .flex-break,
#modal--upgrade-private .-join-options .flex-break {
  display: none !important;
}

/* Precharge tag */
#modal--start-private .-join-options .precharge-info,
#modal--upgrade-private .-join-options .precharge-info {
  font-size: 11px !important;
  color: #9ca3af !important;
  padding: 2px 0 0 !important;
  display: block !important;
}

/* Selected radio — gold border highlight */
#modal--start-private .-join-options input[type="radio"]:checked ~ .box,
#modal--upgrade-private .-join-options input[type="radio"]:checked ~ .box {
  border-color: #ffc400 !important;
  box-shadow: 0 0 0 2px rgba(255, 196, 0, 0.22) !important;
}

/* ---- Guest login / timeout modals ---- */

#modal--guest-login .modal-model-box,
#guestTimeout .modal-model-box {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 2px 0 !important;
}

#modal--guest-login .modal-avatar,
#guestTimeout .modal-avatar {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  border-radius: 50% !important;
  background-size: cover !important;
  background-position: center !important;
  border: 2px solid #ffc400 !important;
}

#modal--guest-login .modal-message,
#guestTimeout .modal-message {
  font-size: 13px !important;
  color: #374151 !important;
  line-height: 1.5 !important;
}

/* ---- Footer ---- */

#modal--start-private .modal-footer,
#modal--upgrade-private .modal-footer,
#goCam2Cam .modal-footer,
#modal--guest-login .modal-footer,
#guestTimeout .modal-footer,
#pushNotificationsModal .modal-footer {
  border-top: 1px solid #f0f0f2 ;
  padding: 10px 14px ;
  gap: 8px ;
  flex-wrap: nowrap ;
  color: #000;
}

/* Buttons — compact, equal height */
#modal--start-private .modal-footer .btn,
#modal--upgrade-private .modal-footer .btn,
#goCam2Cam .modal-footer .btn,
#modal--guest-login .modal-footer .btn,
#guestTimeout .modal-footer .btn,
#pushNotificationsModal .modal-footer .btn {
  flex: 1 !important;
}

 

/* Cancel / dismiss → soft grey */
#modal--start-private .btn-red,
#modal--upgrade-private .btn-red,
#guestTimeout .btn-red {
  background: #f3f4f6 !important;
  color: #6b7280 !important;
}

/* Login button → dark */
 
/* Push notification close */
#pushNotificationsModal .btn-gray {
  background: #f3f4f6 !important;
  color: #374151 !important;
}

/* === Account / Settings page === */
.settings-page {
  background: #fff;
  min-height: 100vh;
  padding: 10px;
  font-family: "Inter", sans-serif;
}
.settings-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
.settings-title h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #111;
}
.back-btn {
  color: #111;
  font-size: 22px;
  text-decoration: none;
  width: 36px;
  text-align: center;
}
.section-title {
  margin: 8px 6px;
  font-size: 15px;
  font-weight: 600;
  color: #222;
  position: relative;
  z-index: 1;
}
.setting-card {
  background: #f3f3f6;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.setting-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  color: #222;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: 0.25s;
}
.setting-item:hover {
  background: #ececec;
  color: #000;
}
.setting-item i {
  width: 24px;
  text-align: center;
  font-size: 16px;
  color: #222;
}
.setting-item.logout {
  color: #bd5e5e;
}
.setting-item.logout i {
  color: #bd5e5e;
}
.account-body {
  position: relative;
}
.menu-dropdown {
  position: relative;
  z-index: 101;
}
.menu-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: #f2f2f2;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
}
.dropdown-menu-custom {
  position: absolute;
  top: 45px;
  right: 0;
  width: 270px;
  background: #f2f2f5;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  display: none;
  overflow: hidden;
  z-index: 102;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: 0.25s;
}
.dropdown-menu-custom.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  display: block;
}
.dropdown-menu-custom a {
  display: flex;
  align-items: center;
  gap: 5px;
  padding:12px 14px;
  color: #222;
  text-decoration: none;
  font-size: 14px;
  transition: 0.25s;
}
.dropdown-menu-custom a:hover {
  background: #e8e8eb;
}
.dropdown-menu-custom i {
  width: 22px;
  text-align: center;
  color: #555;
}
.menu-overlay {
  position: absolute;
  top: -5px;
  left: -10px;
  right: -10px;
  bottom: 0;
  background: rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: 0.25s;
  z-index: 99;
}
.menu-overlay.show {
  opacity: 1;
  visibility: visible;
}
body.menu-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

/* ===== Dashboard — Recent Messages widget ===== */

#messages-list .dm-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #f3f4f6;
  background: #fff;
}

#messages-list .dm-row:last-child {
  border-bottom: none;
}

#messages-list .dm-row.-unread {
  background: #fffdf2;
}

/* Star icon */
#messages-list .dm-star {
  font-size: 15px;
  color: #d1d5db;
  flex-shrink: 0;
  padding-top: 2px;
  text-decoration: none;
  transition: color 0.2s;
}

#messages-list .dm-star.-active,
#messages-list .dm-star:hover {
  color: #ffc400;
}

/* Body: takes remaining width */
#messages-list .dm-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Top row: sender LEFT, time RIGHT */
#messages-list .dm-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

#messages-list .dm-sender {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Inter', sans-serif;
}

/* Time — top right */
#messages-list .dm-time {
  font-size: 10px;
  color: #9ca3af;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
}

/* Bottom row: subject + action buttons */
#messages-list .dm-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
}

#messages-list .dm-subject {
  font-size: 12px;
  color: #3b82f6;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  font-family: 'Inter', sans-serif;
}

#messages-list .dm-subject:hover {
  text-decoration: underline;
}

/* Unread subject is bolder */
#messages-list .dm-row.-unread .dm-subject {
  font-weight: 600;
}

/* Action buttons */
#messages-list .dm-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

#messages-list .dm-btn {
  font-size: 12px;
  color: #9ca3af;
  text-decoration: none;
  padding: 2px 5px;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
  font-family: 'Inter', sans-serif;
}

#messages-list .dm-btn:hover {
  background: #f3f4f6;
  color: #374151;
}

#messages-list .dm-btn.-spam:hover {
  background: #fee2e2;
  color: #ef4444;
}

/* ===== Recent Messages — time top-right corner ===== */

/* Give the row a positioning context */
#messages-list .user-mailbox .mailbox-item.-full {
  position: relative !important;
}

/* Pull time out of flex flow, pin to top-right */
#messages-list .user-mailbox .mailbox-item .item.-time {
  position: absolute !important;
  top: 8px !important;
  right: 10px !important;
  flex: none !important;
  width: auto !important;
  padding: 0 !important;
  font-size: 10px !important;
  color: #9ca3af !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
  pointer-events: none;
}

/* Prevent subject link from sliding under the absolute time */
#messages-list .user-mailbox .mailbox-item .link {
  padding-right: 130px !important;
}

/* ===== Mailbox — Gmail-style drawer ===== */

/* Drawer trigger bar */
.mailbox-drawer-bar {
  display: flex;
  align-items: center;
  padding: 0;
  margin-bottom: 10px;
  gap: 5px;
}

.mailbox-drawer-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 24px;
  color: #374151;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.mailbox-drawer-btn:hover {
  background: #f3f4f6;
}

.mailbox-drawer-btn svg {
  flex-shrink: 0;
  color: #6b7280;
}

.mailbox-drawer-label {
  font-size: 17px;
  font-weight: 700;
  color: #1a1a1a;
  font-family: 'Inter', sans-serif;
}

/* Overlay */
.mailbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 299;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

.mailbox-overlay.is-visible {
  display: block;
  animation: overlayFadeIn 0.22s ease;
}

@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Drawer — slide in from left */
#dashboard-mailbox .mailbox-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  width: 280px !important;
  max-width: 82vw !important;
  background: #fff !important;
  z-index: 300 !important;
  box-shadow: 4px 0 24px rgba(0,0,0,0.14) !important;
  transform: translateX(-100%) !important;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow-y: auto !important;
  padding: 0 !important;
  border-radius: 0 16px 16px 0 !important;
}

#dashboard-mailbox .mailbox-nav.is-open {
  transform: translateX(0) !important;
}

/* Drawer header */
#dashboard-mailbox .mailbox-nav::before {
  content: 'Mailbox';
  display: block;
  padding: 20px 20px 14px;
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  font-family: 'Inter', sans-serif;
  border-bottom: 1px solid #f0f0f0;
  background: linear-gradient(180deg, #ffd84d 0%, #ffc400 100%);
}

/* Nav list */
#dashboard-mailbox .mailbox-nav .nav-tabs {
  list-style: none;
  margin: 8px 0 !important;
  padding: 0 !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

#dashboard-mailbox .mailbox-nav .nav-item {
  margin: 0 !important;
  border: none !important;
}

#dashboard-mailbox .mailbox-nav .nav-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 13px 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  font-family: 'Inter', sans-serif !important;
  text-decoration: none !important;
  border-radius: 0 24px 24px 0 !important;
  margin-right: 12px !important;
  transition: background 0.15s !important;
  border: none !important;
}

#dashboard-mailbox .mailbox-nav .nav-link:hover {
  background: #f3f4f6 !important;
  color: #1a1a1a !important;
}

#dashboard-mailbox .mailbox-nav .nav-link.active,
#dashboard-mailbox .mailbox-nav .nav-item.active .nav-link {
  background: #fef9e7 !important;
  color: #b45309 !important;
  font-weight: 700 !important;
}

#dashboard-mailbox .mailbox-nav .nav-link .label {
  font-size: 14px !important;
}

#dashboard-mailbox .mailbox-nav .nav-link .count {
  font-size: 12px !important;
  color: #9ca3af !important;
  background: #f3f4f6 !important;
  border-radius: 20px !important;
  padding: 1px 8px !important;
  font-family: 'Inter', sans-serif !important;
}

#dashboard-mailbox .mailbox-nav .nav-link.active .count,
#dashboard-mailbox .mailbox-nav .nav-item.active .nav-link .count {
  background: #fde68a !important;
  color: #92400e !important;
}

/* Prevent body scroll when drawer is open */
body.mailbox-drawer-open {
  overflow: hidden;
}

/* ===== Mailbox — title back button ===== */

.mailbox-title-col {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.mailbox-title-col .back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #111;
  font-size: 18px;
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.mailbox-title-col .back-btn:hover {
  background: #f3f4f6;
  color: #111;
  text-decoration: none;
}

.mailbox-title-col h1 {
  margin: 0 !important;
  font-size: 20px !important;
}

/* ===== Back button inline alignment inside scoped content grids ===== */

.dashboard-col:has(#members-favorites) .title-col.mailbox-title-col,
.dashboard-col:has(#content-grid) .title-col.mailbox-title-col,
.dashboard-col:has(#browse-grid) .title-col.mailbox-title-col,
.dashboard-col:has(#content-purchased-grid) .title-col.mailbox-title-col {
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 4px !important;
}

.dashboard-col:has(#members-favorites) .title-col.mailbox-title-col .back-btn,
.dashboard-col:has(#content-grid) .title-col.mailbox-title-col .back-btn,
.dashboard-col:has(#browse-grid) .title-col.mailbox-title-col .back-btn,
.dashboard-col:has(#content-purchased-grid) .title-col.mailbox-title-col .back-btn {
  flex-shrink: 0;
  width: 32px !important;
  height: 32px !important;
  font-size: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  color: #111 !important;
  text-decoration: none !important;
  transition: background 0.15s !important;
}

.dashboard-col:has(#members-favorites) .title-col.mailbox-title-col .back-btn:hover,
.dashboard-col:has(#content-grid) .title-col.mailbox-title-col .back-btn:hover,
.dashboard-col:has(#browse-grid) .title-col.mailbox-title-col .back-btn:hover,
.dashboard-col:has(#content-purchased-grid) .title-col.mailbox-title-col .back-btn:hover {
  background: #f3f4f6 !important;
}



/*
 */

/* ===== Model Profile View — New Layout ===== */

.mpv-section {
    padding: 0 !important;
}
.mpv-section > .wrapper {
    max-width: 100% !important;
    padding: 0 !important;
}
.model-profile-view {
    background: #fff;
    min-height: 100vh;
}

/* Cover */
.mpv-cover {
    width: 100%;
    height: 230px;
    overflow: hidden;
    position: relative;
}
.mpv-cover img.cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mpv-cover-placeholder {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.mpv-cover-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* White curved card */
.mpv-card {
    position: relative;
    margin-top: -30px;
    background: #fff;
    border-radius: 30px 30px 0 0;
    padding: 0 20px 40px;
    text-align: center;
}

/* Avatar circle */
.mpv-avatar {
    width: 130px;
    height: 130px;
    margin: -65px auto 16px;
    border-radius: 50%;
    background: #fff;
    padding: 4px;
    position: relative;
    box-shadow: 0 2px 12px rgba(0,0,0,.12);
    box-sizing: border-box;
}
.mpv-avatar a {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}
.mpv-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #2b2e73;
    display: block;
}
.mpv-avatar .status {
    display: none !important;
}

/* Name */
.mpv-name {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #282b70 !important;
    margin: 0 0 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    line-height: 1.2 !important;
}

/* Bio */
.mpv-bio {
    font-size: 14px;
    color: #666;
    margin: 0 0 12px;
    line-height: 1.5;
}

/* Meta row: flag | country | divider | age */
.mpv-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #555;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.mpv-flag {
    width: 24px;
    height: auto;
    border-radius: 3px;
    display: inline-block;
}
.mpv-divider {
    color: #ccc;
}

/* Tip button */
.mpv-tip-btn {
    display: flex ;
    justify-content: center ;
    align-items: center ;
    gap: 10px ;
    margin: 0 auto 24px ;
    width: 100% ;
    max-width: 320px ;
    height: 50px ;
    border: none ;
    border-radius: 8px ;
    background: linear-gradient(180deg, #ffd84d 0%, #ffc400 45%, #f0b400 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 4px 12px rgba(255, 196, 0, 0.35);
    font-size: 15px ;
    font-weight: 700 ;
    color: #222 ;
    text-decoration: none ;
    cursor: pointer ;
    letter-spacing: .5px ;
}


/* Stats row */
.mpv-stats {
    display: flex;
    justify-content: center;
    gap: 48px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f0f0f0;
}
.mpv-stat {
    text-align: center;
}
.mpv-stat h3 {
    font-size: 30px !important;
    font-weight: 700 !important;
    color: #2b2e73 !important;
    margin: 0 0 4px !important;
    line-height: 1 !important;
}
.mpv-stat > span {
    font-size: 13px;
    color: #888;
    display: block;
}

/* Tab nav */
.mpv-tabs {
	display: flex;
	border-bottom: 2px solid #e8e8e8;
	overflow-x: auto;
	scrollbar-width: none;
	margin: 0 0 5px 0;
	padding: 0;
	justify-content: space-between;
}
.mpv-tabs::-webkit-scrollbar {
    display: none;
}
.mpv-tab-btn {
    flex: 0 0 auto;
    padding: 0 16px;
    height: 46px;
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 600;
    color: #999;
    position: relative;
    cursor: pointer;
    white-space: nowrap;
    transition: color .2s;
}
.mpv-tab-btn.active {
    color: #2b2e73;
}
.mpv-tab-btn.active::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: #2b2e73;
    border-radius: 10px 10px 0 0;
}

/* Tab panes */
.mpv-tab-pane {
    display: none;
    padding: 0;
    text-align: left;
}
.mpv-tab-pane.active {
    display: block;
}

/* Details lists */
.mpv-tab-pane .model-details-item {
    margin-bottom: 0;
}
.mpv-tab-pane .model-details-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mpv-tab-pane .model-details-list li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 5px 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 14px;
}
.mpv-tab-pane .model-details-list .label {
    font-weight: 600;
    color: #222;
    flex: 0 0 120px;
}
.mpv-tab-pane .model-details-list .desc {
	color: #222;
	width: 100%;
}
.mpv-tab-pane .model-details-list .desc::before {
	content: ':';
  margin-right: 4px;
}
/* Likes items */
.mpv-tab-pane .model-like-item {
	padding: 10px;
	border-bottom: 1px solid #f5f5f5;
	background: #f5f5f5;
	border-radius: 4px;
}
.mpv-tab-pane .model-like-item .label {
    font-weight: 600;
    font-size: 14px;
    color: #444;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.mpv-tab-pane .model-like-item .desc {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    text-transform: capitalize;
}

/* Reviews tab actions */
.mpv-tab-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

/* Section headings inside tabs */
.mpv-tab-pane .title-col h2 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #282b70 !important;
    margin: 0 0 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid #f0f0f0 !important;
}

/* Photo/video sections inside tabs */
.mpv-tab-pane .model-info {
    margin-bottom: 28px;
}

/* Empty state */
.mpv-empty {
    color: #aaa;
    font-size: 14px;
    padding: 20px 0;
    text-align: center;
}