/* Hajj & Umrah booking — extends package tour booking stepper */
.hub-stepper { max-width: 980px; margin: 0 auto; display: flex; align-items: center; gap: 10px; }
.hub-stepper .pb-step-dot { background: #d1d5db; color: #4b5563; }
.hub-stepper .pb-step-item.is-active .pb-step-dot,
.hub-stepper .pb-step-item.is-done .pb-step-dot { background: #059669; color: #fff; }
.hub-stepper .pb-step-line.is-done { background: #059669; }
#hub-pay-contact-block { white-space: pre-line; }
.hub-booking-wrap--wide { max-width: 980px !important; }
.pb-step-confirmation .pb-confirm-container { max-width: 100%; }
.pb-step-confirmation .pb-confirm-card { margin-top: 0; }

/* Step 1 — dynamic package + travel */
.hub-step1 { background: #fff; border-radius: 1rem; border: 1px solid #e5e7eb; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06); padding: 1.25rem; }
@media (min-width: 768px) { .hub-step1 { padding: 1.5rem; } }
.hub-step1-head { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px dashed #e5e7eb; }
.hub-step1-grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .hub-step1-grid { grid-template-columns: minmax(0, 1fr) minmax(260px, 300px); } }
@media (max-width: 1023px) { .hub-step1-aside { order: -1; } }
.hub-step1-main { min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.hub-step1-aside { position: sticky; top: 1rem; }
.hub-step1-footer { display: flex; justify-content: flex-end; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #f3f4f6; }

.hub-package-hero { border-radius: 0.85rem; overflow: hidden; border: 1px solid #e5e7eb; background: #f8fafc; }
.hub-package-hero-cover { position: relative; min-height: 10rem; background: linear-gradient(135deg, #047857, #0d9488); }
@media (min-width: 640px) { .hub-package-hero-cover { min-height: 12rem; } }
.hub-package-hero-cover img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 10rem; }
.hub-package-hero-badges { position: absolute; top: 0.65rem; left: 0.65rem; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.hub-package-badge { font-size: 0.68rem; font-weight: 800; padding: 0.25rem 0.55rem; border-radius: 999px; background: rgba(255,255,255,.92); color: #065f46; border: 1px solid rgba(255,255,255,.5); }
.hub-package-badge--featured { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.hub-package-hero-body { padding: 1rem 1.1rem 1.1rem; }
.hub-package-hero-title { font-size: 1.25rem; font-weight: 800; color: #0f172a; line-height: 1.25; margin: 0 0 0.35rem; }
.hub-package-hero-meta { font-size: 0.8125rem; color: #64748b; display: flex; flex-wrap: wrap; gap: 0.35rem 0.85rem; margin-bottom: 0.65rem; }
.hub-package-hero-meta span { display: inline-flex; align-items: center; gap: 0.3rem; }
.hub-package-hero-price { font-size: 1.5rem; font-weight: 800; color: #047857; line-height: 1.1; }
.hub-package-hero-price sub { font-size: 0.75rem; font-weight: 600; color: #64748b; bottom: 0; }
.hub-package-detail-link { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.5rem; font-size: 0.8125rem; font-weight: 700; color: #059669; text-decoration: none; }
.hub-package-detail-link:hover { color: #047857; text-decoration: underline; }

.hub-inc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.85rem; }
@media (min-width: 640px) { .hub-inc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hub-inc-item { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.6rem; border-radius: 0.5rem; font-size: 0.75rem; font-weight: 700; background: #ecfdf5; border: 1px solid #bbf7d0; color: #166534; }
.hub-inc-item.is-off { background: #f9fafb; border-color: #e5e7eb; color: #9ca3af; text-decoration: line-through; }
.hub-hotel-block { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid #f1f5f9; font-size: 0.8125rem; color: #475569; }
.hub-hotel-block p { margin: 0.25rem 0; }
.hub-hotel-block strong { color: #334155; }

.hub-travel-card { border: 1px solid #e5e7eb; border-radius: 0.85rem; overflow: hidden; background: #fff; }
.hub-travel-card-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background: #f0fdf4; border-bottom: 1px solid #dcfce7; font-weight: 800; font-size: 0.9375rem; color: #065f46; }
.hub-travel-card-body { padding: 1rem; }
.hub-travel-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.85rem; }
@media (min-width: 640px) { .hub-travel-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hub-field label { display: block; font-size: 0.75rem; font-weight: 700; color: #374151; margin-bottom: 0.35rem; }
.hub-field--full { grid-column: 1 / -1; }
.hub-input { width: 100%; padding: 0.65rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem; font-size: 0.9375rem; background: #fff; }
.hub-input:focus { outline: none; border-color: #059669; box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15); }
.hub-textarea { resize: vertical; min-height: 4.5rem; }
.hub-pilgrim-stepper { display: flex; border: 1px solid #d1d5db; border-radius: 0.5rem; overflow: hidden; background: #fff; }
.hub-pilgrim-stepper button { width: 2.75rem; border: none; background: #f3f4f6; font-size: 1.1rem; font-weight: 700; cursor: pointer; color: #374151; }
.hub-pilgrim-stepper button:hover { background: #e5e7eb; }
.hub-pilgrim-stepper input { flex: 1; text-align: center; border: none; font-weight: 800; font-size: 1rem; min-width: 0; }
.hub-trip-length { font-size: 0.8125rem; color: #059669; font-weight: 600; margin: 0.5rem 0 0; }

.hub-order-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 0.85rem; padding: 1.1rem; box-shadow: 0 12px 32px rgba(5, 150, 105, 0.1); }
.hub-order-card-head { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #64748b; margin-bottom: 0.5rem; }
.hub-order-card-name { font-weight: 800; font-size: 0.9375rem; color: #0f172a; line-height: 1.3; margin-bottom: 0.65rem; }
.hub-order-line { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.8125rem; color: #64748b; padding: 0.35rem 0; border-bottom: 1px dashed #f1f5f9; }
.hub-order-line strong { color: #334155; font-weight: 700; text-align: right; }
.hub-order-total { display: flex; justify-content: space-between; align-items: center; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 2px solid #ecfdf5; }
.hub-order-total span { font-size: 0.8125rem; font-weight: 700; color: #64748b; }
.hub-order-total strong { font-size: 1.35rem; font-weight: 800; color: #047857; }
.hub-order-trust { margin-top: 0.85rem; font-size: 0.72rem; color: #64748b; display: flex; align-items: center; gap: 0.35rem; }

.hub-btn-primary {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.75rem 1.35rem; background: linear-gradient(135deg, #059669, #0d9488);
    color: #fff; border: none; border-radius: 0.65rem; font-weight: 800; font-size: 0.9375rem;
    cursor: pointer; box-shadow: 0 8px 20px rgba(5, 150, 105, 0.28); transition: transform .15s, box-shadow .15s;
}
.hub-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(5, 150, 105, 0.35); }

.hub-btn-secondary {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.75rem 1.25rem; background: #f3f4f6; color: #374151; border: 1px solid #d1d5db;
    border-radius: 0.65rem; font-weight: 700; font-size: 0.9375rem; cursor: pointer;
}
.hub-btn-secondary:hover { background: #e5e7eb; }

/* Step 2 — pilgrim information */
.hub-step2 { background: #fff; border-radius: 1rem; border: 1px solid #e5e7eb; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06); padding: 1.25rem; }
@media (min-width: 768px) { .hub-step2 { padding: 1.5rem; } }
.hub-step2-head { margin-bottom: 1rem; padding-bottom: 0.85rem; border-bottom: 1px dashed #e5e7eb; }
.hub-step2-grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .hub-step2-grid { grid-template-columns: minmax(0, 1fr) minmax(240px, 280px); } }
@media (max-width: 1023px) { .hub-step2-aside { order: -1; } }
.hub-step2-main { min-width: 0; }
.hub-step2-aside { position: sticky; top: 1rem; }
.hub-step2-footer { display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #f3f4f6; }

.hub-login-banner { margin-bottom: 1rem; padding: 0.75rem 1rem; border-radius: 0.65rem; font-size: 0.8125rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.hub-login-banner.is-logged { background: #ecfdf5; border: 1px solid #bbf7d0; color: #065f46; }
.hub-login-banner.is-guest { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.hub-login-banner a { font-weight: 700; color: inherit; text-decoration: underline; }

.hub-pilgrim-progress-wrap { margin-bottom: 1rem; }
.hub-pilgrim-progress-meta { display: flex; justify-content: space-between; font-size: 0.8125rem; font-weight: 700; color: #475569; margin-bottom: 0.35rem; }
.hub-pilgrim-progress-bar { height: 0.5rem; background: #e5e7eb; border-radius: 999px; overflow: hidden; }
.hub-pilgrim-progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, #059669, #0d9488); border-radius: 999px; transition: width 0.25s ease; }

.hub-pilgrims-list { display: flex; flex-direction: column; gap: 0.85rem; }
.hub-pilgrim-card { border: 1px solid #e5e7eb; border-radius: 0.85rem; overflow: hidden; background: #fff; transition: border-color 0.2s, box-shadow 0.2s; }
.hub-pilgrim-card.is-open { border-color: #6ee7b7; box-shadow: 0 8px 20px rgba(5, 150, 105, 0.08); }
.hub-pilgrim-card.is-complete { border-color: #bbf7d0; }
.hub-pilgrim-card-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; padding: 0.85rem 1rem; background: linear-gradient(135deg, #f0fdf4, #ecfdf5); border: none; cursor: pointer; text-align: left; }
.hub-pilgrim-card.is-open .hub-pilgrim-card-head { border-bottom: 1px solid #dcfce7; }
.hub-pilgrim-card-title { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.hub-pilgrim-num { width: 1.75rem; height: 1.75rem; border-radius: 999px; background: #059669; color: #fff; font-size: 0.75rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hub-pilgrim-card.is-complete .hub-pilgrim-num { background: #047857; }
.hub-pilgrim-card-name { font-weight: 800; font-size: 0.9375rem; color: #14532d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-pilgrim-card-sub { font-size: 0.72rem; color: #64748b; font-weight: 600; }
.hub-pilgrim-status { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.2rem 0.5rem; border-radius: 999px; flex-shrink: 0; }
.hub-pilgrim-status.is-done { background: #dcfce7; color: #166534; }
.hub-pilgrim-status.is-pending { background: #f1f5f9; color: #64748b; }
.hub-pilgrim-card-actions { display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; }
.hub-pilgrim-copy { border: 1px solid #cbd5e1; background: #fff; border-radius: 999px; padding: 0.25rem 0.6rem; font-size: 0.68rem; font-weight: 700; color: #475569; cursor: pointer; }
.hub-pilgrim-copy:hover { background: #f8fafc; }
.hub-pilgrim-chevron { color: #64748b; transition: transform 0.2s; }
.hub-pilgrim-card.is-open .hub-pilgrim-chevron { transform: rotate(180deg); }
.hub-pilgrim-card-body { display: none; padding: 1rem; }
.hub-pilgrim-card.is-open .hub-pilgrim-card-body { display: block; }
.hub-pilgrim-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.85rem; }
@media (min-width: 640px) { .hub-pilgrim-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hub-pilgrim-grid .hub-field--full { grid-column: 1 / -1; }
.hub-pilgrim-section-title { grid-column: 1 / -1; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #64748b; margin: 0.25rem 0 0; padding-top: 0.5rem; border-top: 1px dashed #e5e7eb; }
.hub-pilgrim-section-title:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.hub-field-hint { font-size: 0.68rem; color: #94a3b8; margin-top: 0.2rem; }
.hub-gender-pills { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.hub-gender-pill {
    flex: 1; min-width: 5rem; padding: 0.55rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem;
    background: #fff; font-size: 0.8125rem; font-weight: 700; color: #475569; cursor: pointer; text-align: center;
}
.hub-gender-pill.is-active { border-color: #059669; background: #ecfdf5; color: #047857; box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.12); }
.hub-input.is-filled { border-color: #6ee7b7; background: #f0fdf4; }
.hub-input.is-invalid { border-color: #fca5a5; background: #fef2f2; }

/* Step 3 — review & total */
.hub-step3 { background: #fff; border-radius: 1rem; border: 1px solid #e5e7eb; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06); padding: 1.25rem; }
@media (min-width: 768px) { .hub-step3 { padding: 1.5rem; } }
.hub-step3-head { margin-bottom: 1rem; padding-bottom: 0.85rem; border-bottom: 1px dashed #e5e7eb; }
.hub-step3-footer { display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #f3f4f6; }
.hub-btn-primary--pay { background: linear-gradient(135deg, #047857, #059669); }
.hub-review-wrap { min-height: 8rem; }
.hub-review-checklist {
    display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 1rem;
    padding: 0.85rem 1rem; border-radius: 0.75rem; background: #ecfdf5; border: 1px solid #bbf7d0;
}
@media (min-width: 640px) { .hub-review-checklist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hub-review-check-item { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8125rem; font-weight: 700; color: #065f46; }
.hub-review-check-item i { color: #059669; }
.hub-review-layout { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .hub-review-layout { grid-template-columns: minmax(0, 1fr) minmax(260px, 300px); } }
.hub-review-main { display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; }
.hub-review-hero {
    display: grid; grid-template-columns: minmax(0, 1fr); border-radius: 0.85rem; overflow: hidden;
    border: 1px solid #e5e7eb; background: #fff;
}
@media (min-width: 640px) { .hub-review-hero { grid-template-columns: 9rem minmax(0, 1fr); } }
.hub-review-hero-img { width: 100%; height: 100%; min-height: 8rem; object-fit: cover; display: block; background: linear-gradient(135deg, #047857, #0d9488); }
.hub-review-hero-body { padding: 1rem 1.1rem; }
.hub-review-hero-kicker { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #059669; margin: 0 0 0.35rem; }
.hub-review-hero-title { font-size: 1.15rem; font-weight: 800; color: #0f172a; margin: 0 0 0.35rem; line-height: 1.25; }
.hub-review-hero-meta { font-size: 0.8125rem; color: #64748b; margin: 0 0 0.65rem; }
.hub-review-hero-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.hub-review-chip { display: inline-flex; flex-direction: column; padding: 0.35rem 0.55rem; border-radius: 0.45rem; background: #f0fdf4; border: 1px solid #bbf7d0; font-size: 0.75rem; font-weight: 700; color: #166534; }
.hub-review-chip strong { font-size: 0.62rem; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; }
.hub-review-inc-row { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.65rem; }
.hub-review-inc-pill { font-size: 0.68rem; font-weight: 700; padding: 0.2rem 0.45rem; border-radius: 999px; background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.hub-review-inc-pill.is-off { background: #f8fafc; color: #94a3b8; border-color: #e2e8f0; text-decoration: line-through; }
.hub-review-timeline { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.65rem; padding: 0.55rem 0.65rem; border-radius: 0.5rem; background: #f8fafc; border: 1px dashed #cbd5e1; font-size: 0.8125rem; }
.hub-review-timeline-date { font-weight: 800; color: #0f172a; }
.hub-review-timeline-arrow { color: #059669; font-weight: 800; }
.hub-review-timeline-days { margin-left: auto; font-weight: 700; color: #047857; font-size: 0.75rem; }
.hub-review-card { border: 1px solid #e5e7eb; border-radius: 0.75rem; overflow: hidden; background: #fff; }
.hub-review-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.7rem 1rem; background: #f8fafc; border-bottom: 1px solid #e5e7eb; }
.hub-review-card-head h4 { margin: 0; font-size: 0.9375rem; font-weight: 800; color: #1e293b; }
.hub-review-card-body { padding: 0.85rem 1rem; font-size: 0.8125rem; color: #475569; }
.hub-review-edit { border: 1px solid #cbd5e1; background: #fff; border-radius: 999px; padding: 0.25rem 0.65rem; font-size: 0.72rem; font-weight: 700; color: #475569; cursor: pointer; }
.hub-review-edit:hover { background: #ecfdf5; border-color: #6ee7b7; color: #047857; }
.hub-review-note { margin: 0.35rem 0; }
.hub-review-pilgrim-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.55rem; }
@media (min-width: 640px) { .hub-review-pilgrim-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hub-review-pilgrim-card { border: 1px solid #e5e7eb; border-radius: 0.65rem; padding: 0.65rem 0.75rem; background: #fafafa; }
.hub-review-pilgrim-card.is-lead { border-color: #bbf7d0; background: #f0fdf4; }
.hub-review-pilgrim-top { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.45rem; }
.hub-review-pilgrim-avatar { width: 2rem; height: 2rem; border-radius: 999px; background: #059669; color: #fff; font-size: 0.75rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hub-review-pilgrim-name { font-weight: 800; color: #0f172a; font-size: 0.875rem; line-height: 1.2; }
.hub-review-pilgrim-tag { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; color: #047857; }
.hub-review-pilgrim-kv { display: flex; justify-content: space-between; gap: 0.35rem; font-size: 0.72rem; padding: 0.2rem 0; border-bottom: 1px dashed #e5e7eb; }
.hub-review-pilgrim-kv:last-child { border-bottom: none; }
.hub-review-pilgrim-kv span:first-child { color: #94a3b8; }
.hub-review-pilgrim-kv span:last-child { font-weight: 700; color: #334155; text-align: right; }
.hub-review-contact-block { display: grid; gap: 0.35rem; }
.hub-review-contact-line { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8125rem; color: #334155; }
.hub-review-contact-line i { width: 1rem; text-align: center; color: #059669; }
.hub-review-aside { position: sticky; top: 1rem; }
.hub-review-cost-card { border: 1px solid #e5e7eb; border-radius: 0.85rem; padding: 1.1rem; background: #fff; box-shadow: 0 12px 32px rgba(5, 150, 105, 0.1); }
.hub-review-cost-card h4 { margin: 0 0 0.75rem; font-size: 0.9375rem; font-weight: 800; color: #0f172a; }
.hub-review-cost-line { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.8125rem; padding: 0.4rem 0; border-bottom: 1px dashed #f1f5f9; color: #64748b; }
.hub-review-cost-line span:last-child { font-weight: 700; color: #334155; white-space: nowrap; }
.hub-review-cost-total { display: flex; justify-content: space-between; align-items: center; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 2px solid #ecfdf5; }
.hub-review-cost-total span { font-size: 0.875rem; font-weight: 800; color: #64748b; }
.hub-review-cost-total strong { font-size: 1.35rem; font-weight: 800; color: #047857; }
.hub-review-cost-hint { margin: 0.75rem 0 0; font-size: 0.72rem; color: #64748b; line-height: 1.45; padding: 0.55rem 0.65rem; background: #f0fdf4; border-radius: 0.5rem; border: 1px solid #bbf7d0; }
.hub-review-cost-trust { margin-top: 0.65rem; font-size: 0.72rem; color: #64748b; display: flex; align-items: center; gap: 0.35rem; }

/* Step 4 — payment */
.hub-step4 { padding-bottom: 1rem; }
.hub-pay-hold-banner { border-radius: 0.75rem; margin-bottom: 0.85rem; overflow: hidden; }
.hub-step4-card {
    background: #fff; border-radius: 1rem; border: 1px solid #e5e7eb;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06); padding: 1.25rem;
}
@media (min-width: 768px) { .hub-step4-card { padding: 1.5rem; } }
.hub-step4-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; padding-bottom: 0.85rem; border-bottom: 1px dashed #e5e7eb; }
.hub-pay-secure-badge {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.75rem; border-radius: 999px;
    background: #ecfdf5; border: 1px solid #bbf7d0; color: #047857; font-size: 0.75rem; font-weight: 800;
}
.hub-pay-holding-note { margin-bottom: 1rem; }
.hub-pay-layout { gap: 1.25rem; }
.hub-pay-methods { border-radius: 0.85rem; overflow: hidden; border: 1px solid #e5e7eb; }
.hub-pay-methods-head { padding: 1rem 1rem 0.5rem; }
.hub-pay-method-hint { font-size: 0.75rem; color: #64748b; padding: 0 1rem 0.85rem; margin: 0; }
.hub-pay-method-hint.hidden { display: none; }
.hub-pay-details { margin-top: 0.25rem; }
.hub-pay-amount-card {
    border: 1px solid #e5e7eb; border-radius: 0.85rem; padding: 1rem; background: #fafafa;
}
.hub-pay-amount-label { display: block; font-size: 0.8125rem; font-weight: 800; color: #374151; margin-bottom: 0.5rem; }
.hub-pay-amount-row { display: flex; align-items: stretch; border: 2px solid #d1d5db; border-radius: 0.65rem; overflow: hidden; background: #fff; }
.hub-pay-amount-currency { display: inline-flex; align-items: center; padding: 0 0.85rem; background: #f0fdf4; color: #047857; font-weight: 800; font-size: 0.9375rem; border-right: 1px solid #d1d5db; }
.hub-pay-amount-input { flex: 1; border: none; padding: 0.75rem 0.85rem; font-size: 1.25rem; font-weight: 800; min-width: 0; }
.hub-pay-amount-input:focus { outline: none; box-shadow: inset 0 0 0 2px rgba(5, 150, 105, 0.2); }
.hub-pay-amount-hint { margin: 0.45rem 0 0; font-size: 0.72rem; color: #64748b; }
.hub-pay-total-block { border: 1px solid #e5e7eb; border-radius: 0.65rem; overflow: hidden; background: #fff; }
.hub-pay-breakdown-lines { padding: 0.75rem 1rem; font-size: 0.8125rem; color: #475569; }
.hub-pay-breakdown-line { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.3rem 0; border-bottom: 1px dashed #f1f5f9; }
.hub-pay-breakdown-line:last-child { border-bottom: none; }
.hub-pay-breakdown-total { display: flex; justify-content: space-between; padding: 0.65rem 1rem; background: #f0fdf4; font-weight: 800; color: #047857; border-top: 1px solid #bbf7d0; }
.hub-pay-submit { margin-top: 0.25rem; }
.hub-pay-terms { font-size: 0.72rem; color: #64748b; text-align: center; line-height: 1.45; margin: 0; }
.hub-pay-back { width: 100%; justify-content: center; margin-top: 0.35rem; }
.hub-pay-aside { display: flex; flex-direction: column; gap: 0.65rem; }
.hub-pay-summary-card { border-radius: 0.85rem; overflow: hidden; border: 1px solid #e5e7eb; box-shadow: 0 12px 32px rgba(5, 150, 105, 0.08); }
.hub-pay-summary-head { background: linear-gradient(135deg, #047857, #059669); color: #fff; }
.hub-pay-summary-body { padding: 1rem; }
.hub-pay-summary-cover { width: 100%; height: 5.5rem; object-fit: cover; border-radius: 0.5rem; margin-bottom: 0.65rem; display: block; }
.hub-pay-summary-title { font-weight: 800; font-size: 0.9375rem; color: #0f172a; line-height: 1.3; margin: 0 0 0.35rem; }
.hub-pay-summary-meta { font-size: 0.75rem; color: #64748b; margin-bottom: 0.65rem; }
.hub-pay-summary-line { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.8125rem; padding: 0.3rem 0; border-bottom: 1px dashed #f1f5f9; color: #64748b; }
.hub-pay-summary-line strong { color: #334155; font-weight: 700; text-align: right; }
.hub-pay-summary-total { display: flex; justify-content: space-between; margin-top: 0.65rem; padding-top: 0.65rem; border-top: 2px solid #ecfdf5; font-weight: 800; }
.hub-pay-summary-total strong { color: #047857; font-size: 1.1rem; }
.hub-pay-summary-contact { padding: 0.85rem 1rem; border-top: 1px solid #f1f5f9; background: #fafafa; }
.hub-pay-contact-block { display: grid; gap: 0.35rem; }
.hub-pay-contact-line { display: flex; align-items: center; gap: 0.4rem; }
.hub-pay-contact-line i { color: #059669; width: 1rem; text-align: center; }
.hub-pay-summary-foot { padding: 0.65rem 1rem; font-size: 0.72rem; font-weight: 700; color: #047857; background: #ecfdf5; border-top: 1px solid #bbf7d0; text-align: center; }
.hub-pay-order-preview {
    display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 1rem;
    border-radius: 0.65rem; background: #0f172a; color: #fff; font-size: 0.875rem;
}
.hub-pay-order-preview strong { font-size: 1.15rem; font-weight: 800; color: #6ee7b7; }
@media (min-width: 1024px) { .hub-pay-order-preview { display: none; } }

/* Step 5 — confirmation */
.hub-step5 { padding-bottom: 1.5rem; }
.hub-confirm-container { padding: 0; }
.hub-confirm-wrap { max-width: 980px; margin: 0 auto; }
.hub-confirm-card {
    background: #fff; border-radius: 1rem; border: 1px solid #e5e7eb;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.08); overflow: hidden;
}
.hub-confirm-head {
    display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
    padding: 1.25rem 1.25rem 1rem; border-bottom: 1px dashed #e5e7eb; background: linear-gradient(180deg, #f0fdf4 0%, #fff 100%);
}
@media (min-width: 768px) { .hub-confirm-head { padding: 1.5rem 1.5rem 1rem; } }
.hub-confirm-kicker { margin: 0 0 0.35rem; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #059669; }
.hub-confirm-title { margin: 0; font-size: 1.5rem; font-weight: 800; color: #0f172a; line-height: 1.2; }
.hub-confirm-sub { margin: 0.45rem 0 0; font-size: 0.875rem; color: #64748b; max-width: 36rem; }
.hub-confirm-layout { display: grid; gap: 1.25rem; padding: 1.25rem; }
@media (min-width: 1024px) { .hub-confirm-layout { grid-template-columns: minmax(0, 1fr) minmax(280px, 320px); padding: 1.5rem; align-items: start; } }
.hub-confirm-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.hub-confirm-hero { border: 1px solid #e5e7eb; border-radius: 0.85rem; overflow: hidden; background: #f8fafc; }
.hub-confirm-hero-cover { min-height: 9rem; background: linear-gradient(135deg, #047857, #0d9488); }
.hub-confirm-hero-cover img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 9rem; }
.hub-confirm-hero-body { padding: 1rem 1.1rem 1.1rem; }
.hub-confirm-package-name { margin: 0 0 0.35rem; font-size: 1.125rem; font-weight: 800; color: #0f172a; line-height: 1.25; }
.hub-confirm-package-meta { margin: 0 0 0.65rem; font-size: 0.8125rem; color: #64748b; }
.hub-confirm-timeline {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.65rem; margin-bottom: 0.75rem;
    font-size: 0.8125rem; font-weight: 700; color: #334155;
}
.hub-confirm-timeline i { color: #059669; }
.hub-confirm-timeline-arrow { color: #94a3b8; }
.hub-confirm-timeline-days { padding: 0.15rem 0.5rem; border-radius: 999px; background: #ecfdf5; color: #047857; font-size: 0.72rem; }
.hub-confirm-inc-row { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.65rem; }
.hub-confirm-inc-pill {
    display: inline-flex; align-items: center; padding: 0.3rem 0.55rem; border-radius: 999px;
    font-size: 0.68rem; font-weight: 800; background: #ecfdf5; border: 1px solid #bbf7d0; color: #166534;
}
.hub-confirm-inc-pill.is-off { background: #f9fafb; border-color: #e5e7eb; color: #9ca3af; text-decoration: line-through; }
.hub-confirm-hotels { margin-top: 0.5rem; padding-top: 0.65rem; border-top: 1px dashed #e5e7eb; font-size: 0.8125rem; color: #475569; }
.hub-confirm-hotels-title { margin: 0 0 0.35rem; font-weight: 800; color: #334155; }
.hub-confirm-hotels p { margin: 0.2rem 0; }
.hub-confirm-section { border: 1px solid #e5e7eb; border-radius: 0.85rem; padding: 1rem; background: #fff; }
.hub-confirm-section h4 { margin: 0 0 0.75rem; font-size: 0.9375rem; font-weight: 800; color: #0f172a; }
.hub-confirm-note { margin: 0; font-size: 0.875rem; color: #475569; line-height: 1.5; }
.hub-confirm-pilgrim-grid { display: grid; gap: 0.65rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .hub-confirm-pilgrim-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hub-confirm-pilgrim-card { border: 1px solid #e5e7eb; border-radius: 0.65rem; padding: 0.75rem; background: #fafafa; }
.hub-confirm-pilgrim-card.is-lead { border-color: #bbf7d0; background: #f0fdf4; }
.hub-confirm-pilgrim-top { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.5rem; }
.hub-confirm-pilgrim-avatar {
    width: 2.25rem; height: 2.25rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
    background: #059669; color: #fff; font-size: 0.75rem; font-weight: 800; flex-shrink: 0;
}
.hub-confirm-pilgrim-name { font-weight: 800; font-size: 0.875rem; color: #0f172a; }
.hub-confirm-pilgrim-tag { font-size: 0.68rem; font-weight: 800; color: #047857; text-transform: uppercase; }
.hub-confirm-pilgrim-kv { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.75rem; padding: 0.2rem 0; color: #64748b; }
.hub-confirm-pilgrim-kv span:last-child { font-weight: 700; color: #334155; text-align: right; }
.hub-confirm-aside { display: flex; flex-direction: column; gap: 0.75rem; }
.hub-confirm-ref-card {
    border: 1px solid #bbf7d0; border-radius: 0.85rem; padding: 1rem; background: linear-gradient(145deg, #ecfdf5, #fff);
}
.hub-confirm-ref-label { margin: 0; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #64748b; }
.hub-confirm-ref-id { margin: 0.25rem 0 0.65rem; font-family: ui-monospace, monospace; font-size: 1.05rem; font-weight: 800; color: #047857; word-break: break-all; }
.hub-confirm-copy { margin-bottom: 0.65rem; }
.hub-confirm-badges { margin-top: 0.25rem; }
.hub-confirm-email-note { margin: 0.65rem 0 0; font-size: 0.75rem; color: #64748b; }
.hub-confirm-cost-card, .hub-confirm-contact-card {
    border: 1px solid #e5e7eb; border-radius: 0.85rem; padding: 1rem; background: #fff;
}
.hub-confirm-cost-card h4, .hub-confirm-contact-card h4 { margin: 0 0 0.65rem; font-size: 0.875rem; font-weight: 800; color: #0f172a; }
.hub-confirm-cost-line { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.8125rem; padding: 0.35rem 0; border-bottom: 1px dashed #f1f5f9; color: #64748b; }
.hub-confirm-cost-line strong, .hub-confirm-cost-line span:last-child { font-weight: 700; color: #334155; text-align: right; }
.hub-confirm-cost-line:first-of-type strong { font-size: 1.1rem; color: #047857; }
.hub-confirm-cost-line--muted { font-size: 0.75rem; }
.hub-confirm-cost-line--method span:last-child { color: #047857; }
.hub-confirm-contact-card p { margin: 0.3rem 0; font-size: 0.8125rem; color: #475569; }
.hub-confirm-contact-card p i { color: #059669; width: 1rem; margin-right: 0.35rem; }
.hub-confirm-whats-next {
    border: 1px solid #dbeafe; border-radius: 0.85rem; padding: 0.85rem 1rem; background: #eff6ff;
}
.hub-confirm-whats-next h4 { margin: 0 0 0.5rem; font-size: 0.875rem; font-weight: 800; color: #1e3a8a; }
.hub-confirm-whats-next ul { margin: 0; padding: 0; list-style: none; }
.hub-confirm-whats-next li { font-size: 0.78rem; color: #1e40af; padding: 0.25rem 0; line-height: 1.45; }
.hub-confirm-whats-next li i { color: #059669; margin-right: 0.35rem; }
.hub-confirm-trust { margin: 0; font-size: 0.72rem; color: #64748b; display: flex; align-items: center; gap: 0.35rem; }
.hub-confirm-foot-banner {
    margin: 0; padding: 0.65rem 0.85rem; border-radius: 0.65rem; text-align: center; font-size: 0.78rem; font-weight: 800;
    color: #047857; background: #ecfdf5; border: 1px solid #bbf7d0;
}
.hub-confirm-actions { padding: 0 1.25rem 1.25rem; }
@media (min-width: 768px) { .hub-confirm-actions { padding: 0 1.5rem 1.5rem; } }
.hub-confirm-paid { margin-bottom: 0.85rem; }