/* ================= GLOBAL ================= */
body{
  margin:0;
  background:#f6f9ff;
  font-family: Inter, system-ui;
  padding-top:140px;
}

/* ================= COMMON WIDTH ================= */
.page-container{
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
}

/* ================= HEADER ================= */
.ghost-header{
  position:fixed;
  top:20px;
  left:0;
  width:100%;
  z-index:1000;
  transition:transform .4s ease, top .35s ease;
}

.ghost-header.hide{
  transform:translateY(-140%);
}

.ghost-header.scrolled{
  top:0;
}

.ghost-inner{
  max-width:1280px;
  margin:auto;
  padding:20px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:linear-gradient(135deg,#f7f9ff,#eef4ff);
  border-radius:22px;
  box-shadow:0 25px 50px rgba(0,0,0,.10);
  transition:all .35s ease;
}

.ghost-header.scrolled .ghost-inner{
  background:rgba(246,249,255,.85);
  backdrop-filter:blur(12px);
  border-radius:0;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}

/* ================= BRAND ================= */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.brand-text{
  font-size:22px;
  font-weight:700;
  color:#1e3a8a;
}

/* ================= LOGO ANIMATION ================= */
.logo-link{
  text-decoration: none;
}
.logo-link:hover{
  text-decoration: none;
}

.pro-logo{
  position:relative;
  width:36px;
  height:36px;
}

.pro-logo .p{
  position:absolute;
  width:14px;
  height:14px;
  border-radius:3px;
  background:#4da3ff;
  animation:logoShow 6s infinite ease-in-out;
}

.pro-logo .right,
.pro-logo .left{
  background:#3cc7e8;
  
}

.pro-logo .top{ top:0; left:11px; }
.pro-logo .right{ top:11px; right:0; }
.pro-logo .bottom{ bottom:0; left:11px; }
.pro-logo .left{ top:11px; left:0; }

.pro-logo .top{ animation-delay:0s; }
.pro-logo .right{ animation-delay:.15s; }
.pro-logo .bottom{ animation-delay:.3s; }
.pro-logo .left{ animation-delay:.45s; }

@keyframes logoShow{
  0%,40%{ transform:translate(0,0) rotate(0deg); }
  50%{ transform:translate(6px,6px) rotate(90deg); }
  60%{ transform:translate(-6px,6px) rotate(180deg); }
  70%,100%{ transform:translate(0,0) rotate(0deg); }
}

/* ================= DESKTOP NAV ================= */
.desktop-only{ display:flex; }
.mobile-only{ display:none; }

.ghost-nav{
  display:flex;
  gap:28px;
}

.ghost-nav a{
  text-decoration:none;
  font-size:16px;
  font-weight:500;
  color:#334155;
  position:relative;
}

.ghost-nav a.active,
.ghost-nav a:hover{
  color:#2563eb;
}

.ghost-nav a.active::after{
  content:"";
  position:absolute;
  bottom:-8px;
  left:0;
  width:100%;
  height:3px;
  background:#2563eb;
  border-radius:4px;
}

/* ================= RIGHT BUTTONS ================= */
.ghost-right{
  display:flex;
  align-items:center;
  gap:18px;
}

.ghost-link{
  text-decoration:none;
  font-weight:500;
  color:#334155;
}

.ghost-btn{
  background:#2563eb;
  color:#fff;
  padding:10px 22px;
  border-radius:14px;
  text-decoration:none;
  font-weight:500;
}

/* ================= MOBILE MENU ================= */
.menu-btn{
  font-size:26px;
  cursor:pointer;
  color:#2563eb;
}

.mobile-dropdown{
  display:none;
  flex-direction:column;
  background:#fff;
  padding:18px;
  box-shadow:0 20px 40px rgba(0,0,0,.15);
  border-radius:0 0 18px 18px;
}

.mobile-dropdown a{
  padding:12px 0;
  text-decoration:none;
  font-weight:500;
  color:#334155;
  border-bottom:1px solid #eee;
}

.mobile-dropdown a:last-child{
  border-bottom:none;
}

.mobile-login{
  margin-top:10px;
  background:#2563eb;
  color:#fff !important;
  padding:12px;
  border-radius:12px;
  text-align:center;
}

.mobile-dropdown.open{
  display:flex;
}

/* ================= HERO ================= */
.hero{
  min-height:calc(100vh - 140px);
  display:flex;
  align-items:center;
}

.hero-curve{
  position:relative;
  padding-bottom:120px;
}

.hero-curve::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:120px;
  background:#f6f9ff;
  border-top-left-radius:100% 80px;
  border-top-right-radius:100% 80px;
}

.hero-title{
  font-size:56px;
  font-weight:700;
}

.hero-title span{
  color:#5b6cff;
}

.hero-text{
  font-size:18px;
  color:#555;
  margin:20px 0;
}

.btn-main{
  background:#5b6cff;
  color:#fff;
  border-radius:12px;
  padding:12px 26px;
}

.hero-img{
  max-width:420px;
  animation:float 3s ease-in-out infinite;
}

@keyframes float{
  0%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
  100%{transform:translateY(0)}
}

/* ================= MOBILE ================= */
@media(max-width:992px){

  body{
    padding-top:110px;
  }

  .desktop-only{ display:none; }
  .mobile-only{ display:block; }

  .ghost-inner{
    padding:14px 18px;
  }

  .brand-text{
    font-size:18px;
  }

  .hero-title{
    font-size:38px;
  }
}

/* review css */
/* ===== REVIEW FORM SECTION ===== */

.review-form-section{
  background:linear-gradient(180deg,#f7faff,#ffffff);
  padding:100px 0;
}

.review-form-header{
  text-align:center;
  margin-bottom:60px;
}

.review-form-header h2{
  font-size:36px;
  font-weight:800;
}
.review-form-header span{color:#4f6ef7}

.review-form-header p{
  color:#6b7280;
  margin-top:10px;
}

.review-form-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:40px;
}

/* FORM CARD */
.review-form-card{
  background:#fff;
  padding:35px;
  border-radius:24px;
  box-shadow:0 20px 45px rgba(0,0,0,.08);
}

.review-form-card label{
  font-size:14px;
  margin-top:16px;
  display:block;
}

.review-form-card input,
.review-form-card textarea{
  width:100%;
  padding:12px 14px;
  margin-top:6px;
  border-radius:12px;
  border:1px solid #ddd;
  font-size:14px;
}

.form-row{
  display:flex;
  gap:16px;
}

/* STARS */
.rating-stars{
  font-size:26px;
  color:#d1d5db;
  cursor:pointer;
}
.rating-stars span.active{
  color:#fbbf24;
}

/* BUTTON */
.btn-submit-review{
  margin-top:22px;
  background:#4f6ef7;
  color:#fff;
  border:none;
  padding:14px 34px;
  border-radius:14px;
  font-size:15px;
}

.form-note{
  display:block;
  margin-top:10px;
  color:#6b7280;
}

/* RIGHT CARD */
.review-display-card{
  background:#fff;
  padding:35px;
  border-radius:24px;
  box-shadow:0 20px 45px rgba(0,0,0,.08);
  text-align:center;
}

.review-robot{
  width:120px;
  margin-bottom:20px;
  animation:robotFloat 3s ease-in-out infinite;
}

@keyframes robotFloat{
  0%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
  100%{transform:translateY(0)}
}

.review-text{
  font-size:18px;
  font-style:italic;
  margin:20px 0;
}

.review-author{
  color:#6b7280;
}
/* =========================
   MOBILE RESPONSIVE REVIEW
========================= */

@media (max-width: 768px){

  .review-form-section{
    padding:60px 15px;
  }

  .review-form-header h2{
    font-size:26px;
  }

  .review-form-grid{
    grid-template-columns:1fr;   /* 🔥 side by side → column */
    gap:30px;
  }

  /* FORM FIRST */
  .review-form-card{
    order:1;     /* 👈 form upar */
    padding:25px;
  }

  /* REVIEWS SECOND */
  .review-display-card{
    order:2;     /* 👈 reviews niche */
    padding:25px;
  }

  .form-row{
    flex-direction:column;  /* name + mobile one below other */
    gap:0;
  }

  .review-robot{
    width:90px;
  }

  .review-text{
    font-size:16px;
  }

  .btn-submit-review{
    width:100%;     /* mobile full button */
    text-align:center;
  }
}
/* ===== FIX: MOBILE CENTER ISSUE ===== */

@media (max-width: 768px){

  /* page container safe padding */
  .page-container{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .review-form-grid{
    grid-template-columns:1fr;
    gap:24px;
    width:100%;
  }

  .review-form-card,
  .review-display-card{
    width:100% !important;
    max-width:100%;
    margin:0 auto;           /* 🔥 center */
    box-sizing:border-box;
  }

  /* robot + text center */
  .review-display-card{
    text-align:center;
  }

  /* prevent side overflow */
  body, html{
    overflow-x:hidden;
  }

  /* robot image safe */
  .review-robot{
    display:block;
    margin:0 auto 16px auto;
  }
}

/* =====================================================
   FIND DOCTORS PAGE – BACKGROUND & TITLE
===================================================== */

.find-doctors-section{
  background:
    radial-gradient(circle at top, #eef4ff 0%, #f8fbff 40%, #ffffff 75%);
  padding:90px 0 140px;
}

.page-title{
  text-align:center;
  font-weight:800;
  font-size:32px;
  margin-bottom:45px;
  color:#1f2937;
  letter-spacing:-.3px;
}

/* =====================================================
   FILTER BAR
===================================================== */

.doctor-filter-bar{
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:55px;
}

.filter-item{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.filter-item label{
  font-size:13px;
  font-weight:700;
  color:#374151;
}

.filter-item input,
.filter-item select{
  padding:10px 14px;
  border-radius:14px;
  border:1px solid #dbe4f3;
  min-width:180px;
  font-size:14px;
  outline:none;
}

.filter-item input:focus,
.filter-item select:focus{
  border-color:#2563eb;
}

/* =====================================================
   DOCTOR CARD (PREMIUM LOOK)
===================================================== */

.doctor-card-v3{
  background:#ffffff;
  border-radius:26px;
  box-shadow:0 20px 45px rgba(0,0,0,.08);
  padding:26px;
  max-width:400px;
  margin:0 auto;
  position:relative;
  transition:.35s ease;
}

.doctor-card-v3:hover{
  transform:translateY(-8px);
  box-shadow:0 28px 60px rgba(0,0,0,.12);
}

/* =====================================================
   ROBOT BADGE (AI ASSISTED)
===================================================== */

.robot-badge{
  position:absolute;
  top:16px;
  right:16px;
  display:flex;
  align-items:center;
  gap:6px;
}

.robot-badge img{
  width:30px;
  opacity:.6;
}

.robot-badge span{
  font-size:11px;
  font-weight:700;
  color:#6b7280;
}

/* =====================================================
   CARD INNER LAYOUT
===================================================== */

.doctor-card-inner{
  display:flex;
  gap:16px;
  align-items:flex-start;
}

/* PHOTO */
.doctor-left img{
  width:84px;
  height:84px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid #e6efff;
}

/* RIGHT CONTENT */
.doctor-right{
  flex:1;
}

.doctor-name{
  margin:0;
  font-size:19px;
  font-weight:800;
  color:#111827;
}

.doctor-spec{
  display:inline-block;
  margin-top:5px;
  background:#eef6ff;
  color:#2563eb;
  font-size:12px;
  font-weight:700;
  padding:3px 12px;
  border-radius:999px;
}

.doctor-clinic{
  font-size:13px;
  color:#6b7280;
  margin:8px 0 4px;
  line-height:1.4;
}

.doctor-time{
  font-size:13px;
  font-weight:600;
  color:#374151;
  margin-bottom:14px;
}

/* =====================================================
   CARD BOTTOM (FEE + BUTTONS)
===================================================== */

.doctor-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.doctor-fee{
  background:#eef6ff;
  color:#2563eb;
  padding:7px 16px;
  border-radius:999px;
  font-weight:800;
  font-size:14px;
}

.doctor-actions{
  display:flex;
  gap:8px;
}

.doctor-actions .btn{
  border-radius:12px;
}

.btn-get-token{
  box-shadow:0 8px 18px rgba(37,99,235,.35);
}

/* =====================================================
   AI MODALS (GET TOKEN FLOW)
===================================================== */

.ai-modal{
  border-radius:26px;
  overflow:hidden;
  box-shadow:0 25px 60px rgba(0,0,0,.25);
}

/* MODAL HEADER */
.ai-head{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 20px;
  background:linear-gradient(135deg,#eef4ff,#f7faff);
}

.ai-head img{
  width:42px;
}

.ai-head h5{
  margin:0;
  font-weight:800;
}

.ai-head small{
  font-size:12px;
  color:#6b7280;
}

/* MODAL BODY */
.ai-mid{
  padding:22px;
}

.ai-mid label{
  font-size:13px;
  font-weight:600;
  margin-top:8px;
}

.ai-mid input,
.ai-mid textarea{
  width:100%;
  padding:12px 14px;
  margin-top:4px;
  border-radius:14px;
  border:1px solid #dbe4f3;
  font-size:14px;
}

.ai-mid textarea{
  resize:none;
  min-height:70px;
}

/* MODAL FOOTER */
.ai-foot{
  padding:18px 22px;
  display:flex;
  gap:10px;
}

.ai-foot .btn{
  border-radius:14px;
}

/* =====================================================
   TOKEN SLIP
===================================================== */

.queue{
  font-size:26px;
  font-weight:900;
  text-align:center;
  color:#2563eb;
  margin:20px 0 6px;
}

.note{
  text-align:center;
  color:#6b7280;
  font-size:13px;
}

/* =====================================================
   MOBILE RESPONSIVE
===================================================== */

@media(max-width:768px){

  .find-doctors-section{
    padding:70px 0 110px;
  }

  .page-title{
    font-size:26px;
    margin-bottom:35px;
  }

  .doctor-card-v3{
    max-width:100%;
  }

  .doctor-card-inner{
    gap:14px;
  }

  .doctor-actions{
    flex-direction:column;
    width:100%;
  }

  .doctor-actions .btn{
    width:100%;
  }

  .filter-item input,
  .filter-item select{
    min-width:100%;
  }

  .ai-head{
    padding:16px;
  }

  .ai-mid{
    padding:18px;
  }
}



/* notice note css */

.disclaimer-overlay{
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.disclaimer-box{
  background:#fff;
  max-width:520px;
  width:90%;
  padding:26px;
  border-radius:12px;
  text-align:center;
  animation: fadeIn 0.4s ease;
}

.disclaimer-box h3{
  margin-bottom:12px;
}

.disclaimer-box p{
  font-size:15px;
  color:#333;
  line-height:1.6;
  margin:10px 0;
}

.disclaimer-box hr{
  margin:14px 0;
}

.disclaimer-box button{
  margin-top:18px;
  padding:11px 26px;
  border:none;
  border-radius:8px;
  background:#2563eb;
  color:#fff;
  font-size:15px;
  cursor:pointer;
}

.disclaimer-box button:hover{
  background:#1e40af;
}

@keyframes fadeIn{
  from{opacity:0; transform:scale(0.95);}
  to{opacity:1; transform:scale(1);}
}