/* #########################################################
   PAGE: Customized Umrah Package (/customized-umrah-package)  —  html.pg-cpkg
   Hero = .phero (inner.css), form controls = .qform (common.css)
   ######################################################### */
:where(.pg-cpkg) .phero--cpkg .phero__media img{ object-position: 50% 55%; }
:where(.pg-cpkg) .cpkg__kicker{
  display: inline-flex; align-items: center; gap: 8px; margin-top: clamp(10px, 1vw, 18px); padding: 5px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .85); border: 1px solid #efdcb4; color: var(--heading); font-size: clamp(12.5px, .95vw, 14.5px); font-weight: 500;
}
:where(.pg-cpkg) .cpkg__kicker i{ color: var(--gold-2); }
:where(.pg-cpkg) .cpkg__btns{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(14px, 1.5vw, 26px); }
:where(.pg-cpkg) .cpkg__wa i{ color: #25d366; font-size: 1.2em; }

/* Form + side panel */
:where(.pg-cpkg) .cpkg{ position: relative; padding: clamp(10px, 1.2vw, 24px) 0 clamp(40px, 4.4vw, 84px); scroll-margin-top: 80px; }
:where(.pg-cpkg) .cpkg__grid{ display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 24vw, 380px); gap: clamp(16px, 2vw, 36px); align-items: start; }
:where(.pg-cpkg) .cpkg__card{
  background: #fff; border: 1px solid #f0e9da; border-radius: clamp(12px, 1.1vw, 20px); box-shadow: 0 10px 34px rgba(18, 48, 46, .08);
  padding: clamp(18px, 2vw, 38px);
}
:where(.pg-cpkg) .cpkg__title{ font-family: var(--serif); font-weight: 700; color: var(--heading); font-size: clamp(22px, 2vw, 32px); line-height: 1.15; }
:where(.pg-cpkg) .cpkg__lead{ font-size: clamp(13.5px, 1vw, 15px); color: #5f6b6b; line-height: 1.5; margin: 6px 0 clamp(14px, 1.4vw, 26px); }
:where(.pg-cpkg) .cpkg__lead sup, :where(.pg-cpkg) .cform label sup{ color: #d23b3b; }

:where(.pg-cpkg) .cform{ grid-template-columns: 1fr; gap: clamp(14px, 1.4vw, 24px); padding: 0; }
:where(.pg-cpkg) .cform__group{
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.1vw, 18px) clamp(12px, 1.3vw, 22px);
  min-width: 0; margin: 0; padding: clamp(14px, 1.4vw, 24px); border: 1px solid #ece5d6; border-radius: 14px; background: #fdfbf7;
}
:where(.pg-cpkg) .cform__group--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
:where(.pg-cpkg) .cform__group--1{ grid-template-columns: 1fr; }
:where(.pg-cpkg) .cform__group legend{
  display: inline-flex; align-items: center; gap: 10px; padding: 0 8px; margin-left: -4px;
  font-family: var(--serif); font-weight: 700; color: var(--heading); font-size: clamp(16px, 1.2vw, 19px);
}
:where(.pg-cpkg) .cform__group legend span{
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--teal-800); color: #fff;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
}
/* visible labels (common.css hides them in compact forms) */
:where(.pg-cpkg) .cform label{ position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; font-size: 13.5px; font-weight: 500; color: #1b2727; }
:where(.pg-cpkg) .cform .qform__control{ background: #fff; min-height: 48px; }
:where(.pg-cpkg) .cform textarea{ height: 96px; resize: vertical; padding-top: 12px; }
:where(.pg-cpkg) .cform .qform__submit{ padding: 15px 24px; font-size: 16px; }

/* Side panel */
:where(.pg-cpkg) .cpkg__side{ display: grid; gap: clamp(14px, 1.4vw, 24px); position: sticky; top: 96px; }
:where(.pg-cpkg) .cside{ background: #fff; border: 1px solid #f0e9da; border-radius: 16px; box-shadow: 0 8px 28px rgba(18, 48, 46, .07); padding: clamp(18px, 1.6vw, 28px); }
:where(.pg-cpkg) .cside__title{ font-family: var(--serif); font-weight: 700; color: var(--heading); font-size: clamp(18px, 1.35vw, 22px); margin-bottom: 14px; }
:where(.pg-cpkg) .cside__steps{ display: grid; gap: 16px; }
:where(.pg-cpkg) .cside__steps li{ display: flex; gap: 14px; align-items: flex-start; }
:where(.pg-cpkg) .cside__steps li > span{ flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff6e2; color: #a0701d; font-size: 17px; }
:where(.pg-cpkg) .cside__steps b{ display: block; color: var(--heading); font-size: 15px; }
:where(.pg-cpkg) .cside__steps p{ font-size: 13.5px; color: #66706f; line-height: 1.45; margin-top: 2px; }
:where(.pg-cpkg) .cside--dark{ position: relative; overflow: hidden; background: linear-gradient(180deg, #053638 0%, #032a2e 100%); border-color: transparent; color: #e2ecea; }
:where(.pg-cpkg) .cside--dark::before{ content: ""; position: absolute; inset: 0; background-image: var(--pattern); background-size: 90px; opacity: .05; pointer-events: none; }
:where(.pg-cpkg) .cside--dark .cside__title{ color: #fff; position: relative; }
:where(.pg-cpkg) .cside__list{ position: relative; display: grid; gap: 10px; font-size: 14px; line-height: 1.45; }
:where(.pg-cpkg) .cside__list li{ display: flex; gap: 10px; }
:where(.pg-cpkg) .cside__list i{ margin-top: .3em; color: #f2bb52; }
:where(.pg-cpkg) .cside__btn{ position: relative; width: 100%; margin-top: 18px; color: #0e2c30; }

@media (max-width: 1024px) {
  :where(.pg-cpkg) .cpkg__grid{ grid-template-columns: 1fr; }
  :where(.pg-cpkg) .cpkg__side{ position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  :where(.pg-cpkg) .cform__group, :where(.pg-cpkg) .cform__group--3{ grid-template-columns: 1fr; }
  :where(.pg-cpkg) .cpkg__side{ grid-template-columns: 1fr; }
  :where(.pg-cpkg) .cpkg__btns .btn{ flex: 1 1 100%; justify-content: center; }
}