/* ═══════════════════════════════════════════════════════════════════
   HomeTechnify — UNIFIED HOME PAGE THEME
   Propagates index.html's luxury design language across:
   user-portal, provider-portal, admin, customer-profile,
   provider-profile, provider-earnings, booking-detail, chat,
   experts, careers, user-auth, provider-register

   Inherits home page tokens:
   • Cormorant (luxury serif) + Montserrat (modern sans)
   • Blue #0095FF accent, white surface, soft cards
   • 24px card radius, 50px button radius
   • Premium blue-glow shadows
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --ht-blue: #0095FF;
  --ht-blue-dark: #006FCC;
  --ht-blue-glow: rgba(0, 149, 255, 0.35);
  --ht-blue-light: #E8F4FF;
  --ht-black: #111827;
  --ht-gray-700: #374151;
  --ht-gray-500: #6B7280;
  --ht-gray-300: #D1D5DB;
  --ht-gray-100: #F3F4F6;
  --ht-white: #FFFFFF;
  --ht-surface: #F8FAFF;
  --ht-border: rgba(0, 0, 0, 0.08);

  --ht-f-head: 'Cormorant', Georgia, serif;
  --ht-f-body: 'Montserrat', system-ui, sans-serif;

  --ht-r-card: 24px;
  --ht-r-btn: 50px;
  --ht-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
  --ht-shadow-card-hover: 0 12px 40px rgba(0, 149, 255, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
  --ht-shadow-blue: 0 8px 32px rgba(0, 149, 255, 0.3);
  --ht-shadow-blue-hover: 0 16px 48px rgba(0, 149, 255, 0.45);
}

/* ═══════════════════════════════════════════════════════════════════
   BODY + GLOBAL — apply on .ht-themed body (added via JS or HTML)
   ═══════════════════════════════════════════════════════════════════ */

body.ht-themed,
body.premium-3d.ht-themed {
  font-family: var(--ht-f-body) !important;
  background: var(--ht-surface) !important;
  color: var(--ht-gray-700) !important;
  line-height: 1.65;
  position: relative;
  overflow-x: hidden;
}

/* Remove premium-3d's gradient blob background — replace with subtle home-style pattern */
body.premium-3d.ht-themed::before,
body.premium-3d.ht-themed::after {
  display: none !important;
}

/* Subtle home-page-style background pattern */
body.ht-themed::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 60vh;
  background:
    radial-gradient(circle at 20% 30%, rgba(0, 149, 255, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(99, 102, 241, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   TYPOGRAPHY — Cormorant headings on portals
   ═══════════════════════════════════════════════════════════════════ */

body.ht-themed h1,
body.ht-themed .hero-premium h1,
body.ht-themed .page-header h1,
body.ht-themed .greeting-card h1,
body.ht-themed .hero-card h1,
body.ht-themed .auth-card h2 {
  font-family: var(--ht-f-head) !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px;
  color: var(--ht-black);
}
body.ht-themed h1 em,
body.ht-themed .hero-premium h1 em {
  font-style: italic;
  color: var(--ht-blue);
}

body.ht-themed h2 {
  font-family: var(--ht-f-head) !important;
  font-weight: 600 !important;
  color: var(--ht-black);
  letter-spacing: -0.3px;
}

body.ht-themed h3, body.ht-themed h4 {
  font-family: var(--ht-f-body) !important;
  font-weight: 700 !important;
  color: var(--ht-black);
}

body.ht-themed p,
body.ht-themed span,
body.ht-themed div,
body.ht-themed label {
  font-family: var(--ht-f-body);
}

/* ═══════════════════════════════════════════════════════════════════
   NAV BARS — match home page navbar style
   ═══════════════════════════════════════════════════════════════════ */

body.ht-themed .top-nav,
body.ht-themed .pnav,
body.ht-themed .chat-nav,
body.ht-themed .dnav {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 4px 24px rgba(0, 0, 0, 0.03) !important;
}

body.ht-themed .top-nav img,
body.ht-themed .pnav img {
  filter: drop-shadow(0 2px 8px rgba(0, 149, 255, 0.15));
}

/* ═══════════════════════════════════════════════════════════════════
   HERO CARDS — premium luxury feel
   ═══════════════════════════════════════════════════════════════════ */

body.ht-themed .hero-premium,
body.ht-themed .hero-card,
body.ht-themed .greeting-card {
  background: linear-gradient(135deg, var(--ht-blue) 0%, #4a6cf7 50%, #6366f1 100%) !important;
  border-radius: var(--ht-r-card) !important;
  box-shadow: var(--ht-shadow-blue), 0 12px 40px rgba(99, 102, 241, 0.25) !important;
  position: relative;
  overflow: hidden;
}

body.ht-themed .hero-premium::before,
body.ht-themed .hero-card::before {
  content: '';
  position: absolute;
  top: -50%; right: -20%;
  width: 100%; height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
  pointer-events: none;
}

body.ht-themed .hero-premium h1 {
  color: white !important;
  font-family: var(--ht-f-head) !important;
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 700;
}

body.ht-themed .hero-premium p {
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════════════
   CARDS — white surface with soft shadows like home page
   ═══════════════════════════════════════════════════════════════════ */

body.ht-themed .card,
body.ht-themed .stat-card,
body.ht-themed .stat-premium,
body.ht-themed .post-card,
body.ht-themed .bookings-card,
body.ht-themed .fav-card,
body.ht-themed .notif-card,
body.ht-themed .data-card,
body.ht-themed .glass,
body.ht-themed .glass-strong,
body.ht-themed .info-card,
body.ht-themed .booking-card,
body.ht-themed .review-card,
body.ht-themed .balance-card,
body.ht-themed .profile-card {
  background: var(--ht-white) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--ht-border) !important;
  border-radius: var(--ht-r-card) !important;
  box-shadow: var(--ht-shadow-card) !important;
  transition: box-shadow 0.35s ease, transform 0.35s ease !important;
}

body.ht-themed .card:hover,
body.ht-themed .stat-premium:hover,
body.ht-themed .post-card:hover,
body.ht-themed .data-card:hover {
  box-shadow: var(--ht-shadow-card-hover) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   BUTTONS — pill-shaped with home page blue
   ═══════════════════════════════════════════════════════════════════ */

body.ht-themed .btn-main,
body.ht-themed .btn-primary,
body.ht-themed .btn-premium,
body.ht-themed .btn-auth.btn-primary,
body.ht-themed .btn-submit {
  background: var(--ht-blue) !important;
  color: white !important;
  border: none !important;
  font-family: var(--ht-f-body) !important;
  font-weight: 700 !important;
  border-radius: var(--ht-r-btn) !important;
  padding: 14px 28px !important;
  box-shadow: var(--ht-shadow-blue) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative;
  overflow: hidden;
}

body.ht-themed .btn-main:hover,
body.ht-themed .btn-primary:hover,
body.ht-themed .btn-premium:hover,
body.ht-themed .btn-submit:hover {
  background: var(--ht-blue-dark) !important;
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--ht-shadow-blue-hover) !important;
}

body.ht-themed .btn-ghost,
body.ht-themed .btn-glass {
  background: var(--ht-white) !important;
  color: var(--ht-gray-700) !important;
  border: 1.5px solid var(--ht-gray-300) !important;
  border-radius: var(--ht-r-btn) !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: all 0.3s !important;
}

body.ht-themed .btn-ghost:hover {
  border-color: var(--ht-blue) !important;
  color: var(--ht-blue) !important;
  background: var(--ht-blue-light) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   INPUTS — clean home page style
   ═══════════════════════════════════════════════════════════════════ */

body.ht-themed input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.ht-themed select,
body.ht-themed textarea,
body.ht-themed .fg input,
body.ht-themed .fg select,
body.ht-themed .fg textarea {
  background: var(--ht-white) !important;
  border: 1.5px solid var(--ht-gray-300) !important;
  border-radius: 14px !important;
  padding: 13px 16px !important;
  box-shadow: none !important;
  font-family: var(--ht-f-body) !important;
  color: var(--ht-black) !important;
  transition: all 0.25s !important;
}

body.ht-themed input:focus,
body.ht-themed select:focus,
body.ht-themed textarea:focus {
  outline: none !important;
  border-color: var(--ht-blue) !important;
  box-shadow: 0 0 0 3px rgba(0, 149, 255, 0.1) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   TABS / NAV ITEMS
   ═══════════════════════════════════════════════════════════════════ */

body.ht-themed .tabs {
  background: var(--ht-white) !important;
  border: 1px solid var(--ht-border) !important;
  border-radius: var(--ht-r-btn) !important;
  padding: 6px !important;
  box-shadow: var(--ht-shadow-card) !important;
}

body.ht-themed .tab {
  border-radius: 50px !important;
  font-weight: 600 !important;
  color: var(--ht-gray-700) !important;
}

body.ht-themed .tab.active {
  background: var(--ht-blue) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(0, 149, 255, 0.3) !important;
}

/* Admin sidebar matches home navbar */
body.ht-themed .admin-sidebar {
  background: var(--ht-white) !important;
  border-right: 1px solid var(--ht-border) !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.03) !important;
}

body.ht-themed .admin-nav-item {
  font-family: var(--ht-f-body) !important;
  border-radius: 14px !important;
}

body.ht-themed .admin-nav-item.active {
  background: var(--ht-blue) !important;
  color: white !important;
  box-shadow: 0 4px 14px rgba(0, 149, 255, 0.3) !important;
}

body.ht-themed .admin-nav-item:hover:not(.active) {
  background: var(--ht-blue-light) !important;
  color: var(--ht-blue) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   CATEGORY TILES — home page style
   ═══════════════════════════════════════════════════════════════════ */

body.ht-themed .cat-tile-premium,
body.ht-themed .cat-tile {
  background: var(--ht-white) !important;
  border: 1px solid var(--ht-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--ht-shadow-card) !important;
  backdrop-filter: none !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.ht-themed .cat-tile-premium:hover,
body.ht-themed .cat-tile:hover {
  border-color: var(--ht-blue) !important;
  box-shadow: var(--ht-shadow-card-hover) !important;
  transform: translateY(-4px);
}

body.ht-themed .cat-tile-premium .cat-name,
body.ht-themed .cat-tile .cat-name {
  font-weight: 700 !important;
  color: var(--ht-black) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   TABLES — clean home style
   ═══════════════════════════════════════════════════════════════════ */

body.ht-themed table {
  font-family: var(--ht-f-body) !important;
}

body.ht-themed th {
  background: var(--ht-surface) !important;
  color: var(--ht-gray-500) !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

body.ht-themed td {
  color: var(--ht-gray-700) !important;
  border-bottom: 1px solid var(--ht-border) !important;
}

body.ht-themed tr:hover td {
  background: var(--ht-blue-light) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   STATUS PILLS / BADGES — match home page chip style
   ═══════════════════════════════════════════════════════════════════ */

body.ht-themed .status-badge,
body.ht-themed .status-pill,
body.ht-themed .pill-premium,
body.ht-themed .badge {
  font-family: var(--ht-f-body) !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  padding: 5px 14px !important;
  font-size: 11.5px !important;
  letter-spacing: 0.3px;
}

/* ═══════════════════════════════════════════════════════════════════
   MODALS — luxury home style
   ═══════════════════════════════════════════════════════════════════ */

body.ht-themed .modal-box,
body.ht-themed .modal-ov > div {
  background: var(--ht-white) !important;
  border-radius: var(--ht-r-card) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2) !important;
}

body.ht-themed .modal-overlay,
body.ht-themed .modal-ov {
  background: rgba(17, 24, 39, 0.5) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ICON CONTAINERS — soft blue-tinted backgrounds
   ═══════════════════════════════════════════════════════════════════ */

body.ht-themed .icon-3d,
body.ht-themed .stat-card .ico,
body.ht-themed .kpi-mini .kpi-ico {
  background: var(--ht-blue-light) !important;
  box-shadow: 0 2px 8px rgba(0, 149, 255, 0.08), inset 0 -1px 2px rgba(0, 149, 255, 0.05) !important;
  border-radius: 16px !important;
}

body.ht-themed .icon-3d::before {
  display: none;
}

/* Tinted variants override */
body.ht-themed .icon-3d.tint-green { background: #dcfce7 !important; }
body.ht-themed .icon-3d.tint-orange { background: #fef3c7 !important; }
body.ht-themed .icon-3d.tint-purple { background: #f3e8ff !important; }
body.ht-themed .icon-3d.tint-pink { background: #fce7f3 !important; }
body.ht-themed .icon-3d.tint-gold { background: #fef3c7 !important; }

/* ═══════════════════════════════════════════════════════════════════
   AUTH PAGE — home style premium
   ═══════════════════════════════════════════════════════════════════ */

body.ht-themed .auth-wrap {
  background: linear-gradient(135deg, var(--ht-surface) 0%, var(--ht-blue-light) 50%, #f0f4ff 100%);
}

body.ht-themed .auth-card {
  background: var(--ht-white) !important;
  border-radius: var(--ht-r-card) !important;
  box-shadow: 0 20px 60px rgba(0, 149, 255, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid var(--ht-border);
}

body.ht-themed .auth-card::before {
  background: linear-gradient(90deg, var(--ht-blue), #6366f1, #8b5cf6) !important;
  height: 5px !important;
}

body.ht-themed .auth-card h2 {
  font-family: var(--ht-f-head) !important;
  font-weight: 700 !important;
  font-size: 30px !important;
}

body.ht-themed .role-tabs {
  border-radius: var(--ht-r-btn) !important;
  border: 1.5px solid var(--ht-border) !important;
  overflow: hidden;
}

body.ht-themed .role-tab {
  font-family: var(--ht-f-body) !important;
  font-weight: 600 !important;
}

body.ht-themed .role-tab.active {
  background: var(--ht-blue) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PROVIDER REGISTER — match home theme
   ═══════════════════════════════════════════════════════════════════ */

body.ht-themed .form-wrapper {
  background: var(--ht-white) !important;
  backdrop-filter: none !important;
  border: 1px solid var(--ht-border) !important;
  border-radius: var(--ht-r-card) !important;
  box-shadow: var(--ht-shadow-card) !important;
}

body.ht-themed .form-header h1 {
  font-family: var(--ht-f-head) !important;
  font-weight: 700 !important;
  color: var(--ht-black) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   CHAT — clean home style
   ═══════════════════════════════════════════════════════════════════ */

body.ht-themed .sidebar {
  background: var(--ht-white) !important;
  border-right: 1px solid var(--ht-border) !important;
}

body.ht-themed .chat-head {
  background: var(--ht-white) !important;
  border-bottom: 1px solid var(--ht-border) !important;
}

body.ht-themed .input-area {
  background: var(--ht-white) !important;
  border-top: 1px solid var(--ht-border) !important;
}

body.ht-themed .msg-row.me .bubble {
  background: var(--ht-blue) !important;
  color: white !important;
}

body.ht-themed .msg-row.theirs .bubble {
  background: var(--ht-surface) !important;
  color: var(--ht-black) !important;
  border: 1px solid var(--ht-border) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE PADDING — match home page spacing
   ═══════════════════════════════════════════════════════════════════ */

body.ht-themed .main,
body.ht-themed .pc,
body.ht-themed .admin-main {
  max-width: 1300px !important;
  padding: 32px clamp(20px, 5vw, 48px) 80px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FOOTER FLOATING ELEMENTS PRESERVED
   ═══════════════════════════════════════════════════════════════════ */

body.ht-themed > *:not(canvas):not(#preloader):not(.call-overlay):not([id*="Modal"]):not([id*="Overlay"]) {
  position: relative;
  z-index: 2;
}

/* ═══════════════════════════════════════════════════════════════════
   LINKS — premium underline animation like home
   ═══════════════════════════════════════════════════════════════════ */

body.ht-themed a:not(.btn-main):not(.btn-ghost):not(.btn-primary):not(.btn-submit):not(.cat-tile):not(.cat-tile-premium):not(.tab):not(.admin-nav-item) {
  color: var(--ht-blue);
  transition: color 0.2s;
}

/* ═══════════════════════════════════════════════════════════════════
   ANIMATIONS — match home page easing curves
   ═══════════════════════════════════════════════════════════════════ */

body.ht-themed * {
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ═══════════════════════════════════════════════════════════════════
   SEARCH INPUTS RESET FOR HT-THEME
   Prevents double border, nested background, and padding overlaps
   ═══════════════════════════════════════════════════════════════════ */

body.ht-themed .search-wrap input,
body.ht-themed .search-bar input,
body.ht-themed .hero-search input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Specific alignments and overrides */
body.ht-themed .search-wrap input {
  padding: 10px 14px 10px 38px !important;
}
body.ht-themed .search-bar input {
  padding: 0 !important;
}
body.ht-themed .hero-search input {
  padding: 12px 16px !important;
}