/* ============================================================
   DanceYourLife — Public Calendar Styles
   Self-contained. No dependency on admin.css.
   Uses CSS custom properties for studio theming.
   ============================================================ */

/* --- Custom Properties --- */
:root {
    --pcal-primary: #6f2a81;
    --pcal-primary-hover: #5a2269;
    --pcal-primary-light: #f3e8f9;
    --pcal-success: #059669;
    --pcal-success-light: #ecfdf5;
    --pcal-warning: #d97706;
    --pcal-warning-light: #fffbeb;
    --pcal-danger: #dc2626;
    --pcal-danger-light: #fef2f2;
    --pcal-info: #0284c7;
    --pcal-text: #1e293b;
    --pcal-text-muted: #64748b;
    --pcal-border: #e2e8f0;
    --pcal-bg: #f8fafc;
    --pcal-surface: #ffffff;
    --pcal-radius: 8px;
    --pcal-radius-lg: 12px;
    --pcal-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --pcal-shadow-lg: 0 10px 25px rgba(0,0,0,.12);
    --pcal-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --pcal-transition: 150ms ease;
}

/* --- Page Wrappers --- */
.pcal-page-wrapper {
    font-family: var(--pcal-font);
    color: var(--pcal-text);
    background: var(--pcal-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* --- Admin-configured page header --- */
.pcal-page-header {
    text-align: center;
    margin: 0 auto 20px;
    max-width: 720px;
    padding: 0 16px;
}
.pcal-page-title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    margin: 0 0 6px;
    color: var(--pcal-text);
}
.pcal-page-subtitle {
    font-size: .95rem;
    color: var(--pcal-text-muted);
    margin: 0;
}

/* --- Day view --- */
.pcal-day-single {
    background: var(--pcal-surface);
    border: 1px solid var(--pcal-border);
    border-radius: var(--pcal-radius-lg);
    padding: 16px;
}
.pcal-day-stack { display: flex; flex-direction: column; gap: 10px; }
.pcal-no-slots-day { padding: 32px 16px; }

/* --- List view (horizontal rows) --- */
.pcal-list-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 20px 24px 24px;
}
@media (max-width: 640px) {
    .pcal-list-body { padding: 16px; }
}

.pcal-list-section { display: flex; flex-direction: column; gap: 10px; }
.pcal-list-section-title {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--pcal-text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}
.pcal-list-section.pcal-today .pcal-list-section-title { color: var(--pcal-primary); }
.pcal-list-today-tag { color: var(--pcal-primary); }
.pcal-list-section-sep { opacity: .6; }

.pcal-list-rows { display: flex; flex-direction: column; gap: 10px; }

.pcal-list-row {
    display: grid;
    grid-template-columns: 88px 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: var(--pcal-surface);
    border: 1px solid var(--pcal-border);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color var(--pcal-transition), box-shadow var(--pcal-transition), transform var(--pcal-transition);
}
.pcal-list-row:hover {
    border-color: var(--pcal-primary);
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.pcal-list-row-full { opacity: .65; cursor: default; }
.pcal-list-row-full:hover { border-color: var(--pcal-border); box-shadow: none; }
.pcal-list-row-booked { border-color: var(--pcal-success); }

.pcal-list-row-time {
    font-size: 15px;
    font-weight: 700;
    color: var(--pcal-text);
    letter-spacing: .01em;
}
.pcal-list-row-main { min-width: 0; }
/* List view rows can grow vertically — wrap long titles / meta instead of truncating
   with ellipsis. overflow-wrap:anywhere is the safety belt: a single very long word
   (URL pasted in a class name, long no-space string) still gets broken so the row
   never blows out the card width. Studios with long class names like "Pole Dance –
   All Levels (Bring a Friend Night)" now get 2 lines instead of an unreadable
   "Pole Dance – All Le…". */
.pcal-list-row-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--pcal-text);
    margin-bottom: 2px;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.pcal-list-row-meta {
    font-size: 13px;
    color: var(--pcal-text-muted);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.pcal-list-row-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.pcal-list-status {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: var(--pcal-primary-light);
    color: var(--pcal-primary);
}
.pcal-list-status-full { background: var(--pcal-danger-light); color: var(--pcal-danger); }
/* Last seat — urgent, but still bookable (solid danger to read as scarcity, not sold-out). */
.pcal-list-status-last { background: var(--pcal-danger); color: #fff; font-weight: 700; }

.pcal-list-book {
    appearance: none;
    border: 0;
    background: var(--pcal-primary);
    color: #fff;
    padding: 9px 22px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--pcal-transition), transform var(--pcal-transition);
}
.pcal-list-book:hover:not(:disabled) { background: var(--pcal-primary-hover); }
.pcal-list-book:disabled { background: var(--pcal-border); color: var(--pcal-text-muted); cursor: default; }

.pcal-list-book-checked,
.pcal-list-book-checked:disabled {
    background: var(--pcal-success, #059669);
    color: #fff;
    cursor: default;
}
.pcal-list-book-checked:hover:not(:disabled) { background: var(--pcal-success, #059669); }

@media (max-width: 640px) {
    .pcal-list-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .pcal-list-row-actions { justify-content: flex-end; }
}

/* --- Category badge on slot card --- */
.pcal-slot-category {
    display: inline-block;
    align-self: flex-start;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 8px;
    margin-bottom: 6px;
    border-radius: 999px;
    color: var(--cat-accent, var(--pcal-primary));
    background: color-mix(in srgb, var(--cat-accent, var(--pcal-primary)) 12%, transparent);
}

.pcal-content {
    flex: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px;
    width: 100%;
    box-sizing: border-box;
}

.pcal-embed-wrapper {
    font-family: var(--pcal-font);
    color: var(--pcal-text);
    background: var(--pcal-surface);
    padding: 12px;
}

.pcal-footer {
    text-align: center;
    padding: 16px;
    color: var(--pcal-text-muted);
    font-size: 13px;
    border-top: 1px solid var(--pcal-border);
}

/* --- Calendar Container --- */
.pcal-container {
    background: var(--pcal-surface);
    border-radius: var(--pcal-radius-lg);
    box-shadow: var(--pcal-shadow);
    overflow-x: auto;
    overflow-y: visible;
    /* Keep the calendar tall enough for embedded iframes to host a full modal without
       needing inner scroll just to show the login / booking dialog. */
    min-height: 720px;
}

.pcal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--pcal-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.pcal-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--pcal-text);
}

/* --- Navigation --- */
.pcal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    border-bottom: 1px solid var(--pcal-border);
    gap: 8px;
    flex-wrap: wrap;
}

.pcal-nav-center {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pcal-nav-dates {
    font-size: 14px;
    color: var(--pcal-text-muted);
    font-weight: 500;
}

/* --- Buttons --- */
.pcal-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--pcal-radius);
    font-size: 14px;
    font-weight: 500;
    font-family: var(--pcal-font);
    cursor: pointer;
    border: none;
    transition: all var(--pcal-transition);
    text-decoration: none;
    line-height: 1.4;
}

.pcal-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.pcal-btn-primary {
    background: var(--pcal-primary);
    color: #fff;
}
.pcal-btn-primary:hover:not(:disabled) {
    background: var(--pcal-primary-hover);
}

.pcal-btn-outline {
    background: transparent;
    color: var(--pcal-text);
    border: 1.5px solid var(--pcal-border);
}
.pcal-btn-outline:hover:not(:disabled) {
    background: var(--pcal-bg);
    border-color: #cbd5e1;
}

.pcal-btn-ghost {
    background: transparent;
    color: var(--pcal-primary);
    padding: 8px 12px;
}
.pcal-btn-ghost:hover:not(:disabled) {
    background: var(--pcal-primary-light);
}

.pcal-btn-danger {
    background: var(--pcal-danger);
    color: #fff;
}
.pcal-btn-danger:hover:not(:disabled) {
    background: #b91c1c;
}

.pcal-btn-danger-ghost {
    background: transparent;
    color: var(--pcal-danger);
    padding: 4px;
    border: none;
}
.pcal-btn-danger-ghost:hover {
    background: var(--pcal-danger-light);
}

.pcal-btn-link {
    background: none;
    border: none;
    color: var(--pcal-primary);
    padding: 4px 0;
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
}
.pcal-btn-link:hover {
    color: var(--pcal-primary-hover);
}

.pcal-btn-full {
    width: 100%;
    justify-content: center;
}

.pcal-btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

.pcal-btn-icon {
    padding: 4px;
    border-radius: 6px;
}

.pcal-btn-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pcal-spin .6s linear infinite;
}

@keyframes pcal-spin {
    to { transform: rotate(360deg); }
}

/* --- Weekly Grid --- */
.pcal-weekly {
    padding: 0;
}

.pcal-grid {
    display: grid;
    /* Each day column gets a comfortable minimum so class cards stay readable
       (titles/times don't wrap to 3-4 lines). Columns still stretch to fill a
       wide embed via the 1fr max; on a narrow embed the grid exceeds the
       container and .pcal-container's overflow-x:auto scrolls horizontally —
       same week-view behaviour as Google Calendar. */
    grid-template-columns: repeat(7, minmax(160px, 1fr));
    gap: 0;
    border-top: 1px solid var(--pcal-border);
    min-width: 1120px;
}

.pcal-day-col {
    border-right: 1px solid var(--pcal-border);
    min-height: 180px;
}

.pcal-day-col:last-child {
    border-right: none;
}

.pcal-day-header {
    padding: 12px 10px;
    text-align: center;
    border-bottom: 1px solid var(--pcal-border);
    background: var(--pcal-bg);
}

.pcal-day-name {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--pcal-text-muted);
}

.pcal-day-date {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--pcal-text);
    margin-top: 2px;
}

.pcal-today .pcal-day-header {
    background: var(--pcal-primary);
    border-bottom-color: var(--pcal-primary);
    box-shadow: inset 0 -3px 0 rgba(0,0,0,.12);
}
.pcal-today .pcal-day-name {
    color: #fff;
    opacity: .85;
}
.pcal-today .pcal-day-date {
    color: #fff;
    font-weight: 800;
}

.pcal-day-slots {
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pcal-no-slots {
    text-align: center;
    color: var(--pcal-text-muted);
    font-size: 13px;
    padding: 24px 8px;
}

/* --- Slot Card --- */
.pcal-slot {
    border-radius: var(--pcal-radius);
    background: var(--pcal-surface);
    border: 1px solid var(--pcal-border);
    cursor: pointer;
    transition: all var(--pcal-transition);
    overflow: hidden;
    display: flex;
}

.pcal-slot:hover {
    box-shadow: var(--pcal-shadow);
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

.pcal-slot-accent {
    width: 4px;
    flex-shrink: 0;
    background: var(--slot-accent, var(--pcal-primary));
}

.pcal-slot-body {
    padding: 8px 10px;
    flex: 1;
    min-width: 0;
}

/* Grid view card title — wraps to a max of 2 lines so cards stay roughly the same
   height (a 6-line card next to a 1-line card breaks the grid rhythm). Single
   very long un-breakable words still get broken via overflow-wrap. -webkit-line-clamp
   is widely supported in evergreen browsers; the fallback (no clamp) just shows the
   full wrapped title, which is still better than the previous ellipsis truncation. */
.pcal-slot-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--pcal-text);
    overflow-wrap: anywhere;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pcal-slot-time {
    font-size: 12px;
    color: var(--pcal-text-muted);
    margin-top: 2px;
}

.pcal-slot-instructor {
    font-size: 12px;
    color: var(--pcal-text-muted);
    margin-top: 2px;
}

.pcal-slot-location {
    font-size: 11px;
    color: var(--pcal-text-muted);
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pcal-slot-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}

/* ──────────────────────────────────────────────────────────────────────────────
   Density variants — applied to the .pcal-container wrapper via the
   ?card-size= URL param from embed.js (sourced from the Integration page's
   "Card density" dropdown). "comfortable" is the default and uses the base
   styles above; this section provides "compact" and "spacious" overrides
   that proportionally adjust padding + font sizes on the slot card.
   Selectors are scoped to .pcal-density-* so the studio's own /pages/calendar
   render (which never gets the density class) stays untouched.
   ────────────────────────────────────────────────────────────────────────────── */

/* COMPACT — tighter rows, smaller text. Good for sidebar / narrow-iframe embeds. */
.pcal-density-compact .pcal-slot-body       { padding: 5px 7px; }
.pcal-density-compact .pcal-slot-name       { font-size: 11px; }
.pcal-density-compact .pcal-slot-time       { font-size: 10px; margin-top: 1px; }
.pcal-density-compact .pcal-slot-instructor { font-size: 10px; margin-top: 1px; }
.pcal-density-compact .pcal-slot-location   { font-size: 9px;  margin-top: 2px; }
.pcal-density-compact .pcal-slot-category   { font-size: 8.5px; padding: 1px 4px; }
.pcal-density-compact .pcal-slot-footer     { gap: 4px; margin-top: 4px; }

/* SPACIOUS — roomier cards with larger text. Good for prominent main-content embeds. */
.pcal-density-spacious .pcal-slot-body       { padding: 12px 14px; }
.pcal-density-spacious .pcal-slot-name       { font-size: 15px; }
.pcal-density-spacious .pcal-slot-time       { font-size: 13px; margin-top: 4px; }
.pcal-density-spacious .pcal-slot-instructor { font-size: 13px; margin-top: 4px; }
.pcal-density-spacious .pcal-slot-location   { font-size: 12px; margin-top: 5px; }
.pcal-density-spacious .pcal-slot-category   { font-size: 11px; padding: 3px 8px; }
.pcal-density-spacious .pcal-slot-footer     { gap: 8px; margin-top: 9px; }

/* --- Capacity Badges --- */
.pcal-capacity-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    line-height: 1.4;
}

.pcal-status-available .pcal-capacity-badge,
.pcal-capacity-badge.pcal-status-available {
    background: var(--pcal-success-light);
    color: var(--pcal-success);
}

.pcal-status-warning .pcal-capacity-badge,
.pcal-capacity-badge.pcal-status-warning {
    background: var(--pcal-warning-light);
    color: var(--pcal-warning);
}

.pcal-status-full .pcal-capacity-badge,
.pcal-capacity-badge.pcal-status-full {
    background: var(--pcal-danger-light);
    color: var(--pcal-danger);
}

/* Last seat — stronger than the amber "Few spots left" warning to signal real
   scarcity, but solid danger (not danger-light) so it's distinct from "Full". */
.pcal-status-last .pcal-capacity-badge,
.pcal-capacity-badge.pcal-status-last {
    background: var(--pcal-danger);
    color: #fff;
    font-weight: 700;
}

.pcal-booked-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--pcal-primary-light);
    color: var(--pcal-primary);
}
.pcal-checked-in-badge {
    background: #d1fae5;
    color: #059669;
}

.pcal-slot-booked {
    border-color: var(--pcal-primary);
    background: #faf5ff;
}

/* --- Filters --- */
.pcal-toolbar {
    padding: 12px 24px;
    border-bottom: 1px solid var(--pcal-border);
}

.pcal-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.pcal-select {
    padding: 6px 28px 6px 10px;
    border: 1.5px solid var(--pcal-border);
    border-radius: var(--pcal-radius);
    font-size: 13px;
    font-family: var(--pcal-font);
    color: var(--pcal-text);
    background: var(--pcal-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
    appearance: none;
    cursor: pointer;
    min-width: 160px;
}

.pcal-select:focus {
    outline: none;
    border-color: var(--pcal-primary);
    box-shadow: 0 0 0 3px rgba(111,42,129,.12);
}

/* --- Popup / Modal Overlay --- */
.pcal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.55);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 16px;
}

.pcal-popup {
    background: var(--pcal-surface);
    border-radius: 16px;
    box-shadow: 0 24px 48px -12px rgba(15,23,42,.22), 0 0 0 1px rgba(15,23,42,.06);
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: pcal-popup-in 200ms cubic-bezier(0.34,1.56,0.64,1);
}

@keyframes pcal-popup-in {
    from {
        opacity: 0;
        transform: scale(.95) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.pcal-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--pcal-border);
    flex-shrink: 0;
}

.pcal-popup-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--pcal-text);
}

.pcal-popup-close {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: var(--pcal-radius);
    color: var(--pcal-text-muted);
    transition: all var(--pcal-transition);
}
.pcal-popup-close:hover {
    background: var(--pcal-bg);
    color: var(--pcal-text);
}

.pcal-popup-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.pcal-popup-footer {
    padding: 16px 24px 20px;
    border-top: 1px solid var(--pcal-border);
    background: var(--pcal-surface);
    flex-shrink: 0;
    max-height: 55vh;
    overflow-y: auto;
}

.pcal-popup-divider {
    height: 1px;
    background: var(--pcal-border);
    margin: 20px 0;
}

/* --- Slot Details in Popup --- */
.pcal-slot-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pcal-detail-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--pcal-text);
}

.pcal-detail-row svg {
    flex-shrink: 0;
    color: var(--pcal-text-muted);
}

/* --- Login Form --- */
.pcal-login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pcal-login-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--pcal-text);
}

.pcal-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pcal-label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.pcal-input {
    padding: 10px 14px;
    border: 1.5px solid var(--pcal-border);
    border-radius: var(--pcal-radius);
    font-size: 14px;
    font-family: var(--pcal-font);
    color: #1e293b;
    background: #ffffff;
    transition: border-color var(--pcal-transition), box-shadow var(--pcal-transition);
    width: 100%;
    box-sizing: border-box;
}

.pcal-input::placeholder {
    color: #94a3b8;
    opacity: 1;
}

.pcal-input:focus {
    outline: none;
    border-color: var(--pcal-primary);
    box-shadow: 0 0 0 3px rgba(111,42,129,.12);
}

.pcal-input-sm {
    padding: 7px 10px;
    font-size: 13px;
}

.pcal-input-group {
    display: flex;
    position: relative;
}

.pcal-input-group .pcal-input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    flex: 1;
}

.pcal-input-addon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    background: var(--pcal-bg);
    border: 1.5px solid var(--pcal-border);
    border-left: none;
    border-radius: 0 var(--pcal-radius) var(--pcal-radius) 0;
    cursor: pointer;
    color: var(--pcal-text-muted);
    transition: color var(--pcal-transition);
}
.pcal-input-addon:hover {
    color: var(--pcal-text);
}

/* --- Booking Form --- */
.pcal-booking-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pcal-clickable {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}

.pcal-guest-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.pcal-guest-row .pcal-input {
    flex: 1;
}

.pcal-booked-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* --- Alerts --- */
.pcal-alert {
    padding: 12px 16px;
    border-radius: var(--pcal-radius);
    font-size: 14px;
    line-height: 1.5;
}

.pcal-alert-info {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.pcal-alert-success {
    background: var(--pcal-success-light);
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.pcal-alert-error {
    background: var(--pcal-danger-light);
    color: #991b1b;
    border: 1px solid #fecaca;
}

.pcal-alert-warning {
    background: var(--pcal-warning-light);
    color: #92400e;
    border: 1px solid #fde68a;
}

/* --- Misc --- */
.pcal-text-muted {
    color: var(--pcal-text-muted);
    font-style: italic;
}

.pcal-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    flex-direction: column;
    gap: 12px;
}

.pcal-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--pcal-border);
    border-top-color: var(--pcal-primary);
    border-radius: 50%;
    animation: pcal-spin .7s linear infinite;
}

.pcal-error {
    text-align: center;
    padding: 40px 20px;
    color: var(--pcal-danger);
}

.pcal-maintenance {
    text-align: center;
    padding: 60px 20px;
}

.pcal-maintenance h3 {
    margin: 0 0 8px;
    font-size: 18px;
    color: var(--pcal-text);
}

.pcal-maintenance p {
    margin: 0;
    color: var(--pcal-text-muted);
    font-size: 14px;
}

/* --- Toast Notifications --- */
.pcal-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99999;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 18px;
    border-radius: var(--pcal-radius);
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
    max-width: 380px;
    min-width: 220px;
    font-size: 14px;
    line-height: 1.4;
    font-family: var(--pcal-font);
    color: #fff;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease;
}

.pcal-toast.pcal-toast-visible {
    opacity: 1;
    transform: translateY(0);
}

.pcal-toast-success { background: #059669; }
.pcal-toast-error { background: #dc2626; }
.pcal-toast-info { background: #0284c7; }

.pcal-toast-close {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0 0 0 10px;
    opacity: .8;
}
.pcal-toast-close:hover { opacity: 1; }

/* --- Responsive: Mobile (< 768px) --- */
@media (max-width: 767px) {
    .pcal-grid {
        grid-template-columns: 1fr;
    }

    .pcal-day-col {
        border-right: none;
        border-bottom: 1px solid var(--pcal-border);
        min-height: auto;
    }

    .pcal-day-col:last-child {
        border-bottom: none;
    }

    .pcal-day-header {
        display: flex;
        align-items: center;
        gap: 8px;
        text-align: left;
        padding: 10px 12px;
    }

    .pcal-day-name {
        display: inline;
    }

    .pcal-day-date {
        display: inline;
        margin-top: 0;
    }

    .pcal-day-slots {
        padding: 8px 12px;
    }

    .pcal-slot {
        flex-direction: row;
    }

    .pcal-nav {
        padding: 12px 16px;
    }

    .pcal-header {
        padding: 16px;
    }

    .pcal-content {
        padding: 16px 8px;
    }

    .pcal-filters {
        flex-direction: column;
    }

    .pcal-select {
        min-width: auto;
        width: 100%;
    }

    .pcal-popup {
        max-width: 100%;
        border-radius: 12px;
        margin: 8px;
    }

    .pcal-popup-body {
        padding: 16px;
    }

    .pcal-guest-row {
        flex-wrap: wrap;
    }
}

/* --- Small phone overrides --- */
@media (max-width: 480px) {
    .pcal-page-wrapper { padding: 0; }
    .pcal-content { padding: 8px 4px; }

    /* Buttons */
    .pcal-btn { font-size: 0.82rem; padding: 8px 14px; }
    .pcal-btn-sm { font-size: 0.75rem; padding: 5px 10px; }

    /* Modals */
    .acct-modal { max-width: calc(100vw - 24px) !important; margin: 12px; }
    .acct-modal-body { padding: 16px; }
    .acct-modal-footer { padding: 12px 16px; flex-wrap: wrap; }

    /* Account page */
    .acct-wrap { padding: 16px 8px; }
    .acct-tabs { gap: 0; overflow-x: auto; }
    .acct-tab { padding: 8px 12px; font-size: 0.82rem; white-space: nowrap; }
    .acct-card { padding: 16px; }
    .acct-form-row { grid-template-columns: 1fr; }
    .acct-table th, .acct-table td { padding: 8px 6px; font-size: 0.78rem; }

    /* Billing cards */
    .billing-card-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .billing-card-actions { width: 100%; justify-content: flex-end; }

    /* Upgrade modal options */
    .upgrade-option { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* --- Embed Mode Overrides --- */
/* The ?only=<block> embed renders a StudioHome section (.ds-sec) inside the iframe. That
   layout's generous 80px/120px page-section padding (and the 32px top on the first section)
   wastes space in an embed, where the host page controls outer spacing. Collapse it so the
   widget fills the iframe — its own .pcal-content padding (4px below) is the only gutter. */
.pcal-embed-wrapper .ds-sec,
.pcal-embed-wrapper .ds.no-section-headers > section:first-of-type .ds-sec {
    padding: 0 !important;
}

.pcal-embed-wrapper .pcal-content {
    padding: 4px;
}

.pcal-embed-wrapper .pcal-container {
    box-shadow: none;
    border-radius: 0;
    overflow-x: auto;
}

.pcal-embed-wrapper .pcal-toolbar {
    padding: 8px 12px;
}

.pcal-embed-wrapper .pcal-nav {
    padding: 8px 12px;
}

.pcal-embed-wrapper .pcal-select {
    font-size: 12px;
    padding: 5px 24px 5px 8px;
}

/* ── Embedded modal positioning ───────────────────────────────────────────────────────
   Inside an auto-resized inline embed the iframe has no scroll of its own (it's sized to its
   content, scrolling="no"), so a position:fixed modal centres in the middle of the TALL
   iframe — far below what the visitor is actually looking at, forcing them to scroll the host
   page to find it. Two layers fix this:

   1. FALLBACK (always on, host-independent): pin the overlay to the TOP of the iframe content
      and top-align the card. When the visitor opens a modal while looking at the top of the
      embed (the common case), it appears right there with no scrolling. This is delivered by
      the iframe's own CSS (our origin), so it works even when the host page is still serving a
      stale, cached copy of embed.js that knows nothing about the band protocol.

   2. BANDED (when the host embed.js cooperates): on modal open, embed.js locks the host scroll
      and posts the visible viewport band as --dyl-embed-vtop / --dyl-embed-vheight and adds
      html.dyl-embed-banded (see PublicLayout's message handler). We then lay the overlay over
      exactly that band and centre the card in it, so the modal is dead-centre on screen at ANY
      scroll position — not just when the visitor is at the top.

   BOTH layers are gated on html.dyl-embed-iframed — set by PublicLayout ONLY when the page is
   actually rendered inside a host iframe (window.self !== window.top). When the embed URL is
   instead opened as a TOP-LEVEL document (directly, or in an in-app browser / Custom Tab) the
   page IS the viewport, so the base .pcal-overlay { position:fixed; inset:0 } already centres
   the modal perfectly — applying the absolute override there is what pushed the modal down the
   page. So at top level we leave the fixed overlay untouched. */
html.dyl-embed-iframed .pcal-embed-wrapper .pcal-overlay,
html.dyl-embed-iframed .pcal-embed-wrapper .apf-overlay,
html.dyl-embed-iframed .pcal-embed-wrapper .wsm-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    min-height: 100%;
    height: auto;
    align-items: flex-start;
}
html.dyl-embed-iframed .pcal-embed-wrapper .pcal-popup { margin: 16px auto; }

html.dyl-embed-banded .pcal-embed-wrapper .pcal-overlay,
html.dyl-embed-banded .pcal-embed-wrapper .apf-overlay,
html.dyl-embed-banded .pcal-embed-wrapper .wsm-overlay {
    top: var(--dyl-embed-vtop, 0);
    min-height: 0;
    height: var(--dyl-embed-vheight, 100%);
    align-items: center;
}
html.dyl-embed-banded .pcal-embed-wrapper .pcal-popup {
    margin: 0 auto;
    /* Cap the card to the visible band so it never exceeds the device viewport (its default
       max-height:90vh is 90% of the TALL iframe inside an embed). Internal scroll keeps long
       content reachable. */
    max-height: calc(var(--dyl-embed-vheight, 90vh) - 32px);
}

/* ── Mobile embed height cap ───────────────────────────────────────────────────────────
   On a PHONE, letting the iframe grow to the full (very tall) calendar means a centred modal
   lands far down the content and the visitor must scroll to find it. Instead we cap the
   embedded content to ~one device screen — --dyl-embed-cap, set by PublicLayout from
   screen.availHeight — and let the calendar scroll INTERNALLY. The iframe then stays about
   viewport-height (every embed.js version's long-standing height-sync just mirrors the smaller
   posted height), so the modal can go back to a plain viewport-centred position:fixed and land
   on screen. This needs NO cooperation from the host page's embed.js — the recurring delivery
   problem — because it relies only on our own iframe content + the basic height-sync.

   These rules are LAST so they win (equal specificity) over the iframed top-pin and the banded
   rules above whenever .dyl-embed-capped is present (mobile only). overflow-y:auto does NOT
   create a containing block for position:fixed, so the modal still escapes the scroll box and
   centres on the iframe viewport rather than being clipped. */
html.dyl-embed-capped .pcal-embed-wrapper {
    max-height: var(--dyl-embed-cap, 90vh);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
html.dyl-embed-capped .pcal-embed-wrapper .pcal-overlay,
html.dyl-embed-capped .pcal-embed-wrapper .apf-overlay,
html.dyl-embed-capped .pcal-embed-wrapper .wsm-overlay {
    position: fixed;
    inset: 0;
    top: 0;
    min-height: 0;
    height: auto;
    align-items: center;
}
html.dyl-embed-capped .pcal-embed-wrapper .pcal-popup {
    margin: 0 auto;
    max-height: 85vh;
}

/* Account action modals (Renew, Upgrade, Cancel booking, Order detail, …) use
   position:fixed; inset:0; align-items:center. Inside the auto-resized embed iframe that
   breaks the same way .pcal-overlay does above: a fixed overlay with bottom:0 anchors to
   the document, the iframe height-sync loop (PublicLayout's dyl-embed-height postMessage)
   inflates the frame, and the vertically-centred card is left stranded far below the
   visible content — the "modal way down / empty space" embed bug. Pin the overlay to the
   top of the content (absolute, bottom:auto so it can't stretch to a runaway document
   bottom) and top-align the card so it always sits next to what the visitor is looking at.
   Scoped to embeds only — the standalone /portal/{slug}/account page keeps the fixed,
   viewport-centred modal. */
.pcal-embed-wrapper .acct-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    min-height: 100%;
    align-items: flex-start;
}
.pcal-embed-wrapper .acct-modal {
    margin: 24px auto;
}

/* --- Print --- */
@media print {
    .pcal-nav,
    .pcal-filters,
    .pcal-overlay,
    .pcal-footer,
    .pcal-btn {
        display: none !important;
    }

    .pcal-slot {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
    }

    .pcal-grid {
        grid-template-columns: repeat(7, 1fr);
    }
}