:root{
    --bg:#070A10;
    --panel: rgba(255,255,255,.06);
    --text:#EAF0FF;
    --muted: rgba(234,240,255,.72);
    --line: rgba(255,255,255,.12);
    --shadow: 0 30px 80px rgba(0,0,0,.55);
    --accent: #7cf7ff;
    --accent2:#b69bff;
    --radius: 18px;
  }
  
  :root[data-theme="light"]{
    --bg:#F7F8FC;
    --panel: rgba(0,0,0,.04);
    --text:#0B1020;
    --muted: rgba(11,16,32,.65);
    --line: rgba(0,0,0,.10);
    --shadow: 0 25px 70px rgba(0,0,0,.12);
    --accent: #2563eb;
    --accent2:#7c3aed;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    background: var(--bg);
    color: var(--text);
    overflow-x:hidden;
  }
  
  .bgfx{
    position:fixed; inset:0; pointer-events:none; z-index:-1;
    background:
      radial-gradient(900px 600px at 15% 10%, rgba(124,247,255,.18), transparent 60%),
      radial-gradient(900px 600px at 85% 20%, rgba(182,155,255,.16), transparent 60%),
      radial-gradient(700px 500px at 60% 85%, rgba(124,247,255,.10), transparent 60%);
    filter:saturate(1.2);
  }
  
  .container{max-width:1100px; margin:0 auto; padding: 22px 16px 40px;}
  
  .topbar{
    position:sticky; top:0; z-index:50;
    backdrop-filter: blur(14px);
    background: color-mix(in oklab, var(--bg) 70%, transparent);
    border-bottom:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between;
    padding: 12px 16px;
  }
  
  .brand{display:flex; align-items:center; gap:12px}
  .logo{
    width:38px; height:38px; border-radius: 14px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    box-shadow: 0 20px 60px color-mix(in oklab, var(--accent) 30%, transparent);
  }
  .t1{font-weight:900}
  .t2{font-size:12px; color:var(--muted)}
  
  .actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
  
  .btn{
    border:1px solid var(--line);
    background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    color:var(--text);
    padding: 10px 14px;
    border-radius: 14px;
    text-decoration:none;
    display:inline-flex; align-items:center; justify-content:center;
    gap:8px;
    cursor:pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .btn:hover{transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in oklab, var(--accent) 45%, var(--line));}
  .btn:active{transform: translateY(0px) scale(.99)}
  .btn.ghost{background: transparent}
  .btn.danger{border-color: rgba(255,80,120,.35); color: #ffb3c7}
  .btn.small{padding:8px 10px; border-radius: 12px; font-size:12px}
  .btn.big{padding:14px 18px; border-radius: 16px; font-weight:900}
  
  .hero{
    position:relative;
    border:1px solid var(--line);
    border-radius: calc(var(--radius) + 10px);
    overflow:hidden;
    background: var(--panel);
    box-shadow: var(--shadow);
    padding: 30px;
    margin-top: 14px;
  }
  .hero.slim{padding:22px}
  .hero h1{margin:0 0 8px; font-size: 34px; letter-spacing:-.6px}
  .hero p{margin:0; color:var(--muted); line-height:1.8}
  .hero-cta{display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px}
  .hero-glow{
    position:absolute; inset:-2px;
    background: radial-gradient(700px 380px at 25% 20%, rgba(124,247,255,.20), transparent 60%),
                radial-gradient(700px 380px at 80% 40%, rgba(182,155,255,.18), transparent 60%);
    filter: blur(8px);
    opacity:.9;
    pointer-events:none;
  }
  
  .card{
    margin-top: 18px;
    border:1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow);
    padding: 18px;
  }
  
  .card-head{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom: 10px}
  .chip{
    border:1px solid var(--line);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--muted);
  }
  
  .form{display:grid; gap:10px}
  label{font-size:12px; color:var(--muted)}
  input, textarea, select{
    width:100%;
    border:1px solid var(--line);
    background: transparent;
    color: var(--text);
    border-radius: 14px;
    padding: 12px 12px;
    outline:none;
  }
  textarea{resize:vertical}
  
  .muted{color:var(--muted)}
  .hint{margin-top:10px}
  .alert{
    border:1px solid rgba(255,80,120,.35);
    color:#ffb3c7;
    background: rgba(255,80,120,.08);
    padding: 12px;
    border-radius: 14px;
    margin-bottom: 10px;
  }
  
  .grid2{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  @media (max-width: 980px){ .grid2{grid-template-columns: 1fr;} }
  
  .list{display:grid; gap:10px}
  .row{
    border:1px solid var(--line);
    border-radius: 16px;
    padding: 14px;
    display:flex; justify-content:space-between; gap:12px;
    background: rgba(255,255,255,.03);
  }
  .row-main{min-width:0}
  .row-title{font-weight:900; margin-bottom:6px}
  .row-meta{display:flex; gap:8px; flex-wrap:wrap}
  .pill{
    border:1px solid var(--line);
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 12px;
    color: var(--muted);
  }
  .pill.strong{
    border-color: color-mix(in oklab, var(--accent) 55%, var(--line));
    color: var(--text);
    font-weight: 800;
  }
  .row-actions{display:flex; gap:8px; align-items:flex-start}
  
  .empty{padding: 16px; border:1px dashed var(--line); border-radius: 16px; text-align:center}
  .empty h3{margin:0 0 6px}
  .empty p{margin:0; color:var(--muted)}
  
  .hoverlift{transition: transform .18s ease, box-shadow .18s ease}
  .hoverlift:hover{transform: translateY(-2px); box-shadow: var(--shadow)}
  
  /* Timeline */
  .day{margin-top: 14px}
  .day-title{display:flex; align-items:center; gap:10px; margin-bottom: 10px}
  .day-badge{border:1px solid var(--line); border-radius:999px; padding:6px 10px; font-weight:900}
  .day-line{height:1px; flex:1; background: var(--line)}
  .timeline{display:grid; gap:10px}
  .titem{display:grid; grid-template-columns: 120px 1fr; gap:12px; align-items:stretch}
  @media (max-width: 620px){ .titem{grid-template-columns: 1fr; } }
  .tleft{position:relative; display:flex; align-items:center; justify-content:center}
  .time{font-weight:900; color:var(--text)}
  .pin{
    position:absolute; bottom: -6px;
    width:10px; height:10px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    box-shadow: 0 10px 40px rgba(0,0,0,.45);
  }
  .tcard{
    border:1px solid var(--line);
    border-radius: 16px;
    padding: 12px;
    background: rgba(255,255,255,.03);
  }
  .tcard .title{font-weight:900; margin-bottom:8px}
  .tcard .meta{display:flex; gap:8px; flex-wrap:wrap}
  
  /* Time picker */
  .timepicker{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
  .tp_sep{opacity:.75; font-weight:900}
  
  /* Trip hero */
  .trip-hero{
    position:relative;
    border:1px solid var(--line);
    border-radius: calc(var(--radius) + 10px);
    overflow:hidden;
    box-shadow: var(--shadow);
    min-height: 360px;
    margin-top: 14px;
  }
  .trip-hero-bg{
    position:absolute; inset:-10%;
    background:
      radial-gradient(900px 600px at 20% 20%, rgba(124,247,255,.22), transparent 60%),
      radial-gradient(900px 600px at 80% 30%, rgba(182,155,255,.18), transparent 60%),
      linear-gradient(135deg, rgba(255,255,255,.06), transparent 70%);
    background-size: cover;
    background-position: center;
    transform: translate(var(--px, 0px), var(--py, 0px)) scale(1.05);
    transition: transform .18s ease;
  }
  .trip-hero-overlay{
    position:absolute; inset:0;
    background: linear-gradient(180deg,
      rgba(0,0,0,.15),
      color-mix(in oklab, var(--bg) 75%, transparent) 55%,
      var(--bg) 100%);
  }
  :root[data-theme="light"] .trip-hero-overlay{
    background: linear-gradient(180deg,
      rgba(255,255,255,.10),
      color-mix(in oklab, var(--bg) 75%, transparent) 55%,
      var(--bg) 100%);
  }
  .trip-hero-inner{position:relative; padding:32px}
  .trip-badges{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:10px}
  .trip-title{margin:0 0 10px; font-size:48px; letter-spacing:-1px}
  .trip-desc{margin:0 0 16px; max-width:820px; color:var(--muted); line-height:1.8}
  .trip-actions{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px}
  
  .stats-grid{display:grid; grid-template-columns: repeat(4, 1fr); gap:12px}
  @media (max-width: 900px){ .stats-grid{grid-template-columns: repeat(2,1fr)} }
  .stat{border:1px solid var(--line); border-radius:16px; background: rgba(255,255,255,.05); padding:14px}
  .stat-k{color:var(--muted); font-size:12px}
  .stat-v{font-weight:900; font-size:22px; margin-top:6px}
  
  /* Map */
  .map-frame{border:1px solid var(--line); border-radius:16px; overflow:hidden; background: rgba(255,255,255,.04)}
  .map-frame iframe{width:100%; height:340px; border:0; display:block}
  
  /* Gallery */
  .gallery-grid{display:grid; grid-template-columns: repeat(4, 1fr); gap:12px}
  @media (max-width: 1000px){ .gallery-grid{grid-template-columns: repeat(2,1fr)} }
  @media (max-width: 520px){ .gallery-grid{grid-template-columns: 1fr} }
  
  .gcard{border:1px solid var(--line); border-radius:16px; overflow:hidden; background: rgba(255,255,255,.05)}
  .gcap{padding:12px}
  .gopen{display:block}
  .gimg2{width:100%; height:160px; object-fit:cover; display:block}
  
  .gallery-strip{display:flex; gap:12px; overflow:auto; padding-bottom:6px; scroll-snap-type:x mandatory}
  .gshot{position:relative; min-width:260px; max-width:340px; border:1px solid var(--line); border-radius:16px; overflow:hidden; background: rgba(255,255,255,.05); scroll-snap-align:start; text-decoration:none}
  .gshot img{width:100%; height:180px; object-fit:cover; display:block}
  .gshot-cap{
    position:absolute; bottom:10px; inset-inline:10px;
    font-size:12px; color: rgba(255,255,255,.92);
    background: rgba(0,0,0,.28);
    border:1px solid rgba(255,255,255,.12);
    padding:8px 10px; border-radius:14px;
  }
  
  /* Reveal */
  .reveal{opacity:0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease}
  .reveal.in{opacity:1; transform: translateY(0px)}
  
  /* Footer */
  .footer{padding: 20px 16px; text-align:center; color:var(--muted); border-top:1px solid var(--line)}
  
  /* Lightbox */
  html.lb-lock, html.lb-lock body{overflow:hidden}
  .lb{
    position:fixed; inset:0; z-index:9999;
    opacity:0; pointer-events:none;
    transition: opacity .22s ease;
  }
  .lb.open{opacity:1; pointer-events:auto}
  .lb-backdrop{
    position:absolute; inset:0;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(10px);
  }
  .lb-shell{
    position:absolute; inset:6% 6%;
    display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;
    background: rgba(10,14,20,.35);
    box-shadow: 0 40px 120px rgba(0,0,0,.55);
    overflow:hidden;
    transform: scale(.98);
    transition: transform .22s ease;
  }
  .lb.open .lb-shell{transform: scale(1)}
  .lb-img{
    max-width:92%; max-height:86%;
    object-fit:contain;
    border-radius:14px;
    box-shadow: 0 25px 80px rgba(0,0,0,.55);
  }
  .lb-cap{
    position:absolute; bottom:14px; inset-inline:14px;
    color: rgba(255,255,255,.85);
    font-size:13px;
    padding:10px 12px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    background: rgba(0,0,0,.25);
  }
  .lb-btn{
    position:absolute; width:44px; height:44px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.25);
    color: rgba(255,255,255,.92);
    cursor:pointer;
    transition: transform .18s ease;
  }
  .lb-btn:hover{transform: translateY(-2px)}
  .lb-close{top:12px; inset-inline-end:12px}
  .lb-prev{inset-inline-start:12px; top:50%; transform: translateY(-50%)}
  .lb-next{inset-inline-end:12px; top:50%; transform: translateY(-50%)}
  @media (max-width: 720px){
    .lb-shell{inset:0; border-radius:0}
    .lb-img{max-width:96%; max-height:82%}
    .lb-cap{font-size:12px}
  }
/* ================================
   Select / TimePicker - Vibe Match
   (Glass + Dark + Motion)
================================ */

/* لو عندك متغيرات بالأصل خلها، إذا ما عندك عادي */
:root{
  --ui-bg: rgba(255,255,255,.06);
  --ui-border: rgba(255,255,255,.14);
  --ui-border-strong: rgba(255,255,255,.22);
  --ui-text: rgba(234,240,255,.92);
  --ui-muted: rgba(234,240,255,.66);
  --ui-glow: rgba(124,247,255,.25);
  --ui-glow2: rgba(182,155,255,.20);
}

/* الأساس */
select,
select.tp{
  color: var(--ui-text);
  background:
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border: 1px solid var(--ui-border);
  border-radius: 16px;
  padding: 12px 40px 12px 14px; /* space for arrow */
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .1px;

  /* glass */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* remove default */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* motion */
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    filter .18s ease;
  cursor: pointer;

  /* better on iOS */
  -webkit-tap-highlight-color: transparent;
}

/* السهم بنفس روح التصميم */
select,
select.tp{
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(234,240,255,.80) 50%),
    linear-gradient(135deg, rgba(234,240,255,.80) 50%, transparent 50%),
    radial-gradient(700px 350px at 20% 30%, rgba(124,247,255,.12), transparent 60%),
    radial-gradient(700px 350px at 80% 40%, rgba(182,155,255,.10), transparent 60%);
  background-position:
    calc(100% - 18px) 55%,
    calc(100% - 12px) 55%,
    center,
    center;
  background-size:
    7px 7px,
    7px 7px,
    cover,
    cover;
  background-repeat: no-repeat;
}

/* hover: نفس “hoverlift” */
select:hover,
select.tp:hover{
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--ui-border-strong) 60%, var(--ui-glow));
  box-shadow:
    0 18px 60px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.06) inset;
  filter: saturate(1.1);
}

/* focus: glow مثل أزرارك */
select:focus,
select.tp:focus{
  outline: none;
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--ui-glow) 55%, var(--ui-border-strong));
  box-shadow:
    0 18px 65px rgba(0,0,0,.45),
    0 0 0 3px var(--ui-glow),
    0 0 0 1px rgba(255,255,255,.06) inset;
}

/* disabled */
select:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* قائمة الخيارات */
select option{
  background-color: #060914; /* dark solid */
  color: rgba(234,240,255,.92);
}

/* لو الـ timepicker عندك صف واحد، نخليهم متناسقين */
.timepicker .tp{
  min-width: 92px;
}

/* تحسين بسيط للموبايل */
@media (max-width: 520px){
  .timepicker .tp{ min-width: 84px; }
  select, select.tp{ border-radius: 14px; }
}
/* =========================
   Time Picker FIX (Patch)
   ضع هذا آخر style.css
========================= */

/* تأكيد أن التايم بيكر قابل للضغط وما عليه overlay */
.timepicker,
.timepicker *{
  pointer-events: auto !important;
}

/* ترتيب التايم بيكر بالديسكتوب */
.timepicker{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

/* رجّع : بالديسكتوب (إذا كان مختفي بالغلط) */
.timepicker .tp_sep{
  display: inline-block !important;
  opacity: .8;
  font-weight: 900;
}

/* ستايل الـ dropdowns الخاصة بالوقت */
.timepicker .tp,
select.tp{
  min-width: 92px;
  padding: 12px 42px 12px 14px;

  color: rgba(234,240,255,.92);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;

  background:
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* سهم الـ dropdown */
.timepicker .tp,
select.tp{
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(234,240,255,.80) 50%),
    linear-gradient(135deg, rgba(234,240,255,.80) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 55%,
    calc(100% - 12px) 55%;
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
}

/* Hover / Focus */
.timepicker .tp:hover,
select.tp:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.timepicker .tp:focus,
select.tp:focus{
  outline: none;
  border-color: rgba(124,247,255,.35);
  box-shadow: 0 0 0 3px rgba(124,247,255,.22), 0 18px 65px rgba(0,0,0,.45);
}

/* قائمة الخيارات */
.timepicker .tp option,
select.tp option{
  background-color: #060914;
  color: rgba(234,240,255,.92);
}

/* موبايل فقط: إذا تبي يكسر سطرين */
@media (max-width: 900px){
  .timepicker{ flex-wrap: wrap !important; }
  .timepicker .tp_sep{ display: none !important; }
  .timepicker .tp{ flex: 1 1 92px; }
}
/* =====================================
   Time Picker Dropdown Colors (FIX)
===================================== */

/* القائمة نفسها */
.timepicker select.tp option{
  background-color: #060914;   /* دارك */
  color: #eaf0ff;              /* خط فاتح */
  font-weight: 700;
}

/* عند التحويم */
.timepicker select.tp option:hover,
.timepicker select.tp option:focus{
  background-color: #0b1220;
  color: #ffffff;
}

/* الخيار المختار */
.timepicker select.tp option:checked{
  background-color: #111827;  /* أغمق */
  color: #ffffff;
}

/* مهم لبعض المتصفحات */
.timepicker select.tp{
  color-scheme: dark;
}
/* ===== Header brand alignment fix ===== */
.topbar .brand{
  display: flex;
  align-items: center;   /* يساويهم بالنص */
  gap: 12px;             /* المسافة بين اللوقو والنص */
}

.site-brand{
  display: flex;
  align-items: center;
  margin: 0;             /* يشيل أي تأخير */
}

.site-brand__container{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;             /* مهم */
  line-height: 0;        /* يمنع نزول اللوقو */
}

/* لو النص بعده مو بمحاذاة */
.topbar .brand .t1,
.topbar .brand .t2{
  margin: 0;
}

/* اختيارياً: تقليل ارتفاع سطر الوصف */
.topbar .brand .t2{
  line-height: 1.2;
  margin-top: 2px;
}