/* ========================================
   Docterbee Journey - Custom Styles
   ======================================== */

/* Universal Box Sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Base Typography & Smooth Scroll */
html {
  overflow-x: hidden;
  width: 100%;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, Arial, sans-serif;
  scroll-behavior: smooth;
  background-color: #f9fafb;
  color: #0f172a;
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Prevent overflow on main containers */
main {
  max-width: 100%;
  overflow-x: hidden;
}

/* Ensure grid and flex containers don't overflow */
.grid,
[class*="grid"] {
  max-width: 100%;
}

.flex,
[class*="flex"] {
  max-width: 100%;
}

/* ========================================
   Keyframe Animations
   ======================================== */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.7);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(234, 88, 12, 0);
  }
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes glow {
  0%,
  100% {
    box-shadow: 0 0 5px rgba(234, 88, 12, 0.5), 0 0 10px rgba(234, 88, 12, 0.3);
  }
  50% {
    box-shadow: 0 0 10px rgba(234, 88, 12, 0.8), 0 0 20px rgba(234, 88, 12, 0.5),
      0 0 30px rgba(234, 88, 12, 0.3);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes counterPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

@keyframes counterGlow {
  0%,
  100% {
    text-shadow: 0 0 5px rgba(234, 88, 12, 0.3);
  }
  50% {
    text-shadow: 0 0 15px rgba(234, 88, 12, 0.6),
      0 0 25px rgba(234, 88, 12, 0.4);
  }
}

/* ========================================
   Page Load Animations
   ======================================== */

main {
  animation: fadeIn 0.5s ease-out;
}

header {
  animation: slideDown 0.6s ease-out;
}

/* ========================================
   Header Styles
   ======================================== */

.logo-box {
  height: 2rem;
  width: 2rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, #ea580c, #f97316);
  animation: pulse 3s ease-in-out infinite;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.logo-box::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transform: rotate(45deg);
  animation: shimmer 3s infinite;
}

.logo-box:hover {
  transform: scale(1.1) rotate(5deg);
  animation: none;
  box-shadow: 0 0 20px rgba(234, 88, 12, 0.6);
}

.nav-link {
  opacity: 0.8;
  transition: all 0.3s ease;
  position: relative;
  padding-bottom: 4px;
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ea580c, transparent);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.nav-link:hover {
  opacity: 1;
  color: #ea580c;
  transform: translateY(-2px);
}

.nav-link:hover::after {
  width: 100%;
}

.points-display {
  font-size: 0.75rem;
  line-height: 1rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  padding: 0.375rem 0.75rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  background: white;
  color: #0f172a;
}

.points-display:hover {
  border-color: #ea580c;
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(234, 88, 12, 0.3);
}

.points-display b {
  color: #ea580c;
  transition: all 0.3s ease;
  display: inline-block;
}

.points-display:hover b {
  transform: scale(1.2);
  animation: bounce 0.6s ease;
}

/* Hamburger Button */
.hamburger-btn {
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background-color: transparent;
  color: #0f172a;
  cursor: pointer;
  transition: all 0.3s ease;
}

.hamburger-btn:hover {
  background-color: #f1f5f9;
  border-color: rgba(234, 88, 12, 0.5);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(4px);
}

.mobile-menu-overlay.show {
  opacity: 1;
}

/* Mobile Menu */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 280px;
  max-width: 85vw;
  height: 100vh;
  background: white;
  border-left: 1px solid rgba(148, 163, 184, 0.3);
  z-index: 999;
  transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2);
}

.mobile-menu.open {
  right: 0;
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.close-menu-btn {
  padding: 0.5rem;
  border-radius: 0.5rem;
  background-color: transparent;
  border: 1px solid rgba(148, 163, 184, 0.3);
  color: #0f172a;
  cursor: pointer;
  transition: all 0.3s ease;
}

.close-menu-btn:hover {
  background-color: #f1f5f9;
  border-color: rgba(234, 88, 12, 0.5);
}

.mobile-menu-nav {
  flex: 1;
  padding: 1rem 0;
  overflow-y: auto;
}

.mobile-nav-link {
  display: block;
  padding: 1rem 1.5rem;
  color: #475569;
  text-decoration: none;
  font-size: 1rem;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
}

.mobile-nav-link:hover {
  background-color: #f1f5f9;
  border-left-color: #ea580c;
  padding-left: 2rem;
  color: #ea580c;
}

.mobile-menu-footer {
  padding: 1rem;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
}

/* ========================================
   Hero Section
   ======================================== */

.hero-section {
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: white;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
  animation: slideUp 0.6s ease-out 0.2s backwards;
}

.hero-section::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(234, 88, 12, 0.05) 0%,
    transparent 70%
  );
  animation: rotate 20s linear infinite;
  pointer-events: none;
}

.hero-section:hover {
  border-color: rgba(234, 88, 12, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3),
    inset 0 0 20px rgba(234, 88, 12, 0.05);
  transform: translateY(-2px);
  transition: all 0.3s ease;
}

/* Score Counter Animation */
#totalScore {
  display: inline-block;
  min-width: 3ch;
  text-align: center;
}

#totalScore.counting {
  animation: counterGlow 1.5s ease-in-out;
}

/* Unit Score Counter */
[id^="score_"] {
  display: inline-block;
  min-width: 3ch;
  text-align: center;
}

[id^="score_"].counting {
  animation: counterGlow 1.2s ease-in-out;
}

.btn-calc-all {
  margin-top: 0.5rem;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, #ea580c, #f97316);
  color: white;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(234, 88, 12, 0.4);
}

.btn-calc-all::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn-calc-all:hover::before {
  width: 300px;
  height: 300px;
}

.btn-calc-all:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 20px rgba(234, 88, 12, 0.5);
}

.btn-calc-all:active {
  transform: translateY(0) scale(0.98);
}

/* ========================================
   Tab Navigation
   ======================================== */

#tabs {
  animation: slideUp 0.6s ease-out 0.3s backwards;
}

.tab-button {
  border-radius: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  cursor: pointer;
  background-color: white;
  color: #475569;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tab-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(234, 88, 12, 0.2),
    transparent
  );
  transition: left 0.5s ease;
}

.tab-button:hover::before {
  left: 100%;
}

.tab-button:hover {
  background-color: #fef3f2;
  border-color: rgba(234, 88, 12, 0.5);
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.2);
}

.tab-button.active {
  background: linear-gradient(135deg, #ea580c, #f97316);
  color: white;
  border-color: #ea580c;
  box-shadow: 0 0 15px rgba(234, 88, 12, 0.4),
    inset 0 0 10px rgba(255, 255, 255, 0.1);
  animation: glow 2s ease-in-out infinite;
}

.tab-button.active:hover {
  transform: translateY(-3px) scale(1.02);
}

/* ========================================
   Unit Container
   ======================================== */

.unit-wrap {
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background-color: white;
  padding: 1.25rem;
}

/* ========================================
   Question Cards
   ======================================== */

.question-card {
  border-radius: 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: #fafafa;
  padding: 1rem;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  animation: slideUp 0.6s ease-out backwards;
}

.question-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(234, 88, 12, 0.08),
    transparent
  );
  transition: left 0.6s ease;
}

.question-card:hover::before {
  left: 100%;
}

.question-card:hover {
  transform: translateY(-5px) scale(1.02);
  border-color: rgba(234, 88, 12, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 0 20px rgba(234, 88, 12, 0.1);
  background: white;
}

.question-card:nth-child(1) {
  animation-delay: 0.1s;
}

.question-card:nth-child(2) {
  animation-delay: 0.2s;
}

.question-card:nth-child(3) {
  animation-delay: 0.3s;
}

.question-card:nth-child(4) {
  animation-delay: 0.4s;
}

.question-card:nth-child(5) {
  animation-delay: 0.5s;
}

.question-card:nth-child(6) {
  animation-delay: 0.6s;
}

.card-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.btn-yes {
  border-radius: 0.5rem;
  background-color: white;
  border: 1px solid #ea580c;
  color: #0f172a;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-yes::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(234, 88, 12, 0.1);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s, height 0.4s;
}

.btn-yes:hover::before {
  width: 200px;
  height: 200px;
}

.btn-yes:hover {
  background-color: #fef3f2;
  border-color: rgba(234, 88, 12, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.2);
}

.btn-yes.selected {
  background: linear-gradient(135deg, #10b981, #059669);
  border: none;
  color: white;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3),
    0 4px 12px rgba(16, 185, 129, 0.5);
  transform: scale(1.05);
}

.btn-yes.selected:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.3),
    0 6px 15px rgba(52, 211, 153, 0.6);
}

.btn-no {
  border-radius: 0.5rem;
  background-color: white;
  border: 1px solid #ea580c;
  color: #0f172a;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-no::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(234, 88, 12, 0.1);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s, height 0.4s;
}

.btn-no:hover::before {
  width: 200px;
  height: 200px;
}

.btn-no:hover {
  background-color: #fef3f2;
  border-color: rgba(234, 88, 12, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.2);
}

.btn-no.selected {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border: none;
  color: white;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3),
    0 4px 12px rgba(239, 68, 68, 0.5);
  transform: scale(1.05);
}

.btn-no.selected:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3),
    0 6px 15px rgba(239, 68, 68, 0.6);
}

.btn-info {
  border-radius: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background-color: transparent;
  color: inherit;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.btn-info:hover {
  background-color: #f1f5f9;
  border-color: rgba(125, 211, 252, 0.5);
  color: rgb(125 211 252);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(125, 211, 252, 0.2);
}

.btn-info:hover::before {
  content: "ℹ";
  position: absolute;
  top: -20px;
  right: -5px;
  font-size: 1.2rem;
  color: rgb(125 211 252);
  animation: bounce 0.6s ease;
}

.btn-calc-unit {
  border-radius: 0.5rem;
  background: linear-gradient(135deg, #ea580c, #f97316);
  color: white;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 3px 10px rgba(234, 88, 12, 0.3);
}

.btn-calc-unit::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s, height 0.5s;
}

.btn-calc-unit:hover::before {
  width: 300px;
  height: 300px;
}

.btn-calc-unit:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 5px 15px rgba(234, 88, 12, 0.5);
}

.btn-calc-unit:active {
  transform: scale(0.95);
}

/* ========================================
   Info Box
   ======================================== */

.info-box {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: rgba(226, 232, 240, 0.9);
  border-radius: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background-color: white;
  padding: 0.75rem;
}

.info-box.hidden {
  display: none;
}

.info-box b {
  font-weight: 600;
}

/* ========================================
   Status Indicators
   ======================================== */

.status-answered {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: rgb(110 231 183);
  font-weight: 600;
  position: relative;
  display: inline-block;
  animation: slideUp 0.3s ease;
}

.status-answered::before {
  content: "✓";
  margin-right: 0.25rem;
  display: inline-block;
  animation: bounce 0.6s ease;
}

.status-answered::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, rgb(110 231 183), transparent);
  animation: shimmer 2s infinite;
}

.status-unanswered {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: #64748b;
  transition: all 0.3s ease;
}

.status-unanswered:hover {
  color: #ea580c;
  transform: translateX(5px);
}

/* ========================================
   Booking Page Styles
   ======================================== */

.booking-container {
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: white;
  padding: 1.25rem;
  position: relative;
  overflow: visible;
  transition: all 0.3s ease;
  animation: slideUp 0.6s ease-out backwards;
  color: #0f172a;
}

.booking-container::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(234, 88, 12, 0.03) 0%,
    transparent 70%
  );
  animation: rotate 25s linear infinite;
  pointer-events: none;
}

.booking-container:hover {
  border-color: rgba(234, 88, 12, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.booking-input,
.booking-select {
  margin-top: 0.25rem;
  width: 100%;
  border-radius: 0.5rem;
  background-color: #fafafa;
  border: 1px solid rgba(148, 163, 184, 0.2);
  padding: 0.5rem 0.75rem;
  color: #0f172a;
  font-size: 0.875rem;
  transition: all 0.3s ease;
}

/* Date input specific styling */
.booking-input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

.booking-input:hover,
.booking-select:hover {
  border-color: rgba(234, 88, 12, 0.3);
  background-color: white;
}

.booking-input:focus,
.booking-select:focus {
  outline: none;
  border-color: #ea580c;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.1);
  background-color: white;
  transform: translateY(-1px);
}

.slot-button {
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  font-size: 0.875rem;
  cursor: pointer;
  background-color: transparent;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.slot-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(234, 88, 12, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s, height 0.4s;
}

.slot-button:hover::before {
  width: 150px;
  height: 150px;
}

.slot-button:hover {
  border-color: rgba(234, 88, 12, 0.5);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.2);
}

.slot-button.selected {
  background: linear-gradient(135deg, #ea580c, #f97316);
  color: white;
  border-color: #ea580c;
  font-weight: 600;
  animation: glow 2s ease-in-out infinite;
  transform: scale(1.05);
}

.slot-button.selected:hover {
  transform: translateY(-3px) scale(1.08);
}

.btn-primary {
  border-radius: 0.5rem;
  background: linear-gradient(135deg, #ea580c, #f97316);
  color: white;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(234, 88, 12, 0.4);
}

.btn-primary::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn-primary:hover::before {
  width: 400px;
  height: 400px;
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 20px rgba(234, 88, 12, 0.6);
}

.btn-primary:active {
  transform: translateY(0) scale(0.98);
}

.btn-secondary {
  border-radius: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background-color: transparent;
  color: inherit;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-secondary::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(234, 88, 12, 0.1);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s, height 0.5s;
}

.btn-secondary:hover::before {
  width: 300px;
  height: 300px;
}

.btn-secondary:hover {
  background-color: #f1f5f9;
  border-color: rgba(234, 88, 12, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.booking-sidebar {
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background-color: white;
  padding: 1.25rem;
  font-size: 0.875rem;
}

.summary-card {
  border-radius: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: linear-gradient(135deg, white, #fafafa);
  padding: 0.75rem;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  animation: slideUp 0.4s ease-out backwards;
}

.summary-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(234, 88, 12, 0.05),
    transparent
  );
  transition: left 0.5s ease;
}

.summary-card:hover::before {
  left: 100%;
}

.summary-card:hover {
  border-color: rgba(234, 88, 12, 0.3);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.summary-card:nth-child(1) {
  animation-delay: 0.05s;
}
.summary-card:nth-child(2) {
  animation-delay: 0.1s;
}
.summary-card:nth-child(3) {
  animation-delay: 0.15s;
}
.summary-card:nth-child(4) {
  animation-delay: 0.2s;
}

/* ==================== EVENTS PAGE STYLES ==================== */

.event-sidebar {
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background-color: white;
  padding: 1.25rem;
  font-size: 0.875rem;
  animation: fadeIn 0.6s ease-out;
}

.event-select {
  margin-top: 0.25rem;
  width: 100%;
  border-radius: 0.5rem;
  background-color: white;
  border: 1px solid rgba(148, 163, 184, 0.2);
  padding: 0.375rem 0.5rem;
  color: #0f172a;
  font-size: 0.875rem;
  transition: all 0.3s ease;
}

.event-select:hover {
  border-color: rgba(234, 88, 12, 0.5);
  background-color: #f8fafc;
}

.event-select:focus {
  outline: none;
  border-color: #ea580c;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.1);
}

.event-card {
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background-color: white;
  padding: 1.25rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: slideUp 0.5s ease-out backwards;
  position: relative;
  overflow: hidden;
}

.event-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(234, 88, 12, 0.05),
    transparent
  );
  transition: left 0.6s ease;
}

.event-card:hover::before {
  left: 100%;
}

.event-card:hover {
  border-color: rgba(234, 88, 12, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.event-card:nth-child(1) {
  animation-delay: 0.1s;
}
.event-card:nth-child(2) {
  animation-delay: 0.2s;
}
.event-card:nth-child(3) {
  animation-delay: 0.3s;
}
.event-card:nth-child(4) {
  animation-delay: 0.4s;
}

.event-info-card {
  border-radius: 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background-color: #fafafa;
  padding: 1rem;
  transition: all 0.3s ease;
  color: #0f172a;
}

.event-info-card:hover {
  border-color: rgba(234, 88, 12, 0.3);
  transform: translateY(-2px);
  background-color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ==================== INSIGHT PAGE STYLES ==================== */

.insight-sidebar {
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background-color: white;
  padding: 1.25rem;
  font-size: 0.875rem;
  animation: fadeIn 0.6s ease-out;
}

.insight-sidebar input[type="checkbox"] {
  cursor: pointer;
  accent-color: #ea580c;
}

.article-card {
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background-color: white;
  padding: 1.25rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: slideUp 0.5s ease-out backwards;
  position: relative;
  overflow: hidden;
  color: #0f172a;
}

.article-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(234, 88, 12, 0.05),
    transparent
  );
  transition: left 0.6s ease;
}

.article-card:hover::before {
  left: 100%;
}

.article-card:hover {
  border-color: rgba(234, 88, 12, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.article-card:nth-child(1) {
  animation-delay: 0.1s;
}
.article-card:nth-child(2) {
  animation-delay: 0.2s;
}
.article-card:nth-child(3) {
  animation-delay: 0.3s;
}
.article-card:nth-child(4) {
  animation-delay: 0.4s;
}

.btn-primary-sm {
  border-radius: 0.5rem;
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: white;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-primary-sm::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.5s, height 0.5s;
}

.btn-primary-sm:hover::before {
  width: 300px;
  height: 300px;
}

.btn-primary-sm:hover {
  background-color: #ea580c;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(234, 88, 12, 0.4);
}

.btn-secondary-sm {
  border-radius: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  cursor: pointer;
  background-color: transparent;
  color: inherit;
  transition: all 0.3s ease;
}

.btn-secondary-sm:hover {
  border-color: rgba(234, 88, 12, 0.6);
  background-color: rgba(234, 88, 12, 0.1);
  transform: translateY(-1px);
}

.nbsn-card {
  border-radius: 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background-color: white;
  color: #0f172a;
  padding: 1rem;
  animation: slideUp 0.4s ease-out backwards;
}

.nbsn-card:nth-child(1) {
  animation-delay: 0.1s;
}
.nbsn-card:nth-child(2) {
  animation-delay: 0.2s;
}
.summary-card:nth-child(5) {
  animation-delay: 0.25s;
}

/* ==================== MEDIA PAGE STYLES ==================== */

.media-container {
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background-color: white;
  padding: 1.25rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: fadeIn 0.6s ease-out;
  position: relative;
  overflow: hidden;
}

.media-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(234, 88, 12, 0.03),
    transparent
  );
  transition: left 0.8s ease;
}

.media-container:hover::before {
  left: 100%;
}

.media-container:hover {
  border-color: rgba(234, 88, 12, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.media-sidebar {
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background-color: white;
  padding: 1.25rem;
  font-size: 0.875rem;
  animation: fadeIn 0.6s ease-out;
  animation-delay: 0.2s;
  opacity: 0;
  animation-fill-mode: forwards;
}

.media-label {
  display: block;
  font-size: 0.75rem;
  opacity: 0.7;
  margin-bottom: 0.25rem;
}

.media-input {
  width: 100%;
  border-radius: 0.5rem;
  background-color: white;
  border: 1px solid rgba(148, 163, 184, 0.2);
  padding: 0.5rem 0.75rem;
  color: #0f172a;
  font-size: 0.875rem;
  transition: all 0.3s ease;
}

.media-input:hover {
  border-color: rgba(234, 88, 12, 0.5);
  background-color: #f8fafc;
}

.media-input:focus {
  outline: none;
  border-color: #ea580c;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.1), 0 0 15px rgba(234, 88, 12, 0.2);
  background-color: #f8fafc;
  transform: translateY(-1px);
}

.media-input-sm {
  width: 100%;
  border-radius: 0.5rem;
  background-color: white;
  border: 1px solid rgba(148, 163, 184, 0.2);
  padding: 0.5rem 0.75rem;
  color: #0f172a;
  font-size: 0.875rem;
  transition: all 0.3s ease;
}

.media-input-sm:hover {
  border-color: rgba(234, 88, 12, 0.5);
  background-color: #f8fafc;
}

.media-input-sm:focus {
  outline: none;
  border-color: #ea580c;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.1);
}

.media-textarea {
  margin-top: 0.25rem;
  width: 100%;
  border-radius: 0.5rem;
  background-color: white;
  border: 1px solid rgba(148, 163, 184, 0.2);
  padding: 0.5rem 0.75rem;
  color: #0f172a;
  font-size: 0.875rem;
  height: 7rem;
  resize: vertical;
  transition: all 0.3s ease;
}

.media-textarea:hover {
  border-color: rgba(234, 88, 12, 0.5);
  background-color: #f8fafc;
}

.media-textarea:focus {
  outline: none;
  border-color: #ea580c;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.1), 0 0 15px rgba(234, 88, 12, 0.2);
  background-color: #f8fafc;
}

/* Media Tab Buttons */
.media-tab {
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.media-tab::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(234, 88, 12, 0.2),
    transparent
  );
  transition: left 0.5s ease;
}

.media-tab:hover::before {
  left: 100%;
}

.media-tab.active {
  background-color: #ea580c;
  color: #f8fafc;
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.4);
}

.media-tab:not(.active) {
  background-color: #f1f5f9;
  color: #64748b;
}

.media-tab:not(.active):hover {
  background-color: rgba(148, 163, 184, 0.3);
  color: #475569;
}

.media-player {
  border-radius: 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background-color: rgba(0, 0, 0, 0.6);
  overflow: hidden;
  transition: all 0.3s ease;
  animation: slideUp 0.5s ease-out backwards;
  animation-delay: 0.3s;
}

.media-player iframe {
  border-radius: 0.75rem;
}

.btn-analyze {
  border-radius: 0.5rem;
  background: linear-gradient(135deg, rgb(52 211 153), rgb(34 197 94));
  color: #f8fafc;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(52, 211, 153, 0.3);
}

.btn-analyze::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.5s, height 0.5s;
}

.btn-analyze:hover::before {
  width: 300px;
  height: 300px;
}

.btn-analyze:hover {
  background: linear-gradient(135deg, rgb(34 197 94), rgb(52 211 153));
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(52, 211, 153, 0.5);
}

.podcast-item {
  width: 100%;
  text-align: left;
  border-radius: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background-color: white;
  color: #0f172a;
  padding: 0.75rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  animation: slideUp 0.4s ease-out backwards;
}

.podcast-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(234, 88, 12, 0.05),
    transparent
  );
  transition: left 0.5s ease;
}

.podcast-item:hover::before {
  left: 100%;
}

.podcast-item:hover {
  background-color: #f8fafc;
  border-color: rgba(234, 88, 12, 0.4);
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.podcast-item:nth-child(1) {
  animation-delay: 0.1s;
}
.podcast-item:nth-child(2) {
  animation-delay: 0.15s;
}
.podcast-item:nth-child(3) {
  animation-delay: 0.2s;
}
.podcast-item:nth-child(4) {
  animation-delay: 0.25s;
}

.podcast-now-playing {
  margin-top: 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background-color: white;
  padding: 0.75rem;
  animation: slideUp 0.5s ease-out backwards;
  animation-delay: 0.4s;
}

.podcast-now-playing audio {
  width: 100%;
  height: 40px;
  border-radius: 0.5rem;
}

.podcast-now-playing audio::-webkit-media-controls-panel {
  background-color: #f1f5f9;
}

.ai-analysis-card {
  border-radius: 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background-color: white;
  padding: 1rem;
  animation: slideUp 0.4s ease-out backwards;
  transition: all 0.3s ease;
  color: #0f172a;
}

.ai-analysis-card:hover {
  border-color: rgba(234, 88, 12, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ai-analysis-card:nth-child(1) {
  animation-delay: 0.1s;
}
.ai-analysis-card:nth-child(2) {
  animation-delay: 0.2s;
}
.ai-analysis-card:nth-child(3) {
  animation-delay: 0.3s;
}

.booking-label {
  font-size: 0.75rem;
  opacity: 0.7;
  display: block;
  margin-bottom: 0.25rem;
}

/* ========================================
   Admin Dashboard Styles
   ======================================== */

.dashboard-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background-color: white;
  color: #475569;
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
  white-space: nowrap;
}

.dashboard-tab:hover {
  border-color: rgba(234, 88, 12, 0.3);
  background-color: #fafafa;
}

.dashboard-tab.active {
  border-color: #ea580c;
  background: linear-gradient(
    135deg,
    rgba(234, 88, 12, 0.2),
    rgba(234, 88, 12, 0.05)
  );
  color: #ea580c;
  box-shadow: 0 0 20px rgba(234, 88, 12, 0.2);
}

.dashboard-section {
  animation: fadeIn 0.3s ease-out;
}

/* Scrollbar hide utility */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Responsive table wrapper */
/* Table wrapper - scrollbar only appears when content actually overflows */
.booking-container.overflow-x-auto {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}

/* Custom scrollbar styling - thin and subtle */
.booking-container.overflow-x-auto::-webkit-scrollbar {
  height: 6px;
}

.booking-container.overflow-x-auto::-webkit-scrollbar-track {
  background: transparent;
}

.booking-container.overflow-x-auto::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: 3px;
  transition: background 0.2s ease;
}

.booking-container.overflow-x-auto::-webkit-scrollbar-thumb:hover {
  background: rgb(71 85 105);
}

/* Hide scrollbar completely when content fits (no overflow) */
@supports selector(::-webkit-scrollbar) {
  .booking-container.overflow-x-auto {
    scrollbar-width: auto;
  }
}

/* Success Modal Animation */
#successModal {
  transition: background-color 0.3s ease;
}

#successModalContent {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#successModalContent.scale-100 {
  transform: scale(1);
}

#successModalContent.scale-95 {
  transform: scale(0.95);
}

#successModalContent.opacity-100 {
  opacity: 1;
}

#successModalContent.opacity-0 {
  opacity: 0;
}

/* Modal Forms - Custom Scrollbar Styling */
.max-h-\[90vh\].overflow-y-auto {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.3) #f8fafc;
}

.max-h-\[90vh\].overflow-y-auto::-webkit-scrollbar {
  width: 8px;
}

.max-h-\[90vh\].overflow-y-auto::-webkit-scrollbar-track {
  background: #f8fafc;
  border-radius: 4px;
}

.max-h-\[90vh\].overflow-y-auto::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: 4px;
  transition: background 0.2s ease;
}

.max-h-\[90vh\].overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: rgb(71 85 105);
}

/* Mobile Menu Scrollbar Styling */
.mobile-menu-nav {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}

.mobile-menu-nav::-webkit-scrollbar {
  width: 6px;
}

.mobile-menu-nav::-webkit-scrollbar-track {
  background: transparent;
}

.mobile-menu-nav::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: 3px;
}

.mobile-menu-nav::-webkit-scrollbar-thumb:hover {
  background: rgb(71 85 105);
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
  .dashboard-tab {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
  }

  .booking-container table {
    font-size: 0.75rem;
  }

  .booking-container table th,
  .booking-container table td {
    padding: 0.5rem !important;
  }

  /* Modal adjustments for mobile */
  .fixed.inset-0 > div {
    max-height: 90vh;
    margin: 1rem;
  }

  /* Form inputs smaller padding on mobile */
  input[type="text"],
  input[type="number"],
  input[type="date"],
  input[type="password"],
  input[type="datetime-local"],
  select,
  textarea {
    padding: 0.625rem 0.875rem !important;
    font-size: 0.875rem;
  }

  /* Button adjustments */
  button {
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
  }

  /* Card padding on mobile */
  .booking-container {
    padding: 1rem !important;
  }
}

/* Tablet responsive adjustments */
@media (min-width: 641px) and (max-width: 1024px) {
  .booking-container table {
    font-size: 0.875rem;
  }

  .dashboard-tab {
    padding: 0.625rem 1.125rem;
    font-size: 0.8125rem;
  }
}

/* Delete modal animations */
#deleteModal > div {
  animation: modalSlideUp 0.3s ease-out;
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
  /* Increase tap targets on touch devices */
  button,
  .dashboard-tab,
  a {
    min-height: 44px;
    min-width: 44px;
  }

  /* Better spacing for touch */
  .flex.gap-2 {
    gap: 0.75rem;
  }

  /* Smoother scrolling on touch devices */
  * {
    -webkit-overflow-scrolling: touch;
  }
}

/* Landscape mobile optimization */
@media (max-width: 896px) and (orientation: landscape) {
  .max-h-\[90vh\] {
    max-height: 85vh !important;
  }

  .booking-container.overflow-x-auto {
    max-height: 60vh;
    overflow-y: auto;
  }
}

/* Print styles */
@media print {
  .dashboard-tab,
  button,
  #logoutBtn,
  .fixed {
    display: none !important;
  }

  .booking-container {
    border: 1px solid #000;
    page-break-inside: avoid;
  }

  table {
    page-break-inside: auto;
  }

  tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }
}