/*
  ZeinabQorbani.com - Site Styles
  Notes:
  - This file is intentionally plain CSS (no build steps) and complements Tailwind CDN.
  - Keep custom, non-Tailwind behaviors here (animations, separators, widgets, etc.).
*/

/* Base */
body{
  font-family:'Vazirmatn',sans-serif;
  overflow-x:hidden;
  background-color:#ffffff;
  color:#333;
  padding-bottom:100px; /* mobile bottom nav */
}
@media (min-width:1024px){ body{ padding-bottom:0; } }
html{ scroll-behavior:smooth; }

/* Scrollbar */
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background:#f1f1f1; }
::-webkit-scrollbar-thumb{ background:#a78bfa; border-radius:4px; }
::-webkit-scrollbar-thumb:hover{ background:#5b21b6; }

/* Tailwind CDN doesn't ship line-clamp plugin by default */
.line-clamp-3{
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}

/* Luxury curve separators */
.custom-shape-divider-bottom{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  overflow:hidden;
  line-height:0;
  transform:rotate(180deg);
}
.custom-shape-divider-bottom svg{
  position:relative;
  display:block;
  width:calc(100% + 1.3px);
  height:70px;
}
.fill-gray-50{ fill:#f9fafb; }
.fill-white{ fill:#ffffff; }
.fill-dark{ fill:#1e1b4b; }
.fill-purple-light{ fill:rgba(91,33,182,0.05); }

/* Modern header */
.top-bar{ background:linear-gradient(90deg,#2e1065 0%,#5b21b6 100%); }
.main-header{
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,0.6);
  transition:all 0.3s ease;
}
.nav-item{
  position:relative;
  font-weight:600;
  color:#4b5563;
  font-size:0.95rem;
  transition:all 0.3s ease;
  padding:8px 12px;
  border-radius:8px;
}
.nav-item:hover{ color:#5b21b6; background-color:rgba(91,33,182,0.05); }

/* Animations */
.fade-in-up{ animation:fadeInUp 0.8s ease-out forwards; opacity:0; transform:translateY(30px); }
@keyframes fadeInUp{ to{ opacity:1; transform:translateY(0);} }

.blob{ position:absolute; filter:blur(80px); z-index:-1; opacity:0.4; animation:float 10s infinite ease-in-out; }
@keyframes float{ 0%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(20px,-20px) scale(1.1);} 100%{ transform:translate(0,0) scale(1);} }
.animation-delay-2000{ animation-delay:2s; }

/* Hero image */
.hero-image-frame{
  border-radius:50px 50px 50px 0;
  overflow:hidden;
  border:8px solid rgba(255,255,255,0.8);
  box-shadow:0 25px 50px -12px rgba(46,16,101,0.25);
  transition:transform 0.5s ease;
  position:relative;
}
.hero-image-frame:hover{ transform:translateY(-10px); }
.name-overlay{ background:linear-gradient(to top, rgba(46,16,101,0.9) 0%, rgba(91,33,182,0.6) 50%, transparent 100%); }

/* Modern service cards */
.modern-service-card{
  background:#ffffff;
  border:1px solid rgba(229,231,235,0.5);
  box-shadow:0 4px 6px -1px rgba(0,0,0,0.02), 0 2px 4px -1px rgba(0,0,0,0.02);
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  overflow:hidden;
  z-index:1;
}
.modern-service-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg,#5b21b6,#a78bfa);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 0.4s ease;
  z-index:2;
}
.modern-service-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 25px -5px rgba(91,33,182,0.10), 0 10px 10px -5px rgba(91,33,182,0.04);
  border-color:rgba(167,139,250,0.30);
}
.modern-service-card:hover::before{ transform:scaleX(1); }
.service-icon-wrapper{ transition:all 0.4s ease; }
.modern-service-card:hover .service-icon-wrapper{
  background-color:#5b21b6;
  color:#ffffff;
  transform:rotateY(180deg);
}
.modern-service-card:hover .service-icon-wrapper i{ transform:rotateY(-180deg); }

/* Persian datepicker */
.datepicker-plot-area{
  font-family:'Vazirmatn',sans-serif !important;
  border-radius:16px !important;
  box-shadow:0 10px 25px rgba(0,0,0,0.1) !important;
  border:none !important;
  z-index:9999 !important;
}
.datepicker-header{ background-color:#5b21b6 !important; color:white !important; border-radius:16px 16px 0 0 !important; }
.datepicker-day-view .table-days td span.selected{ background-color:#5b21b6 !important; border-radius:50% !important; }
.datepicker-day-view .table-days td span.disabled{ opacity:0.4; cursor:not-allowed; background-color:#f3f4f6 !important; }

/* Status animations */
@keyframes pulse-green{ 0%{ box-shadow:0 0 0 0 rgba(16,185,129,0.7);} 70%{ box-shadow:0 0 0 6px rgba(16,185,129,0);} 100%{ box-shadow:0 0 0 0 rgba(16,185,129,0);} }
@keyframes pulse-red{ 0%{ box-shadow:0 0 0 0 rgba(239,68,68,0.7);} 70%{ box-shadow:0 0 0 6px rgba(239,68,68,0);} 100%{ box-shadow:0 0 0 0 rgba(239,68,68,0);} }
.status-dot-top{ width:6px; height:6px; border-radius:50%; background-color:#10b981; box-shadow:0 0 8px #10b981; animation:pulse-green 2s infinite; }
.status-dot-top.closed{ background-color:#ef4444; box-shadow:0 0 8px #ef4444; animation:pulse-red 2s infinite; }

/* Mobile bottom nav */
.mobile-nav-container{
  position:fixed;
  bottom:5px;
  left:50%;
  transform:translateX(-50%);
  width:92%;
  max-width:400px;
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-radius:24px;
  box-shadow:0 10px 40px -10px rgba(46,16,101,0.15);
  border:1px solid rgba(255,255,255,0.5);
  z-index:1000;
  padding:10px 15px;
}
.nav-link{ position:relative; color:#9ca3af; transition:all 0.3s cubic-bezier(0.4,0,0.2,1); }
.nav-link.active{ color:#5b21b6; }
.nav-link.active::after{
  content:'';
  position:absolute;
  bottom:-6px;
  left:50%;
  transform:translateX(-50%);
  width:4px;
  height:4px;
  background-color:#5b21b6;
  border-radius:50%;
}
.floating-action-btn{
  background:linear-gradient(135deg,#5b21b6 0%,#2e1065 100%);
  box-shadow:0 8px 20px rgba(91,33,182,0.4);
  transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.floating-action-btn:active{ transform:scale(0.9); }

/* Modal */
.modal-overlay{ background:rgba(46,16,101,0.6); backdrop-filter:blur(8px); transition:opacity 0.3s ease; }
.modal-content{ transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1); }
.otp-input{ letter-spacing:0.5em; text-align:center; font-size:1.5rem; font-weight:700; }
.otp-input.is-invalid{ border-color:#ef4444 !important; }

/* Modern floating input group (RTL) */
.modern-input-group{
  position:relative;
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:1rem;
  transition:all 0.3s ease;
  display:flex;
  align-items:center;
  height:64px;
}
.modern-input-group:focus-within{
  border-color:#5b21b6;
  box-shadow:0 0 0 4px rgba(91,33,182,0.1);
  background:#ffffff;
}
.modern-input-group input,
.modern-input-group select,
.modern-input-group textarea{
  width:100%;
  height:100%;
  background:transparent;
  border:none;
  outline:none;
  color:#334155;
  font-weight:600;
  font-size:0.95rem;
  padding:1.5rem 3.5rem 0.5rem 1rem !important;
  appearance:none;
  z-index:1;
}
.modern-input-group textarea{ height:auto; padding-top:2rem !important; }
.modern-input-group label{
  position:absolute;
  top:50%;
  right:3.5rem;
  transform:translateY(-50%);
  font-size:0.9rem;
  color:#94a3b8;
  font-weight:500;
  pointer-events:none;
  transition:all 0.25s cubic-bezier(0.4,0,0.2,1);
  z-index:2;
  background-color:transparent;
}
.modern-input-group input:focus ~ label,
.modern-input-group input:not(:placeholder-shown) ~ label,
.modern-input-group select:focus ~ label,
.modern-input-group select:valid ~ label,
.modern-input-group textarea:focus ~ label,
.modern-input-group textarea:not(:placeholder-shown) ~ label{
  top:1rem;
  transform:translateY(0);
  font-size:0.7rem;
  color:#5b21b6;
  font-weight:700;
}
.modern-input-group .icon-wrapper{
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:3.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#cbd5e1;
  transition:color 0.3s;
  font-size:1.2rem;
  z-index:2;
}
.modern-input-group:focus-within .icon-wrapper{ color:#5b21b6; }
.modern-input-group .chevron-wrapper{
  position:absolute;
  left:1rem;
  top:0;
  bottom:0;
  display:flex;
  align-items:center;
  pointer-events:none;
  color:#cbd5e1;
}

/* Luxury review card */
.review-card{
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.8);
  transition:all 0.4s ease;
}
.review-card:hover{
  transform:translateY(-5px);
  box-shadow:0 25px 50px -12px rgba(91,33,182,0.15);
  border-color:#f3e8ff;
}
.quote-icon{ font-family:serif; line-height:1; }

/* Professional blog cards */
.blog-card{ transition:all 0.4s cubic-bezier(0.4,0,0.2,1); }
.blog-card:hover{ transform:translateY(-8px); box-shadow:0 25px 50px -12px rgba(91,33,182,0.2); }
.blog-card .blog-image{ transition:transform 0.6s ease; }
.blog-card:hover .blog-image{ transform:scale(1.08); }
.blog-category-tag{ backdrop-filter:blur(8px); background:rgba(255,255,255,0.9); }

/* Schedule */
.vip-schedule-card{ background:linear-gradient(135deg,#2e1065 0%,#4c1d95 100%); position:relative; overflow:hidden; }
.vip-schedule-row{ transition:all 0.3s ease; border-bottom:1px solid rgba(255,255,255,0.05); }
.vip-schedule-row:last-child{ border-bottom:none; }
.vip-schedule-row:hover{ background:rgba(255,255,255,0.05); padding-right:1.25rem; }
.vip-today-badge{ background:linear-gradient(90deg,#d4af37,#fcd34d); color:#2e1065; box-shadow:0 0 15px rgba(212,175,55,0.4); }