:root {
  --accent-color: #d35f4c;
  --background-color: #262626;
  --secondary-background-color: #3a3a3a;
  --primary-color: #ffffff;
  --secondary-color: #d5d5d5;
  --danger-color: #ff2600;
  --focus-color: #ff8a75;
  --focus-color-rgb: 255, 138, 117;
  
  --primary-font: Arial, Helvetica, sans-serif;
  --secondary-font: Arial, Helvetica, sans-serif;
  --heading-font: Arial, Helvetica, sans-serif;
  
  --xSmall: 2vh;
  --small: 2.5vh;
  --medium: 3vh;
  --large: 4.5vh;
  --xLarge: 5vh;
  --xxLarge: 6vh;
  --input-radius: 1.78vh;
  --button-radius: 4.63vh;
  --program-radius: 1.85vh;
  --settings-item-radius: 1.85vh;
  --paddingXSmall: 0.93vh; /* 4 */
  --paddingSmall: 1.85vh; /* 8 */
  --paddingMedium: 3.7vh; /* 16 */
  --paddingLarge: 5.56vh; /* 24 */
  --paddingXLarge: 7.41vh; /* 32 */
  
  /* Global popup variables */
  --popup-overlay-bg: rgba(0, 0, 0, 0.8);
  --popup-bg: rgba(30, 30, 30, 0.95);
  --popup-border-radius: 2vh;
  --popup-padding: 3vh;
  --popup-width: 50vh;
  --popup-shadow: 0 0 3vh rgba(0, 0, 0, 0.5);
  --popup-button-radius: 5vh;
}

/* Global font settings */
html, body {
  font-family: var(--primary-font);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
}

.custom-button {
  font-family: var(--secondary-font);
  color: var(--primary-color);
  text-transform: uppercase !important;
  font-weight: 600;
  background-color: var(--accent-color);
  min-height: 7vh;  
  min-width: 15vh;
  border-radius: 4.63vh;
  font-size: var(--xSmall);
  padding: 2vh 4vh;
  width: fit-content;
  width: -moz-fit-content;
  border: 0.4vh solid transparent;
  margin-top: 0;
}
.custom-button.focused,
.custom-button:focus,
.custom-button:hover {
  outline: none;
  border: 0.4vh solid white;  
}
label {
  font-size: var(--xSmall);
  color: var(--secondary-color);
  padding-bottom: var(--paddingSmall);
}
input {
  font-family: var(--primary-font);
  padding: 1.5vh;
  font-size: var(--medium);
  border: none;
  border-radius: 1.78vh;
  background-color: var(--secondary-background-color);
  color: var(--primary-color);
  height: 5vh;
  margin-bottom: var(--paddingSmall);
  min-height: 7vh;
  min-width: 15vh;
}
.icon-user::before { content: '\f007'; } 
.icon-lock::before { content: '\f023'; }
.icon-subscription::before { content: '\f02d'; }
.icon-device::before { content: '\f10b'; }
.icon-language::before { content: '\f1ab'; }
.icon-shop::before { content: '\f07a'; }

.popup-overlay,
.global-popup-overlay,
.guest-message-overlay,
.confirmation-dialog,
.modal-overlay,
.auth-error-overlay,
.channel-restricted-overlay,
.avatar-selection-overlay,
.device-limit-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
}

.popup-overlay.active,
.global-popup-overlay.active,
.guest-message-overlay.active,
.confirmation-dialog.active,
.modal-overlay.active,
.auth-error-overlay.active,
.channel-restricted-overlay.active,
.avatar-selection-overlay.active,
.device-limit-popup-overlay.active {
  opacity: 1;
  visibility: visible;
}

.popup-content,
.global-popup-content,
.guest-message,
.confirmation-content,
.modal-content,
.auth-error-overlay .guest-message,
.device-limit-popup-content {
  background-color: var(--secondary-background-color, #1a1a1a);
  border-radius: 2vh;
  padding: 5vh;
  width: 70vh;
  max-width: 80%;
  text-align: center;
  box-shadow: 0 0 4vh rgba(0, 0, 0, 0.5);
  transform: scale(0.9);
}


.popup-title,
.global-popup-title,
.guest-message h3,
.confirmation-content h3,
.modal-content h3,
.modal-header h2,
.auth-error-overlay h3,
.delete-device-content h3 {
  font-size: var(--medium);
  color: var(--primary-color);
  margin: 0;
  text-align: center;
  font-weight: 1000;
}

.global-popup-message {
    font-size: var(--small);
  color: var(--primary-color);
  margin: 2.5vh;
  line-height: 1.6;
  text-align: center;
  opacity: 0.9;
}

.popup-message,
.guest-message p,
.confirmation-content p,
.modal-content p,
.modal-body,
.auth-error-overlay p {
  font-size: var(--small);
  color: var(--primary-color);
  /* margin-bottom: 0; */
  line-height: 1.6;
  text-align: center;
  opacity: 0.9;
}

.popup-actions,
.global-popup-actions,
.confirmation-actions,
.modal-footer {
  display: flex;
  justify-content: center;
  margin-top: 0;
}

.popup-actions > *,
.global-popup-actions > *,
.confirmation-actions > *,
.modal-footer > * {
  margin-left: 1.5vh;
  margin-right: 1.5vh;
}
.popup-actions > *:first-child,
.global-popup-actions > *:first-child,
.confirmation-actions > *:first-child,
.modal-footer > *:first-child {
  margin-left: 0;
}
.popup-actions > *:last-child,
.global-popup-actions > *:last-child,
.confirmation-actions > *:last-child,
.modal-footer > *:last-child {
  margin-right: 0;
}

.device-limit-popup-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw;
  height: 100vh;
  background: var(--popup-overlay-bg, rgba(0,0,0,0.85));
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s;
}

.device-limit-popup-overlay.active {
  opacity: 1;
  visibility: visible;
}

.device-limit-popup-content {
  background: var(--popup-bg, #232323);
  border-radius: 3vh;
  box-shadow: var(--popup-shadow, 0 0 3vh rgba(0,0,0,0.5));
  padding: 4vh 3vh 3vh 3vh;
  min-width: 60vh;
  max-width: 98vw;
  width: 70vh;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: auto;
  max-height: 95vh;
}

.device-limit-header h3 {
  font-size: 2.7vh;
  color: var(--primary-color);
  margin-bottom: 1.5vh;
  font-weight: bold;
  letter-spacing: 0.01em;
  line-height: 1.2;
  margin-top: 0;
}

.device-limit-count {
  font-size: 2.7vh;
  color: var(--accent-color);
  font-weight: bold;
  margin-left: 0.5vh;
}

.device-limit-message {
  font-size: 2vh;
  color: var(--secondary-color);
  margin-bottom: 2.5vh;
  line-height: 1.5;
}

.device-limit-current-block {
  margin-bottom: 2vh;
  position: relative;
  z-index: 3;
}

.device-limit-device-row {
  display: flex;
  align-items: center;
  background-color: var(--secondary-background-color);
  border-radius: 2vh;
  margin: 2vh 0;
  padding: 1.7vh 2vh 1.7vh 1.5vh;
  font-size: 2vh;
  color: var(--primary-color);
  outline: none;
  min-height: 7vh;
  box-shadow: none;
  border: none;
  position: relative;
  border: 0.4vh solid transparent
}

.device-limit-device-row.current-device {
  background-color: var(--secondary-background-color);
  border: 0.4vh solid var(--accent-color);
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.08);
  margin: 0
}

.current-device.focused,
.current-device:focus,
.current-device:hover
.device-limit-device-row:focus,
.device-limit-device-row.focused,
.device-limit-device-row:hover {
  color: #fff;
  border: 0.4vh solid white;
}

.device-limit-device-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 auto;
  text-align: left;
  margin-left: 1vh;
  justify-content: center;
  height: 100%;
  margin: 1vh 0;
}

.device-limit-device-name {
  font-weight: bold;
  font-size: 2vh;
  color: var(--primary-color);
  margin-bottom: 0.5vh;
}

.device-limit-device-os {
  font-size: 1.7vh;
  color: var(--secondary-color);
  margin-bottom: 0.5vh;
}

.device-limit-current-label {
  font-size: 1.7vh;
  color: var(--danger-color);
  margin-top: 0.5vh;
  font-weight: bold;
  display: block;
  letter-spacing: 0.01em;
}

.device-limit-list {
  margin: 0;
  min-height: auto;
  overflow-y: auto;
  background: transparent;
  border-radius: 1vh;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-color) rgba(255,255,255,0.05);
}

.device-limit-list::-webkit-scrollbar {
  width: 1.2vh;
  background: rgba(255,255,255,0.05);
  border-radius: 1vh;
}

.device-limit-list::-webkit-scrollbar-thumb {
  background: var(--accent-color);
  border-radius: 1vh;
}

.device-limit-list::-webkit-scrollbar-thumb:hover {
  background: var(--focus-color);
}

.remove-device-btn {
  margin: 0;
  background: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3vh;
  margin-left: auto;
  margin-right: 0.5vh;
  cursor: pointer;
  outline: none;
  align-self: center; 
  min-height: 5vh;
  max-height: 5vh;
  padding: 0;
}

/* .remove-device-btn:focus,
.remove-device-btn.focused {
  background: grey;
  outline: none;
} */

.remove-x-icon {
  font-size: 3.2vh;
  font-weight: bold;
  line-height: 1;
  pointer-events: none;
}

.device-limit-actions {
  margin-top: 2vh;
  display: flex;
  justify-content: center;
}

.device-limit-cancel {
  background: var(--secondary-background-color, #3a3a3a);
  color: var(--primary-color);
  border: none;
  border-radius: var(--popup-button-radius, 5vh);
  font-size: 2vh;
  padding: 1.5vh 4vh;
  margin: 0 1vh;
  min-width: 15vh;
  cursor: pointer;
}

.device-limit-cancel:focus,
.device-limit-cancel.focused,
.device-limit-cancel:hover {
  background: var(--focus-color, #ff8a75);
  color: #fff;
  outline: none;
}

[data-error="true"] .popup-title,
[data-error="true"] .global-popup-title,
.error-popup h3,
.error-style {
  color: var(--danger-color) !important;
}

.global-popup-button.clicked {
  transform: scale(0.95);
  opacity: 0.8;
  border: none;
  outline: none;
}

.global-popup-button {
  margin: 2vh;
  margin-top: 0;
  margin-bottom: 0;
}

.password-toggle {
  position: absolute;
  right: 1.5vh;
  top: 25%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 2.5vh;
  color: var(--secondary-color);
  padding: 1vh;
  border-radius: 50%;
  z-index: 2;
  background-color: transparent;
}

.notification-dot {
  position: absolute;
  top: 0.9vh;
  right: 0.9vh;
  width: 1vh;
  height: 1vh;
  background-color: var(--danger-color);
  border-radius: 50%;
  outline: none;
}

@keyframes toggle-pulse {
  0% {
    transform: translateY(-50%) scale(1);
  }
  50% {
    transform: translateY(-50%) scale(1.3);
    color: var(--accent-color);
  }
  100% {
    transform: translateY(-50%) scale(1);
  }
}

.password-toggle.toggled {
  animation: toggle-pulse 0.3s ease;
}

.password-toggle:focus,
.password-toggle.focused,
.password-toggle:hover {
  background-color: rgba(var(--focus-color-rgb, 255, 138, 117), 0.3);
  color: var(--primary-color);
  border: 0.2vh solid var(--focus-color, #ff8a75);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 0 2vh rgba(var(--focus-color-rgb, 255, 138, 117), 0.5);
  outline: none;
}

/* Grid Layout Styles - TV Compatible using flexbox */
.layout-grid {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -webkit-align-content: flex-start;
  -moz-align-content: flex-start;
  -ms-align-content: flex-start;
  align-content: flex-start;
  width: 100%;
  overflow: visible;
  padding: 4vh 4vh;
}

.layout-grid .program-card {
  width: 22.4% !important;
  margin: 0 1.3% 2vh 1.3% !important; 
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-shrink: 0;
  flex-shrink: 0;
}

/* Grid layout specific focus styles */
.layout-grid .program-card.focused {
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
  z-index: 10;
  position: relative;
}