/* ─────────────────────────────────────────────────────────
   Space Rental Booking Pro – Frontend Styles  v1.7.0
   Brand: #637654 (green) | #3D3D3D (dark)
   ───────────────────────────────────────────────────────── */

:root {
    --srbp-green:  #637654;
    --srbp-dark:   #3D3D3D;
    --srbp-light:  #f5f7f4;
    --srbp-border: #d8e2d4;
    --srbp-radius: 10px;
}

/* ── Wrapper ──────────────────────────────────────────────────────────────── */
.srbp-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--srbp-dark);
    max-width: 780px;
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
}

.srbp-section { margin-bottom: 28px; }

.srbp-heading {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--srbp-dark);
    border-left: 4px solid var(--srbp-green);
    padding-left: 12px;
    margin-bottom: 16px;
}

/* ── Calendar ─────────────────────────────────────────────────────────────── */
#srbp-calendar {
    background: #fff;
    border-radius: var(--srbp-radius);
    padding: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
}

/* Force equal 7-column layout, no overflow */
#srbp-calendar .fc { width: 100% !important; }
#srbp-calendar .fc table { width: 100% !important; table-layout: fixed !important; }

/* Let height grow naturally — height:'auto' is set in JS */
#srbp-calendar .fc-scroller         { overflow: hidden !important; height: auto !important; }
#srbp-calendar .fc-scroller-liquid-absolute { position: relative !important; top: auto !important; }

/* Compact cells */
#srbp-calendar .fc-daygrid-day-frame   { min-height: 58px; }
#srbp-calendar .fc-daygrid-day-number  { font-size: .76rem; padding: 3px 5px; }
#srbp-calendar .fc-col-header-cell-cushion { font-size: .75rem; font-weight: 700; padding: 4px 2px; }
#srbp-calendar .fc-toolbar-title       { font-size: 1.05rem !important; font-style: italic; }
#srbp-calendar .fc-toolbar.fc-header-toolbar { margin-bottom: 10px !important; }

.fc .fc-button-primary {
    background-color: var(--srbp-green) !important;
    border-color:     var(--srbp-green) !important;
    transition: opacity .2s;
    font-size: .82rem !important;
    padding: 5px 10px !important;
}
.fc .fc-button-primary:hover { opacity: .85; }
.fc .fc-button-primary:focus { box-shadow: 0 0 0 .2rem rgba(99,118,84,.35) !important; }

.fc .fc-daygrid-day:hover { background: var(--srbp-light); cursor: pointer; }
.fc .fc-day-today         { background: rgba(99,118,84,.08) !important; }

.srbp-event {
    border-radius: 4px !important;
    font-size: .72rem !important;
    padding: 1px 4px !important;
    white-space: normal !important;
    overflow: visible !important;
    word-break: break-word !important;
    line-height: 1.3 !important;
}

/* Hide FullCalendar's built-in time label — we already show time in title */
#srbp-calendar .fc-event-time { display: none !important; }

/* FullCalendar inner event wrappers — allow natural height */
#srbp-calendar .fc-daygrid-event-harness,
#srbp-calendar .fc-daygrid-event {
    overflow: visible !important;
    white-space: normal !important;
}
#srbp-calendar .fc-event-title,
#srbp-calendar .fc-event-main {
    white-space: normal !important;
    overflow: visible !important;
    word-break: break-word !important;
}

/* ── Form ─────────────────────────────────────────────────────────────────── */
#srbp-form-section {
    background: #fff;
    border-radius: var(--srbp-radius);
    padding: 28px;
    box-shadow: 0 2px 16px rgba(0,0,0,.08);
}

.srbp-label {
    font-size: .875rem;
    font-weight: 600;
    color: var(--srbp-dark);
    margin-bottom: 5px;
    display: block;
}

.srbp-input {
    border: 1.5px solid var(--srbp-border);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: .9rem;
    transition: border-color .2s, box-shadow .2s;
}
.srbp-input:focus {
    border-color: var(--srbp-green);
    box-shadow: 0 0 0 3px rgba(99,118,84,.15);
    outline: none;
}

/* ── ID Preview ───────────────────────────────────────────────────────────── */
.srbp-id-preview-img {
    max-width: 180px;
    max-height: 110px;
    border-radius: 6px;
    border: 2px solid var(--srbp-border);
    object-fit: cover;
}

/* ── Price Box ────────────────────────────────────────────────────────────── */
.srbp-price-card {
    background: var(--srbp-light);
    border: 2px solid var(--srbp-green);
    border-radius: var(--srbp-radius);
    padding: 18px 24px;
}
.srbp-price-label {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #888;
    margin-bottom: 4px;
}
.srbp-price-value {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--srbp-dark);
}
.srbp-total-price { color: var(--srbp-green) !important; font-size: 1.5rem !important; }

/* ── Payment Options ──────────────────────────────────────────────────────── */
.srbp-payment-options { display: flex; gap: 12px; flex-wrap: wrap; }
.srbp-payment-option {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 2px solid var(--srbp-border);
    border-radius: 8px;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: 600;
    font-size: .9rem;
    transition: border-color .2s, background .2s;
    user-select: none;
}
.srbp-payment-option:has(input:checked) {
    border-color: var(--srbp-green);
    background: rgba(99,118,84,.07);
}
.srbp-payment-option input { display: none; }

/* ── Stripe Element ───────────────────────────────────────────────────────── */
.srbp-stripe-element {
    padding: 12px;
    height: 48px;
    border: 1.5px solid var(--srbp-border);
    border-radius: 8px;
}

/* ── Submit Button ────────────────────────────────────────────────────────── */
.srbp-btn-submit {
    background: var(--srbp-green);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 13px 40px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .2s, transform .15s, box-shadow .2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.srbp-btn-submit:hover   { background: #536644; box-shadow: 0 4px 14px rgba(99,118,84,.35); }
.srbp-btn-submit:active  { transform: scale(.98); }
.srbp-btn-submit:disabled { opacity: .65; cursor: not-allowed; }

/* ── Success Box ──────────────────────────────────────────────────────────── */
.srbp-success-box {
    background: #fff;
    border-radius: var(--srbp-radius);
    padding: 40px;
    box-shadow: 0 2px 16px rgba(0,0,0,.08);
    border-top: 4px solid var(--srbp-green);
}
.srbp-success-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--srbp-green);
    color: #fff;
    font-size: 2rem;
    font-weight: 900;
    line-height: 72px;
    margin: 0 auto;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
    .srbp-wrapper   { padding: 8px; }
    #srbp-form-section { padding: 16px; }
    .srbp-price-value  { font-size: 1rem; }
    .srbp-btn-submit   { width: 100%; justify-content: center; }

    #srbp-calendar { padding: 5px; }
    #srbp-calendar .fc-daygrid-day-frame      { min-height: 44px !important; }
    #srbp-calendar .fc-daygrid-day-number     { font-size: .60rem; padding: 2px 3px; }
    #srbp-calendar .fc-col-header-cell-cushion { font-size: .58rem; padding: 2px 1px; }
    #srbp-calendar .fc-toolbar-title          { font-size: .78rem !important; }
    #srbp-calendar .fc .fc-button-primary     { font-size: .68rem !important; padding: 4px 6px !important; }

    /* Events on mobile — readable time range, no clipping */
    #srbp-calendar .srbp-event                { font-size: .58rem !important; padding: 1px 3px !important; line-height: 1.3 !important; }
    #srbp-calendar .fc-event-title            { font-size: .58rem !important; white-space: normal !important; word-break: break-all !important; }
    #srbp-calendar .fc-daygrid-event          { margin-bottom: 1px !important; }
}

/* ── Material Clock Picker ────────────────────────────────────────────────── */
#srbp-clock-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}
#srbp-clock-modal {
    background: #fff;
    border-radius: 28px;
    width: 320px;
    box-shadow: 0 8px 40px rgba(0,0,0,.25);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
#srbp-clock-header { background: #637654; padding: 20px 24px 16px; color: #fff; }
#srbp-clock-label  { display: block; font-size: 11px; font-weight: 600; letter-spacing: .1em; opacity: .8; margin-bottom: 8px; }
#srbp-clock-display { display: flex; align-items: center; gap: 2px; }
#srbp-clock-hr, #srbp-clock-min {
    font-size: 52px; font-weight: 300; line-height: 1;
    cursor: pointer; padding: 4px 10px; border-radius: 10px;
    transition: background .15s; opacity: .6;
}
#srbp-clock-hr.srbp-clock-active,
#srbp-clock-min.srbp-clock-active { background: rgba(255,255,255,.2); opacity: 1; }
.srbp-clock-colon { font-size: 52px; font-weight: 300; line-height: 1; opacity: .7; }
#srbp-clock-ampm  { display: flex; flex-direction: column; margin-left: 10px; gap: 4px; }
.srbp-ampm-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,.5);
    color: rgba(255,255,255,.7);
    font-size: 13px; font-weight: 600;
    padding: 4px 10px; border-radius: 6px;
    cursor: pointer; transition: all .15s; letter-spacing: .05em;
}
.srbp-ampm-btn.srbp-ampm-active { background: rgba(255,255,255,.25); border-color: #fff; color: #fff; }
#srbp-clock-face-wrap {
    background: #f0f4ee;
    display: flex; justify-content: center; align-items: center;
    padding: 20px 0 12px;
}
#srbp-clock-canvas { cursor: pointer; border-radius: 50%; }
#srbp-clock-actions {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 12px 20px 16px; background: #fff;
}
#srbp-clock-cancel, #srbp-clock-ok {
    background: transparent; border: none;
    font-size: 13px; font-weight: 700; letter-spacing: .05em;
    padding: 8px 16px; border-radius: 20px;
    cursor: pointer; transition: background .15s;
}
#srbp-clock-cancel { color: #637654; }
#srbp-clock-cancel:hover { background: #eef2eb; }
#srbp-clock-ok     { color: #637654; }
#srbp-clock-ok:hover     { background: #eef2eb; }
.srbp-time-trigger { cursor: pointer; }

/* ── Terms & Conditions ──────────────────────────────────────────────────── */
.srbp-terms-content {
    background: var(--srbp-light, #f5f7f4);
    border: 1px solid var(--srbp-border, #d8e2d4);
    border-radius: 8px;
    padding: 16px 20px;
    max-height: 200px;
    overflow-y: auto;
    font-size: 13px;
    color: #555;
    line-height: 1.6;
}
.srbp-terms-check {
    padding: 10px 0 0 2px;
}
.srbp-terms-label {
    font-size: 14px;
    font-weight: 500;
    color: #3D3D3D;
    cursor: pointer;
}
.srbp-terms-label::before {
    content: '';
}
.srbp-submit-note {
    font-size: 12px;
}

/* ── Cancel / Danger button ─────────────────────────────────────────────── */
.srbp-btn-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #e53e3e;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, transform .1s;
}
.srbp-btn-cancel:hover { background: #c53030; }
.srbp-btn-cancel:active { transform: scale(.97); }

/* ── Manage Booking page ─────────────────────────────────────────────────── */
.srbp-manage-summary-card {
    border: 1px solid var(--srbp-border, #d8e2d4);
    border-radius: 12px;
    padding: 24px 28px;
    overflow: hidden;
}
.srbp-summary-table {
    margin-bottom: 0;
}
.srbp-summary-table th {
    color: #888;
    font-weight: 600;
    font-size: 13px;
    font-style: italic;
    width: 38%;
    padding: 10px 12px 10px 0;
    border-bottom: 1px solid var(--srbp-border, #e8ede6);
    vertical-align: middle;
}
.srbp-summary-table td {
    font-size: 14px;
    color: #3D3D3D;
    padding: 10px 0;
    border-bottom: 1px solid var(--srbp-border, #e8ede6);
    vertical-align: middle;
}
.srbp-summary-table tr:last-child th,
.srbp-summary-table tr:last-child td {
    border-bottom: none;
    padding-bottom: 0;
}
.srbp-summary-table tr:first-child th,
.srbp-summary-table tr:first-child td {
    padding-top: 4px;
}
.srbp-status-badge {
    font-size: 13px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 20px;
    letter-spacing: .02em;
}

/* ── FullCalendar: force day numbers always visible ─────────────────────── */
#srbp-calendar .fc-daygrid-day-number {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #3D3D3D;
    font-size: 13px;
    padding: 4px 8px;
    text-decoration: none;
}
#srbp-calendar .fc-day-disabled .fc-daygrid-day-number {
    opacity: 0.35 !important;
}
#srbp-calendar .fc-daygrid-day {
    min-height: 80px;
}

/* ── Manage Booking: wider wrapper override ──────────────────────────────── */
#srbp-manage-wrapper.srbp-wrapper {
    max-width: 860px;
}

/* ── Status badge variants ───────────────────────────────────────────────── */
.srbp-badge-confirmed {
    background: var(--srbp-green, #637654);
    color: #fff;
}
.srbp-badge-pending {
    background: #f59e0b;
    color: #fff;
}
.srbp-badge-modified {
    background: #6b7280;
    color: #fff;
}
.srbp-badge-cancelled {
    background: #e53e3e;
    color: #fff;
}