/*
    تخطيط صفحة الحجز. الرموز تأتي من signup.css عبر الصنف jedg-signup-page
    على نفس العنصر — لا تُعاد تعريفها هنا.

    وكلّ المقاسات بـpx: جذر الخطّ في الموقع العام 22px لا 16px، فأي rem تخرج
    أكبر ممّا تتوقّع بمقدار 1.375×. الخصائص منطقية لا left/right.
*/

.jedg-booking { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, .95fr);
                gap: 20px; align-items: start; padding-block: 8px 40px; }

.jedg-panel[hidden] { display: none; }
.jedg-panel__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.jedg-panel__nav .jedg-submit { margin: 0; width: auto; padding-inline: 28px; }
.jedg-panel__nav .jedg-submit-note { flex: 1 0 100%; margin: 0; }

.jedg-ghost { background: transparent; border: 1px solid var(--jedg-line); color: var(--jedg-muted);
              border-radius: 8px; padding: 10px 18px; font: inherit; font-size: 14px; cursor: pointer; }
.jedg-ghost:hover { border-color: var(--jedg-bronze); color: var(--jedg-bronze); }

/* التقويم */
.jedg-cal { margin-top: 16px; }
.jedg-cal__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.jedg-cal__month { margin: 0; font-size: 15px; font-weight: 700; color: var(--jedg-ink); }
.jedg-cal__nav { width: 32px; height: 32px; border: 1px solid var(--jedg-line); background: #fff;
                 border-radius: 8px; font-size: 18px; line-height: 1; cursor: pointer; color: var(--jedg-navy); }
.jedg-cal__grid { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.jedg-cal__grid th { font-size: 11px; font-weight: 600; color: var(--jedg-muted); padding-block: 4px; }
.jedg-cal__grid td { height: 34px; text-align: center; font-size: 13px; border-radius: 6px;
                     background: #f1f3f5; color: #adb2b8; }
.jedg-cal__grid td:empty { background: transparent; }
.jedg-cal__grid td.is-available { background: #e9f4ee; color: #2e7d52; font-weight: 700; cursor: pointer; }
.jedg-cal__grid td.is-available:hover { background: #d8ecdf; }
.jedg-cal__grid td.is-selected { background: var(--jedg-bronze); color: #fff; }

/* شرائح الأوقات */
.jedg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.jedg-chips button { border: 1px solid var(--jedg-line); background: #fff; border-radius: 20px;
                     padding: 8px 18px; font: inherit; font-size: 13px; cursor: pointer; color: var(--jedg-ink); }
.jedg-chips button.is-selected { background: var(--jedg-bronze); border-color: var(--jedg-bronze); color: #fff; }

/* بطاقات المرافقين والمراجعة */
.jedg-booking__h { font-size: 15px; font-weight: 700; margin: 20px 0 8px; color: var(--jedg-ink); }
.jedg-participant { border: 1px solid var(--jedg-line); border-radius: 10px; padding: 14px; margin-bottom: 12px; }
.jedg-participant > h5 { font-size: 13px; font-weight: 700; margin: 0 0 10px; color: var(--jedg-navy); }
.jedg-review { border-top: 1px solid var(--jedg-line); margin-top: 20px; padding-top: 14px; }
.jedg-review dl, .jedg-summary__list { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.jedg-review dt { font-size: 12px; color: var(--jedg-muted); }
.jedg-review dd { margin: 0; font-size: 13px; font-weight: 600; }

/* بطاقة الملخّص */
.jedg-summary { position: sticky; top: 16px; background: var(--jedg-ink); color: #e8eaed;
                border-radius: 12px; padding: 16px; }
.jedg-summary__toggle { display: none; }
.jedg-summary__img { height: 110px; border-radius: 8px; margin-bottom: 12px; background: #2b3038;
                     background-size: cover; background-position: center; }
.jedg-summary__title { margin: 0 0 10px; font-size: 13px; color: var(--jedg-bronze); font-weight: 700; }
.jedg-summary__list dt { font-size: 12px; color: #8b9199; }
.jedg-summary__list dd { margin: 0; font-size: 13px; font-weight: 600; }

/* ــــ الاستجابة ــــ */
@media (max-width: 900px) {
    .jedg-booking { grid-template-columns: 1fr; }

    /*
        الملخّص لا يُخفى على الجوّال — هو الذي يحمل ما يطمئنّ إليه الزائر قبل
        التأكيد. ينكمش إلى سطرٍ يُفتح بالنقر، ويصعد فوق النموذج.
    */
    .jedg-summary { position: static; order: -1; padding: 12px; }
    .jedg-summary__toggle { display: block; width: 100%; background: transparent; border: 0;
                            color: var(--jedg-bronze); font: inherit; font-size: 13px;
                            font-weight: 700; text-align: start; cursor: pointer; padding: 4px 0; }
    .jedg-summary__body { display: none; padding-top: 10px; }
    .jedg-summary.is-open .jedg-summary__body { display: block; }
    .jedg-summary__img { height: 84px; }
}

@media (max-width: 575px) {
    .jedg-cal__grid td { height: 30px; font-size: 12px; }
    .jedg-panel__nav .jedg-submit { width: 100%; }
}