/**
 * TPG Language Selector - Pixel-Perfect CSS
 * Based on Figma designs by AARYA CREATIVES
 * Version: 2.1.4
 * 
 * Breakpoints:
 * - B1: 360px - 479px (Mobile S)
 * - B2: 480px - 599px (Mobile L)
 * - B3: 600px - 839px (Tablet)
 * - B4: 840px - 1023px (Desktop S)
 * - B5: 1024px - 1279px (Desktop M)
 * - B6: 1280px+ (Desktop L)
 */

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
  /* Primary Colors - Orange */
  --tpg-orange-primary: #F88E4E;
  --tpg-orange-dark: #F1612D;
  --tpg-orange-border: #F7894A;
  --tpg-orange-cancel: #F47A3F;
  --tpg-orange-gradient: linear-gradient(180deg, #F88E4E 0%, #F1612D 100%);
  --tpg-orange-gradient-hover: linear-gradient(180deg, #F1612D 0%, #F88E4E 100%);
  
  /* Neutral Colors */
  --tpg-black: #000000;
  --tpg-title-dark: #212122;
  --tpg-body-text: #4A4B4C;
  --tpg-language-text: #737373;
  --tpg-icon-gray: #888C8F;
  --tpg-tab-inactive: #8A8E90;
  --tpg-placeholder: #AEAEAE;
  --tpg-border-gray: #D8DDE1;
  --tpg-input-underline: #E1E1E1;
  --tpg-selected-bg: #F0F4F7;
  --tpg-white: #FFFFFF;
  --tpg-button-text: #FBFBFB;
  
  /* Overlay */
  --tpg-overlay: rgba(0, 0, 0, 0.3);
  
  /* Typography - Font Families */
  --tpg-font-heading: 'Lora', Georgia, serif;
  --tpg-font-body: 'Source Sans Pro', 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
  
  /* Typography - Font Sizes */
  --tpg-font-size-title-lg: 28px;
  --tpg-font-size-title-md: 26px;
  --tpg-font-size-title-sm: 24px;
  --tpg-font-size-body: 16px;
  --tpg-font-size-small: 14px;
  --tpg-font-size-badge: 12px;
  
  /* Typography - Line Heights */
  --tpg-line-height-title: 36px;
  --tpg-line-height-title-sm: 32px;
  --tpg-line-height-body: 26px;
  --tpg-line-height-button: 150%;
  --tpg-line-height-language: 50px;
  
  /* Spacing */
  --tpg-spacing-xs: 4px;
  --tpg-spacing-sm: 8px;
  --tpg-spacing-md: 16px;
  --tpg-spacing-lg: 24px;
  --tpg-spacing-xl: 32px;
  
  /* Border Radius */
  --tpg-radius-badge: 10px;
  --tpg-radius-none: 0;
  
  /* Shadows */
  --tpg-shadow-button: 0px 2px 4px rgba(0, 0, 0, 0.25);
  
  /* Transitions */
  --tpg-transition-fast: 150ms ease;
  --tpg-transition-normal: 250ms ease;
  
  /* Z-Index */
  --tpg-z-overlay: 99998;
  --tpg-z-modal: 99999;
  --tpg-z-popup: 99999;
}

/* ==========================================================================
   Base Reset & Container
   ========================================================================== */

.tpg-language-selector *,
.tpg-language-selector *::before,
.tpg-language-selector *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.tpg-language-selector {
  font-family: var(--tpg-font-body);
  font-size: var(--tpg-font-size-small);
  line-height: var(--tpg-line-height-body);
  color: var(--tpg-body-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Overlay
   ========================================================================== */

.tpg-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--tpg-overlay);
  z-index: var(--tpg-z-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--tpg-transition-normal), visibility var(--tpg-transition-normal);
}

.tpg-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

/* ==========================================================================
   Detection Popup (Language Preference Detected) - Cookie Banner Style
   ========================================================================== */

.tpg-popup {
  position: fixed;
  width: 384px;
  background: var(--tpg-selected-bg);
  z-index: var(--tpg-z-popup);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity var(--tpg-transition-normal), 
              visibility var(--tpg-transition-normal),
              transform var(--tpg-transition-normal);
  /* Cookie banner style - subtle shadow instead of dark overlay */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 
              0 2px 8px rgba(0, 0, 0, 0.1);
}

.tpg-popup.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Popup Left Border Accent */
.tpg-popup::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--tpg-orange-border);
}

/* Popup Positioning - Desktop (B3-B6): Bottom Right */
@media (min-width: 600px) {
  .tpg-popup {
    right: 24px;
    bottom: 24px;
  }
}

/* Popup Positioning - Mobile (B1-B2): Bottom Full Width */
@media (max-width: 599px) {
  .tpg-popup {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    transform: translateY(100%);
  }
  
  .tpg-popup.is-active {
    transform: translateY(0);
  }
  
  .tpg-popup::before {
    display: none;
  }
  
  .tpg-popup::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 2px;
    background: var(--tpg-orange-border);
  }
}

/* Popup Inner Content */
.tpg-popup__content {
  padding: 22px 24px 24px 24px;
}

/* Popup Header */
.tpg-popup__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

/* Popup Title */
.tpg-popup__title {
  font-family: var(--tpg-font-heading);
  font-weight: 700;
  font-size: var(--tpg-font-size-title-lg);
  line-height: 38px;
  color: var(--tpg-title-dark);
  letter-spacing: 0.00096em;
  margin: 0;
  flex: 1;
  padding-right: 16px;
}

/* B5 Title Size */
@media (min-width: 1024px) and (max-width: 1279px) {
  .tpg-popup__title {
    font-size: var(--tpg-font-size-title-md);
    line-height: 38px;
  }
}

/* B1-B4 Title Size */
@media (max-width: 1023px) {
  .tpg-popup__title {
    font-size: var(--tpg-font-size-title-sm);
    line-height: var(--tpg-line-height-title-sm);
  }
}

/* Popup Description */
.tpg-popup__description {
  font-family: var(--tpg-font-body);
  font-weight: 400;
  font-size: var(--tpg-font-size-body);
  line-height: var(--tpg-line-height-body);
  color: var(--tpg-body-text);
  letter-spacing: 0.00096em;
  margin-bottom: 12px;
}

/* Popup Checkbox Group */
.tpg-popup__checkbox-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

/* Custom Checkbox */
.tpg-checkbox {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.tpg-checkbox input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  margin: 0;
}

.tpg-checkbox__visual {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  background: var(--tpg-white);
  border: 1px solid var(--tpg-border-gray);
  border-radius: 2px;
  transition: background var(--tpg-transition-fast), border-color var(--tpg-transition-fast);
  pointer-events: none;
}

.tpg-checkbox__visual::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 6px;
  width: 5px;
  height: 10px;
  border: solid var(--tpg-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity var(--tpg-transition-fast);
}

.tpg-checkbox input:checked + .tpg-checkbox__visual {
  background: var(--tpg-orange-primary);
  border-color: var(--tpg-orange-primary);
}

.tpg-checkbox input:checked + .tpg-checkbox__visual::after {
  opacity: 1;
}

.tpg-checkbox input:focus-visible + .tpg-checkbox__visual {
  outline: 2px solid var(--tpg-orange-primary);
  outline-offset: 2px;
}

/* Checkbox Label */
.tpg-popup__checkbox-label {
  font-family: var(--tpg-font-body);
  font-weight: 400;
  font-size: var(--tpg-font-size-body);
  line-height: var(--tpg-line-height-body);
  color: var(--tpg-body-text);
  letter-spacing: 0.00096em;
  cursor: pointer;
}

/* Popup Button Group */
.tpg-popup__buttons {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ==========================================================================
   Close Button
   ========================================================================== */

.tpg-close-btn {
  position: relative;
  width: 26px;
  height: 26px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.tpg-close-btn::before,
.tpg-close-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13.33px;
  height: 2px;
  background: var(--tpg-icon-gray);
  transition: background var(--tpg-transition-fast);
}

.tpg-close-btn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.tpg-close-btn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.tpg-close-btn:hover::before,
.tpg-close-btn:hover::after {
  background: var(--tpg-body-text);
}

.tpg-close-btn:focus-visible {
  outline: 2px solid var(--tpg-orange-primary);
  outline-offset: 2px;
}

/* ==========================================================================
   Buttons - Primary & Secondary
   ========================================================================== */

/* Primary Button */
.tpg-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 24px;
  background: var(--tpg-orange-gradient);
  box-shadow: var(--tpg-shadow-button);
  border: none;
  border-radius: var(--tpg-radius-none);
  font-family: var(--tpg-font-body);
  font-weight: 600;
  font-size: var(--tpg-font-size-small);
  line-height: var(--tpg-line-height-button);
  text-align: center;
  text-transform: uppercase;
  color: var(--tpg-button-text);
  cursor: pointer;
  transition: background var(--tpg-transition-fast);
  white-space: nowrap;
}

.tpg-btn-primary:hover {
  background: var(--tpg-orange-gradient-hover);
}

.tpg-btn-primary:active {
  background: var(--tpg-orange-gradient-hover);
}

.tpg-btn-primary:focus-visible {
  outline: 2px solid var(--tpg-orange-dark);
  outline-offset: 2px;
}

.tpg-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Popup Primary Button - Wider */
.tpg-popup .tpg-btn-primary {
  min-width: 197px;
}

/* Modal Primary Button */
.tpg-modal .tpg-btn-primary {
  height: 38px;
  min-width: 129px;
}

/* Secondary Button (Text Link Style) */
.tpg-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 24px;
  background: transparent;
  border: none;
  font-family: var(--tpg-font-body);
  font-weight: 600;
  font-size: var(--tpg-font-size-small);
  line-height: var(--tpg-line-height-button);
  text-align: center;
  text-transform: uppercase;
  color: var(--tpg-orange-cancel);
  cursor: pointer;
  transition: color var(--tpg-transition-fast);
  white-space: nowrap;
}

.tpg-btn-secondary:hover {
  color: var(--tpg-orange-dark);
}

.tpg-btn-secondary:focus-visible {
  outline: 2px solid var(--tpg-orange-primary);
  outline-offset: 2px;
}

.tpg-modal .tpg-btn-secondary {
  height: 38px;
}

/* Popup secondary button uses the lighter orange in the Figma design (#F88E4E),
   distinct from the modal's Cancel (#F47A3F). */
.tpg-popup .tpg-btn-secondary {
  color: var(--tpg-orange-primary);
}

.tpg-popup .tpg-btn-secondary:hover {
  color: var(--tpg-orange-dark);
}

/* ==========================================================================
   Language Selector Modal
   ========================================================================== */

.tpg-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  background: var(--tpg-white);
  z-index: var(--tpg-z-modal);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--tpg-transition-normal), 
              visibility var(--tpg-transition-normal),
              transform var(--tpg-transition-normal);
  max-height: 90vh;
  overflow-y: auto;
}

.tpg-modal.is-active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

/* Modal Size - B6 */
@media (min-width: 1280px) {
  .tpg-modal {
    width: 590px;
  }
}

/* Modal Size - B5 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .tpg-modal {
    width: 632px;
  }
}

/* Modal Size - B4 */
@media (min-width: 840px) and (max-width: 1023px) {
  .tpg-modal {
    width: 600px;
  }
}

/* Modal Size - B3 */
@media (min-width: 600px) and (max-width: 839px) {
  .tpg-modal {
    width: 599px;
  }
}

/* Modal Size - B2 */
@media (min-width: 480px) and (max-width: 599px) {
  .tpg-modal {
    width: 557px;
  }
}

/* Modal Size - B1 */
@media (max-width: 479px) {
  .tpg-modal {
    width: calc(100% - 52px);
    max-width: 428px;
  }
}

/* Modal Content */
.tpg-modal__content {
  padding: 24px;
}

/* B4-B6 Padding */
@media (min-width: 840px) {
  .tpg-modal__content {
    padding: 24px 32px 32px;
  }
}

/* ==========================================================================
   Modal Header
   ========================================================================== */

.tpg-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

/* B3 and below: Search below title */
@media (max-width: 839px) {
  .tpg-modal__header {
    flex-direction: column;
    gap: 16px;
  }
}

/* Modal Title */
.tpg-modal__title {
  font-family: var(--tpg-font-heading);
  font-weight: 700;
  font-size: var(--tpg-font-size-title-lg);
  line-height: var(--tpg-line-height-title);
  color: var(--tpg-black);
  margin: 0;
  flex-shrink: 0;
}

/* B5-B4 Title Size */
@media (min-width: 840px) and (max-width: 1279px) {
  .tpg-modal__title {
    font-size: var(--tpg-font-size-title-md);
  }
}

/* Modal Header Row (Title + Close) */
.tpg-modal__header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

/* ==========================================================================
   Search Input
   ========================================================================== */

.tpg-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* B4-B6: Search in header row */
@media (min-width: 840px) {
  .tpg-search {
    width: 229px;
  }
}

/* B1-B3: Full width search */
@media (max-width: 839px) {
  .tpg-search {
    width: 100%;
  }
}

/* Search Icon */
.tpg-search__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.tpg-search__icon svg {
  width: 16px;
  height: 16px;
  fill: var(--tpg-icon-gray);
}

/* Search Input Field */
.tpg-search__input {
  flex: 1;
  border: none;
  border-bottom: 1px solid var(--tpg-input-underline);
  background: transparent;
  font-family: var(--tpg-font-body);
  font-weight: 400;
  font-size: var(--tpg-font-size-small);
  line-height: var(--tpg-line-height-body);
  color: var(--tpg-black);
  letter-spacing: 0.00096em;
  padding: 4px 0;
  outline: none;
  transition: border-color var(--tpg-transition-fast);
}

.tpg-search__input::placeholder {
  color: var(--tpg-placeholder);
}

.tpg-search__input:focus {
  border-bottom-color: var(--tpg-orange-primary);
}

/* Search Clear Button */
.tpg-search__clear {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--tpg-transition-fast);
}

.tpg-search__input:not(:placeholder-shown) ~ .tpg-search__clear {
  opacity: 1;
  visibility: visible;
}

.tpg-search__clear::before,
.tpg-search__clear::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1.5px;
  background: var(--tpg-icon-gray);
}

.tpg-search__clear::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.tpg-search__clear::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ==========================================================================
   Tabs
   ========================================================================== */

.tpg-tabs {
  position: relative;
  margin-bottom: 24px;
}

/* Tab List */
.tpg-tabs__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--tpg-border-gray);
}

/* Tab Item */
.tpg-tabs__item {
  flex-shrink: 0;
}

/* Tab Button */
.tpg-tabs__btn {
  position: relative;
  display: block;
  padding: 8px 0 12px;
  margin-right: 24px;
  background: transparent;
  border: none;
  font-family: var(--tpg-font-body);
  font-weight: 400;
  font-size: var(--tpg-font-size-small);
  line-height: var(--tpg-line-height-body);
  text-align: center;
  letter-spacing: 0.00096em;
  color: var(--tpg-tab-inactive);
  cursor: pointer;
  transition: color var(--tpg-transition-fast);
  white-space: nowrap;
}

/* Tab Width - B4-B6 */
@media (min-width: 840px) {
  .tpg-tabs__btn {
    min-width: 118px;
  }
}

/* Tab Width - B3-B2 */
@media (min-width: 480px) and (max-width: 839px) {
  .tpg-tabs__btn {
    min-width: 118px;
    margin-right: 8px;
  }
}

/* Tab Width - B1 */
@media (max-width: 479px) {
  .tpg-tabs__btn {
    min-width: 88px;
    margin-right: 8px;
    font-size: 13px;
  }
}

/* Tab Active Indicator */
.tpg-tabs__btn::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--tpg-orange-primary);
  transform: scaleX(0);
  transition: transform var(--tpg-transition-fast);
}

/* Tab States */
.tpg-tabs__btn:hover {
  color: var(--tpg-body-text);
}

.tpg-tabs__btn.is-active {
  color: var(--tpg-black);
}

.tpg-tabs__btn.is-active::after {
  transform: scaleX(1);
}

.tpg-tabs__btn:focus-visible {
  outline: 2px solid var(--tpg-orange-primary);
  outline-offset: 2px;
}

/* Tab Panels */
.tpg-tabs__panels {
  position: relative;
}

.tpg-tabs__panel {
  display: none;
}

.tpg-tabs__panel.is-active {
  display: block;
}

/* ==========================================================================
   Language Grid
   ========================================================================== */

.tpg-language-grid {
  display: grid;
  gap: 8px 16px;
}

/* Grid Columns - B4-B6: 3 columns */
@media (min-width: 840px) {
  .tpg-language-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Grid Columns - B1-B3: 2 columns */
@media (max-width: 839px) {
  .tpg-language-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   Language Option
   ========================================================================== */

.tpg-language-option {
  position: relative;
}

/* Language Button */
.tpg-language-option__btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  background: transparent;
  border: 1px solid transparent;
  text-align: left;
  font-family: var(--tpg-font-body);
  font-weight: 400;
  font-size: var(--tpg-font-size-small);
  line-height: var(--tpg-line-height-language);
  letter-spacing: 0.00096em;
  color: var(--tpg-language-text);
  cursor: pointer;
  transition: background var(--tpg-transition-fast), 
              border-color var(--tpg-transition-fast),
              color var(--tpg-transition-fast);
}

/* B1-B3: Smaller height */
@media (max-width: 839px) {
  .tpg-language-option__btn {
    min-height: 46px;
    padding: 10px 12px;
  }
}

/* Language Option Hover */
.tpg-language-option__btn:hover {
  background: var(--tpg-selected-bg);
  color: var(--tpg-body-text);
}

/* Language Option Focus */
.tpg-language-option__btn:focus-visible {
  outline: 2px solid var(--tpg-orange-primary);
  outline-offset: -2px;
}

/* Language Option Selected */
.tpg-language-option__btn.is-selected {
  background: var(--tpg-selected-bg);
  border-color: var(--tpg-orange-primary);
  font-weight: 600;
  color: var(--tpg-black);
}

/* Checkmark Icon (for selected state) */
.tpg-language-option__check {
  display: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.tpg-language-option__btn.is-selected .tpg-language-option__check {
  display: block;
}

.tpg-language-option__check svg {
  width: 18px;
  height: 18px;
  fill: var(--tpg-orange-primary);
}

/* Language Name */
.tpg-language-option__name {
  flex: 1;
}

/* ==========================================================================
   "Suggested for you" Badge
   ========================================================================== */

.tpg-badge {
  position: absolute;
  top: -10px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 115px;
  height: 20px;
  background: var(--tpg-orange-primary);
  border: 1px solid var(--tpg-orange-primary);
  border-radius: var(--tpg-radius-badge);
  font-family: var(--tpg-font-body);
  font-weight: 400;
  font-size: var(--tpg-font-size-badge);
  line-height: 150%;
  text-align: center;
  letter-spacing: -0.01em;
  color: var(--tpg-white);
  z-index: 1;
}

/* Badge on Language Option with Suggested */
.tpg-language-option--suggested {
  margin-top: 10px;
}

.tpg-language-option--suggested .tpg-badge {
  top: -10px;
}

/* ==========================================================================
   Modal Footer (Buttons)
   ========================================================================== */

.tpg-modal__footer {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}

/* ==========================================================================
   Search Results State
   ========================================================================== */

.tpg-search-results {
  display: none;
}

.tpg-search-results.is-active {
  display: block;
}

.tpg-search-results__header {
  position: relative;
  font-family: var(--tpg-font-body);
  font-weight: 400;
  font-size: var(--tpg-font-size-small);
  line-height: var(--tpg-line-height-body);
  color: var(--tpg-body-text);
  margin-bottom: 16px;
  padding-bottom: 12px;
  /* Faint full-width divider (Figma "Inactive line", #D8DDE1) */
  border-bottom: 1px solid var(--tpg-border-gray);
}

/* Short orange accent over the divider (Figma "Active lab": 136px, #F88E4E) */
.tpg-search-results__header::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 136px;
  max-width: 100%;
  height: 1px;
  background: var(--tpg-orange-primary);
}

.tpg-search-results__header strong {
  font-weight: 600;
  color: var(--tpg-black);
}

/* Search Results List (Single Column) */
.tpg-search-results__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ==========================================================================
   No Results State
   ========================================================================== */

.tpg-no-results {
  display: none;
  text-align: center;
  padding: 48px 24px;
}

.tpg-no-results.is-active {
  display: block;
}

.tpg-no-results__text {
  font-family: var(--tpg-font-body);
  font-weight: 400;
  font-size: var(--tpg-font-size-small);
  line-height: var(--tpg-line-height-body);
  color: var(--tpg-language-text);
}

/* Hide tabs when searching */
.tpg-modal.is-searching .tpg-tabs__list {
  display: none;
}

.tpg-modal.is-searching .tpg-tabs__panels {
  display: none;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Screen Reader Only */
.tpg-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus Visible for Keyboard Navigation */
.tpg-language-selector :focus:not(:focus-visible) {
  outline: none;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .tpg-language-selector *,
  .tpg-language-selector *::before,
  .tpg-language-selector *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   SVG Icons (Inline)
   ========================================================================== */

/* Search Icon SVG */
.tpg-icon-search {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23888C8F'%3E%3Cpath d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Checkmark Icon SVG */
.tpg-icon-check {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: var(--tpg-orange-primary);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.tpg-hidden {
  display: none !important;
}

.tpg-visible {
  display: block !important;
}

/* ==========================================================================
   Language Switcher Trigger (shortcode / manual [data-tpg-language-trigger])
   ========================================================================== */

.tpg-language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--tpg-border-gray);
  border-radius: var(--tpg-radius-none);
  font-family: var(--tpg-font-body);
  font-weight: 600;
  font-size: var(--tpg-font-size-small);
  line-height: 1;
  color: var(--tpg-body-text);
  cursor: pointer;
  transition: border-color var(--tpg-transition-fast), color var(--tpg-transition-fast);
}

.tpg-language-switcher:hover {
  border-color: var(--tpg-orange-primary);
  color: var(--tpg-black);
}

.tpg-language-switcher:focus-visible {
  outline: 2px solid var(--tpg-orange-primary);
  outline-offset: 2px;
}

.tpg-language-switcher__icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-color: var(--tpg-icon-gray);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm6.93 6h-2.95a15.65 15.65 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.92 8zM12 4c.83 1.2 1.48 2.53 1.91 4h-3.82c.43-1.47 1.08-2.8 1.91-4zM4.26 14a7.96 7.96 0 0 1 0-4h3.38a16.5 16.5 0 0 0 0 4H4.26zm.81 2h2.95c.32 1.25.78 2.45 1.38 3.56A7.99 7.99 0 0 1 5.07 16zm2.95-8H5.07a7.99 7.99 0 0 1 4.33-3.56A15.65 15.65 0 0 0 8.02 8zM12 20c-.83-1.2-1.48-2.53-1.91-4h3.82A13.6 13.6 0 0 1 12 20zm2.34-6H9.66a14.7 14.7 0 0 1 0-4h4.68a14.7 14.7 0 0 1 0 4zm.27 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56zM16.36 14a16.5 16.5 0 0 0 0-4h3.38a7.96 7.96 0 0 1 0 4h-3.38z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm6.93 6h-2.95a15.65 15.65 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.92 8zM12 4c.83 1.2 1.48 2.53 1.91 4h-3.82c.43-1.47 1.08-2.8 1.91-4zM4.26 14a7.96 7.96 0 0 1 0-4h3.38a16.5 16.5 0 0 0 0 4H4.26zm.81 2h2.95c.32 1.25.78 2.45 1.38 3.56A7.99 7.99 0 0 1 5.07 16zm2.95-8H5.07a7.99 7.99 0 0 1 4.33-3.56A15.65 15.65 0 0 0 8.02 8zM12 20c-.83-1.2-1.48-2.53-1.91-4h3.82A13.6 13.6 0 0 1 12 20zm2.34-6H9.66a14.7 14.7 0 0 1 0-4h4.68a14.7 14.7 0 0 1 0 4zm.27 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56zM16.36 14a16.5 16.5 0 0 0 0-4h3.38a7.96 7.96 0 0 1 0 4h-3.38z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.tpg-language-switcher:hover .tpg-language-switcher__icon {
  background-color: var(--tpg-orange-primary);
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  .tpg-language-selector,
  .tpg-overlay,
  .tpg-popup,
  .tpg-modal {
    display: none !important;
  }
}

/* ==========================================================================
   Host-Theme Reset (OceanWP and similar)
   --------------------------------------------------------------------------
   Some themes style every <button> / form control with their own background,
   border, box-shadow, radius and padding. Those bleed into our controls
   (e.g. the close button renders as a filled square, the secondary button as
   a filled block). These rules are scoped to the plugin container and use
   !important + the container ID so they reliably win over theme/customizer CSS
   without affecting anything outside the selector. Added in 2.1.1.
   ========================================================================== */

/* Neutralise native + theme chrome on all our controls.
   NOTE: intentionally does NOT touch text-transform/letter-spacing — those are
   set per-control and an ID-scoped reset here would override them. */
#tpg-language-selector button,
#tpg-language-selector input[type="text"],
#tpg-language-selector input[type="search"],
#tpg-language-selector input[type="checkbox"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  text-shadow: none !important;
}

/* Close button: invisible hit-area with a grey X (theme adds bg/border/radius/padding) */
#tpg-language-selector .tpg-close-btn,
#tpg-language-selector .tpg-close-btn:hover,
#tpg-language-selector .tpg-close-btn:focus,
#tpg-language-selector .tpg-close-btn:active {
  width: 26px !important;
  height: 26px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  line-height: 1 !important;
}

/* Secondary button ("No, thanks" / "Cancel"): text only, no fill */
#tpg-language-selector .tpg-btn-secondary,
#tpg-language-selector .tpg-btn-secondary:hover,
#tpg-language-selector .tpg-btn-secondary:focus,
#tpg-language-selector .tpg-btn-secondary:active {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-width: 0 !important;
  text-transform: uppercase !important;
}

/* Secondary button colour per context (popup vs modal) */
#tpg-language-selector .tpg-popup .tpg-btn-secondary {
  color: var(--tpg-orange-primary) !important;   /* #F88E4E */
}
#tpg-language-selector .tpg-modal .tpg-btn-secondary {
  color: var(--tpg-orange-cancel) !important;    /* #F47A3F */
}

/* Primary button: keep the orange gradient (theme tries to flat-fill it) */
#tpg-language-selector .tpg-btn-primary,
#tpg-language-selector .tpg-btn-primary:focus {
  background: var(--tpg-orange-gradient) !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--tpg-button-text) !important;      /* #FBFBFB */
  text-transform: uppercase !important;
}

/* Hover / click: reverse the gradient (per CTA guideline), no lift */
#tpg-language-selector .tpg-btn-primary:hover,
#tpg-language-selector .tpg-btn-primary:active {
  background: var(--tpg-orange-gradient-hover) !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--tpg-button-text) !important;
  text-transform: uppercase !important;
  transform: none !important;
}

/* Tab buttons: transparent, indicator drawn via ::after */
#tpg-language-selector .tpg-tabs__btn,
#tpg-language-selector .tpg-tabs__btn:hover,
#tpg-language-selector .tpg-tabs__btn:focus,
#tpg-language-selector .tpg-tabs__btn:active {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-width: 0;
}

/* Search clear button: ghost */
#tpg-language-selector .tpg-search__clear,
#tpg-language-selector .tpg-search__clear:hover,
#tpg-language-selector .tpg-search__clear:focus {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Search input: underline only, no theme box/background */
#tpg-language-selector .tpg-search__input {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--tpg-input-underline) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#tpg-language-selector .tpg-search__input:focus {
  border-bottom-color: var(--tpg-orange-primary) !important;
}

/* Language option buttons: reset default theme fill, but PRESERVE hover/selected */
#tpg-language-selector .tpg-language-option__btn {
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#tpg-language-selector .tpg-language-option__btn:hover {
  background-color: var(--tpg-selected-bg) !important;   /* #F0F4F7 */
}
#tpg-language-selector .tpg-language-option__btn.is-selected {
  background-color: var(--tpg-selected-bg) !important;
  border: 1px solid var(--tpg-orange-primary) !important; /* #F88E4E */
}

/* Native checkbox: keep it invisible (custom .tpg-checkbox__visual is the UI),
   so a themed input[type=checkbox] can't reappear over our control */
#tpg-language-selector .tpg-checkbox input {
  position: absolute !important;
  opacity: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Search placeholder colour (themes/Firefox can dim or recolour it) */
#tpg-language-selector .tpg-search__input::placeholder {
  color: var(--tpg-placeholder) !important;
  opacity: 1 !important;
}