/* 
 * YourXperiences Theme - Palette extracted from logo
 * Primary: #5DABB9 (turquoise/cyan)
 * Dark Primary: #3C7B7A (dark teal)
 * Accent: #F4B555 (gold/yellow)
 * Deep: #2C5855 (deep green for contrast)
 * Light: #E8F6F8 (light cyan for backgrounds)
 */

:root {
  /* Core brand colors */
  --color-primary: #5DABB9;
  --color-primary-dark: #3C7B7A;
  --color-primary-light: #7FCDD9;
  --color-accent: #F4B555;
  --color-accent-dark: #E09E3F;
  --color-deep: #2C5855;
  --color-light-bg: #E8F6F8;
  --color-white: #FFFFFF;
  --color-gray: #6B7280;
  --color-gray-light: #F3F4F6;
  
  /* Semantic colors */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-info: var(--color-primary);
}

/* ==================== BUTTONS ==================== */
.btn-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
  color: var(--color-white) !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(93, 171, 185, 0.35) !important;
  transition: all 0.3s ease !important;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-deep) 100%) !important;
  box-shadow: 0 6px 20px rgba(93, 171, 185, 0.45) !important;
  transform: translateY(-2px);
}

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

.btn-secondary {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%) !important;
  color: var(--color-white) !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(244, 181, 85, 0.35) !important;
}

.btn-secondary:hover {
  background: linear-gradient(135deg, var(--color-accent-dark) 0%, #D18A2E 100%) !important;
  box-shadow: 0 6px 20px rgba(244, 181, 85, 0.45) !important;
  transform: translateY(-2px);
}

.btn-outline {
  border: 2px solid var(--color-primary) !important;
  color: var(--color-primary) !important;
  background: transparent !important;
  transition: all 0.3s ease !important;
}

.btn-outline:hover {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
  box-shadow: 0 4px 14px rgba(93, 171, 185, 0.25) !important;
}

.btn-success {
  background: var(--color-success) !important;
  color: var(--color-white) !important;
}

/* ==================== CARDS ==================== */
.card {
  background: var(--color-white) !important;
  border: 1px solid rgba(93, 171, 185, 0.1) !important;
  border-radius: 16px !important;
  transition: all 0.3s ease !important;
}

.card:hover {
  border-color: var(--color-primary) !important;
  box-shadow: 0 8px 30px rgba(93, 171, 185, 0.15) !important;
  transform: translateY(-4px);
}

/* ==================== INPUTS ==================== */
.input-field, .form-control {
  border: 2px solid rgba(93, 171, 185, 0.2) !important;
  border-radius: 10px !important;
  transition: all 0.3s ease !important;
  background: var(--color-white) !important;
}

.input-field:focus, .form-control:focus {
  outline: none !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 4px rgba(93, 171, 185, 0.1) !important;
  background: var(--color-white) !important;
}

/* ==================== BADGES & CHIPS ==================== */
.badge-info {
  background: rgba(93, 171, 185, 0.15) !important;
  color: var(--color-primary-dark) !important;
  font-weight: 600 !important;
}

.badge-warning {
  background: rgba(244, 181, 85, 0.15) !important;
  color: #D18A2E !important;
  font-weight: 600 !important;
}

.badge-success {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #059669 !important;
  font-weight: 600 !important;
}

.chip {
  background: rgba(93, 171, 185, 0.12) !important;
  color: var(--color-primary-dark) !important;
  border: 1px solid rgba(93, 171, 185, 0.25) !important;
  border-radius: 20px !important;
}

/* ==================== TAILWIND UTILITY OVERRIDES ==================== */
/* Blues → Primary palette */
.text-blue-600, .text-blue-500, .text-blue-700, .text-blue-800 { 
  color: var(--color-primary) !important; 
}

.bg-blue-600, .bg-blue-500, .bg-blue-700, .bg-blue-800 { 
  background-color: var(--color-primary) !important; 
}

.bg-blue-50 { 
  background-color: var(--color-light-bg) !important; 
}

.border-blue-600, .border-blue-500, .border-blue-400, .border-blue-200 { 
  border-color: var(--color-primary) !important; 
}

.hover\:bg-blue-700:hover, .hover\:bg-blue-800:hover { 
  background-color: var(--color-primary-dark) !important; 
}

.hover\:text-blue-700:hover, .hover\:text-blue-600:hover { 
  color: var(--color-primary-dark) !important; 
}

/* Greens → Accent/Gold or success */
.text-green-600, .text-green-700 { 
  color: var(--color-success) !important; 
}

.bg-green-600, .bg-green-700 { 
  background-color: var(--color-success) !important; 
}

.bg-green-50 { 
  background-color: rgba(16, 185, 129, 0.1) !important; 
}

.border-green-500, .border-green-600 { 
  border-color: var(--color-success) !important; 
}

.hover\:bg-green-700:hover { 
  background-color: #059669 !important; 
}

/* Yellows → Accent gold */
.text-yellow-500, .text-yellow-600 { 
  color: var(--color-accent-dark) !important; 
}

.bg-yellow-500, .bg-yellow-600 { 
  background-color: var(--color-accent) !important; 
}

.bg-yellow-50 { 
  background-color: rgba(244, 181, 85, 0.1) !important; 
}

/* Purples → Accent */
.bg-purple-600, .text-purple-600 { 
  background-color: var(--color-accent) !important; 
  color: var(--color-accent) !important;
}

.hover\:bg-purple-700:hover { 
  background-color: var(--color-accent-dark) !important; 
}

/* Gradients */
.from-blue-600 { 
  --tw-gradient-from: var(--color-primary) !important;
  --tw-gradient-to: rgb(93 171 185 / 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-blue-800 { 
  --tw-gradient-to: var(--color-deep) !important; 
}

.from-purple-600 { 
  --tw-gradient-from: var(--color-accent) !important; 
}

.to-blue-600 { 
  --tw-gradient-to: var(--color-primary) !important; 
}

/* ==================== SPECIFIC COMPONENTS ==================== */
/* Navbar */
nav.bg-white {
  background: linear-gradient(to bottom, #ffffff 0%, #f9fafb 100%) !important;
  border-bottom: 2px solid rgba(93, 171, 185, 0.1) !important;
}

/* Hero gradient */
.bg-gradient-to-r {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 50%, var(--color-deep) 100%) !important;
}

/* Modal overlays */
.modal-overlay {
  backdrop-filter: blur(8px);
}

.modal-container {
  border: 2px solid rgba(93, 171, 185, 0.15) !important;
}

/* Step indicator */
.step.active .step-number {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
  box-shadow: 0 4px 12px rgba(93, 171, 185, 0.35) !important;
}

.step.completed .step-number {
  background: var(--color-success) !important;
}

.step.active:not(:last-child)::after,
.step.completed:not(:last-child)::after {
  background: var(--color-primary) !important;
}

/* Payment method cards */
.payment-method-card.selected {
  border-color: var(--color-primary) !important;
  background: var(--color-light-bg) !important;
  box-shadow: 0 4px 20px rgba(93, 171, 185, 0.2) !important;
}

.payment-method-card:hover {
  border-color: var(--color-primary) !important;
  box-shadow: 0 4px 16px rgba(93, 171, 185, 0.15) !important;
}

/* Scrollbar theming */
body::-webkit-scrollbar {
  width: 10px;
}

body::-webkit-scrollbar-track {
  background: var(--color-gray-light);
}

body::-webkit-scrollbar-thumb {
  background: var(--color-primary) !important;
  border-radius: 5px;
}

body::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-dark) !important;
}

/* ==================== UTILITY CLASSES ==================== */
.text-primary { color: var(--color-primary) !important; }
.text-primary-dark { color: var(--color-primary-dark) !important; }
.text-accent { color: var(--color-accent) !important; }
.text-deep { color: var(--color-deep) !important; }

.bg-primary { background-color: var(--color-primary) !important; }
.bg-primary-dark { background-color: var(--color-primary-dark) !important; }
.bg-accent { background-color: var(--color-accent) !important; }
.bg-light { background-color: var(--color-light-bg) !important; }

.border-primary { border-color: var(--color-primary) !important; }
.border-accent { border-color: var(--color-accent) !important; }

/* Links */
a.text-blue-600, a:hover.text-blue-700 { 
  color: var(--color-primary) !important; 
}

a.text-blue-600:hover { 
  color: var(--color-primary-dark) !important; 
}

/* Ensure text contrast on primary backgrounds */
.bg-primary, .bg-primary-dark, .bg-deep, .btn-primary, .btn-secondary {
  color: var(--color-white) !important;
}

/* Loading spinners */
.border-blue-600 {
  border-color: var(--color-primary) !important;
}

.border-t-transparent {
  border-top-color: transparent !important;
}

/* Shadows with brand colors */
.shadow-lg {
  box-shadow: 0 10px 30px rgba(93, 171, 185, 0.1) !important;
}

.shadow-xl {
  box-shadow: 0 20px 40px rgba(93, 171, 185, 0.15) !important;
}

.hover\:shadow-xl:hover {
  box-shadow: 0 20px 40px rgba(93, 171, 185, 0.2) !important;
}

/* Improve visual hierarchy */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-deep) !important;
}

/* Accent elements */
.text-accent-highlight {
  color: var(--color-accent-dark);
  font-weight: 600;
}

/* Status badges */
.status-pending {
  background: rgba(244, 181, 85, 0.15);
  color: var(--color-accent-dark);
}

.status-confirmed {
  background: rgba(93, 171, 185, 0.15);
  color: var(--color-primary-dark);
}

.status-completed {
  background: rgba(16, 185, 129, 0.15);
  color: var(--color-success);
}

/* Enhance forms */
label {
  color: var(--color-deep) !important;
  font-weight: 600;
}

/* Price displays */
.price-highlight {
  color: var(--color-accent-dark) !important;
  font-weight: 700;
}