:root{
  --bg:#f3f4f6;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;

  --brand:#0a8a0a;
  --brandDark:#086c08;
  --accent:#f59e0b;

  --shadow: 0 10px 30px rgba(17,24,39,.08);
  --shadow2: 0 8px 18px rgba(2,6,23,.06);
  --shadow3: 0 5px 12px rgba(0,0,0,.3);
  --radius: 14px;
  --radius2: 18px;

  --max: 1180px;
  --headerWidth: 1150px;
  --side: 360px;
}

/**{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial;
  line-height:1.5;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}*/
.menu-btn{
  display:none;
  width:40px; height:40px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  font-size:18px;
  color:var(--muted);
}
.menu-btn:hover{background:#f8fafc;color:var(--text)}
.menu{
  display:none;
  position:absolute;
  right:0;
  top:56px;
  width: min(320px, calc(100vw - 24px));
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.menu.open{display:block}
.menu .vbar{
  height:3px;
  background: linear-gradient(90deg, var(--brand2), var(--brand), var(--brand3), var(--brand4));
}
.menu .section{padding:10px}
.menu a, .menu button{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  font-size:14px;
  border:1px solid rgba(226,232,240,.9);
  background:#fff;
  color:var(--text);
  cursor:pointer;
  margin-bottom:8px;
}
.menu a:hover, .menu button:hover{background:#f8fafc}
.menu .muted{color:var(--muted); font-size:12px; margin:8px 2px 10px}


/* Hero */
.heroWrap{
  max-width: var(--max);
  margin: 76px auto 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr var(--side);
  gap: 16px;
  width: 100%;
}
.tour-hero{
  position:relative;
  border-radius:var(--radius2);
  overflow:hidden;
  box-shadow:var(--shadow);
  /*background:#111;*/
  min-height:400px;
  /*max-height:500px;*/
}
.heroBg{
  position:absolute;
  inset:0;
  /*background:
    linear-gradient(180deg, rgba(0, 0, 0, .10) 0%, rgba(0, 0, 0, .05) 75%, rgba(0, 0, 0, .85) 100%),
    url("https://sokoguide.com/images_packages/13659/200/main/692ff5927661f5.90492906.jpg");
  background-size:cover;*/
  background-position:center;
  /*transform:scale(1.03);*/
}
.heroBg img{
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.heroInner{
  position:relative;
  padding:16px 16px 14px;
  color:#fff;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.heroTop{
  display:flex;
  gap:16px;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
}
.heroTitle{
  margin:0;
  font-size:26px;
  font-weight:1000;
  letter-spacing:.2px;
  text-shadow:0 12px 26px rgba(0,0,0,.35);
}
.heroMeta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
}
.tourTitle{
  margin: 0px 5px;
  font-weight: 700;
  font-size: 26px;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(6px);
  font-size:12px;
  font-weight:900;
  color:rgba(255,255,255,.92);
}
.heroActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.cta{
  border:none;
  cursor:pointer;
  border-radius:12px;
  padding:10px 14px;
  font-weight:1000;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.cta.primary{background:var(--accent); color:#1f2937}
.cta.ghost{background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.18)}
.cta:hover{filter:brightness(.98)}
.heroBottom{
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  margin-top:2px;
}
.op{
  display:flex;
  gap:10px;
  align-items:center;
  color:rgba(255,255,255,.92);
  font-size:13px;
}
.avatar{
  width:34px;height:34px;border-radius:12px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  display:grid;place-items:center;
  font-weight:1000;
}
.stats{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* Layout */
.page{
  max-width:var(--max);
  margin:14px auto 20px;
  padding:0 16px;
  display:grid;
  grid-template-columns: 1fr var(--side);
  gap:16px;
  align-items:start;
}
@media (max-width: 980px){
  .page, .heroWrap{grid-template-columns:1fr}
}

.admin{
  padding: 10px;
  background: #fff;
  margin: 0px 0px 20px 0px;
  border-radius: 14px;
  box-shadow: var(--shadow3);
}

/* Card */
.card-inner{
  background:var(--card);
  /*border:1px solid var(--line);*/
  border-radius:var(--radius);
  box-shadow:var(--shadow3);
  overflow:hidden;
  margin-bottom: 12px;
}
.tabs{
  padding:10px;
  border-bottom:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  background: #00000077;
  color: #fff;
  width: 100%;
  bottom:0px;
  position: absolute;
}
.tab{
  border:1px solid #eef0f2;
  background:#f3f4f6;
  color:#374151;
  border-radius:12px;
  padding:9px 12px;
  font-size:13px;
  font-weight:1000;
  cursor:pointer;
}
.tab.active{
  background:#ecfdf5;
  border-color:#bbf7d0;
  color:#065f46;
}
.content{
  padding:14px;
  display:grid;
  gap:18px;
}

.sectionTitle{
  margin:0;
  font-size:24px;
  font-weight:1000;
}
.muted{color:var(--muted); font-size:14px}

/* OVERVIEW SECTION (small images left, text right) */
.overviewGrid{
  /* display: grid;
  gap: 12px; */
  padding: 12px;
  background: rgba(16, 185, 129, .06);
  border: 1px rgba(16, 185, 129, 0.26) solid;
  border-radius: 12px;
}
.overviewItem{
  /*display:grid;
  grid-template-columns: 220px 1fr;*/
  gap:12px;
  /*padding:12px;*/
  /*border:1px solid var(--line);*/
  border-radius:var(--radius);
  /*background:#fff;*/
}
@media (max-width: 720px){
  .overviewItem{grid-template-columns:1fr}
}
.oImg{
  border-radius:12px;
  overflow:hidden;
  border:1px solid #eef0f2;
  background:#f3f4f6;
  height:126px;
  background-size:cover;
  background-position:center;
  display: none;
}
.oTextBody{
  border-bottom:1px solid var(--line);
  padding-bottom: 12px;
  margin-top: 10px;
}
.oTextBody ul{
  font-size: .9em;
  margin: 5px 0px;
  line-height: 18px;
}
.oTitle{
  margin:0 0 6px;
  font-size:17px;
  font-weight:700;
}
.oText{
  margin:0 0 10px;
  color:#374151;
  font-size:14px;
}
.oMeta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.oPill{
  padding:7px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:1000;
  border:1px solid #eef0f2;
  background:#fafafa;
  color:#374151;
}
.oPill.good{
  background:#ecfdf5;
  border-color:#bbf7d0;
  color:#065f46;
}

/* ITINERARY SECTION (large images + big body text) */
.itinerary{
  display:grid;
  gap:14px;
}
.dayBig{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:#fff;
}
.dayHero{
  position: relative;
  max-height: 500px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.dayHero img{
  width: 100%;
}
.dayLabel{
  position:absolute;
  left:12px;
  top:12px;
  background:rgba(0,0,0,.58);
  color:#fff;
  /*border:1px solid rgba(255,255,255,.18);*/
  padding:7px 20px;
  border-radius:999px;
  font-size:20px;
  font-weight:1000;
  backdrop-filter: blur(6px);
}
.dayLabelNoImg{
  background: rgba(0, 0, 0, .58);
  color: #fff;
  padding: 7px 20px;
  border-radius: 14px 14px 0px 0px;
  font-size: 20px;
  font-weight: 1000;
}
.dayBody{
  padding:12px;
}
.dayTitle{
  margin:0 0 8px;
  font-size:16px;
  font-weight:700;
}
.dayParagraph{
  margin:0 0 12px;
  color:#374151;
  font-size:14px;
}

.accBox{
  border-top:1px solid #eef0f2;
  background:#fafafa;
  /*border-radius:12px;*/
  padding:10px;
}
.accHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.accHeadTitle{
  font-weight: bold;
  padding: 10px;
  color: #444;
  border-top: 1px #d5d5d5 solid;
  border-bottom: 1px #d5d5d5 solid;
  display: block;
  font-size: .9em;
  background: #ddd;
}
.accHeadLeft{
  display:flex;
  gap:10px;
  align-items:center;
  min-width:0;
}
.accBadge{
  width:50px;height:50px;
  border-radius:12px;
  display:grid;place-items:center;
  background:#f3f4f6;
  font-weight:1000;
}
.accName{
  font-weight:1000;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:360px;
}
.accNameNoDetails{
  overflow: hidden;
  padding: 10px;
  background: #f5f5f5;
}
.accNameNoDetails p{
  display: block;
  color: #02c;
  font-weight: bold;
  margin: 0px 0px 5px 0px;
}
.accDetails{
  font-size: .9em;
  margin: 10px 0px 15px 0px;
}
.accTag{
  padding:7px 10px;
  border-radius:999px;
  background:#ecfdf5;
  border:1px solid #bbf7d0;
  color:#065f46;
  font-weight:700;
  font-size:12px;
  white-space:nowrap;
}
.accGallery{
  display:flex;
  gap:10px;
  overflow:auto;
  padding-bottom:2px;
}
.accPic{
  width:130px;
  height:84px;
  border-radius:12px;
  border:1px solid #eef0f2;
  background-size:cover;
  background-position:center;
  flex:0 0 auto;
  background-color:#fff;
}

/* Sidebar */
.sticky{
  position:sticky;
  top:14px;
  display:grid;
  gap:12px;
  margin-bottom: 12px;
}
/*.ad_thumb_wrap{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}*/

.sideCard{
  background:#fff;
  /*border:1px solid var(--line);*/
  border-radius:var(--radius);
  box-shadow:var(--shadow3);
  overflow:hidden;
}
.sideHead{
  padding:12px;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:10px;
}
.operatorWrap{
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
  margin: 30px 10px 10px 10px;
}
.operatorLogo{
  place-items: center;
  font-weight: 900;
  font-size: 14px;
  color: #0f172a;
  flex: 0 0 auto;
  max-width: 70px;
  max-height: 70px;
}
.operatorName{
  width: calc(100% - 90px);
  display: inline-block;
  margin: 20px 0px;
  float: left;
  font-size: .95em;
  font-weight: 700;
}
.from{
  font-size:12px;
  color:var(--muted);
  font-weight:1000;
  margin:0;
}
.price{
  font-size:22px;
  font-weight:1000;
  margin:0;
}
.usd{
  font-size:12px;
  color:var(--muted);
  font-weight:900;
}
.avail{
  padding:7px 10px;
  border-radius:999px;
  background:#ecfdf5;
  border:1px solid #bbf7d0;
  color:#065f46;
  font-weight:1000;
  font-size:12px;
  white-space:nowrap;
}
.sideBody{padding:12px; display:grid; gap:10px}
label{
  font-size:12px;
  font-weight:1000;
  color:#374151;
}
select{
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px;
  background:#fff;
  font-size:14px;
  outline:none;
}
.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.mapBox{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:#fff;
}
.mapTop{
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:1000;
  font-size:13px;
  color:#374151;
  background:#fafafa;
}
.map{
  height:210px;
  background:
    url("https://maps.googleapis.com/maps/api/staticmap?center=Masai%20Mara&zoom=6&size=600x360&maptype=roadmap&markers=color:green%7Clabel:1%7C-1.286389,36.817223&markers=color:green%7Clabel:2%7C-1.406111,35.033611&markers=color:green%7Clabel:3%7C-1.286389,36.817223")
    center/cover no-repeat;
  filter:saturate(1.05);
}
.helpNote{
  font-size:12px;
  color:var(--muted);
  padding:10px 12px;
  border:1px dashed #e5e7eb;
  border-radius:12px;
  background:#fafafa;
}
.sideBtn{
  width:100%;
  border:none;
  border-radius:12px;
  padding:12px 14px;
  font-weight:1000;
  font-size: 16px;
  cursor:pointer;
}
.sideBtn.inq{background:var(--accent); color:#1f2937}
.sideBtn.book{background:var(--brand); color:#fff}
.sideBtn:hover{filter:brightness(.98)}

.adsHead{
  padding: 10px 12px;
  background: #fafafa;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
  font-size: 16px;
  color: #374151;
  border-radius: var(--radius);
  overflow: hidden;
}
.adItem{
  display: block;
  border-radius: var(--radius);
  /* padding: 12px; */
  border-top: 1px solid var(--line);
  align-items: flex-start;
  margin-top: 15px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow3);
}
.adThumb{
  /*border-radius: 12px;*/
  /*border: 1px solid #eef0f2;*/
  background: #f3f4f6;
  background-size: cover;
  background-position: center;
  display: block;
  overflow: hidden;
  /*margin-bottom: 10px;*/
}
.adThumbText{
  padding: 14px 10px;
}
.adT{
  margin:0 0 4px;
  font-weight:1000;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.adD{
  margin:0;
  font-size:12px;
  color:var(--muted);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.adP{
  margin-top:6px;
  font-size:12px;
  font-weight:1000;
  color:#065f46;
}

.you-like-wrap{
  /*overflow: hidden;*/
  padding: 12px 0px;
}

  .sg-overview{
    border:1px solid #e5e7eb;
    background:#ffffff;
    border-radius:18px;
    box-shadow:0 12px 28px rgba(0,0,0,.06);
    overflow:hidden;
  }

  .sg-overview-head{
    padding:14px 16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    background:linear-gradient(180deg, #ffffff 0%, #fbfbfc 100%);
    border-bottom:1px solid #eef0f2;
  }

  .sg-overview-head h2{
    margin:0;
    font-size:18px;
    font-weight:1000;
    letter-spacing:-.2px;
    color:#111827;
  }

  .sg-badges{display:flex; gap:8px; flex-wrap:wrap}

  .sg-pill{
    font-size:14px;
    font-weight:1000;
    padding:7px 10px;
    border-radius:999px;
    background:#ecfdf5;
    color:#065f46;
    border:1px solid #bbf7d0;
    white-space:nowrap;
  }

  .sg-overview-grid{
    /*padding:14px 16px 16px;*/
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:12px;
  }
  @media (max-width: 820px){
    .sg-overview-grid{grid-template-columns:1fr}
  }

  .sg-box{
    border:1px solid #eef0f2;
    border-radius:16px;
    background:#fff;
    padding:12px;
  }

  .sg-span2{grid-column: span 2;}
  @media (max-width: 820px){
    .sg-span2{grid-column: auto;}
  }

  .sg-box-title{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:1000;
    color:#111827;
    margin-bottom:10px;
    font-size: 20px;
  }

  .sg-icon{
    width:34px; height:34px;
    border-radius:14px;
    display:grid; place-items:center;
    background:#f3f4f6;
    border:1px solid #eef0f2;
    font-size:16px;
  }

  .sg-list{
    list-style:none;
    padding:0;
    margin:0;
    /*display:grid;*/
    gap:10px;
  }

  .sg-list li{
    /*display: inline-block;
    grid-template-columns: 12px 1fr auto; 
    gap: 10px;
    align-items: center;*/
    padding: 6px 20px;
    border: 1px solid #e9e9e9;
    border-radius: 999px;
    background: #f5f5f5;
    margin: 10px 10px 10px 0px;
    float: left;
  }

  .sg-dot{
    width:8px; height:8px; border-radius:999px;
    margin: 8px 6px 0px 0px;
    float: left;
    background:#0a8a0a;
  }

  .sg-list span{
    font-size: 13px;
    color: #111827;
    font-weight: 900;
  }
  .sg-list b{
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
    display: block;
    margin-left: 14px;
  }

  .sg-chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }

  .sg-chip{
    font-size:12px;
    font-weight:1000;
    padding:8px 10px;
    border-radius:999px;
    background:#f9fafb;
    border:1px solid #eef0f2;
    color:#374151;
  }

  .sg-acc{
    display:grid;
    gap:10px;
  }

  .sg-acc-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e9e9e9;
    border-radius: 14px;
    background: #f1f1f1;
  }

  .sg-acc-left strong{
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
  }
  .sg-acc-left span{
    display: block;
    font-size: 14px;
    color: #6b7280;
    font-weight: 600;
    margin-top: 3px;
  }

  .sg-tag{
    font-size: 12px;
    font-weight: 700;
    padding: 7px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #111827;
    white-space: nowrap;
  }


@media (max-width: 980px){
  .sticky{position:static}
}
@media (max-width: 560px){
  /*.dayHero{height:240px}*/
  .card-inner{ border-radius: 0px; }
  .heroWrap{ padding: 0px; }
  .tour-hero{ border-radius:0px; }
  .sideCard{ border-radius:0px; }
  .adItem{ border-radius:0px; }
  .yl-panel{ border-radius:unset; }
  .page{ padding: 0px; }
}

/* Footer */
footer{
  margin-top:18px;
  background:#0b1220;
  color:rgba(255,255,255,.88);
  border-top:1px solid rgba(255,255,255,.10);
}
footer .wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:18px 16px;
  display:grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap:14px;
}
@media (max-width: 900px){
  footer .wrap{grid-template-columns:1fr 1fr}
}
@media (max-width: 520px){
  footer .wrap{grid-template-columns:1fr}
}
.fTitle{font-weight:1000; margin:0 0 8px; color:#fff}
.fLink{display:block; color:rgba(255,255,255,.78); font-size:13px; padding:4px 0}
.fLink:hover{color:#fff}
.copyright{
  max-width:var(--max);
  margin:0 auto;
  padding:10px 16px 16px;
  color:rgba(255,255,255,.65);
  font-size:12px;
  border-top:1px solid rgba(255,255,255,.10);
}

/* Mobile rules */
@media (max-width: 1150px){
  .panel{width: 100%}
  .maincols{ display:block; }
}
@media (max-width: 980px){
  .layout{grid-template-columns: 1fr; gap: var(--gap)}
  .sticky{position:static}
  .nav{display:none}
  .brand{min-width:auto}
}
@media (max-width: 980px){
  .menu-btn{display:flex}
  .actions{display:none} /* use menu for actions on mobile */
  @media (max-width: 560px){
    .you-like-wrap{ padding: 12px 0px; }
    .card{box-shadow: unset;}
  }
}
@media (max-width: 560px){
  .container{width:calc(100% - 18px)}
  .topbar-inner{padding:9px 0}
  .brand span{display:none}
  .layout{padding:10px 0 18px}
  :root{--pad:10px; --gap:20px; --postMediaMaxH: 380px; --tileMediaMaxH: 170px;}


  /* Post images should be full width on mobile */
  .post-body{padding-left:10px; padding-right:10px}
  .post-head{padding-left:10px; padding-right:10px}
  .post-actions{padding-left:10px; padding-right:10px}
  .comments{padding-left:10px; padding-right:10px}

  .post-media{
    border-radius: 0;
    margin-left:-10px;
    margin-right:-10px;
    max-height: var(--postMediaMaxH);
  }

  .embed{grid-template-columns: 1fr}
  .tiles{grid-template-columns: 1fr 1fr}
  .pymk-card{flex-basis: 190px}


  .embed .thumb .ratio32{width:100%;height:100%}
  .embed .info{
    border-radius: 0px 0px 14px 14px;
    border: 1px solid rgba(226, 232, 240, .95);
  }

}