/* ==========================================================================
   Corner App - Shared UI Components
   Extracted from pixel-perfect recreation work
   ========================================================================== */

/* ==========================================================================
   SCREEN BACKGROUND GRADIENT
   The signature Corner app background with subtle color hints
   ========================================================================== */

.screen-bg {
  background: #E8E6E3;
  position: relative;
  isolation: isolate;
}

.screen-bg::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    /* Soft blue hint top-right */
    radial-gradient(ellipse at 85% 15%, rgba(180,200,240,0.3) 0%, transparent 35%),
    /* Soft green/teal hint middle-left */
    radial-gradient(ellipse at 5% 45%, rgba(180,220,210,0.25) 0%, transparent 30%),
    /* Soft pink/peach hint bottom-right */
    radial-gradient(ellipse at 70% 85%, rgba(245,210,200,0.25) 0%, transparent 35%),
    /* Base warm grey gradient */
    linear-gradient(180deg, #F0EEEB 0%, #E8E6E3 50%, #E5E3E0 100%);
  pointer-events: none;
  z-index: -1;
}

/* Cooler blue-tinted variant */
.screen-bg--blue {
  --screen-bg-base: #F7FAFF;
  --screen-bg-deep: #EDF3FA;
  --screen-bg-halo: rgba(198, 220, 255, 0.45);
  --screen-bg-mist: rgba(207, 230, 245, 0.28);
  --screen-bg-soft: rgba(216, 228, 255, 0.25);
  background: var(--screen-bg-base);
}

.screen-bg--blue::before {
  background:
    /* Glossy highlight at top */
    linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.55) 35%, transparent 60%),
    /* Cool halo near top center */
    radial-gradient(ellipse at 50% 18%, var(--screen-bg-halo) 0%, transparent 55%),
    /* Soft cool mist mid-left */
    radial-gradient(ellipse at 12% 55%, var(--screen-bg-mist) 0%, transparent 45%),
    /* Soft blue hint bottom-right */
    radial-gradient(ellipse at 85% 75%, var(--screen-bg-soft) 0%, transparent 55%),
    /* Base cool gradient */
    linear-gradient(180deg, var(--screen-bg-base) 0%, var(--screen-bg-deep) 70%, #E8EEF6 100%);
}
/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */

:root {
  /* Colors */
  --color-white: #FFFFFF;
  --color-bg-light: #F5F5F5;
  --color-border-light: #E8E8E8;
  --color-border-medium: #E0E0E0;
  --color-text-primary: #000000;
  --color-text-secondary: #555555;
  --color-text-muted: #333333;

  /* Shadow Colors */
  --shadow-color-light: rgba(190, 190, 190, 0.70);
  --shadow-color-medium: rgba(140, 140, 140, 0.30);
  --shadow-color-dark: rgba(100, 100, 100, 0.30);
  --shadow-color-subtle: rgba(0, 0, 0, 0.14);

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 28px;
  --radius-circle: 50%;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-xxl: 24px;
}

/* ==========================================================================
   CIRCULAR ACTION BUTTONS
   Used for: Save/Bookmark, Tick/Check, Share buttons
   ========================================================================== */

.action-btn-circular {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-circle);
  background: var(--color-white);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-secondary);
  box-shadow:
    /* Inner shadow - creates convex 3D effect */
    inset 0 -8px 12px -4px rgba(100, 100, 100, 0.30),
    /* Primary drop shadow - soft ambient */
    0 4px 14px 0px rgba(0, 0, 0, 0.14),
    /* Bottom shadow - concentrated below */
    0 4px 5px rgba(190, 190, 190, 0.70);
}

.action-btn-circular svg {
  width: 18px;
  height: 18px;
}

/* Smaller variant */
.action-btn-circular--sm {
  width: 32px;
  height: 32px;
}

.action-btn-circular--sm svg {
  width: 14px;
  height: 14px;
}

/* ==========================================================================
   PROFILE CHIPS
   Used for: Category tabs (All Places, Want to Try, Favorites, Recommend)
   ========================================================================== */

.profile-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--color-bg-light);
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-primary);
  white-space: nowrap;
  border: 1px solid var(--color-border-medium);
  cursor: pointer;
  min-width: 85px;
}

.profile-chip-icon {
  display: flex;
  align-items: center;
  gap: 4px;
}

.profile-chip-icon svg {
  width: 18px;
  height: 18px;
}

.profile-chip-count {
  font-weight: 600;
  font-size: 15px;
}

/* ==========================================================================
   FLOATING TAB BAR / NAVIGATION PILL
   Used for: Bottom navigation
   ========================================================================== */

.floating-tab-bar {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  height: 56px;
  padding: 0 20px;
  background: var(--color-white);
  border: none;
  border-radius: var(--radius-pill);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  z-index: 100;
  box-shadow:
    /* Inner shadow at bottom - creates depth */
    inset 0 -8px 12px -3px rgba(100, 100, 100, 0.22),
    /* Primary drop shadow */
    0 6px 16px rgba(0, 0, 0, 0.14),
    /* Bottom concentrated shadow */
    0 4px 8px rgba(130, 130, 130, 0.38),
    /* Subtle outline for definition */
    0 0 0 1px rgba(0, 0, 0, 0.03);
}

.floating-tab-bar__item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.floating-tab-bar__icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floating-tab-bar__icon svg {
  width: 22px;
  height: 22px;
}

/* ==========================================================================
   PLACE THUMBNAILS
   Used for: Restaurant/place list item images
   ========================================================================== */

.place-thumbnail {
  width: 44px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  flex-shrink: 0;
  overflow: hidden;
}

.place-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   COMPLETE PROFILE BUTTON
   Used for: CTA buttons with subtle shadow
   ========================================================================== */

.btn-complete-profile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  background: var(--color-white);
  border: none;
  border-radius: var(--radius-lg);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  cursor: pointer;
  box-shadow:
    inset 0 -3px 4px -2px rgba(0, 0, 0, 0.12),
    0 2px 4px -1px rgba(0, 0, 0, 0.15);
}

.btn-complete-profile svg {
  width: 14px;
  height: 14px;
}

/* ==========================================================================
   HEADER ICON BUTTONS
   Used for: Share, Settings buttons in header (rounded rectangle style)
   ========================================================================== */

.header-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--color-white);
  border: 1.25px solid rgba(0, 0, 0, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  color: var(--color-text-primary);
  box-shadow:
    inset 0 -8px 6px -4px rgba(0, 0, 0, 0.17),
    0 2px 8px rgba(0, 0, 0, 0.08);
}

.header-icon-btn svg {
  width: 14px;
  height: 14px;
}

/* Glass/Dark variant - for dark overlays like photo viewer */
.header-icon-btn--glass {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-circle);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  color: var(--color-white);
  transition: all 0.2s ease;
}

.header-icon-btn--glass:hover {
  background: rgba(255, 255, 255, 0.25);
}

.header-icon-btn--glass svg {
  width: 20px;
  height: 20px;
}

/* Download button variant - same as glass but with download-specific styling */
.header-icon-btn--download {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-circle);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  color: var(--color-white);
  transition: all 0.2s ease;
}

.header-icon-btn--download:hover {
  background: rgba(255, 255, 255, 0.25);
}

.header-icon-btn--download.active {
  background: var(--color-white);
  color: var(--color-text-primary);
  border-color: var(--color-white);
}

.header-icon-btn--download svg {
  width: 20px;
  height: 20px;
}

/* ==========================================================================
   IMPORT ACTION BUTTONS
   Used for: Import from Instagram, TikTok, Google Maps, etc.
   ========================================================================== */

.import-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 4px 12px;
  background: var(--color-white);
  border: none;
  border-radius: 16px;
  cursor: pointer;
  box-shadow:
    inset 0 -4px 6px -2px rgba(0, 0, 0, 0.20),
    0 4px 6px -1px rgba(0, 0, 0, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.10);
}

.import-btn__icon {
  width: 34px;
  height: 34px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.import-btn__label {
  font-size: 9px;
  color: #8E8E93;
  text-align: center;
  line-height: 1.2;
}

/* Social media icon styles for import buttons */
.social-icons-row {
  display: flex;
  gap: 3px;
  align-items: center;
}

.social-icon-ig {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: linear-gradient(135deg, #F58529 0%, #DD2A7B 50%, #8134AF 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-icon-ig svg {
  width: 14px;
  height: 14px;
  color: #fff;
}

.social-icon-tiktok {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   PROFILE AVATAR
   Used for: User profile images (oval shape)
   ========================================================================== */

.profile-avatar {
  width: 100px;
  height: 145px;
  border-radius: 48px;
  background: var(--color-white);
  padding: 1.5px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.profile-avatar__inner {
  width: 100%;
  height: 100%;
  border-radius: 46px;
  background: #E5E5E5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.profile-avatar__inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   PLACE LIST ITEM
   Used for: Restaurant/place rows in lists
   ========================================================================== */

.place-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--color-border-light);
}

.place-item:last-child {
  border-bottom: none;
}

.place-item__info {
  flex: 1;
  margin-left: 10px;
  min-width: 0;
}

.place-item__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.place-item__subtitle {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.place-item__actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

/* ==========================================================================
   SMALL CIRCULAR ADD BUTTON
   Used for: Quick add buttons in lists
   ========================================================================== */

.add-btn-sm {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-circle);
  background: #F2F2F2;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.add-btn-sm svg {
  width: 14px;
  height: 14px;
  color: var(--color-text-muted);
}

/* ==========================================================================
   VERIFIED BADGE
   Used for: User verification indicator
   ========================================================================== */

.verified-badge {
  width: 18px;
  height: 18px;
  background: #E8E8E8;
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
}

.verified-badge svg {
  width: 11px;
  height: 11px;
  color: #666;
}

/* ==========================================================================
   STATUS BAR
   Used for: iOS-style status bar at top of screens
   ========================================================================== */

.status-bar {
  padding: 14px 28px 0 28px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 54px;
}

.status-bar__time {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.status-bar__icons {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ==========================================================================
   FILTER SHEET / BOTTOM MODAL
   Used for: Filter options, selection sheets (e.g., "showing places from")
   ========================================================================== */

.filter-sheet {
  position: absolute;
  bottom: 20px;
  left: 16px;
  right: 16px;
  width: auto;
  background: #EEEDEB;
  border-radius: 48px;
  z-index: 200;
  padding: 24px 20px 16px 20px;
}

.filter-sheet__title {
  font-size: 18px;
  font-weight: 700;
  font-style: italic;
  color: #000;
  margin-bottom: 16px;
  padding-left: 4px;
}

/* ==========================================================================
   RADIO OPTION PILLS
   Used for: Selection options within filter sheets
   ========================================================================== */

.radio-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  background: #FFFFFF;
  border-radius: var(--radius-pill);
  margin-bottom: 10px;
  border: 2.5px solid transparent;
}

.radio-option:last-child {
  margin-bottom: 0;
}

.radio-option.selected {
  background: #FFFFFF;
  border-color: #000;
}

.radio-option__left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.radio-option__icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
}

.radio-option__icon img {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-circle);
  object-fit: cover;
}

.radio-option__label {
  font-size: 15px;
  font-weight: 500;
  color: #000;
}

/* Radio circle indicator */
.radio-circle {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-circle);
  border: 2px solid #C8C8C8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: transparent;
}

/* Compact variant */
.radio-circle--compact {
  width: 18px;
  height: 18px;
}

.radio-circle--compact .radio-circle__inner {
  width: 12px;
  height: 12px;
}

.radio-option.selected .radio-circle {
  border-color: #000;
  background: #fff;
}

.radio-circle__inner {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-circle);
  background: #000;
  display: none;
}

.radio-option.selected .radio-circle__inner {
  display: block;
}

/* ==========================================================================
   BASE UI COMPONENTS - Typography
   Individual text styles that can be reused across the app
   ========================================================================== */

/* Username text - bold, compact */
.text-username {
  font-size: 14px;
  font-weight: 600;
  color: #000;
  letter-spacing: -0.01em;
}

/* Serif title - italic restaurant/venue names */
.text-title-serif {
  font-size: 19px;
  font-weight: 700;
  font-style: italic;
  color: #000;
  font-family: Georgia, 'Times New Roman', serif;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}

/* Meta text - secondary info like cuisine type & location */
.text-meta {
  font-size: 14px;
  font-weight: 500;
  color: #8E8E93;
  margin: 1px 0 0 0;
}

/* Comment/body text - readable content */
.text-comment {
  font-size: 14px;
  font-weight: 500;
  color: #000;
  line-height: 1.4;
  margin: 0;
}

/* Timestamp text - small, muted time indicators */
.text-timestamp {
  font-size: 11px;
  font-weight: 600;
  color: #8E8E93;
}

/* ==========================================================================
   BASE UI COMPONENTS - Icons
   Standardized icon sizing and colors
   ========================================================================== */

/* Stats icons - comment, heart, etc. */
.icon-stat {
  width: 16px;
  height: 16px;
  color: #7A7A7E;
}

.icon-stat svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
}

/* Bookmark icon - lighter, slightly larger */
.icon-bookmark {
  width: 19px;
  height: 19px;
  color: #BDBDC2;
}

.icon-bookmark svg {
  width: 19px;
  height: 19px;
  stroke-width: 2.5;
}

/* Small star icon - used in user action badges */
.icon-star-sm {
  width: 12px;
  height: 12px;
  color: #7A7A7E;
}

.icon-star-sm svg {
  width: 12px;
  height: 12px;
}

/* Tab bar icons - thick strokes for bottom nav */
.icon-tab {
  width: 22px;
  height: 22px;
}

.icon-tab svg {
  width: 22px;
  height: 22px;
  stroke-width: 3;
}

/* ==========================================================================
   BASE UI COMPONENTS - User Action Badge
   Shows user's relationship to a place (fav, want to try, etc.)
   ========================================================================== */

.user-action-badge {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 14px;
  color: #8E8E93;
}

.user-action-badge svg {
  width: 12px;
  height: 12px;
  color: #7A7A7E;
}

/* ==========================================================================
   BASE UI COMPONENTS - Stats Row
   Engagement stats with icons and counts
   ========================================================================== */

.stats-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stats-row__left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stats-row__right {
  margin-left: auto;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: #7A7A7E;
}

.stat-item svg {
  width: 16px;
  height: 16px;
  color: #7A7A7E;
}

/* ==========================================================================
   BASE UI COMPONENTS - Photo Mosaic
   3-column image grid with partial peek
   ========================================================================== */

.photo-mosaic {
  display: flex;
  gap: 6px;
  height: 197px;
}

.photo-mosaic__item {
  background: #E5E5E5;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 8px;
}

.photo-mosaic__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* First two items flex equally */
.photo-mosaic__item:first-child,
.photo-mosaic__item:nth-child(2) {
  flex: 1;
  min-width: 0;
}

/* Third item is a peek/preview */
.photo-mosaic__item:nth-child(3) {
  width: 50px;
}

/* ==========================================================================
   BASE UI COMPONENTS - Search Bar (Dark)
   Black search input with placeholder
   ========================================================================== */

.search-bar-dark {
  background: #000;
  border-radius: 24px;
  padding: 11px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-bar-dark__icon {
  width: 16px;
  height: 16px;
  color: #8E8E93;
}

.search-bar-dark__icon svg {
  width: 16px;
  height: 16px;
}

.search-bar-dark__placeholder {
  color: #8E8E93;
  font-size: 15px;
  font-weight: 400;
}

/* ==========================================================================
   BASE UI COMPONENTS - Location Badge
   City/location indicator with sparkle icon
   ========================================================================== */

.location-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.location-badge__icon {
  width: 14px;
  height: 14px;
  color: #007AFF;
}

.location-badge__icon svg {
  width: 14px;
  height: 14px;
}

.location-badge__text {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  font-weight: 600;
  color: #000;
}

.location-badge__dropdown {
  font-size: 8px;
  color: #000;
}

/* ==========================================================================
   BASE UI COMPONENTS - Dynamic Island
   iOS dynamic island notch
   ========================================================================== */

.dynamic-island {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 126px;
  height: 37px;
  background: #000;
  border-radius: 24px;
}

/* ==========================================================================
   BASE UI COMPONENTS - Home Indicator
   iOS home gesture indicator bar
   ========================================================================== */

.home-indicator {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 134px;
  height: 5px;
  background: #000;
  border-radius: 3px;
}

/* ==========================================================================
   BASE UI COMPONENTS - Tab Bar (Full Width)
   Fixed bottom navigation bar
   ========================================================================== */

.tab-bar-full {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 83px;
  background: #FFFFFF;
  border-top: none;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  padding-top: 10px;
}

.tab-bar-full__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #8E8E93;
  background: none;
  border: none;
  cursor: pointer;
}

.tab-bar-full__item.active {
  color: #000;
}

.tab-bar-full__icon {
  width: 22px;
  height: 22px;
}

.tab-bar-full__icon svg {
  width: 22px;
  height: 22px;
}

/* ==========================================================================
   COMPOSITE COMPONENTS
   Assembled components made from base UI elements
   ========================================================================== */

/* ==========================================================================
   COMPOSITE: Feed Card
   Social feed card with user, place info, photos, and engagement stats
   ========================================================================== */

.feed-card {
  background: #FEFEFE;
  border-radius: 16px;
  padding: 14px 14px 12px 14px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Feed card header - avatar + content side by side */
.feed-card__header {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.feed-card__header-content {
  flex: 1;
  min-width: 0;
}

/* User row within feed card header */
.feed-card__user-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 0;
}

/* Comment section */
.feed-card__comment {
  margin: 0 0 10px 0;
}

/* Photo section */
.feed-card__photos {
  margin-bottom: 4px;
}

/* Timestamp */
.feed-card__timestamp {
  margin-bottom: 8px;
}

/* Stats section */
.feed-card__stats {
  /* Uses .stats-row base component */
}

/* Small profile avatar variant for feed cards */
.profile-avatar--sm {
  width: 48px;
  height: 62px;
  border-radius: 24px;
}

.profile-avatar--sm .profile-avatar__inner {
  border-radius: 22px;
  background: #E5E5E5;
}

/* ==========================================================================
   BRAND SELECTOR SHEET
   Bottom sheet for brand selection (Upload/Tag and Filter variants)
   CSS-only interactivity using radio buttons
   ========================================================================== */

/* Hidden radio inputs for tab and selection state */
.brand-tab-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.brand-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Sheet container - partial height bottom sheet */
.brand-selector-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 450px; /* Enough for ~6 items + header + footer */
  max-height: 85vh;
  background: #EEEDEB;
  border-radius: 32px 32px 0 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 -4px 20px rgba(0, 0, 0, 0.15),
    0 -1px 6px rgba(0, 0, 0, 0.08);
}

/* CSS-only tab switching */
/* Default: hide Your Brands, show All Brands */
.brand-selector-sheet [data-tab-content="your-brands"] {
  display: none;
}
.brand-selector-sheet [data-tab-content="all-brands"] {
  display: flex;
}

/* When Your Brands radio is checked - higher specificity to override defaults */
.brand-selector-sheet:has(#tab-your-brands:checked) [data-tab-content="your-brands"] {
  display: flex;
}
.brand-selector-sheet:has(#tab-your-brands:checked) [data-tab-content="all-brands"] {
  display: none;
}

/* Tab active styling based on radio state - underline style */
#tab-your-brands:checked ~ .brand-selector-tabs label[for="tab-your-brands"],
#tab-all-brands:checked ~ .brand-selector-tabs label[for="tab-all-brands"] {
  color: #000;
  font-weight: 600;
}
#tab-your-brands:checked ~ .brand-selector-tabs label[for="tab-your-brands"]::after,
#tab-all-brands:checked ~ .brand-selector-tabs label[for="tab-all-brands"]::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: #000;
  border-radius: 1px;
}

/* Drag handle at top */
.brand-selector-sheet__handle {
  display: flex;
  justify-content: center;
  padding: 12px 0 8px;
}

.brand-selector-sheet__handle-bar {
  width: 36px;
  height: 5px;
  background: #C8C8C8;
  border-radius: 3px;
}

/* Sheet header with title and close button */
.brand-selector-sheet__header {
  padding: 0 20px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-selector-sheet__title {
  font-family: var(--font-display), 'Clash Display', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: #000;
  margin: 0;
}

.brand-selector-sheet__close {
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #000;
  transition: opacity 0.15s ease;
  flex-shrink: 0;
  padding: 0;
}

.brand-selector-sheet__close:hover {
  opacity: 0.6;
}

.brand-selector-sheet__close svg {
  width: 24px;
  height: 24px;
}

/* Tab bar for switching between Your Brands / All Brands - underline style */
.brand-selector-tabs {
  display: flex;
  gap: 0;
  margin: 0 20px 12px;
  border-bottom: 1px solid #D8D8D8;
}

.brand-selector-tab {
  flex: 1;
  position: relative;
  padding: 10px 16px;
  font-family: var(--font-grotesk), system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #8E8E93;
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  transition: color 0.15s ease;
  box-shadow: none;
}

.brand-selector-tab:hover {
  color: #555;
}

.brand-selector-tab.active {
  color: #000;
  font-weight: 600;
}

.brand-selector-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: #000;
  border-radius: 1px;
}

/* Sort toggle for filter variant - matches fr-info-pill style */
.brand-selector-sort {
  display: flex;
  gap: 8px;
  margin: 0 20px 12px;
}

.brand-selector-sort__option {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fr-text-secondary, #666666);
  background: var(--fr-surface, #ffffff);
  border: none;
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow:
    inset 0 -3px 5px -1px rgba(0, 0, 0, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.04);
}

.brand-selector-sort__option:hover {
  color: var(--fr-text-primary, #1a1a1a);
  box-shadow:
    inset 0 -3px 5px -1px rgba(0, 0, 0, 0.15),
    0 3px 8px rgba(0, 0, 0, 0.12),
    0 1px 3px rgba(0, 0, 0, 0.06);
}

.brand-selector-sort__option--active {
  background: var(--fr-text-primary, #1a1a1a);
  color: var(--fr-surface, #ffffff);
  box-shadow:
    inset 0 -3px 5px -1px rgba(0, 0, 0, 0.25),
    0 3px 8px rgba(0, 0, 0, 0.15),
    0 1px 3px rgba(0, 0, 0, 0.08);
}

.brand-selector-sort__option--active:hover {
  background: #333;
  color: var(--fr-surface, #ffffff);
}

/* Search bar - light variant */
.search-bar-light {
  background: #FFFFFF;
  border-radius: var(--radius-pill);
  padding: 11px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 20px 12px;
  border: 1px solid #E0E0E0;
}

.search-bar-light__icon {
  width: 18px;
  height: 18px;
  color: #8E8E93;
  flex-shrink: 0;
}

.search-bar-light__icon svg {
  width: 18px;
  height: 18px;
}

.search-bar-light__input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 15px;
  font-weight: 400;
  color: #000;
  outline: none;
}

.search-bar-light__input::placeholder {
  color: #8E8E93;
}

/* Scrollable brand list container */
.brand-selector-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 20px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  /* Hide scrollbar but keep scrolling */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.brand-selector-list::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Opera */
}

/* Brand list with alphabet index */
.brand-selector-list-inner {
  flex: 1;
  min-width: 0;
  padding-bottom: 90px; /* Space for floating footer button */
}

/* Add custom brand section styling */
.add-custom-brand-section {
  padding: 0;
}
.add-custom-brand-section--top {
  margin-bottom: 6px;
  padding-bottom: 6px;
}
.add-custom-brand-section--bottom {
  margin-top: 6px;
  padding-top: 6px;
}

/* Custom brand input - styled like a pill, same height as radio tiles */
.custom-brand-input-wrapper {
  display: flex;
  align-items: center;
  padding: 6px 14px;
  background: #FFFFFF;
  border-radius: 999px;
  border: 2px dashed #D0D0D0;
  transition: all 0.15s ease;
  gap: 8px;
  margin-bottom: 6px;
}

.custom-brand-input-wrapper:hover {
  border-color: #000;
}

.custom-brand-input-wrapper:focus-within {
  border-color: #000;
  border-style: solid;
}

.custom-brand-input__icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8E8E93;
  flex-shrink: 0;
}

.custom-brand-input-wrapper:focus-within .custom-brand-input__icon {
  color: #000;
}

.custom-brand-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: #000;
  outline: none;
  padding: 0;
  margin: 0;
  line-height: 1.2;
  height: auto;
}

.custom-brand-input::placeholder {
  color: #8E8E93;
}

/* Brand search section */
.brand-search-section {
  padding: 8px 0 12px;
}

/* Search bar - same height as tiles (tiles have 8px padding + 2px border = 10px) */
.fr-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #000;
  border-radius: 999px;
  margin-bottom: 6px;
}

.fr-search-bar .fr-search-bar-icon,
.fr-search-bar-icon {
  width: 16px;
  height: 16px;
  color: rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
}

.fr-search-bar .fr-search-bar-input,
.fr-search-bar-input,
input.fr-search-bar-input,
input[type="text"].fr-search-bar-input {
  flex: 1;
  border: none;
  background: transparent !important;
  background-color: transparent !important;
  font-size: 14px;
  font-weight: 500;
  color: #fff !important;
  outline: none;
  padding: 0;
  margin: 0;
  line-height: 1.2;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff !important;
}

.fr-search-bar .fr-search-bar-input::placeholder,
.fr-search-bar-input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.5) !important;
}

/* Override browser autofill styles */
.fr-search-bar-input:-webkit-autofill,
.fr-search-bar-input:-webkit-autofill:hover,
.fr-search-bar-input:-webkit-autofill:focus,
.fr-search-bar-input:-webkit-autofill:active {
  -webkit-text-fill-color: #fff !important;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset !important;
  caret-color: #fff !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Radio option as label - CSS-only selection */
label.radio-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  background: #FFFFFF;
  border-radius: 999px;
  margin-bottom: 8px;
  border: 2.5px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

/* Compact variant - same height as search bar */
label.radio-option--compact {
  padding: 8px 14px;
  margin-bottom: 6px;
  border-width: 2px;
}

label.radio-option--compact .radio-option__label {
  font-size: 14px;
}

label.radio-option:hover {
  border-color: #E0E0E0;
}

/* Selected state via hidden radio :checked */
label.radio-option:has(.brand-radio:checked) {
  border-color: #000;
}

label.radio-option:has(.brand-radio:checked) .radio-circle {
  border-color: #000;
  background: #fff;
}

label.radio-option:has(.brand-radio:checked) .radio-circle__inner {
  display: block;
}

/* Add custom brand selected state */
label.radio-option--add-custom:has(.brand-radio:checked) {
  border-color: #000;
  border-style: dashed;
}

/* Add custom brand variant */
label.radio-option--add-custom {
  border: 2px dashed #D0D0D0;
}
label.radio-option--add-custom:hover {
  border-color: #000;
  border-style: dashed;
}

/* Alphabet index - sticky vertical strip on right, vertically centered */
.alphabet-index {
  position: sticky;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  height: fit-content;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 8px 4px;
  font-size: 9px;
  font-weight: 600;
  color: #8E8E93;
  user-select: none;
  background: #EEEDEB;
  border-radius: 8px;
  margin-left: auto;
  flex-shrink: 0;
  z-index: 10;
}

.alphabet-index__letter {
  padding: 1px 4px;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.1s ease;
  text-decoration: none;
  color: inherit;
}

.alphabet-index__letter:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #000;
}

.alphabet-index__letter.active {
  background: #000;
  color: #fff;
}

/* Section header for letter groups */
.brand-list-section {
  padding: 8px 0 4px;
  font-size: 12px;
  font-weight: 700;
  color: #8E8E93;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Checkbox option variant (for multi-select) */
.checkbox-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  background: #FFFFFF;
  border-radius: var(--radius-pill);
  margin-bottom: 8px;
  border: 2.5px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

/* Compact variant - same height as radio options */
.checkbox-option--compact {
  padding: 8px 14px;
  margin-bottom: 6px;
  border-width: 2px;
}

.checkbox-option--compact .checkbox-option__label {
  font-size: 14px;
}

.checkbox-option--compact .checkbox-option__count {
  font-size: 12px;
}

.checkbox-option:hover {
  border-color: #E0E0E0;
}

.checkbox-option.selected {
  border-color: #000;
}

.checkbox-option__left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.checkbox-option__icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #000;
}

.checkbox-option__icon svg {
  width: 20px;
  height: 20px;
}

.checkbox-option__label {
  font-size: 15px;
  font-weight: 500;
  color: #000;
}

.checkbox-option__count {
  font-size: 13px;
  font-weight: 500;
  color: #8E8E93;
  margin-left: auto;
  margin-right: 12px;
}

/* Checkbox indicator */
.checkbox-indicator {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 2px solid #C8C8C8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: transparent;
  transition: all 0.15s ease;
}

/* Compact variant */
.checkbox-indicator--compact {
  width: 18px;
  height: 18px;
}

.checkbox-indicator--compact .checkbox-indicator__check {
  width: 10px;
  height: 10px;
}

.checkbox-option.selected .checkbox-indicator {
  border-color: #000;
  background: #000;
}

.checkbox-indicator__check {
  width: 12px;
  height: 12px;
  color: #fff;
  display: none;
}

.checkbox-option.selected .checkbox-indicator__check {
  display: block;
}

/* Add custom brand button */
.add-custom-brand-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: #FFFFFF;
  border-radius: var(--radius-pill);
  margin: 8px 0;
  border: 2px dashed #D0D0D0;
  cursor: pointer;
  transition: all 0.15s ease;
  width: 100%;
}

.add-custom-brand-btn:hover {
  border-color: #000;
  background: #FAFAFA;
}

.add-custom-brand-btn__icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8E8E93;
}

.add-custom-brand-btn__label {
  font-size: 15px;
  font-weight: 500;
  color: #8E8E93;
}

.add-custom-brand-btn:hover .add-custom-brand-btn__icon,
.add-custom-brand-btn:hover .add-custom-brand-btn__label {
  color: #000;
}

/* Bottom action area - fixed at bottom of sheet */
.brand-selector-footer {
  position: absolute;
  bottom: 30px; /* Offset from very bottom to stay above phone frame corners */
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding: 16px 20px;
  background: #EEEDEB;
  pointer-events: none;
  z-index: 10;
}

/* Primary CTA button - fancy gradient style matching Shop Now */
.brand-selector-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 72px;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-grotesk), system-ui, sans-serif;
  color: #FFFFFF;
  background:
    radial-gradient(ellipse 40% 80% at 0% 100%, #985EF1 0%, transparent 60%),
    radial-gradient(ellipse 40% 80% at 100% 100%, #985EF1 0%, transparent 60%),
    linear-gradient(180deg, #5A80FB 0%, #1060FE 70%, #985EF1 100%);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  pointer-events: auto;
  box-shadow:
    0 4px 15px -3px rgba(16, 96, 254, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.15s ease;
}

.brand-selector-cta:hover {
  background:
    radial-gradient(ellipse 40% 80% at 0% 100%, #A86EFF 0%, transparent 60%),
    radial-gradient(ellipse 40% 80% at 100% 100%, #A86EFF 0%, transparent 60%),
    linear-gradient(180deg, #6A90FF 0%, #2070FF 70%, #A86EFF 100%);
  transform: translateY(-1px);
  box-shadow:
    0 6px 20px -3px rgba(16, 96, 254, 0.6),
    0 3px 8px rgba(0, 0, 0, 0.12);
}

.brand-selector-cta:active {
  transform: translateY(0);
  box-shadow:
    0 2px 8px -2px rgba(90, 128, 251, 0.4),
    0 1px 4px rgba(0, 0, 0, 0.08);
}

.brand-selector-cta:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: auto;
}

/* Inactive state - use class instead of :disabled for better JS control */
.brand-selector-cta--inactive {
  opacity: 0.5;
  cursor: not-allowed;
}

.brand-selector-cta--inactive:hover {
  transform: none;
  box-shadow:
    0 4px 15px -3px rgba(16, 96, 254, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Clear all link (for filter variant) */
.brand-selector-clear {
  display: block;
  text-align: center;
  padding: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #8E8E93;
  background: none;
  border: none;
  cursor: pointer;
  margin-bottom: 8px;
}

.brand-selector-clear:hover {
  color: #000;
  text-decoration: underline;
}

/* Empty state */
.brand-selector-empty {
  padding: 40px 20px;
  text-align: center;
}

.brand-selector-empty__title {
  font-size: 16px;
  font-weight: 600;
  color: #000;
  margin-bottom: 8px;
}

.brand-selector-empty__text {
  font-size: 14px;
  color: #8E8E93;
  margin-bottom: 16px;
}

/* Overlay/backdrop for sheet */
.brand-selector-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 199;
}

/* ==========================================================================
   COLOR SELECTOR SHEET - Fashion-forward multi-select color picker
   Mirrors brand-selector structure with beautiful visual color grid
   ========================================================================== */

/* Overlay/backdrop */
.color-selector-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 199;
}

/* Sheet container */
.color-selector-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 500px;
  max-height: 88vh;
  background: #EEEDEB;
  border-radius: 32px 32px 0 0;
  display: flex;
  flex-direction: column;
  z-index: 200;
  box-shadow:
    0 -4px 20px rgba(0, 0, 0, 0.15),
    0 -1px 6px rgba(0, 0, 0, 0.08);
}

/* Drag handle */
.color-selector-sheet__handle {
  display: flex;
  justify-content: center;
  padding: 12px 0 8px;
}

.color-selector-sheet__handle-bar {
  width: 36px;
  height: 5px;
  background: #C8C8C8;
  border-radius: 3px;
}

/* Header with title and close */
.color-selector-sheet__header {
  padding: 0 20px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.color-selector-sheet__title {
  font-family: var(--font-display), 'Clash Display', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: #000;
  margin: 0;
}

.color-selector-sheet__close {
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  color: #000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0.8;
  transition: opacity 0.15s ease;
}

.color-selector-sheet__close:hover {
  opacity: 0.6;
}

.color-selector-sheet__close svg {
  width: 24px;
  height: 24px;
}

/* Grid wrapper - scrollable area */
.color-selector-grid-wrapper {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px 120px;
  -webkit-overflow-scrolling: touch;
}

/* Color grid - 4 columns */
.color-selector-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 12px;
}

/* Individual color item */
.color-selector-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 8px 4px;
  cursor: pointer;
  border-radius: 12px;
  transition: background-color 0.15s ease;
}

.color-selector-item:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

.color-selector-item:active {
  background-color: rgba(0, 0, 0, 0.06);
}

/* Color swatch - large circular */
.color-selector-swatch {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  position: relative;
  box-shadow:
    inset 0 -2px 4px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Light colors need a border */
.color-selector-swatch--light {
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.1),
    inset 0 -2px 4px rgba(0, 0, 0, 0.05),
    0 2px 8px rgba(0, 0, 0, 0.08);
}

.color-selector-item:hover .color-selector-swatch {
  transform: scale(1.05);
  box-shadow:
    inset 0 -2px 4px rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Selected state - double-ring effect matching list builder cards */
.color-selector-item.selected .color-selector-swatch {
  box-shadow:
    inset 0 -2px 4px rgba(0, 0, 0, 0.1),
    0 0 0 1px #000000,
    0 0 0 4px var(--fr-screen-bg, #F5F0E8),
    0 0 0 6px #000000;
}

.color-selector-item.selected .color-selector-swatch--light {
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.1),
    inset 0 -2px 4px rgba(0, 0, 0, 0.05),
    0 0 0 1px #000000,
    0 0 0 4px var(--fr-screen-bg, #F5F0E8),
    0 0 0 6px #000000;
}

/* Checkmark overlay */
.color-selector-check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.color-selector-check svg {
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* Light swatches need dark checkmark */
.color-selector-swatch--light .color-selector-check svg {
  color: #000;
  filter: none;
}

.color-selector-item.selected .color-selector-check {
  opacity: 1;
}

/* Color label */
.color-selector-label {
  font-family: var(--font-grotesk), system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #666;
  text-align: center;
  transition: color 0.15s ease;
}

.color-selector-item.selected .color-selector-label {
  color: #000;
  font-weight: 600;
}

/* Footer with CTA - floating */
.color-selector-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(to top, #EEEDEB 60%, transparent);
  pointer-events: none;
}

/* Done button - same gradient style as brand selector */
.color-selector-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 72px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background:
    radial-gradient(ellipse 40% 80% at 0% 100%, rgba(168, 110, 255, 0.4) 0%, transparent 60%),
    radial-gradient(ellipse 40% 80% at 100% 100%, rgba(168, 110, 255, 0.4) 0%, transparent 60%),
    linear-gradient(180deg, #5A80FB 0%, #1060FE 70%, #8B5CF6 100%);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  box-shadow:
    0 4px 15px -3px rgba(16, 96, 254, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  pointer-events: auto;
}

.color-selector-cta:hover {
  background:
    radial-gradient(ellipse 40% 80% at 0% 100%, #A86EFF 0%, transparent 60%),
    radial-gradient(ellipse 40% 80% at 100% 100%, #A86EFF 0%, transparent 60%),
    linear-gradient(180deg, #6A90FF 0%, #2070FF 70%, #A86EFF 100%);
  transform: translateY(-1px);
  box-shadow:
    0 6px 20px -3px rgba(16, 96, 254, 0.6),
    0 3px 8px rgba(0, 0, 0, 0.12);
}

.color-selector-cta:active {
  transform: translateY(0);
  box-shadow:
    0 2px 8px -2px rgba(90, 128, 251, 0.4),
    0 1px 4px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

.hidden,
.brand-list-by-count.hidden,
.brand-list-by-alpha.hidden,
.alphabet-index.hidden {
  display: none !important;
}