/**
 * iOS 27 Futuristic Theme - RandomVIP1K.Shop
 * Features: Liquid Glassmorphism, Iridescent Aura Sheen & Elastic Spring Physics
 */

/* ==========================================================================
   1. iOS ELASTIC SPRING BUTTONS & CONTROLS (Nhún Lò Xo Chuẩn iOS)
   ========================================================================== */
button,
.btn,
a.btn,
input[type="submit"],
input[type="button"],
.pwa-btn-install,
.pwa-install-trigger-btn,
.custom-switch label,
.page-link,
.badge-action {
  transition: transform 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
              box-shadow 0.3s ease, 
              filter 0.2s ease,
              background-color 0.2s ease !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none;
  position: relative;
}

/* Hover nhẹ nhàng */
button:hover,
.btn:hover,
a.btn:hover,
.pwa-install-trigger-btn:hover {
  transform: scale(1.025) translateY(-1px);
  filter: brightness(1.06);
}

/* Khi bấm chạm vào (Nhún lò xo cực nịnh tay) */
button:active,
.btn:active,
a.btn:active,
input[type="submit"]:active,
input[type="button"]:active,
.pwa-btn-install:active,
.pwa-install-trigger-btn:active,
.page-link:active {
  transform: scale(0.92) !important;
  transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
  filter: brightness(0.92) !important;
}

/* ==========================================================================
   2. LIQUID GLASSMORPHISM 2026+ (Kính Mờ Siêu Thực - Tối Ưu 60-120FPS)
   ========================================================================== */
.card,
.modal-content,
.iq-card,
.iq-alert-text {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(10px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(150%) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05), 
              0 0 0 1px rgba(255, 255, 255, 0.4) inset !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease !important;
  position: relative;
}

/* Dark Mode Glass */
body.dark .card,
body.dark .modal-content,
body.dark .iq-card,
body.dark .iq-alert-text {
  background: rgba(15, 23, 42, 0.82) !important;
  backdrop-filter: blur(10px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(150%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 14px 40px -8px rgba(0, 0, 0, 0.45), 
              0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
}

/* ==========================================================================
   3. HÀO QUANG ÁNH KIM VIỀN CARD (Iridescent Aurora Border Sheen)
   ========================================================================== */
.card:hover,
.iq-card:hover {
  transform: translateY(-3px);
  border-color: rgba(96, 165, 250, 0.65) !important;
  box-shadow: 0 18px 45px -5px rgba(37, 99, 235, 0.18), 
              0 0 25px rgba(56, 189, 248, 0.22),
              0 0 0 1px rgba(147, 197, 253, 0.5) inset !important;
}

body.dark .card:hover,
body.dark .iq-card:hover {
  border-color: rgba(96, 165, 250, 0.5) !important;
  box-shadow: 0 20px 50px -8px rgba(0, 0, 0, 0.7), 
              0 0 30px rgba(59, 130, 246, 0.28),
              0 0 0 1px rgba(255, 255, 255, 0.18) inset !important;
}

/* Ánh kim chạy viền lấp lánh (Shimmer Wave Effect) */
@keyframes iosAuraGlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.ios-aura-border {
  position: relative;
  border: double 1.5px transparent !important;
  border-radius: 20px !important;
  background-image: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.85)), 
                    radial-gradient(circle at top left, #38bdf8, #818cf8, #c084fc) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
}

/* ==========================================================================
   4. BẢNG BIỂU & FORM NỔI PHONG CÁCH GROUPED LIST IOS (Siêu Mượt 60FPS)
   ========================================================================== */
.table {
  border-collapse: separate !important;
  border-spacing: 0 4px !important;
}

.table tbody tr {
  background: rgba(255, 255, 255, 0.75) !important;
  border-radius: 12px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

body.dark .table tbody tr {
  background: rgba(30, 41, 59, 0.75) !important;
}

.table tbody tr:hover {
  background: rgba(59, 130, 246, 0.12) !important;
}

/* Input Fields */
.form-control,
.form-select {
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  background: rgba(255, 255, 255, 0.85) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

body.dark .form-control,
body.dark .form-select {
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f1f5f9 !important;
}

.form-control:focus,
.form-select:focus {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25) !important;
}

body.dark .form-control:focus,
body.dark .form-select:focus {
  background: rgba(15, 23, 42, 0.98) !important;
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3) !important;
}
  background: rgba(15, 23, 42, 0.9) !important;
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3) !important;
}

/* ==========================================================================
   5. iOS 27 SIDEBAR SUBMENU & FLUID ACCORDION (Menu Sổ Xuống Chuẩn iOS)
   ========================================================================== */

/* Header Menu Cha khi mở / active: Kính mờ siêu sang (hết bị khối trắng cục mịch) */
.sidebar-default .iq-sidebar-menu .side-menu > li > a {
  border-radius: 12px !important;
  transition: background 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
              transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
              box-shadow 0.3s ease,
              border-color 0.3s ease !important;
  color: #ffffff !important;
}

.sidebar-default .iq-sidebar-menu .side-menu > li.active > a,
.sidebar-default .iq-sidebar-menu .side-menu > li > a[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.24) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14), inset 0 1px 1px rgba(255, 255, 255, 0.35) !important;
  border-radius: 14px !important;
  transform: scale(1.01) !important;
}

body.dark .sidebar-default .iq-sidebar-menu .side-menu > li.active > a,
body.dark .sidebar-default .iq-sidebar-menu .side-menu > li > a[aria-expanded="true"] {
  background: rgba(15, 23, 42, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.12) !important;
}

/* Submenu Trong Suốt Liền Mạch Tinh Tế - Hoàn Toàn Không Chớp Nháy */
.iq-sidebar-menu .side-menu .submenu,
.iq-sidebar-menu .side-menu .submenu.collapsing,
.iq-sidebar-menu .side-menu .submenu.collapse.show {
  list-style: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 0 4px 14px !important;
  margin: 0 !important;
}

.iq-sidebar-menu .side-menu .submenu.collapsing {
  transition: height 0.28s cubic-bezier(0.25, 1, 0.5, 1) !important;
  overflow: hidden !important;
}

/* Dark mode cho submenu */
body.dark .iq-sidebar-menu .side-menu .submenu {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Từng dòng mục con trong submenu */
.iq-sidebar-menu .side-menu .submenu li {
  margin: 2px 0 !important;
}

.iq-sidebar-menu .side-menu .submenu li a {
  border-radius: 10px !important;
  padding: 8px 12px !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

/* Khi di chuột / chạm vào mục con */
.iq-sidebar-menu .side-menu .submenu li a:hover,
.iq-sidebar-menu .side-menu .submenu li.active a {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fde047 !important;
  transform: translateX(4px) !important;
  border: none !important;
  box-shadow: none !important;
}

/* Khi bấm chạm vào mục con: Độ lún lò xo iOS */
.iq-sidebar-menu .side-menu .submenu li a:active {
  transform: scale(0.96) !important;
  transition: transform 0.1s ease !important;
}

/* Icon / Thumbnail trong submenu bo góc tròn squircle Apple */
.iq-sidebar-menu .side-menu .submenu li a img {
  border-radius: 8px !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.iq-sidebar-menu .side-menu .submenu li a:hover img {
  transform: scale(1.12);
}

/* Mũi tên xoay mượt mà 90 độ chuẩn iOS */
.iq-sidebar-menu .side-menu li > a .arrow-active,
.iq-sidebar-menu .side-menu li > a svg.iq-arrow-right {
  display: inline-block !important;
  opacity: 1 !important;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
  transform-origin: center center;
  margin-left: auto;
}

.iq-sidebar-menu .side-menu li > a[aria-expanded="true"] .arrow-active,
.iq-sidebar-menu .side-menu li > a[aria-expanded="true"] svg.iq-arrow-right,
.iq-sidebar-menu .side-menu li.active > a .arrow-active {
  transform: rotate(90deg) !important;
}



/* ==========================================================================
   6. FULL LIQUID GLASS SELECT2, DROPDOWNS & STAT CARDS (Toàn Bộ Kính Lỏng iOS 27)
   ========================================================================== */

/* 1. Khung Select Box Chọn (Nền tảng, Phân loại, Dịch vụ...) */
.select2-container--bootstrap4 .select2-selection--single,
.select2-container--default .select2-selection--single,
.select2-selection,
select.form-control {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(10px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(150%) !important;
  border-radius: 14px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.9) !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  padding: 8px 14px !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.dark .select2-container--bootstrap4 .select2-selection--single,
body.dark .select2-container--default .select2-selection--single,
body.dark select.form-control {
  background: rgba(15, 23, 42, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
}

.select2-container--bootstrap4.select2-container--focus .select2-selection--single,
.select2-container--bootstrap4.select2-container--open .select2-selection--single,
select.form-control:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3.5px rgba(56, 189, 248, 0.28), 0 8px 25px rgba(56, 189, 248, 0.18) !important;
  transform: scale(1.008);
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
  line-height: 30px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #0f172a !important;
  padding-left: 0 !important;
}

body.dark .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
  color: #f1f5f9 !important;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
  top: 11px !important;
  right: 14px !important;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.select2-container--bootstrap4.select2-container--open .select2-selection__arrow {
  transform: rotate(180deg) !important;
}

/* 2. Menu Xổ Xuống (Select2 Dropdown) - Kính Lỏng Siêu Mượt */
.select2-dropdown,
.dropdown-menu {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(12px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
  border-radius: 18px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.15), 
              0 0 20px rgba(56, 189, 248, 0.15), 
              inset 0 1px 2px rgba(255, 255, 255, 0.95) !important;
  overflow: hidden !important;
  padding: 8px !important;
  margin-top: 8px !important;
  animation: iosDropdownSpring 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 99999 !important;
}

body.dark .select2-dropdown,
body.dark .dropdown-menu {
  background: rgba(15, 23, 42, 0.94) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 
              0 0 25px rgba(59, 130, 246, 0.2), 
              inset 0 1px 1px rgba(255, 255, 255, 0.12) !important;
}

@keyframes iosDropdownSpring {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Ô tìm kiếm trong Dropdown */
.select2-search--dropdown {
  padding: 6px 6px 10px 6px !important;
}

.select2-search--dropdown .select2-search__field {
  background: rgba(255, 255, 255, 0.9) !important;
  border-radius: 12px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
  padding: 9px 14px !important;
  font-size: 13.5px !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  transition: border-color 0.2s ease !important;
}

body.dark .select2-search--dropdown .select2-search__field {
  background: rgba(30, 41, 59, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #f8fafc !important;
}

/* Các hàng lựa chọn trong danh sách */
.select2-results__option {
  border-radius: 12px !important;
  margin: 3px 0 !important;
  padding: 10px 14px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

body.dark .select2-results__option {
  color: #e2e8f0 !important;
}

/* Khi di chuột / chạm vào hàng */
.select2-container--bootstrap4 .select2-results__option--highlighted,
.select2-results__option--highlighted,
.select2-results__option:hover {
  background: rgba(56, 189, 248, 0.18) !important;
  color: #0284c7 !important;
  transform: translateX(4px) scale(1.008) !important;
}

body.dark .select2-container--bootstrap4 .select2-results__option--highlighted,
body.dark .select2-results__option:hover {
  background: rgba(56, 189, 248, 0.22) !important;
  color: #38bdf8 !important;
}

/* Hàng đang được chọn: Viên thuốc Gradient iOS */
.select2-container--bootstrap4 .select2-results__option[aria-selected="true"],
.select2-results__option[aria-selected="true"] {
  background: linear-gradient(135deg, #2563eb, #0ea5e9) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4) !important;
}

/* 3. Thẻ Trạng Thái & Thống Kê (TRẠNG THÁI, THỜI GIAN TB, GIÁ MỖI 1000...) */
.smm-stat-card {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(10px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(150%) !important;
  border-radius: 16px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.9) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.dark .smm-stat-card {
  background: rgba(15, 23, 42, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.38), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
}

.smm-stat-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(56, 189, 248, 0.6) !important;
  box-shadow: 0 10px 24px rgba(56, 189, 248, 0.22) !important;
}

.smm-stat-icon-wrap {
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.smm-stat-card:hover .smm-stat-icon-wrap {
  transform: scale(1.1) rotate(4deg);
}

/* 4. Toàn Bộ Input & Textarea Kính Mờ */
input.form-control,
textarea.form-control,
.smm-paste-btn {
  background: rgba(255, 255, 255, 0.88) !important;
  border-radius: 14px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04), inset 0 1px 1px rgba(255, 255, 255, 0.85) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

body.dark input.form-control,
body.dark textarea.form-control,
body.dark .smm-paste-btn {
  background: rgba(15, 23, 42, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f8fafc !important;
}

input.form-control:focus,
textarea.form-control:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3.5px rgba(56, 189, 248, 0.28), 0 6px 20px rgba(56, 189, 248, 0.18) !important;
}

/* 5. Nút Đặt Hàng & Nút Dán Kính Lỏng Siêu Cấp */
.smm-submit-btn.active {
  background: linear-gradient(135deg, #2563eb, #0ea5e9, #06b6d4) !important;
  background-size: 200% 200% !important;
  animation: iosAuraGlow 4s ease infinite !important;
  border: none !important;
  box-shadow: 0 6px 22px rgba(37, 99, 235, 0.45) !important;
  border-radius: 14px !important;
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.smm-submit-btn.active:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.6) !important;
}

.smm-submit-btn.active:active {
  transform: scale(0.94) !important;
}

/* 6. Thanh Cuộn Kính Siêu Mảnh iOS */
.select2-results__options::-webkit-scrollbar,
.dropdown-menu::-webkit-scrollbar,
body::-webkit-scrollbar,
html::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

.select2-results__options::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
html::-webkit-scrollbar-track {
  background: transparent !important;
}

.select2-results__options::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.45) !important;
  border-radius: 10px !important;
}

.select2-results__options::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
html::-webkit-scrollbar-thumb:hover {
  background: rgba(96, 165, 250, 0.85) !important;
}

/* 7. Mobile Hardware Acceleration & Ultra Smooth Scrolling */
@media (max-width: 768px) {
  .card:hover,
  .iq-card:hover,
  .smm-stat-card:hover {
    transform: none !important;
  }
  .card,
  .modal-content,
  .iq-card,
  .iq-alert-text {
    backdrop-filter: blur(8px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
  }
}