/* =========================================================
   Sky Thumbnails - Liquid Glass Design Tokens (Light Only)
   ========================================================= */

:root {
  --bg-base: #eef4ff;
  --bg-gradient-top: #fafdff;
  --bg-gradient-mid: #f4f8ff;
  --bg-gradient-bottom: #edf3ff;

  --glass-surface: rgba(255, 255, 255, 0.72);
  --glass-surface-strong: rgba(255, 255, 255, 0.84);
  --glass-surface-soft: rgba(255, 255, 255, 0.58);
  --glass-border: rgba(255, 255, 255, 0.68);
  --glass-outline: rgba(148, 163, 184, 0.22);
  --glass-highlight: rgba(255, 255, 255, 0.86);

  --text-primary: rgba(8, 15, 29, 0.9);
  --text-secondary: rgba(19, 33, 59, 0.62);
  --text-soft: rgba(19, 33, 59, 0.46);

  --accent-blue: #1d7df2;
  --accent-blue-strong: #0b64d6;
  --accent-blue-soft: rgba(29, 125, 242, 0.16);

  --success: #0f9f5f;
  --warning: #d38300;
  --danger: #d04545;

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --blur-sm: 12px;
  --blur-md: 18px;
  --blur-lg: 24px;

  --shadow-soft: 0 10px 30px rgba(127, 156, 205, 0.18);
  --shadow-md: 0 18px 42px rgba(98, 130, 184, 0.2);
  --shadow-focus: 0 0 0 3px rgba(29, 125, 242, 0.22);

  --noise-opacity: 0.035;

  --ease-out: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-smooth: 320ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Back-compat aliases used across existing CSS */
  --lg-bg-base: var(--bg-base);
  --lg-glass-bg: var(--glass-surface);
  --lg-glass-bg-hover: var(--glass-surface-strong);
  --lg-glass-border: var(--glass-border);
  --lg-glass-border-highlight: var(--glass-outline);
  --lg-text-main: var(--text-primary);
  --lg-text-muted: var(--text-secondary);
  --lg-text-dim: var(--text-soft);
  --lg-accent-primary: var(--accent-blue);
  --lg-accent-hover: var(--accent-blue-strong);
  --lg-accent-glow: rgba(29, 125, 242, 0.28);
  --lg-shadow: var(--shadow-soft);
  --lg-shadow-glow: 0 0 0 1px rgba(29, 125, 242, 0.22), 0 12px 34px rgba(29, 125, 242, 0.2);
  --lg-blur: blur(var(--blur-md));
  --lg-saturate: saturate(130%);
  --glass: var(--glass-surface);

  --glass-blur: blur(var(--blur-md)) saturate(130%);
}

html,
body {
  background: linear-gradient(160deg, var(--bg-gradient-top) 0%, var(--bg-gradient-mid) 50%, var(--bg-gradient-bottom) 100%);
  color: var(--text-primary);
}

body {
  position: relative;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
}

body::before {
  background:
    radial-gradient(600px circle at 12% 8%, rgba(120, 176, 255, 0.18), transparent 64%),
    radial-gradient(540px circle at 84% 0%, rgba(175, 205, 255, 0.2), transparent 62%),
    radial-gradient(700px circle at 50% 112%, rgba(147, 207, 255, 0.22), transparent 70%);
}

body::after {
  z-index: -1;
  opacity: var(--noise-opacity);
  background-image:
    linear-gradient(rgba(125, 153, 195, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 153, 195, 0.06) 1px, transparent 1px),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.8) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 3px 3px;
}

.muted,
.text-muted {
  color: var(--text-secondary);
}

/* =========================================================
   Core Glass Surfaces
   ========================================================= */

.glass-panel,
.glass-card,
.lg-glass-card,
.modal-card,
.product-modal-card,
.admin-content,
.dashboard-sidebar,
.dashboard-topbar,
.ticket-sidebar,
.ticket-main,
.shop-sidebar,
.plan-card,
.price-card,
.service-card,
.asc-card,
.process-card,
.team-card,
.ticket-stat-card,
.admin-grant-card {
  background: linear-gradient(145deg, var(--glass-surface-strong), var(--glass-surface));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(var(--blur-md)) saturate(132%);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(132%);
  position: relative;
}

.glass-panel::before,
.glass-card::before,
.lg-glass-card::before,
.modal-card::before,
.product-modal-card::before,
.plan-card::before,
.price-card::before,
.service-card::before,
.asc-card::before,
.process-card::before,
.team-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border-top: 1px solid var(--glass-highlight);
  pointer-events: none;
}

.lg-glass-card,
.glass-panel,
.glass-card {
  border-radius: var(--radius-lg);
}

.lg-glass-card:hover,
.glass-panel:hover,
.glass-card:hover,
.plan-card:hover,
.price-card:hover,
.service-card:hover,
.asc-card:hover,
.process-card:hover,
.team-card:hover,
.ticket-sidebar-card:hover,
.admin-ticket-row:hover,
.admin-users-row:hover,
.dash-ticket-item:hover {
  border-color: rgba(29, 125, 242, 0.26);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* =========================================================
   Buttons
   ========================================================= */

.btn,
.lg-btn,
.glass-button,
button,
[role="button"] {
  transition: transform var(--ease-out), box-shadow var(--ease-out), border-color var(--ease-out), background var(--ease-out), filter var(--ease-out);
}

.btn,
.lg-btn,
.glass-button {
  border-radius: var(--radius-pill);
}

.btn:active,
.lg-btn:active,
.glass-button:active {
  transform: translateY(1px) scale(0.98);
}

.btn-primary,
.lg-btn-primary,
.glass-button.primary {
  background: linear-gradient(145deg, var(--accent-blue), var(--accent-blue-strong));
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 20px rgba(29, 125, 242, 0.32);
}

.btn-primary:hover,
.lg-btn-primary:hover,
.glass-button.primary:hover {
  filter: brightness(1.04);
  box-shadow: 0 12px 24px rgba(29, 125, 242, 0.34);
}

.btn-secondary,
.btn-outline,
.lg-btn-glass,
.glass-button.secondary,
.glass-button.ghost,
.lg-btn-danger,
.btn-danger {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(249, 252, 255, 0.72));
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
}

.lg-btn-danger,
.btn-danger {
  color: var(--danger);
}

.btn-secondary:hover,
.btn-outline:hover,
.lg-btn-glass:hover,
.glass-button.secondary:hover,
.glass-button.ghost:hover,
.lg-btn-danger:hover,
.btn-danger:hover {
  border-color: rgba(29, 125, 242, 0.26);
  box-shadow: var(--shadow-soft);
}

.btn:focus-visible,
.lg-btn:focus-visible,
.glass-button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* =========================================================
   Inputs / Controls
   ========================================================= */

.lg-input,
.glass-input,
.glass-textarea,
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="url"],
select,
textarea {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.92), rgba(246, 250, 255, 0.78));
  border: 1px solid rgba(148, 163, 184, 0.32);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  transition: border-color var(--ease-out), box-shadow var(--ease-out), background var(--ease-out);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-soft);
}

.lg-input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
  border-color: rgba(29, 125, 242, 0.44);
  background: rgba(255, 255, 255, 0.98);
}

/* =========================================================
   Pills / Tags / Badges / Dividers
   ========================================================= */

.glass-pill,
.ticket-filter-pill,
.admin-ticket-filter-pills button,
.filter-btn,
.pill-option,
.ticket-section-pill {
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.3);
  color: var(--text-secondary);
}

.glass-pill:hover,
.ticket-filter-pill:hover,
.admin-ticket-filter-pills button:hover,
.filter-btn:hover,
.pill-option:hover,
.ticket-section-pill:hover {
  border-color: rgba(29, 125, 242, 0.34);
  color: var(--accent-blue-strong);
  transform: translateY(-1px);
}

.glass-pill.active,
.ticket-filter-pill.active,
.admin-ticket-filter-pills button.active,
.filter-btn.active,
.pill-option.active,
.ticket-section-pill.active {
  background: linear-gradient(145deg, rgba(29, 125, 242, 0.24), rgba(29, 125, 242, 0.1));
  color: var(--accent-blue-strong);
  border-color: rgba(29, 125, 242, 0.36);
}

.glass-badge,
.lg-badge,
.ticket-card-unread,
.ticket-unread-dot {
  background: linear-gradient(140deg, var(--accent-blue), #2a8cff);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 18px rgba(29, 125, 242, 0.28);
}

.lg-tag,
.glass-status {
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
}

.lg-tag-open,
.status-open {
  color: var(--success);
  background: rgba(15, 159, 95, 0.12);
  border-color: rgba(15, 159, 95, 0.24);
}

.lg-tag-pending,
.status-pending {
  color: var(--warning);
  background: rgba(211, 131, 0, 0.14);
  border-color: rgba(211, 131, 0, 0.26);
}

.lg-tag-closed,
.status-closed {
  color: var(--danger);
  background: rgba(208, 69, 69, 0.12);
  border-color: rgba(208, 69, 69, 0.26);
}

.glass-divider,
hr {
  border: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.25);
}

/* =========================================================
   Lists / Rows
   ========================================================= */

.glass-list-item,
.ticket-sidebar-card,
.ticket-list-item,
.admin-ticket-row,
.admin-users-row,
.admin-chat-member-row,
.dash-ticket-item,
.notif-item {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.94), rgba(246, 250, 255, 0.72));
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: var(--radius-md);
  transition: transform var(--ease-out), border-color var(--ease-out), box-shadow var(--ease-out), background var(--ease-out);
}

.glass-list-item.selected,
.ticket-sidebar-card.active,
.ticket-list-item.active,
.admin-ticket-row.selected,
.admin-users-row.selected {
  border-color: rgba(29, 125, 242, 0.42);
  box-shadow: inset 0 0 0 1px rgba(29, 125, 242, 0.25), 0 12px 24px rgba(29, 125, 242, 0.16);
}

/* =========================================================
   Navigation / Dropdown / Tooltip
   ========================================================= */

.glass-nav {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.86), rgba(247, 251, 255, 0.7));
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(var(--blur-md)) saturate(128%);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(128%);
}

.nav-links a,
.logo,
.nav-cta,
.nav-action-btn {
  color: var(--text-primary);
}

.nav-links a:hover,
.nav-links a.active,
.nav-link.active {
  color: var(--accent-blue-strong);
}

.notif-dropdown,
.context-menu,
.dropdown-menu,
[role="menu"],
.tooltip,
[data-tooltip] {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.94), rgba(248, 252, 255, 0.76));
  border: 1px solid rgba(148, 163, 184, 0.26);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(var(--blur-sm)) saturate(125%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(125%);
}

/* =========================================================
   Modal / Toast / Overlay
   ========================================================= */

.modal-overlay,
.glass-backdrop {
  background: linear-gradient(rgba(246, 250, 255, 0.58), rgba(238, 246, 255, 0.7));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-card,
.modal,
.glass-modal,
.product-modal-card,
.auth-modal,
.rules-modal,
.settings-modal,
.block-modal,
.finalize-modal-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(245, 250, 255, 0.82));
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(102, 131, 180, 0.24);
}

.modal-close,
.admin-image-viewer-close {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.26);
  color: var(--text-primary);
}

#lg-toast-container,
#toast-container {
  z-index: 11000;
}

.lg-toast,
.toast {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.96), rgba(247, 252, 255, 0.86));
  border: 1px solid rgba(148, 163, 184, 0.28);
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
}

/* =========================================================
   Chat Safety + Selection + Media
   ========================================================= */

.ticket-msg,
.admin-chat-message,
.admin-ticket-chat-body .ticket-msg,
.ticket-msg-inner,
.admin-chat-bubble,
.ticket-msg-text,
.admin-chat-body,
#ticket-chat-messages,
#admin-chat-messages,
#admin-ticket-chat-messages {
  user-select: text;
}

.ticket-msg-text,
.admin-chat-bubble,
.admin-chat-body,
.ticket-msg-image,
.admin-chat-image img,
.ticket-msg-file,
.admin-file-card {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ticket-msg-image,
.admin-chat-image img,
.hero-thumb img,
.thumb-card img,
.plan-img,
#modal-img {
  border-radius: 14px;
  max-width: 100%;
}

/* =========================================================
   Motion + Scrollbars
   ========================================================= */

@keyframes glass-fade-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-card,
.product-modal-card,
.admin-panel.active,
.dashboard-tab.active,
.shop-main {
  animation: glass-fade-up 220ms ease-out;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: rgba(221, 232, 247, 0.65);
  border-radius: var(--radius-pill);
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(124, 161, 220, 0.65), rgba(95, 136, 206, 0.72));
  border-radius: var(--radius-pill);
  border: 2px solid rgba(238, 244, 253, 0.92);
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(94, 140, 217, 0.78), rgba(70, 122, 207, 0.8));
}

/* =========================================================
   Responsive polish
   ========================================================= */

@media (max-width: 900px) {
  .glass-nav {
    backdrop-filter: blur(var(--blur-sm)) saturate(122%);
    -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(122%);
  }

  .lg-glass-card,
  .glass-panel,
  .glass-card,
  .modal-card,
  .product-modal-card {
    border-radius: 18px;
  }
}