/* #########################################################
   PAGE: Gulf Jobs, Cab Booking, Hotel Booking  —  html.pg-svc  (with pg-about + pg-visa)
   ######################################################### */
/* =========================================================
   Travel Point Holidays & Visa Services – service pages
   Reuse the Visa Services sections (hero, intro, cards, offers,
   steps, docs, FAQ, CTA); add photo cards (cars + hotels),
   filter tabs, routes, job openings and the booking box.
   ========================================================= */
:where(.pg-svc) section[id]{ scroll-margin-top: 90px; }
:where(.pg-svc) .bk{ scroll-margin-top: 100px; }

/* ---------- Hero ---------- */
:where(.pg-svc) .phero--jobs .phero__img img{ object-position: 50% 55%; }
:where(.pg-svc) .phero--cab .phero__img img{ object-position: 60% 60%; }
:where(.pg-svc) .phero--hotel .phero__img img{ object-position: 50% 45%; }

/* (Visa page "View Gulf Jobs" link styles live in visa.css) */

/* ---------- Generic section ---------- */
:where(.pg-svc) .sv{ position: relative; padding: clamp(40px, 4vw, 76px) 0; background: #fff; }
:where(.pg-svc) .sv--cream{ background: linear-gradient(180deg, #fbf8f2 0%, #fff 100%); }
:where(.pg-svc) .sv--cream::before{
  content: ""; position: absolute; right: 0; top: 0; width: 30%; height: 100%; background-image: var(--pattern); background-size: 110px; opacity: .1; pointer-events: none;
  -webkit-mask-image: linear-gradient(270deg, #000, transparent); mask-image: linear-gradient(270deg, #000, transparent);
}
:where(.pg-svc) .sv .container{ padding-inline: clamp(16px, 4.8vw, 100px); }
:where(.pg-svc) .sv .section-title{ margin-top: 8px; }
:where(.pg-svc) .sv__lead{ max-width: 62ch; margin: clamp(12px, 1.2vw, 20px) auto 0; text-align: center; font-size: clamp(13px, 1.08vw, 16.5px); color: #3b4444; line-height: 1.6; }
:where(.pg-svc) .sv__note{ display: flex; justify-content: center; gap: 10px; max-width: 70ch; margin: clamp(20px, 2vw, 34px) auto 0; font-size: clamp(12.5px, .95vw, 15px); color: #4e5a5a; text-align: center; }
:where(.pg-svc) .sv__note i{ color: var(--orange); margin-top: 3px; }

/* ---------- Photo cards (cars + hotels) ---------- */
:where(.pg-svc) .xgrid{ position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 30px); margin-top: clamp(24px, 2.4vw, 44px); }
:where(.pg-svc) .xgrid--3{ grid-template-columns: repeat(3, 1fr); }
:where(.pg-svc) .xcard{
  display: flex; flex-direction: column; background: #fff; border-radius: 16px; overflow: hidden;
  border: 1px solid #f3eee6; box-shadow: 0 8px 26px rgba(18, 48, 46, .08); transition: transform .3s, box-shadow .3s;
}
:where(.pg-svc) .xcard:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(18, 48, 46, .14); }
:where(.pg-svc) .xcard[hidden]{ display: none; }
:where(.pg-svc) .xcard__img{ position: relative; aspect-ratio: 1.55; overflow: hidden; background: #eef1f0; }
:where(.pg-svc) .xcard__img img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
:where(.pg-svc) .xcard:hover .xcard__img img{ transform: scale(1.06); }
:where(.pg-svc) .xcard__img::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(1, 46, 48, .5), transparent 45%); pointer-events: none; }
:where(.pg-svc) .xcard__tag{
  position: absolute; z-index: 1; left: 12px; top: 12px; padding: 4px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .94); color: var(--heading); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
:where(.pg-svc) .xcard__badge{
  position: absolute; z-index: 1; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px; background: linear-gradient(180deg, var(--gold-light), var(--gold-mid)); color: #1b2a2a; font-size: 12.5px; font-weight: 600;
}
:where(.pg-svc) .xcard__body{ flex: 1; display: flex; flex-direction: column; padding: clamp(16px, 1.5vw, 26px) clamp(16px, 1.5vw, 26px) clamp(18px, 1.6vw, 26px); }
:where(.pg-svc) .xcard h3{ font-family: var(--serif); font-weight: 700; color: var(--heading); font-size: clamp(18px, 1.3vw, 21.5px); line-height: 1.2; }
:where(.pg-svc) .xcard__sub{ display: flex; gap: 8px; margin: 6px 0 clamp(12px, 1vw, 16px); font-size: clamp(12.5px, .92vw, 14.5px); color: #4e5a5a; line-height: 1.45; }
:where(.pg-svc) .xcard__sub i{ color: var(--orange-2); margin-top: 3px; }
:where(.pg-svc) .xcard__text{ font-size: clamp(12.5px, .92vw, 14.5px); color: #3a4444; line-height: 1.55; margin-bottom: clamp(14px, 1.2vw, 20px); }
:where(.pg-svc) .xcard__btn{ margin-top: auto; width: 100%; padding: clamp(10px, .9vw, 14px) 18px; font-size: clamp(13px, .98vw, 15px); border-radius: 10px; }

/* Car specs: seats / bags / AC */
:where(.pg-svc) .specs{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: clamp(12px, 1vw, 16px); }
:where(.pg-svc) .spec{ display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: #f8f3e8; font-size: clamp(12px, .86vw, 13.5px); font-weight: 500; color: #263232; }
:where(.pg-svc) .spec i{ color: var(--orange-2); font-size: .95em; }

/* Hotel amenities */
:where(.pg-svc) .amen{ list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-bottom: clamp(16px, 1.4vw, 22px); }
:where(.pg-svc) .amen li{ display: flex; align-items: center; gap: 8px; font-size: clamp(12.5px, .9vw, 14px); color: #3a4444; line-height: 1.3; }
:where(.pg-svc) .amen i{ width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--peach); color: var(--heading); font-size: 11.5px; }

/* Filter tabs (hotel destinations) */
:where(.pg-svc) .ftabs{ display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: clamp(20px, 2vw, 34px); }
:where(.pg-svc) .ftab{
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid #eadfc8; background: #fff; color: var(--heading); font: 500 clamp(13px, .98vw, 15px)/1.2 var(--sans);
  transition: background .25s, color .25s, border-color .25s, box-shadow .25s;
}
:where(.pg-svc) .ftab i{ color: var(--orange-2); transition: color .25s; }
:where(.pg-svc) .ftab:hover{ border-color: var(--gold); }
:where(.pg-svc) .ftab.is-active{ background: var(--teal-700); border-color: var(--teal-700); color: #fff; box-shadow: 0 8px 18px rgba(8, 64, 63, .22); }
:where(.pg-svc) .ftab.is-active i{ color: var(--gold-mid); }
:where(.pg-svc) .ftab:focus-visible{ outline: 3px solid rgba(211, 162, 74, .45); outline-offset: 2px; }

/* ---------- Popular routes (cab) ---------- */
:where(.pg-svc) .routes{ display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.1vw, 18px); margin-top: clamp(24px, 2.4vw, 44px); }
:where(.pg-svc) .route{
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; text-align: left; cursor: pointer;
  padding: clamp(14px, 1.2vw, 20px) clamp(16px, 1.4vw, 22px); border-radius: 14px; border: 1.5px solid #f3eee6; background: #fff;
  box-shadow: 0 6px 22px rgba(18, 48, 46, .07); font: inherit; transition: transform .3s, box-shadow .3s, border-color .3s;
}
:where(.pg-svc) .route:hover{ transform: translateY(-4px); box-shadow: 0 14px 30px rgba(18, 48, 46, .13); border-color: #f1d9a6; }
:where(.pg-svc) .route:focus-visible{ outline: 3px solid rgba(211, 162, 74, .45); outline-offset: 2px; }
:where(.pg-svc) .route__from{ grid-column: 1; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-2); }
:where(.pg-svc) .route__to{ grid-column: 1; font-family: var(--serif); font-weight: 700; color: var(--heading); font-size: clamp(17px, 1.25vw, 20.5px); line-height: 1.2; }
:where(.pg-svc) .route__meta{ grid-column: 1; font-size: clamp(12px, .88vw, 14px); color: #4e5a5a; }
:where(.pg-svc) .route__go{
  grid-column: 2; grid-row: 1 / span 3; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(180deg, var(--gold-light), var(--gold-mid)); color: var(--heading); font-size: 14px; transition: transform .25s;
}
:where(.pg-svc) .route:hover .route__go{ transform: translateX(3px); }

/* ---------- Job categories: Apply button under each card (fills the form) ---------- */
:where(.pg-svc) .vcard > p:not(.vcard__country){ font-size: clamp(13px, 1.00vw, 16.2px); color: #4e5a5a; line-height: 1.6; }
:where(.pg-svc) .vcard__btn.btn{ margin-top: clamp(14px, 1.2vw, 20px); padding: clamp(9px, .8vw, 12px) clamp(18px, 1.6vw, 26px); font-size: clamp(13px, .95vw, 14.5px); border-radius: 10px; }
:where(.pg-svc) .vcard:has(.vcard__btn) > p:not(.vcard__country){ flex: 1; }

/* ---------- Gulf countries ---------- */
:where(.pg-svc) .ctry{ list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(10px, 1.1vw, 18px); margin-top: clamp(24px, 2.4vw, 40px); }
:where(.pg-svc) .ctry li{
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: clamp(14px, 1.3vw, 22px) 10px; background: #fff; border-radius: 14px; border: 1px solid #f3eee6; box-shadow: 0 6px 22px rgba(18, 48, 46, .07);
}
:where(.pg-svc) .ctry b{
  width: clamp(46px, 3.6vw, 60px); height: clamp(46px, 3.6vw, 60px); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 45% 40%, #fdeccc 0%, #fbdfae 70%, #f6d08e 100%); color: var(--heading);
  font-family: var(--sans); font-weight: 600; font-size: clamp(14px, 1.05vw, 17px); letter-spacing: .06em;
}
:where(.pg-svc) .ctry span{ font-weight: 600; color: #0e2c2c; font-size: clamp(13px, 1vw, 16px); line-height: 1.3; }
:where(.pg-svc) .ctry small{ font-size: clamp(11.5px, .85vw, 13.5px); color: #4e5a5a; line-height: 1.4; }

/* ---------- Current opening (Gulf jobs) ---------- */
:where(.pg-svc) .opening{
  display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(20px, 2.6vw, 50px); align-items: center;
  margin-top: clamp(24px, 2.4vw, 44px); padding: clamp(18px, 2vw, 36px); background: #fff; border-radius: 18px;
  border: 1px solid #f3eee6; box-shadow: 0 10px 30px rgba(18, 48, 46, .09);
}
:where(.pg-svc) .opening__img{ border-radius: 14px; overflow: hidden; box-shadow: 0 8px 24px rgba(18, 48, 46, .15); }
:where(.pg-svc) .opening__img img{ width: 100%; height: auto; }
:where(.pg-svc) .opening__live{ display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; background: #e7f6ec; color: #1e7a3c; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
:where(.pg-svc) .opening__live::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: #25a55a; box-shadow: 0 0 0 3px rgba(37, 165, 90, .2); }
:where(.pg-svc) .opening h3{ font-family: var(--serif); font-weight: 700; color: var(--heading); font-size: clamp(22px, 1.8vw, 32px); line-height: 1.15; margin: clamp(10px, 1vw, 16px) 0 clamp(14px, 1.3vw, 22px); }
:where(.pg-svc) .facts{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: clamp(16px, 1.5vw, 24px); }
:where(.pg-svc) .fact{ padding: 12px 14px; border-radius: 12px; background: #fbf5e8; }
:where(.pg-svc) .fact dt{ font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-2); }
:where(.pg-svc) .fact dd{ font-size: clamp(15px, 1.15vw, 18.5px); font-weight: 600; color: #111; line-height: 1.3; margin-top: 2px; }
:where(.pg-svc) .opening .checklist{ grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 8px; margin-bottom: clamp(18px, 1.6vw, 26px); }
:where(.pg-svc) .opening .checklist li{ line-height: 1.45; }
:where(.pg-svc) .opening .checklist li::before{ top: .72em; }
:where(.pg-svc) .opening__btns{ display: flex; flex-wrap: wrap; gap: 12px; }
:where(.pg-svc) .opening__btns .btn{ padding: clamp(11px, 1vw, 16px) clamp(20px, 2vw, 34px); font-size: clamp(13px, 1.02vw, 15.5px); border-radius: 10px; }
:where(.pg-svc) .opening__btns .fa-whatsapp{ font-size: 1.2em; }

/* Offers band: tick lists inside the cards */
:where(.pg-svc) .ocard__list{ list-style: none; display: grid; gap: 7px; margin-bottom: clamp(4px, .4vw, 8px); flex: 1; }
:where(.pg-svc) .ocard__list li{ position: relative; padding-left: 24px; font-size: clamp(13px, .98vw, 15.5px); color: #3a4444; line-height: 1.45; }
:where(.pg-svc) .ocard__list li::before{
  content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: .1em;
  font-size: 11px; color: var(--orange-2);
}

/* ---------- Booking box (form sent to WhatsApp, js/services.js) ---------- */
:where(.pg-svc) .bk{
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(20px, 2.6vw, 50px); align-items: center;
  margin-top: clamp(30px, 3vw, 56px); padding: clamp(22px, 2.4vw, 44px);
  background: linear-gradient(90deg, #fdf8ee 0%, #fbf3e4 100%); border: 1px solid #f3e6c9; border-radius: 18px;
}
:where(.pg-svc) .bk--top{ margin-top: 0; }
:where(.pg-svc) .bk::before{ content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--pattern); background-size: 100px; opacity: .1; }
:where(.pg-svc) .bk__info .commit__title{ margin: 8px 0 clamp(8px, .8vw, 14px); }
:where(.pg-svc) .bk__info > p{ font-size: clamp(13px, 1.05vw, 16px); color: #333; line-height: 1.6; margin-bottom: clamp(14px, 1.4vw, 22px); }
:where(.pg-svc) .bk__points{ list-style: none; display: grid; gap: 10px; }
:where(.pg-svc) .bk__points li{ display: flex; align-items: center; gap: 12px; font-size: clamp(13px, 1vw, 15.5px); color: #222; font-weight: 500; }
:where(.pg-svc) .bk__points i{ width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--peach); color: var(--heading); font-size: 14px; }
:where(.pg-svc) .bkform{ padding: clamp(16px, 1.6vw, 26px); gap: 12px; background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(18, 48, 46, .09); }
:where(.pg-svc) .bkform input, :where(.pg-svc) .bkform select, :where(.pg-svc) .bkform textarea{ padding-block: 12px; }
:where(.pg-svc) .bkform select.is-placeholder{ color: #7a8585; }
:where(.pg-svc) .bkform select option{ color: var(--text); }
:where(.pg-svc) .bkform input[type="number"]{ -moz-appearance: textfield; appearance: textfield; }
:where(.pg-svc) .bkform .fa-whatsapp{ font-size: 1.2em; }
:where(.pg-svc) .bkform__hint{ grid-column: 1 / -1; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-2); margin-bottom: -4px; }

/* ---------- Photo credits ---------- */
:where(.pg-svc) .credits{ background: #fdfaf4; padding: 0 0 clamp(18px, 1.6vw, 28px); }
:where(.pg-svc) .credits details{ padding-inline: clamp(16px, 4.8vw, 100px); font-size: 12px; color: #6b7676; line-height: 1.6; }
:where(.pg-svc) .credits summary{ cursor: pointer; font-weight: 500; color: #4e5a5a; width: max-content; }
:where(.pg-svc) .credits summary:hover{ color: var(--heading); }
:where(.pg-svc) .credits p{ margin-top: 8px; }
:where(.pg-svc) .credits a{ text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  :where(.pg-svc) .xgrid{ grid-template-columns: repeat(3, 1fr); }
  :where(.pg-svc) .xgrid--3{ grid-template-columns: repeat(2, 1fr); }
  :where(.pg-svc) .routes{ grid-template-columns: repeat(3, 1fr); }
  :where(.pg-svc) .ctry{ grid-template-columns: repeat(3, 1fr); }
  :where(.pg-svc) .opening{ grid-template-columns: 1fr; }
  :where(.pg-svc) .opening__img{ max-width: 560px; margin-inline: auto; }
  :where(.pg-svc) .bk{ grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  :where(.pg-svc) .crumbs{ flex-wrap: wrap; row-gap: 4px; }
  :where(.pg-svc) .xgrid{ grid-template-columns: repeat(2, 1fr); }
  :where(.pg-svc) .routes{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  :where(.pg-svc) .sv .container{ padding-inline: var(--gutter); }
  :where(.pg-svc) .xgrid, :where(.pg-svc) .xgrid--3, :where(.pg-svc) .routes{ grid-template-columns: 1fr; }
  :where(.pg-svc) .ctry{ grid-template-columns: repeat(2, 1fr); }
  :where(.pg-svc) .facts{ gap: 8px; }
  :where(.pg-svc) .fact{ padding: 10px; }
  :where(.pg-svc) .fact dt{ font-size: 10px; letter-spacing: .06em; }
  :where(.pg-svc) .opening .checklist{ grid-template-columns: 1fr; }
  :where(.pg-svc) .opening__btns .btn{ width: 100%; }
  :where(.pg-svc) .bkform{ grid-template-columns: 1fr; }
  :where(.pg-svc) .credits details{ padding-inline: var(--gutter); }
}

@media (max-width: 767px) {
  :where(.pg-svc) .xcard, :where(.pg-svc) .opening{ border-radius: 18px; }
  :where(.pg-svc) .xcard:hover, :where(.pg-svc) .route:hover{ transform: none; }
  :where(.pg-svc) .vcard > p:not(.vcard__country){ font-size: 13px; line-height: 1.5; }
  :where(.pg-svc) .vcard__btn.btn{ grid-column: 2; justify-self: start; margin-top: 10px; padding: 8px 16px; font-size: 13px; }
  :where(.pg-svc) .xcard__img{ aspect-ratio: 1.75; }
  :where(.pg-svc) .ftabs{ flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; }
  :where(.pg-svc) .ftabs::-webkit-scrollbar{ display: none; }
  :where(.pg-svc) .ftab{ flex: none; padding: 8px 16px; }
  :where(.pg-svc) .route{ border-radius: 16px; padding: 14px 16px; }
  :where(.pg-svc) .opening{ padding: 14px; }
  :where(.pg-svc) .bk{ padding: 18px 14px; border-radius: 18px; }
  :where(.pg-svc) .bkform{ padding: 14px; }
  :where(.pg-svc) .bkform input, :where(.pg-svc) .bkform select, :where(.pg-svc) .bkform textarea{ font-size: 16px; } /* no iOS zoom on focus */
}

@media (prefers-reduced-motion: reduce) {
  :where(.pg-svc) .xcard, :where(.pg-svc) .xcard__img img, :where(.pg-svc) .route{ transition: none; }
}