/* ZAEREEN — Mazaraat journey planner (planner/index.php, planner/results.php).
   Loaded after zaereen.css and built only on its --z- tokens, so the planner
   reads as part of the site: green and gold, Cormorant headings, Jost text. */

.zp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zp-section { padding-top: 28px; padding-bottom: 56px; }

/* ------------------------------------------------------------------ card --- */
.zp-card {
    background: var(--z-surface);
    border: 1px solid var(--z-line-soft);
    border-radius: 22px;
    box-shadow: var(--z-shadow-lg);
    padding: clamp(18px, 3.4vw, 44px);
    max-width: 1180px;
    margin: 0 auto;
}
.zp-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.zp-step + .zp-step { margin-top: 36px; }
.zp-card.is-js .zp-step + .zp-step { margin-top: 0; }

/* ----------------------------------------------------------------- steps --- */
.zp-steps {
    list-style: none; margin: 0 0 30px; padding: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); position: relative;
}
.zp-card:not(.is-js) .zp-steps { display: none; }
.zp-steps::before {
    content: ""; position: absolute; top: 24px; left: 16.7%; right: 16.7%;
    height: 2px; background: var(--z-line);
}
.zp-steps li { position: relative; display: grid; justify-items: center; gap: 10px; cursor: pointer; text-align: center; }
.zp-steps span {
    width: 50px; height: 50px; border-radius: 50%;
    display: grid; place-items: center;
    font: 600 1.15rem var(--z-body);
    background: var(--z-surface); color: var(--z-ink-3);
    border: 2px solid var(--z-line-strong);
    position: relative; z-index: 1;
}
.zp-steps b { font: 500 1.05rem var(--z-body); color: var(--z-ink-3); }
.zp-steps li.is-on span { background: var(--z-green); border-color: var(--z-green); color: #fffaf0; box-shadow: 0 0 0 5px var(--z-green-soft); }
.zp-steps li.is-on b { color: var(--z-green); font-weight: 600; }
.zp-steps li.is-done span { background: var(--z-gold-pale); border-color: var(--z-gold); color: var(--z-gold-deep); }
.zp-steps li.is-done b { color: var(--z-ink-2); }

/* -------------------------------------------------------------- headings --- */
.zp-q {
    font: 600 1.18rem var(--z-body);
    color: var(--z-green);
    margin: 0 0 12px;
    letter-spacing: 0;
}
.zp-q label { cursor: pointer; }
/* The site styles every h2 in its serif display face; these questions are
   form labels and keep the body face, as on the reference planner. */
.zp-card h2.zp-q { font: 600 1.18rem var(--z-body); color: var(--z-green); letter-spacing: 0; }

/* The live map under "From where", filling the column beside the stop list
   and staying in view while the stops are scrolled. */
.zp-pickmap-wrap {
    position: sticky; top: 110px; margin-top: 18px;
    border: 1px solid var(--z-line-soft); border-radius: 16px; overflow: hidden;
    background: var(--z-surface); box-shadow: var(--z-shadow);
}
.zp-pickmap-wrap[hidden] { display: none; }
.zp-pickmap { height: 380px; background: var(--z-teal-wash); z-index: 0; }
.zp-pickmap-cap { margin: 0; padding: 10px 14px; font-size: .9rem; color: var(--z-ink-2); border-top: 1px solid var(--z-line-soft); }
.zp-grid > .zp-field:first-child { align-self: stretch; }

/* -------------------------------------------------- popular itineraries --- */
.zp-popular {
    background: var(--z-gold-wash);
    border: 1px solid var(--z-line-gold);
    border-radius: 16px;
    padding: 14px 18px 16px;
    margin-bottom: 28px;
}
.zp-popular summary {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px;
    cursor: pointer; list-style: none;
}
.zp-popular summary::-webkit-details-marker { display: none; }
.zp-popular summary span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--z-green); }
.zp-popular summary span svg { color: var(--z-gold); }
.zp-popular summary small { color: var(--z-ink-3); font-size: .9rem; }
.zp-chip-group { margin-top: 16px; }
.zp-chip-group.zp-bystate { margin: 0 0 14px; }
.zp-chip-label {
    display: block; margin-bottom: 9px;
    font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--z-gold-deep);
}
.zp-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.zp-chip {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 6px 8px 6px 6px; border-radius: 999px;
    background: var(--z-surface); border: 1px solid var(--z-line);
    box-shadow: var(--z-shadow-sm);
    font: 500 .97rem var(--z-body); color: var(--z-green); cursor: pointer;
    transition: background .15s, border-color .15s, transform .15s;
}
.zp-chip-ico {
    width: 28px; height: 28px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: var(--z-green-soft); color: var(--z-green-3);
}
.zp-chip-ico.is-tick { display: none; }
.zp-chip-name { white-space: nowrap; }
.zp-chip i {
    font-style: normal; font-size: .8rem; font-weight: 600;
    min-width: 26px; padding: 3px 8px; border-radius: 999px; text-align: center;
    background: var(--z-gold-wash); color: var(--z-gold-deep);
}
.zp-chip:hover { border-color: var(--z-gold); transform: translateY(-1px); }
.zp-chip:focus-visible { outline: 2px solid var(--z-gold); outline-offset: 2px; }
.zp-chip[aria-pressed="true"] { background: var(--z-green); border-color: var(--z-green); color: #fffaf0; }
.zp-chip[aria-pressed="true"] .zp-chip-ico { display: none; }
.zp-chip[aria-pressed="true"] .zp-chip-ico.is-tick { display: grid; background: var(--z-gold); color: var(--z-green); }
.zp-chip[aria-pressed="true"] i { background: rgba(255, 255, 255, .14); color: var(--z-gold-light); }

/* ------------------------------------------------------------------ grid --- */
.zp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 44px; margin-bottom: 30px; }
.zp-field { min-width: 0; }

.zp-input {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    background: var(--z-marble);
    border: 1px solid var(--z-line);
    border-radius: 14px;
    padding: 0 16px;
    min-height: 58px;
    transition: border-color .15s, box-shadow .15s;
}
.zp-input:focus-within { border-color: var(--z-green-3); box-shadow: 0 0 0 3px var(--z-green-soft); }
.zp-input > svg { color: var(--z-green-3); flex: none; }
.zp-input input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
    font: 400 1.08rem var(--z-body); color: var(--z-ink); padding: 14px 0;
}
.zp-input input::placeholder { color: var(--z-ink-3); }
.zp-input .zp-input-end { color: var(--z-ink-3); }
.zp-input-sm { max-width: 220px; }
.zp-clear { border: 0; background: none; color: var(--z-ink-3); cursor: pointer; padding: 6px; display: grid; }
.zp-clear:hover { color: var(--z-ink); }

.zp-locate {
    display: inline-flex; align-items: center; gap: 8px;
    border: 0; background: none; padding: 4px 2px; margin-bottom: 10px;
    font: 500 1rem var(--z-body); color: var(--z-teal); cursor: pointer;
}
.zp-locate:hover { text-decoration: underline; }
.zp-hint { margin: 8px 2px 0; font-size: .92rem; color: var(--z-ink-2); }

.zp-suggest-list {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
    list-style: none; margin: 0; padding: 6px;
    background: var(--z-surface); border: 1px solid var(--z-line);
    border-radius: 12px; box-shadow: var(--z-shadow-lg);
    max-height: 300px; overflow: auto;
}
.zp-suggest-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.zp-suggest-list li small { color: var(--z-ink-3); }
.zp-suggest-list li:hover, .zp-suggest-list li.is-on { background: var(--z-green-soft); }

/* Segmented controls: the state filter and One Way / Return. */
.zp-seg {
    display: inline-flex; flex-wrap: wrap; gap: 4px;
    background: var(--z-surface-2); border: 1px solid var(--z-line-soft);
    border-radius: 999px; padding: 4px; margin-bottom: 12px;
}
.zp-seg button, .zp-seg label {
    border: 0; background: none; cursor: pointer;
    padding: 7px 16px; border-radius: 999px;
    font: 500 .98rem var(--z-body); color: var(--z-ink-2);
}
.zp-seg input { position: absolute; opacity: 0; pointer-events: none; }
/* One Way / Return and, for a return, Return date / Number of days, side by side. */
.zp-segs { display: flex; flex-wrap: wrap; gap: 0 12px; }
.zp-seg[hidden], .zp-input[hidden] { display: none; }
.zp-seg .is-on { background: var(--z-green); color: #fffaf0; }
.zp-seg label:focus-within { outline: 2px solid var(--z-gold); outline-offset: 1px; }

/* The mazaar list. */
.zp-list {
    list-style: none; margin: 10px 0 0; padding: 4px;
    max-height: 290px; overflow: auto;
    border: 1px solid var(--z-line-soft); border-radius: 14px; background: var(--z-surface);
}
.zp-list li[hidden] { display: none; }
.zp-list label { display: flex; align-items: flex-start; gap: 12px; padding: 9px 10px; border-radius: 10px; cursor: pointer; }
.zp-list label:hover { background: var(--z-surface-2); }
.zp-list input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--z-green); flex: none; }
.zp-list span { display: grid; gap: 1px; }
.zp-list b { font-weight: 500; color: var(--z-ink); }
.zp-list small { color: var(--z-ink-3); font-size: .88rem; }

.zp-picked { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.zp-picked:empty { display: none; }
.zp-tag {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 6px 5px 6px; border-radius: 999px;
    background: var(--z-green-soft); color: var(--z-green); font-size: .93rem; font-weight: 500;
}
.zp-tag i {
    font-style: normal; width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center; background: var(--z-green); color: #fffaf0; font-size: .8rem;
}
.zp-tag button { border: 0; background: none; cursor: pointer; color: var(--z-green-3); font-size: 1.15rem; line-height: 1; padding: 0 6px; }
.zp-tag button:hover { color: var(--z-sold); }

/* ------------------------------------------------------------ stop rows --- */
.zp-card.is-js .zp-nojs { display: none; }
.zp-stops { display: grid; gap: 14px; }
.zp-stop { display: grid; gap: 8px; }
.zp-stop-k { font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--z-ink-3); }
.zp-stop-row { display: grid; grid-template-columns: minmax(0, 1fr) 58px; gap: 12px; }
.zp-stop .zp-input input { text-overflow: ellipsis; }
/* The mazaar's town, beside its name; hidden while that stop is being typed in. */
.zp-stop-city {
    flex: none; display: inline-flex; align-items: center; gap: 5px;
    max-width: 45%; padding: 5px 6px 5px 10px; border-radius: 999px;
    background: var(--z-green-soft); color: var(--z-green);
    font-size: .9rem; font-weight: 500; white-space: nowrap; overflow: hidden;
}
.zp-stop-city svg { flex: none; color: var(--z-green-3); }
.zp-stop-city i {
    font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
    padding: 2px 7px; border-radius: 999px; background: var(--z-surface); color: var(--z-gold-deep);
}
.zp-stop .zp-input:focus-within .zp-stop-city { display: none; }
.zp-bin {
    display: grid; place-items: center; cursor: pointer;
    border: 1px solid #f3d0d0; border-radius: 14px; background: #fff;
    color: #dc2626; transition: background .15s, border-color .15s;
}
.zp-bin:hover, .zp-bin:focus-visible { background: #fef2f2; border-color: #dc2626; }
.zp-add {
    justify-self: start; margin-top: 14px; padding: 4px 0;
    border: 0; background: none; cursor: pointer;
    font: 600 1.12rem var(--z-body); color: var(--z-green);
}
.zp-add:hover { text-decoration: underline; }
.zp-suggest-list li b { font-weight: 500; }
.zp-suggest-list li.is-key { background: var(--z-green-soft); }
.zp-suggest-list li.zp-suggest-none { cursor: default; color: var(--z-ink-3); }

/* "1 selected" beside Popular itineraries, and the tick on a chosen chip. */
.zp-count {
    font-style: normal; font-size: .85rem; font-weight: 600;
    padding: 3px 12px; border-radius: 999px; background: var(--z-green); color: #fffaf0;
}
.zp-count[hidden] { display: none; }

/* ------------------------------------------------------------ travel modes --- */
.zp-modes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.zp-mode {
    position: relative; display: grid; justify-items: center; align-content: start; gap: 4px;
    padding: 22px 10px 18px; text-align: center; cursor: pointer;
    background: var(--z-surface); border: 1.5px solid var(--z-line);
    border-radius: 16px; transition: border-color .15s, background .15s, transform .15s;
}
.zp-mode:hover { border-color: var(--z-gold); transform: translateY(-1px); }
.zp-mode input { position: absolute; opacity: 0; pointer-events: none; }
.zp-mode:focus-within { outline: 2px solid var(--z-gold); outline-offset: 2px; }
.zp-mode-ico {
    font: 2.1rem/1 "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    margin-bottom: 8px;
}
.zp-mode b { font-weight: 600; color: var(--z-ink); font-size: 1.05rem; }
.zp-mode small { color: var(--z-ink-3); font-size: .9rem; }
.zp-mode em {
    position: absolute; top: -1px; right: -1px;
    font-style: normal; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    background: var(--z-green); color: #fffaf0; padding: 4px 10px; border-radius: 0 15px 0 10px;
}
.zp-mode.is-on { background: var(--z-green-soft); border-color: var(--z-green); }
.zp-mode.is-on b { color: var(--z-green); }

/* --------------------------------------------------------- custom note --- */
.zp-note { margin-top: 34px; }
.zp-note .zp-q label { display: inline-flex; align-items: center; gap: 10px; }
.zp-note .zp-q svg { color: var(--z-gold); }
.zp-note .zp-q small { font-weight: 400; color: var(--z-ink-3); font-size: 1rem; }
.zp-note textarea {
    width: 100%; min-height: 110px; resize: vertical;
    padding: 16px 18px; border-radius: 14px;
    border: 1px solid var(--z-line); background: var(--z-marble);
    font: 400 1.05rem/1.5 var(--z-body); color: var(--z-ink);
}
.zp-note textarea:focus { outline: 0; border-color: var(--z-green-3); box-shadow: 0 0 0 3px var(--z-green-soft); }
.zp-note-foot { display: flex; justify-content: space-between; gap: 12px; margin: 10px 2px 0; color: var(--z-ink-3); font-size: .92rem; }

/* --------------------------------------------------- Plan My Journey --- */
.zp-nav-go { border-top: 1px solid var(--z-line-soft); padding-top: 26px; flex-wrap: wrap; }
.zp-nav-aside { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; color: var(--z-ink-2); }
.zp-nav-aside svg { color: var(--z-gold); }
.zp-linkbtn { border: 0; background: none; padding: 0 0 0 6px; cursor: pointer; font: 500 1rem var(--z-body); color: var(--z-teal); text-decoration: underline; }
.zp-go {
    display: inline-flex; align-items: center; gap: 14px;
    padding: 20px 40px; border: 0; border-radius: 16px; cursor: pointer;
    background: #e3bf35; color: var(--z-green);
    font: 700 1.35rem var(--z-body);
    box-shadow: 0 10px 24px -12px rgba(143, 111, 28, .8);
    transition: transform .15s, background .15s;
}
.zp-go:hover { background: #d9b322; transform: translateY(-1px); }
.zp-go:focus-visible { outline: 3px solid var(--z-green); outline-offset: 3px; }

/* ------------------------------------------------------------ features --- */
/* The form card and the feature row share one wrapper, so their edges line up. */
.zp-wrap { max-width: 1180px; margin: 0 auto; }
.zp-wrap > .zp-card { max-width: none; }

.zp-features {
    list-style: none; margin: 26px 0 0; padding: 0; width: 100%;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
}
.zp-features li { display: flex; min-width: 0; }
.zp-feature {
    position: relative; flex: 1;
    display: grid; justify-items: center; align-content: start; gap: 14px; text-align: center;
    padding: 26px 20px 24px; border-radius: 18px; overflow: hidden;
    background: var(--z-surface); border: 1px solid var(--z-line-soft);
    box-shadow: var(--z-shadow);
    color: inherit; text-decoration: none;
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
/* A gold rule along the top edge, the site's accent. */
.zp-feature::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--z-gold-leaf);
}
a.zp-feature:hover, a.zp-feature:focus-visible { transform: translateY(-3px); box-shadow: var(--z-shadow-lg); border-color: var(--z-line-gold); }
a.zp-feature:focus-visible { outline: 2px solid var(--z-gold); outline-offset: 3px; }
.zp-feature-ico {
    width: 64px; height: 64px; border-radius: 18px;
    display: grid; place-items: center;
    background: linear-gradient(145deg, var(--z-green-3), var(--z-green));
    color: var(--z-gold-light);
    box-shadow: 0 10px 20px -12px rgba(13, 44, 34, .8), inset 0 0 0 1px rgba(227, 200, 134, .3);
}
.zp-feature-body { display: grid; gap: 4px; }
.zp-feature-body b { font: 600 1.18rem var(--z-body); color: var(--z-green); }
.zp-feature-body small { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--z-gold-deep); }
.zp-feature-body span { margin-top: 4px; color: var(--z-ink-2); font-size: .93rem; line-height: 1.5; }

/* ------------------------------------------------------------ preferences --- */
.zp-prefs { display: grid; gap: 28px; }
.zp-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.zp-opt {
    position: relative; display: grid; gap: 3px;
    padding: 14px 16px; cursor: pointer;
    background: var(--z-surface); border: 1.5px solid var(--z-line); border-radius: 14px;
}
.zp-opt input { position: absolute; opacity: 0; pointer-events: none; }
.zp-opt b { font-weight: 600; color: var(--z-ink); }
.zp-opt small { color: var(--z-ink-3); font-size: .9rem; }
.zp-opt:hover { border-color: var(--z-gold); }
.zp-opt:focus-within { outline: 2px solid var(--z-gold); outline-offset: 2px; }
.zp-opt.is-on { background: var(--z-green-soft); border-color: var(--z-green); }

/* ----------------------------------------------------------------- review --- */
.zp-review { margin: 0 0 8px; display: grid; gap: 0; border: 1px solid var(--z-line-soft); border-radius: 14px; overflow: hidden; }
.zp-review div { display: grid; grid-template-columns: 200px 1fr; gap: 14px; padding: 13px 18px; background: var(--z-surface); }
.zp-review div:nth-child(even) { background: var(--z-surface-2); }
.zp-review dt { color: var(--z-ink-3); font-weight: 500; }
.zp-review dd { margin: 0; color: var(--z-ink); }

/* -------------------------------------------------------------- nav, error --- */
.zp-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 30px; }
.zp-card:not(.is-js) .zp-nav [data-go] { display: none; }
.zp-error {
    margin: 20px 0 0; padding: 12px 16px; border-radius: 12px;
    background: var(--z-sold-bg); color: var(--z-sold); font-weight: 500;
}

/* ---------------------------------------------------------------- loading --- */
.zp-loading {
    position: fixed; inset: 0; z-index: 400;
    display: grid; place-items: center; padding: 16px;
    background: rgba(255, 253, 247, .94); backdrop-filter: blur(6px);
}
.zp-loading[hidden] { display: none; }
.zp-loading-in { max-width: 560px; width: 100%; text-align: center; }
.zp-loading-ico {
    width: 112px; height: 112px; margin: 0 auto 22px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--z-green); color: var(--z-gold-light);
    box-shadow: 0 0 0 4px var(--z-gold), var(--z-shadow-lg);
    animation: zp-pulse 1.6s ease-in-out infinite;
}
.zp-loading h2 { font: 600 clamp(1.5rem, 4vw, 2.1rem) var(--z-display); color: var(--z-green); margin: 0 0 20px; }
.zp-loading ol { list-style: none; margin: 0 auto 24px; padding: 0; display: grid; gap: 12px; text-align: left; max-width: 440px; }
.zp-loading li { display: flex; gap: 12px; align-items: center; color: var(--z-ink-3); }
.zp-loading li::before {
    content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid var(--z-gold); border-right-color: transparent;
    animation: zp-spin .9s linear infinite;
}
.zp-loading li.is-done { color: var(--z-ink-2); }
.zp-loading li.is-done::before {
    animation: none; border-color: var(--z-open);
    background: var(--z-open-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b6349' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.zp-bar { display: block; height: 8px; border-radius: 99px; background: var(--z-line-soft); overflow: hidden; max-width: 440px; margin: 0 auto; }
.zp-bar i { display: block; height: 100%; width: 30%; border-radius: inherit; background: var(--z-gold); animation: zp-bar 2.2s ease-in-out infinite; }
@keyframes zp-spin { to { transform: rotate(360deg); } }
@keyframes zp-pulse { 50% { transform: scale(1.04); } }
@keyframes zp-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) {
    .zp-loading-ico, .zp-loading li::before, .zp-bar i { animation: none; }
}

/* ================================================================ results === */
.zp-results { padding-top: 28px; }
.zp-empty { text-align: center; max-width: 560px; color: var(--z-ink-2); }
.zp-empty svg { color: var(--z-gold); }
.zp-empty h1 { font: 600 2rem var(--z-display); color: var(--z-green); margin: 10px 0; }

.zp-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 24px; }
.zp-kicker { margin: 0; text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 600; color: var(--z-gold-deep); }
.zp-head h1 { font: 600 clamp(1.7rem, 4vw, 2.5rem) var(--z-display); color: var(--z-green); margin: 4px 0; }
.zp-head-sub { margin: 0; color: var(--z-ink-2); }
.zp-head-act { display: flex; flex-wrap: wrap; gap: 8px; }

/* The results page's green band, as on the Mazaraat pages: route on the left,
   the actions on the right. Desktop only, like every .z-pagehead. */
.zp-pagehead-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px 24px; }
.z-pagehead.zp-pagehead h1 { letter-spacing: .03em; }
.z-pagehead.zp-pagehead .zp-head-act { padding-bottom: 4px; }
.z-pagehead.zp-pagehead .z-btn-outline { color: #fbf5e6; border-color: rgba(240, 232, 214, .4); background: rgba(255, 255, 255, .04); }
.z-pagehead.zp-pagehead .z-btn-outline:hover { color: var(--z-gold-light); border-color: var(--z-gold); background: rgba(255, 255, 255, .08); }
@media (min-width: 1081px) {
    .zp-head-mob { display: none; }
}

.zp-layout { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 26px; align-items: start; }
.zp-side { display: grid; gap: 16px; }

.zp-option {
    display: grid; gap: 8px;
    padding: 20px 22px; border-radius: 18px;
    background: var(--z-surface); border: 1.5px solid var(--z-line-soft);
    box-shadow: var(--z-shadow); color: inherit; text-decoration: none;
    transition: border-color .15s, transform .15s;
}
.zp-option:hover { border-color: var(--z-gold); transform: translateY(-1px); }
.zp-option.is-on { border-color: var(--z-green); box-shadow: 0 0 0 3px var(--z-green-soft), var(--z-shadow); }
.zp-option-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.zp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.zp-tags em {
    font-style: normal; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    padding: 5px 11px; border-radius: 999px; background: var(--z-surface-2); color: var(--z-ink-2);
}
.zp-tags .is-fastest { background: var(--z-green); color: #fffaf0; }
.zp-tags .is-economical { background: #b45309; color: #fffaf0; }
.zp-tags .is-recommended { background: var(--z-gold); color: var(--z-green); }
.zp-dur { display: inline-flex; align-items: center; gap: 5px; color: var(--z-ink-3); font-size: .95rem; white-space: nowrap; }
.zp-option-ico { color: var(--z-green-3); }
.zp-option b { font: 600 1.25rem var(--z-body); color: var(--z-ink); line-height: 1.3; }
.zp-option-desc { color: var(--z-ink-2); font-size: .95rem; line-height: 1.5; }
.zp-option-facts { color: var(--z-ink-3); font-size: .9rem; }
.zp-pill { justify-self: start; padding: 4px 12px; border-radius: 999px; background: var(--z-few-bg); color: var(--z-few); font-size: .85rem; font-weight: 500; }
.zp-option-go { border-top: 1px solid var(--z-line-soft); padding-top: 12px; margin-top: 4px; font-weight: 600; color: var(--z-teal); }
.zp-option.is-on .zp-option-go { color: var(--z-green); }

.zp-why {
    background: var(--z-green); color: #f4ecda;
    background-image: var(--z-pattern-dark);
    border-radius: 18px; padding: 22px 24px;
}
.zp-why h2 { display: flex; align-items: center; gap: 10px; font: 600 1.15rem var(--z-body); color: var(--z-gold-light); margin: 0 0 14px; }
.zp-why ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.zp-why li { display: flex; gap: 10px; line-height: 1.45; }
.zp-why li svg { flex: none; margin-top: 3px; color: var(--z-gold-light); }

.zp-book { background: var(--z-surface); border: 1px solid var(--z-line-gold); border-radius: 18px; padding: 20px 22px; display: grid; gap: 10px; }
.zp-book h2 { font: 600 1.35rem var(--z-display); color: var(--z-green); margin: 0; }
.zp-book p { margin: 0 0 4px; color: var(--z-ink-2); font-size: .95rem; }
.zp-book .z-btn { justify-content: center; }

.zp-main { min-width: 0; background: var(--z-surface); border: 1px solid var(--z-line-soft); border-radius: 20px; box-shadow: var(--z-shadow); overflow: hidden; }
.zp-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 18px 22px; background: var(--z-surface-2); border-bottom: 1px solid var(--z-line-soft); }
.zp-trail-pt { padding: 6px 14px; border-radius: 999px; background: var(--z-surface); border: 1px solid var(--z-line); font-weight: 500; color: var(--z-green); font-size: .93rem; }
.zp-trail-arrow { color: var(--z-gold-deep); }

/* The route map. Fixed height: a Leaflet map with no height draws nothing. */
.zp-map-wrap { position: relative; border-bottom: 1px solid var(--z-line-soft); }
.zp-map { height: 420px; background: var(--z-teal-wash); z-index: 0; }
.zp-map-label {
    position: absolute; top: 14px; left: 56px; z-index: 500;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 999px;
    background: var(--z-surface); box-shadow: var(--z-shadow);
    font-weight: 600; font-size: .9rem; color: var(--z-green);
    pointer-events: none;
}
.zp-map-fail { margin: 0; padding: 180px 20px 0; text-align: center; color: var(--z-ink-2); }
.zp-pin { background: none; border: 0; }
.zp-pin span {
    width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--z-green); color: var(--z-gold-light);
    border: 3px solid var(--z-gold);
    font: 700 .9rem var(--z-body);
    box-shadow: 0 3px 8px rgba(13, 44, 34, .35);
}
.zp-pin.is-start span { background: var(--z-gold); color: var(--z-green); border-color: var(--z-green); }
.zp-pin.is-approx span { border-style: dashed; }

/* A mazaar marker: the dome on a dark plate, its visit number in a gold badge. */
.zp-mpin { background: none; border: 0; }
.zp-mpin-dome {
    position: absolute; inset: 0;
    display: grid; place-items: center; border-radius: 50%;
    background: var(--z-green); color: var(--z-gold-light);
    border: 3px solid var(--z-gold);
    box-shadow: 0 4px 10px rgba(13, 44, 34, .4);
}
.zp-mpin.is-approx .zp-mpin-dome { border-style: dashed; }
.zp-mpin b {
    position: absolute; top: -7px; right: -8px;
    min-width: 21px; height: 21px; padding: 0 5px; border-radius: 999px;
    display: grid; place-items: center;
    background: var(--z-gold); color: var(--z-green);
    border: 2px solid #fff;
    font: 700 .74rem/1 var(--z-body);
    box-shadow: 0 2px 5px rgba(13, 44, 34, .35);
}
.zp-pop { display: grid; gap: 3px; font-family: var(--z-body); min-width: 170px; }
.zp-pop b { color: var(--z-green); font-size: .95rem; }
.zp-pop small { color: var(--z-ink-3); }
.zp-pop a { color: var(--z-teal); font-weight: 500; }

.zp-daytabs { display: flex; gap: 10px; overflow-x: auto; padding: 16px 22px; border-bottom: 1px solid var(--z-line-soft); scrollbar-width: thin; }
.zp-daytabs a {
    flex: none; display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: 999px; text-decoration: none;
    background: var(--z-green-soft); color: var(--z-green); font-size: .93rem; white-space: nowrap;
}
.zp-daytabs a b { font-weight: 700; }
.zp-daytabs a span { color: var(--z-ink-2); max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.zp-daytabs a.is-on { background: var(--z-green); color: #fffaf0; }
.zp-daytabs a.is-on span { color: var(--z-gold-light); }

.zp-day { margin: 18px 22px; border: 1px solid var(--z-line-soft); border-radius: 16px; background: var(--z-surface); scroll-margin-top: 110px; }
.zp-day summary {
    list-style: none; cursor: pointer; position: relative;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
    padding: 18px 54px 16px 20px;
}
.zp-day summary::-webkit-details-marker { display: none; }
.zp-day[open] summary { border-bottom: 1px solid var(--z-line-soft); background: var(--z-marble); border-radius: 16px 16px 0 0; }
.zp-day-n { background: var(--z-green); color: var(--z-gold-light); font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; }
.zp-day-date { font-weight: 600; color: var(--z-green); }
.zp-day-title { font-weight: 700; font-size: 1.3rem; color: var(--z-teal); line-height: 1.3; }
.zp-day-meta { color: var(--z-ink-3); font-size: .95rem; flex-basis: 100%; }
.zp-day-caret { position: absolute; right: 22px; top: 24px; color: var(--z-green); transition: transform .2s; }
.zp-day[open] .zp-day-caret { transform: rotate(180deg); }

.zp-timeline { list-style: none; margin: 0; padding: 16px 22px 20px 26px; position: relative; }
.zp-timeline::before { content: ""; position: absolute; left: 31px; top: 26px; bottom: 30px; width: 2px; background: var(--z-line); }
.zp-ev { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 18px; padding: 14px 0; align-items: start; }
.zp-ev-dot { width: 12px; height: 12px; margin-top: 12px; border-radius: 50%; background: var(--z-teal-light); box-shadow: 0 0 0 4px var(--z-surface); position: relative; z-index: 1; }
.zp-ev.is-visit .zp-ev-dot { background: var(--z-gold); }
.zp-ev-body { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.zp-ev-title { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--z-ink); font-size: 1.12rem; line-height: 1.35; }
.zp-ev-ico { flex: none; width: 34px; display: inline-grid; place-items: center; font-size: 1.5rem; line-height: 1; }
.zp-ev.is-visit .zp-ev-ico { color: var(--z-gold); }
.zp-ev-body small { color: var(--z-ink-3); font-size: .95rem; }
.zp-ev-place { color: var(--z-ink-2); font-weight: 500; }
.zp-badge { font-size: .82rem; padding: 4px 12px; border-radius: 999px; background: var(--z-open-bg); color: var(--z-open); font-weight: 600; }
.zp-ev-more { display: grid; gap: 8px; margin-top: 4px; padding: 12px 14px; border-radius: 12px; background: var(--z-surface-2); border: 1px solid var(--z-line-soft); justify-self: stretch; }
.zp-ev-more[hidden] { display: none; }
.zp-ev-more p { margin: 0; color: var(--z-ink-2); font-size: .93rem; }
.zp-ev-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.zp-ev-links a { display: inline-flex; align-items: center; gap: 5px; font-size: .9rem; color: var(--z-teal); text-decoration: none; }
.zp-ev-links a:hover { text-decoration: underline; }
.zp-ev-time {
    display: inline-flex; align-items: flex-start; gap: 10px; padding: 6px 4px; border: 0; background: none; cursor: pointer;
    font: inherit; font-weight: 700; color: var(--z-teal); font-size: 1rem; white-space: nowrap; text-align: right;
}
.zp-ev-time i { display: block; font-style: normal; font-weight: 500; font-size: .78rem; color: var(--z-gold-deep); }
.zp-ev-caret { color: var(--z-ink-3); margin-top: 2px; transition: transform .2s; }
.zp-ev-time[aria-expanded="true"] .zp-ev-caret { transform: rotate(180deg); }

/* "Detailed Itinerary" card: heading, the road strip, the day pills, the days. */
.zp-itin { margin: 22px; border: 1px solid var(--z-line-soft); border-radius: 20px; background: var(--z-surface); overflow: hidden; }
.zp-itin-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 24px 26px 20px; border-bottom: 1px solid var(--z-line-soft); }
.zp-itin .zp-itin-head h2 { margin: 0 0 6px; font: 700 1.6rem var(--z-body); color: var(--z-green); }
.zp-itin-head p { margin: 0; color: var(--z-ink-3); font-size: 1rem; }
.zp-expand { flex: none; border: 0; background: none; padding: 4px 0; cursor: pointer; font: inherit; font-weight: 700; color: var(--z-green); }
.zp-expand:hover { color: var(--z-gold-deep); }
.zp-legstrip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 16px 26px; background: var(--z-surface-2); border-bottom: 1px solid var(--z-line-soft); }
.zp-legstrip-pt { padding: 8px 18px; border-radius: 999px; background: var(--z-surface); border: 1px solid var(--z-line); font-weight: 700; color: var(--z-green); font-size: .95rem; }
.zp-legstrip-mode { color: var(--z-gold-deep); font-weight: 700; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; }
.zp-itin .zp-daytabs a { background: var(--z-green); color: var(--z-gold-light); font-weight: 600; padding: 11px 20px; }
.zp-itin .zp-daytabs a span { color: var(--z-gold-light); }
.zp-itin .zp-daytabs a.is-on { box-shadow: 0 0 0 3px var(--z-gold-wash), 0 0 0 4px var(--z-gold); }
.zp-itin .zp-day { margin: 18px 22px; }

.zp-notes { margin: 18px 22px; padding: 16px 20px; border-radius: 14px; background: var(--z-few-bg); color: var(--z-ink-2); }
.zp-notes h2 { display: flex; align-items: center; gap: 8px; font: 600 1.05rem var(--z-body); color: var(--z-few); margin: 0 0 8px; }
.zp-notes ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.zp-notes.is-yours { background: var(--z-teal-wash); }
.zp-notes.is-yours h2 { color: var(--z-teal); }
.zp-notes.is-yours p { margin: 0 0 6px; color: var(--z-ink); }
.zp-notes .zp-notes-small { font-size: .88rem; color: var(--z-ink-3); }
.zp-disclaimer { margin: 0 22px 22px; color: var(--z-ink-3); font-size: .85rem; }

/* ------------------------------------------------------------- responsive --- */
@media (max-width: 1080px) {
    .zp-layout { grid-template-columns: minmax(0, 1fr); }
    .zp-side { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    .zp-why, .zp-book { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
    .zp-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .zp-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zp-pickmap-wrap { position: static; }
    .zp-pickmap { height: 260px; }
    .zp-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .zp-steps b { font-size: .85rem; }
    .zp-steps span { width: 40px; height: 40px; }
    .zp-steps::before { top: 19px; }
    .zp-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zp-review div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .zp-day { margin: 14px 12px; }
    .zp-ev { grid-template-columns: 12px minmax(0, 1fr); gap: 12px; }
    .zp-ev-time { grid-column: 2; justify-self: start; text-align: left; padding: 0; }
    .zp-timeline { padding: 10px 14px 14px 16px; }
    .zp-timeline::before { left: 21px; }
    .zp-itin { margin: 14px 10px; }
    .zp-itin .zp-day { margin: 12px 10px; }
    .zp-itin-head { flex-direction: column; padding: 18px 16px 14px; }
    .zp-legstrip { padding: 12px 14px; }
    .zp-day-title { font-size: 1.1rem; flex-basis: 100%; }
    .zp-trail, .zp-daytabs { padding-left: 14px; padding-right: 14px; }
    .zp-map { height: 300px; }
    .zp-nav .z-btn { flex: 1; justify-content: center; }
    .zp-go { width: 100%; justify-content: center; padding: 18px 20px; font-size: 1.2rem; }
    .zp-features { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .zp-feature { grid-template-columns: 56px minmax(0, 1fr); justify-items: start; text-align: left; align-items: center; padding: 18px; }
    .zp-feature-ico { width: 56px; height: 56px; border-radius: 15px; }
    .zp-chip-name { white-space: normal; }
    .zp-stop-row { grid-template-columns: minmax(0, 1fr) 52px; gap: 8px; }
}

/* ------------------------------------------------------------------ print --- */
@media print {
    .z-header, .z-footer, .zp-head-act, .zp-option:not(.is-on), .zp-book, .zp-daytabs, .z-quicktop, .zp-pagehead { display: none !important; }
    .zp-head-mob { display: flex !important; }
    .zp-layout { grid-template-columns: minmax(0, 1fr); }
    .zp-day:not([open]) > :not(summary) { display: block; }
    .zp-expand, .zp-ev-caret, .zp-ev-more { display: none !important; }
    .zp-main, .zp-option, .zp-day { box-shadow: none; }
    .zp-why { background: none; color: var(--z-ink); border: 1px solid var(--z-line); }
    .zp-why h2, .zp-why li svg { color: var(--z-green); }
}