/* ==========================================================================
   SENATOUR — متناسق مع هوية الهيدر/الفوتر:
   خلفية رمادية مسطحة (#32353a) بدون تدرج، خط Cairo/Amiri/Tajawal،
   ونص بيج فاتح (#fff7e6) — نفس ألوان وخط الهيدر بالضبط.
   فكرة التصميم: "خط الجولة" يربط أقسام الصفحة كرحلة عبر الولايات.
   ========================================================================== */

:root{
  /* نفس ألوان الهيدر والفوتر بالضبط */
  --header-gray:#32353a;
  --gold:#c18a32;
  --gold-hover:#b17a25;
  --beige:#fff7e6;
  --beige-soft:#fff7e6;

  /* درجات مشتقة للبطاقات والتباين فقط (ليست خلفية الصفحة) */
  --card:rgba(255,255,255,.05);
  --text-on-card:#fff7e6;
  --text-on-card-muted:#fff7e6;
  --line-on-card:#e7e2d6;
  --line-on-dark:rgba(255,247,230,.16);

  --shadow-lg:0 24px 48px -24px rgba(10,11,12,.45);
  --shadow-sm:0 8px 20px -10px rgba(10,11,12,.35);
  --radius-lg:22px;
  --radius-md:14px;


  --font-body:'Cairo','Amiri','Tajawal',sans-serif;
}

*{ box-sizing:border-box; }

/* ملاحظة مهمة: لا نضع أي خط أو لون على body أو * عامة،
   حتى لا تتأثر عناصر الهيدر/الفوتر الخاصة بكم (اللي عندها ستايل منفصل).
   كل الخطوط والألوان الجديدة محصورة داخل .senatour-page فقط. */

.page-shell{ overflow:hidden; }

.senatour-page{
  background:var(--header-gray); /* خلفية موحدة مسطحة، بدون تدرج أو فلتر، مطابقة للهيدر */
  color:#32353a;
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}

/* ---------- Hero ---------- */

.hero{
  font-family:Arial, sans-serif;
  background :#32353a;
  color:var(--beige);
  text-align:center;
  padding:20px 20px 20px;
  position:relative;
}

.hero-title{
    margin:0 0 12px;
    font-family:Arial, sans-serif;
    font-size:28px;
    font-weight:bold;
    color:#c18a32;
    letter-spacing:.5px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); 
}

.hero-sub{
  font-family:Arial, sans-serif;
  font-weight:700;
  font-size:clamp(20px,3vw,27px);
  margin:0 0 16px;
  color:#fff7e6;
}

.hero-text{
    font-family:Arial, sans-serif;
    font-size:20px;
    line-height:1.8;
    color:var(--beige-soft);

    margin:0 auto;
    max-width:520px;

    background:rgba(193,138,50,0.18);

    border-radius:20px;

    padding:20px 25px;

    border:1px solid rgba(193,138,50,0.45);

    box-shadow:0 10px 25px rgba(0,0,0,.15);
}

/* ---------- Route / timeline shell ---------- */

.route{
  max-width:1000px;
  margin:0 auto;
  padding:10px 20px 30px;
  position:relative;
}

.route-stop{
  display:flex;
  align-items:flex-start;
  gap:24px;
  padding:32px 0;
  position:relative;
}

.route-stop::before{
  /* الخط الفاصل بين المحطات، على الخلفية الرمادية مباشرة */
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  right:19px;
  width:2px;
  background:repeating-linear-gradient(
    to bottom,
    var(--line-on-dark) 0 6px,
    transparent 6px 13px
  );
}

.route-stop:first-child::before{ top:32px; }
.route-stop:last-child::before{ bottom:calc(100% - 32px); }

.stop-marker{
  flex:0 0 auto;
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--card);
  border:2px solid var(--gold);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:1;
  box-shadow:var(--shadow-sm);
}

.stop-marker::after{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--gold);
}

.stop-marker--live{
  box-shadow:0 0 0 6px rgba(193,138,50,.22);
}

.stop-marker--live::after{
  animation:pulseDot 2.2s ease-in-out infinite;
}

.pulse{
  position:absolute;
  inset:-2px;
  border-radius:50%;
  border:2px solid var(--gold);
  animation:pulseRing 2.2s ease-out infinite;
}

.stop-content{
  flex:1 1 auto;
  min-width:0;
}

.section-title{
  font-family: Arial, sans-serif;
  font-weight:700;
  font-size:19px;
  color:var(--beige);
  margin:2px 0 16px;
}

/* ---------- Current station card ---------- */

.station-card{
  background:var(--card);
  border-radius:var(--radius-lg);
  padding:26px 28px;
  box-shadow:var(--shadow-lg);
  border-top:4px solid var(--gold);
}

.station-card .state-name{
  font-family:Arial, sans-serif;
  font-family:var(--font-display);
  font-weight:800;
  font-size:21px;
  color:var(--gold);
  margin:0 0 14px;
  display:flex;
  align-items:center;
  gap:10px;
}

.station-meta{
  display:flex;
  flex-wrap:wrap;
  gap:14px 28px;
  margin-bottom:6px;
}

.station-meta span{
  font-size:16.5px;
  color:var(--text-on-card);
  display:flex;
  align-items:center;
  gap:8px;
}

.description{
  margin-top:16px;
  padding-top:16px;
  border-top:1px dashed var(--line-on-card);
  line-height:1.9;
  font-size:15.5px;
  color:#fff7e6;
}

.participate-btn{
  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;

  margin:28px auto 0;  /* هذا يضعه في الوسط */

  gap:8px;
  background:var(--gold);
  color:var(--beige);
  padding:15px 34px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  font-size:16.5px;
}

.participate-btn:hover{
  background:var(--gold-hover);
  transform:translateY(-3px);
  box-shadow:0 16px 30px -10px rgba(193,138,50,.6);
}

.empty-card{
  background:var(--card);
  padding:34px;
  border-radius:var(--radius-lg);
  text-align:center;
  color:var(--text-on-card-muted);
  box-shadow:var(--shadow-sm);
}

@media(max-width:768px){

  .station-card{
    padding:22px 18px;
  }

}

/* ---------- Request form ---------- */

.request-card{
  background:var(--card);
  border-radius:var(--radius-lg);
  padding:36px 38px;
  box-shadow:var(--shadow-lg);
}

.request-card .lead{
  font-family:Arial, sans-serif;
  color:var(--text-on-card-muted);
  font-size:16px;
  margin:0 0 26px;
  line-height:1.8;
}

.request-form{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  row-gap:16px;
  max-width:560px;
}

.request-form select,
.request-form button{

  flex:1 1 260px;

  height:50px;

  box-sizing:border-box;

  border-radius:var(--radius-md);

  font-size:16px;
  font-family:var(--font-body);

}

.request-form select{

  padding:0 20px;

  border:1.5px solid var(--line-on-card);

  background:#fbfaf7;

  color:#000;

}


.request-form button{

  padding:0 20px;

  background:var(--header-gray);

  color:var(--beige);

  border:none;

  cursor:pointer;

  font-weight:700;

}

@media(max-width:768px){

  .request-form select,
  .request-form button{

      flex:1 1 100%;
      width:100%;

  }

}

.request-form select:focus{
  outline:none;
  border-color:#000;
   text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}



.request-form button:hover{
  background:var(--gold);
  transform:translateY(-2px);
}

/* ---------- Statistics / ranking ---------- */

.rank-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.rank-row{
  display:flex;
  align-items:center;
  gap:18px;
  background:var(--card);
  border-radius:var(--radius-md);
  padding:16px 20px;
  box-shadow:var(--shadow-sm);
}

.rank-num{
  flex:0 0 auto;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--header-gray);
  color:var(--beige-soft);
  font-family:var(--font-display);
  font-weight:800;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.rank-row:nth-child(1) .rank-num{ background:var(--gold); color:var(--beige); }

.rank-body{
  flex:1 1 auto;
  min-width:0;
}

.rank-top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  margin-bottom:8px;
}

.rank-state{
  font-weight:800;
  font-size:16.5px;
  color:#fff7e6;
}

.rank-total{
  font-size:14px;
  color:var(--text-on-card-muted);
  white-space:nowrap;
}

.rank-bar-track{

    width:100%;

    height:10px;

    background:#4a4d52;

    border-radius:50px;

    overflow:hidden;

    margin-top:10px;

}

.rank-bar-fill{

    height:100%;

    width:0;

    background:#c18a32;

    border-radius:50px;

    transition:width .8s ease;

}

/* ---------- Motion ---------- */

@keyframes mapScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

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

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

@keyframes pulseRing{
  0%{ transform:scale(1); opacity:.65; }
  100%{ transform:scale(1.9); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .hero-inner, .stop-marker--live::after, .pulse, .globe-map{ animation:none !important; }
}

/* ---------- Responsive ---------- */

@media (max-width:680px){
  .hero{ padding:56px 18px 62px; }
  .route-stop{ gap:14px; padding:24px 0; }
  .stop-marker{ width:32px; height:32px; }
  .route-stop::before{ right:15px; }
  .station-card, .request-card{ padding:22px 18px; }
  .station-card .state-name{ font-size:19px; }
  .rank-top{ flex-direction:column; align-items:flex-start; gap:4px; }
}


/* ==========================================================================
   SENATOUR - Participation Page
   ========================================================================== */

.senatour-page{
    background:#32353a;
    min-height:100vh;
    padding-bottom:80px;
}

.senatour-header{
    text-align:center;
    padding:20px 20px 20px;
    max-width:900px;
    margin:auto;
}

.senatour-header h1{
    margin:0 0 12px;
    font-family:Arial, sans-serif;
    font-size:28px;
    font-weight:bold;
    color:#c18a32;
    letter-spacing:.5px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); 
}

.senatour-header h2{
    font-family:Arial, sans-serif;
    font-size:28px;
    color:var(--beige);
    margin-bottom:18px;
}

.senatour-header p{
    max-width:700px;
    margin:auto;
    color:var(--beige-soft);
    line-height:2;
    font-size:17px;
}

.station-state-animate{

    color:var(--gold);

    font-weight:800;

    display:inline-block;

    animation: stateGlow 2.5s ease-in-out infinite;

}


@keyframes stateGlow{

    0%,100%{

        opacity:1;

        text-shadow:
        0 0 0 rgba(193,138,50,0);

    }


    50%{

        opacity:.75;

        text-shadow:
        0 0 12px rgba(193,138,50,.9);

    }

}

/* ---------------- Sections ---------------- */

.info-section{
    max-width:900px;
    margin:40px auto;
    padding:0 20px;
}

.info-section h2{
    font-family:Arial, sans-serif;
    color:var(--gold);
    text-align:center;
    font-size:28px;
    margin-bottom:25px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); 
}

/* ---------------- Cards ---------------- */

.service-card{
    background:var(--card);
    border-radius:var(--radius-lg);
    padding:30px;
    border-top:4px solid var(--gold);
    box-shadow:var(--shadow-lg);
}

.service-card p{
    color:var(--beige);
    margin:18px 0;
    font-size:17px;
    line-height:1.8;
}

.service-card strong{
    color:var(--gold);
}

/* ---------------- Lists ---------------- */

.info-section ul{
    list-style:none;
    padding:0;
    margin:0;
}

.info-section ul li{
    background:var(--card);
    margin-bottom:14px;
    padding:18px 22px;
    border-radius:14px;
    color:var(--beige);
    line-height:1.8;
    border-right:4px solid var(--gold);
    box-shadow:var(--shadow-sm);
}

/* ---------------- Timeline ---------------- */

.timeline{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
}

.timeline-item{
    width:650px;
    max-width:70%;
    margin:0 auto;

    display:flex;
    align-items:center;
    justify-content:flex-start; /* يبدأ من اليمين في RTL */

    gap:15px;

    background:var(--card);
    color:var(--beige);

    padding:18px 24px;
    border-radius:16px;

    border:1px solid rgba(255,255,255,.08);
    box-shadow:var(--shadow-sm);

    text-align:right;
    transition:.3s;
}


.timeline-item:hover{
    transform:translateY(-3px);
    border-color:var(--gold);
}

.arrow{
    color:var(--gold);
    font-size:30px;
    font-weight:bold;
}

/* ---------------- Notice ---------------- */

.notice .info-section,
.notice{
    margin-top:60px;
}

.notice ul li{
    border-right:4px solid #d9534f;
}

/* ---------------- CTA ---------------- */

.cta-section{

    display:flex;
    justify-content:center;
    align-items:center;

    gap:20px;

    margin-top:40px;

}


.cta-section a{

    text-align:center;

}


/* زر المشاركة */
.cta-section .participate-btn{

    width:auto;

    font-size:18px;
    padding:18px 42px;

}


/* زر العودة */
.cta-section .back-senatour{

    display:flex;
    align-items:center;
    justify-content:center;

    padding:18px 42px;

    border-radius:999px;

    background:rgba(193,138,50,.15);

    color:#c18a32;

    border:1px solid #c18a32;

    text-decoration:none;

    font-size:18px;

    font-weight:700;

    width:auto;
}

.cta-section{
    width:100%;
}

.cta-section .back-senatour{
    margin:0 auto;
}

/* الهاتف */

@media(max-width:768px){

    .cta-section{

        flex-direction:column;

        gap:16px;

    }


    .cta-section .participate-btn,
    .cta-section .back-senatour{

        width:90%;

    }

}

.cta-section .participate-btn,
.cta-section .back-senatour{

    margin:0;

    display:flex;
    align-items:center;
    justify-content:center;

    height:58px;

}

/* ---------------- Responsive ---------------- */

@media (max-width:768px){

    .senatour-header{
        padding:50px 20px 30px;
    }

    .senatour-header h1{
        font-size:34px;
    }

    .senatour-header h2{
        font-size:24px;
    }

    .info-section h2{
        font-size:24px;
    }

    .service-card{
        padding:22px;
    }

        .timeline-item{
        width:100%;
        max-width:90%;
        padding:16px 18px;
        font-size:16px;
        gap:12px;
    }
    
    .step-number{
        width:30px;
        height:30px;
        font-size:16px;
    }

}

.step-number{
     flex-shrink:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    margin-left:12px;
    border-radius:8px;

    background:#c18a32;
    color:#fff7e6;

    font-family:Arial, sans-serif;
    font-weight:bold;
    font-size:18px;

    box-shadow:0 6px 14px rgba(193,138,50,.35);
}

.email-link{
    color: #c18a32;
    text-decoration: none;
    font-weight: 600;
    transition: color .3s ease;
}

.email-link:hover{
    color: #fff7e6;
    text-decoration: underline;
}

/* ==========================================
   Popup المشاركة
========================================== */

.popup-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 9999;

    opacity: 0;
    visibility: hidden;

    transition: .35s ease;
}

.popup-overlay.active{
    opacity: 1;
    visibility: visible;
}

.popup-box{
    width: 100%;
    max-width: 560px;

    background: #32353a;
    color: #fff7e6;

    border: 1px solid rgba(193,138,50,.35);
    border-radius: 18px;

    padding: 35px;

    text-align: center;

    position: relative;

    box-shadow:
        0 25px 60px rgba(0,0,0,.45);

    transform: scale(.9);
    transition: .35s ease;
}

.popup-overlay.active .popup-box{
    transform: scale(1);
}

.popup-box h2{
    color: #c18a32;
    margin-bottom: 18px;
    font-size: 28px;
}

.popup-box p{
    line-height: 1.9;
    color: #f2eadb;
    margin-bottom: 20px;
}

.popup-email{
    display: inline-block;

    color: #c18a32;
    text-decoration: none;

    font-size: 20px;
    font-weight: bold;

    margin-bottom: 22px;

    transition: .3s;
}

.popup-email:hover{
    color: #fff7e6;
}

.popup-note{
    font-size: 15px;
    opacity: .9;
}

.popup-btn{
    display: inline-block;

    margin-top: 10px;

    background: #c18a32;
    color: white;

    padding: 14px 28px;

    border-radius: 10px;

    text-decoration: none;
    font-weight: bold;

    transition: .3s;
}

.popup-btn:hover{
    background: #d79e41;
    transform: translateY(-2px);
}

.popup-close{
    position: absolute;

    top: 15px;
    left: 15px;

    width: 40px;
    height: 40px;

    border: none;
    border-radius: 50%;

    background: rgba(255,255,255,.08);

    color: #fff;

    cursor: pointer;

    font-size: 18px;

    transition: .3s;
}

.popup-close:hover{
    background: #c18a32;
}

/* الهاتف */

@media(max-width:768px){

    .popup-box{

        padding:25px;

    }

    .popup-box h2{

        font-size:23px;

    }

    .popup-email{

        font-size:17px;
        word-break:break-all;

    }

}

.header-image{
    display: flex;
    justify-content: center;
    margin: 25px 0;
}

.header-image a{
    display: block;
}

.header-image img{
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;

    border-radius: 18px;
    cursor: zoom-in;

    box-shadow: 0 12px 30px rgba(0,0,0,.20);

    transition: transform .3s ease;
}

.header-image img:hover{
    transform: scale(1.02);
}

@media (max-width:768px){

    .header-image img{

        max-width: 320px;

    }

}

.hero-logo{
    display: flex;
    justify-content: center;
    margin: 20px 0;

    perspective: 1000px;
}

.hero-logo img{
    width: 110px;
    height: 110px;
    object-fit: contain;

    animation: rotateYLogo 5s linear infinite;

    transform-style: preserve-3d;
}

@keyframes rotateYLogo{

    from{
        transform: rotateY(0deg);
    }

    to{
        transform: rotateY(360deg);
    }

}

.back-section{

    display:flex;
    justify-content:center;
    align-items:center;

    margin:50px 0 30px;

}


.back-senatour{

    display:flex;
    align-items:center;
    justify-content:center;

    padding:18px 42px;

    border-radius:999px;

    background:rgba(193,138,50,.15);

    color:#c18a32;

    border:1px solid #c18a32;

    text-decoration:none;

    font-size:18px;

    font-weight:700;

    transition:.3s ease;

}

.back-senatour:hover{

    background:#c18a32;

    color:#fff7e6;

    transform:translateY(-3px);

}