/**
 * Cloudstay Guest Portal Styles
 *
 * Clean, minimal design for the standalone guest portal.
 * Mobile-responsive with status badges, card layouts, and form styling.
 *
 * @package Cloudstay
 * @since 1.5.0
 */

/* ========================================
   Force Standalone Portal - Hide Theme
   ======================================== */
html,
body.cloudstay-guest-portal,
body.cloudstay-guest-login {
    /* Hide WordPress admin bar in portal */
    margin: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ensure no extra space from html element */
html:has(body.cloudstay-guest-portal),
html:has(body.cloudstay-guest-login) {
    margin: 0 !important;
    padding: 0 !important;
}

body.cloudstay-guest-portal #wpadminbar,
body.cloudstay-guest-login #wpadminbar {
    display: none !important;
}

/* Hide any theme header, footer, sidebar */
body.cloudstay-guest-portal > header:not(.portal-header):not(.gp-mobile-header),
body.cloudstay-guest-portal > .site-header,
body.cloudstay-guest-portal > #masthead,
body.cloudstay-guest-portal > nav:not(.gp-sidebar-nav):not(.header-nav),
body.cloudstay-guest-portal > .main-navigation,
body.cloudstay-guest-portal > footer:not(.portal-footer):not(.guest-portal-footer),
body.cloudstay-guest-portal > .site-footer,
body.cloudstay-guest-portal > #colophon,
body.cloudstay-guest-portal > aside:not(.gp-portal-sidebar),
body.cloudstay-guest-portal > .widget-area,
body.cloudstay-guest-login > header,
body.cloudstay-guest-login > .site-header,
body.cloudstay-guest-login > nav,
body.cloudstay-guest-login > footer,
body.cloudstay-guest-login > aside {
    display: none !important;
}

/* Reset theme button styles that override portal buttons.
   Uses :where() for zero specificity so any class-based button styles win naturally. */
:where(body.cloudstay-guest-portal, body.cloudstay-guest-login) button,
:where(body.cloudstay-guest-portal, body.cloudstay-guest-login) [type="button"],
:where(body.cloudstay-guest-portal, body.cloudstay-guest-login) [type="submit"] {
    background-color: transparent;
    border: none;
    border-radius: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    padding: 0;
}

/* Ensure portal takes full viewport */
body.cloudstay-guest-portal {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.cloudstay-guest-portal > .gp-portal-layout {
    flex: 1;
}

/* Login page - centered layout (no flex-direction: column) */
body.cloudstay-guest-login {
    min-height: 100vh;
}

/* ========================================
   CSS Variables - Mapped to Global Design Tokens
   ======================================== */
:root {
    /* Colors - Mapped to global design tokens with fallbacks */
    --gp-primary: var(--csg-gp-primary, var(--cs-primary, #2563eb));
    --gp-primary-hover: var(--csg-gp-primary-hover, var(--cs-primary-hover, #1d4ed8));
    --gp-primary-light: var(--csg-gp-primary-light, #eff6ff);
    --gp-success: var(--csg-gp-success, var(--cs-success, #10b981));
    --gp-success-light: var(--csg-gp-success-light, var(--cs-success-bg, #ecfdf5));
    --gp-warning: var(--csg-gp-warning, var(--cs-warning, #f59e0b));
    --gp-warning-light: var(--csg-gp-warning-light, var(--cs-warning-bg, #fef3c7));
    --gp-error: var(--csg-gp-error, var(--cs-error, #ef4444));
    --gp-error-light: var(--csg-gp-error-light, var(--cs-error-bg, #fef2f2));

    /* Gray Scale - Mapped to global design tokens */
    --gp-gray-50: var(--csg-gp-gray-50, var(--cs-gray-50, #f9fafb));
    --gp-gray-100: var(--csg-gp-gray-100, var(--cs-gray-100, #f3f4f6));
    --gp-gray-200: var(--csg-gp-gray-200, var(--cs-gray-200, #e5e7eb));
    --gp-gray-300: var(--csg-gp-gray-300, var(--cs-gray-300, #d1d5db));
    --gp-gray-400: var(--csg-gp-gray-400, var(--cs-gray-400, #9ca3af));
    --gp-gray-500: var(--csg-gp-gray-500, var(--cs-gray-500, #6b7280));
    --gp-gray-600: var(--csg-gp-gray-600, var(--cs-gray-600, #4b5563));
    --gp-gray-700: var(--csg-gp-gray-700, var(--cs-gray-700, #374151));
    --gp-gray-800: var(--csg-gp-gray-800, var(--cs-gray-800, #1f2937));
    --gp-gray-900: var(--csg-gp-gray-900, var(--cs-gray-900, #111827));
    --gp-white: var(--csg-gp-white, var(--cs-bg-primary, #ffffff));

    /* Border Radius - Mapped to global design tokens */
    --gp-radius: var(--csg-gp-radius, var(--cs-radius-lg, 12px));
    --gp-radius-sm: var(--csg-gp-radius-sm, var(--cs-radius-md, 8px));
    --gp-radius-lg: var(--csg-gp-radius-lg, var(--cs-radius-xl, 16px));

    /* Shadows - Mapped to global design tokens */
    --gp-shadow-sm: var(--csg-gp-shadow-sm, var(--cs-shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.05)));
    --gp-shadow: var(--csg-gp-shadow, var(--cs-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)));
    --gp-shadow-md: var(--csg-gp-shadow-md, var(--cs-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)));
    --gp-shadow-lg: var(--csg-gp-shadow-lg, var(--cs-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)));

    /* Transitions - Mapped to global design tokens */
    --gp-transition: var(--csg-gp-transition, var(--cs-transition-normal, 0.2s ease));
    --gp-font-family: var(--csg-gp-font-family, var(--cs-font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif));

    /* Page-specific colors (can be overridden via widget builder) */
    --gp-page-bg: var(--csg-gp-page-bg, var(--cs-gray-50));
    --gp-sidebar-bg: var(--csg-gp-sidebar-bg, var(--cs-bg-primary));
    --gp-content-bg: var(--csg-gp-content-bg, var(--cs-bg-primary));
    --gp-card-bg: var(--csg-gp-card-bg, var(--cs-bg-primary));
    --gp-card-border: var(--csg-gp-card-border, var(--cs-gray-200));
    --gp-card-radius: var(--csg-gp-card-radius, var(--cs-radius-lg, 12px));
    --gp-card-shadow: var(--csg-gp-card-shadow, var(--cs-shadow-sm));
    --gp-text-primary: var(--csg-gp-text-primary, var(--cs-gray-800));
    --gp-text-secondary: var(--csg-gp-text-secondary, var(--cs-gray-500));
    --gp-border-color: var(--csg-gp-border-color, var(--cs-gray-200));

    /* Navigation colors */
    --gp-nav-bg: var(--csg-gp-nav-bg, transparent);
    --gp-nav-hover-bg: var(--csg-gp-nav-hover-bg, var(--cs-gray-100));
    --gp-nav-active-bg: var(--csg-gp-nav-active-bg, var(--cs-gray-100));
    --gp-nav-text: var(--csg-gp-nav-text, var(--cs-gray-700));
    --gp-nav-active-text: var(--csg-gp-nav-active-text, var(--cs-gray-900));
    --gp-nav-icon-color: var(--csg-gp-nav-icon-color, var(--cs-gray-500));
    --gp-nav-radius: var(--csg-gp-nav-radius, var(--gp-radius-sm));

    /* Button colors */
    --gp-btn-primary-bg: var(--csg-gp-btn-primary-bg, var(--cs-primary));
    --gp-btn-primary-text: var(--csg-gp-btn-primary-text, var(--cs-bg-primary));
    --gp-btn-primary-hover: var(--csg-gp-btn-primary-hover, var(--cs-primary-hover));
    --gp-btn-secondary-bg: var(--csg-gp-btn-secondary-bg, var(--cs-gray-100));
    --gp-btn-secondary-border: var(--csg-gp-btn-secondary-border, var(--cs-gray-300));
    --gp-btn-secondary-text: var(--csg-gp-btn-secondary-text, var(--cs-gray-700));

    /* Status badge colors */
    --gp-badge-confirmed-bg: var(--csg-gp-badge-confirmed-bg, #dcfce7);
    --gp-badge-confirmed-text: var(--csg-gp-badge-confirmed-text, #166534);
    --gp-badge-pending-bg: var(--csg-gp-badge-pending-bg, #fef9c3);
    --gp-badge-pending-text: var(--csg-gp-badge-pending-text, #854d0e);
    --gp-badge-cancelled-bg: var(--csg-gp-badge-cancelled-bg, #fee2e2);
    --gp-badge-cancelled-text: var(--csg-gp-badge-cancelled-text, #991b1b);

    /* Input colors */
    --gp-input-bg: var(--csg-gp-input-bg, var(--cs-bg-primary));
    --gp-input-border: var(--csg-gp-input-border, var(--cs-gray-300));
    --gp-input-focus-border: var(--csg-gp-input-focus-border, var(--cs-primary));
}

/* ========================================
   Dark Mode Support
   ======================================== */
.cloudstay-guest-portal.gp-dark-mode,
.cloudstay-guest-login.gp-dark-mode {
    --gp-gray-50: var(--csg-gp-dark-gray-50, #2a2a2a);
    --gp-gray-100: var(--csg-gp-dark-gray-100, #333333);
    --gp-gray-200: var(--csg-gp-dark-gray-200, #444444);
    --gp-gray-300: var(--csg-gp-dark-gray-300, #555555);
    --gp-gray-400: var(--csg-gp-dark-gray-400, #999999);
    --gp-gray-500: var(--csg-gp-dark-gray-500, #cccccc);
    --gp-gray-600: var(--csg-gp-dark-gray-600, #dddddd);
    --gp-gray-700: var(--csg-gp-dark-gray-700, #eeeeee);
    --gp-gray-800: var(--csg-gp-dark-gray-800, #f5f5f5);
    --gp-gray-900: var(--csg-gp-dark-gray-900, #ffffff);
    --gp-white: var(--csg-gp-dark-white, #202020);

    --gp-primary-light: var(--csg-gp-dark-primary-light, rgba(37, 99, 235, 0.2));
    --gp-success-light: var(--csg-gp-dark-success-light, rgba(16, 185, 129, 0.2));
    --gp-warning-light: var(--csg-gp-dark-warning-light, rgba(245, 158, 11, 0.2));
    --gp-error-light: var(--csg-gp-dark-error-light, rgba(239, 68, 68, 0.2));

    --gp-page-bg: var(--csg-gp-dark-page-bg, #202020);
    --gp-sidebar-bg: var(--csg-gp-dark-sidebar-bg, #2a2a2a);
    --gp-content-bg: var(--csg-gp-dark-content-bg, #202020);
    --gp-card-bg: var(--csg-gp-dark-card-bg, #2a2a2a);
    --gp-card-border: var(--csg-gp-dark-card-border, #444444);
    --gp-card-radius: var(--csg-gp-dark-card-radius, var(--cs-radius-lg, 12px));
    --gp-card-shadow: var(--csg-gp-dark-card-shadow, none);
    --gp-text-primary: var(--csg-gp-dark-text-primary, #ffffff);
    --gp-text-secondary: var(--csg-gp-dark-text-secondary, #999999);
    --gp-border-color: var(--csg-gp-dark-border-color, #333333);

    --gp-nav-hover-bg: var(--csg-gp-dark-nav-hover-bg, #333333);
    --gp-nav-active-bg: var(--csg-gp-dark-nav-active-bg, #333333);
    --gp-nav-text: var(--csg-gp-dark-nav-text, #999999);
    --gp-nav-active-text: var(--csg-gp-dark-nav-active-text, #ffffff);
    --gp-nav-icon-color: var(--csg-gp-dark-nav-icon-color, #777777);
    --gp-nav-radius: var(--csg-gp-dark-nav-radius, var(--gp-radius-sm));

    --gp-btn-primary-bg: var(--csg-gp-dark-btn-primary-bg, #ffffff);
    --gp-btn-primary-text: var(--csg-gp-dark-btn-primary-text, #202020);
    --gp-btn-primary-hover: var(--csg-gp-dark-btn-primary-hover, #eeeeee);
    --gp-btn-secondary-bg: var(--csg-gp-dark-btn-secondary-bg, #333333);
    --gp-btn-secondary-border: var(--csg-gp-dark-btn-secondary-border, #555555);
    --gp-btn-secondary-text: var(--csg-gp-dark-btn-secondary-text, #999999);

    --gp-badge-confirmed-bg: var(--csg-gp-dark-badge-confirmed-bg, rgba(16, 185, 129, 0.2));
    --gp-badge-confirmed-text: var(--csg-gp-dark-badge-confirmed-text, #6ee7b7);
    --gp-badge-pending-bg: var(--csg-gp-dark-badge-pending-bg, rgba(245, 158, 11, 0.2));
    --gp-badge-pending-text: var(--csg-gp-dark-badge-pending-text, #fcd34d);
    --gp-badge-cancelled-bg: var(--csg-gp-dark-badge-cancelled-bg, rgba(239, 68, 68, 0.2));
    --gp-badge-cancelled-text: var(--csg-gp-dark-badge-cancelled-text, #fca5a5);

    --gp-input-bg: var(--csg-gp-dark-input-bg, #2a2a2a);
    --gp-input-border: var(--csg-gp-dark-input-border, #444444);
    --gp-input-focus-border: var(--csg-gp-dark-input-focus-border, #60a5fa);

    --gp-shadow: var(--csg-gp-dark-shadow, 0 1px 3px rgba(0, 0, 0, 0.3));
    --gp-shadow-md: var(--csg-gp-dark-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.4));
    --gp-shadow-lg: var(--csg-gp-dark-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.5));
}

/* ========================================
   Base Reset & Typography
   ======================================== */
.cloudstay-guest-portal {
    margin: 0;
    padding: 0;
    font-family: var(--cs-font-sans);
    font-size: 16px;
    line-height: 1.5;
    color: var(--cs-text-primary);
    background: var(--cs-bg-secondary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.cloudstay-guest-portal * {
    box-sizing: border-box;
}

.cloudstay-guest-portal h1,
.cloudstay-guest-portal h2,
.cloudstay-guest-portal h3,
.cloudstay-guest-portal h4 {
    margin: 0;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cs-gray-900);
}

.cloudstay-guest-portal p {
    margin: 0;
}

.cloudstay-guest-portal a:not(.gp-btn):not(.gp-nav-item):not(.gp-icon-btn) {
    color: var(--cs-primary);
    text-decoration: none;
    transition: color var(--cs-transition-normal);
}

.cloudstay-guest-portal a:hover:not(.gp-btn):not(.gp-nav-item):not(.gp-icon-btn) {
    color: var(--cs-primary-hover);
}

/* ========================================
   Layout Structure
   ======================================== */
.guest-portal-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.guest-portal-main {
    flex: 1;
    padding: 32px 0;
}

.portal-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.portal-container-narrow {
    max-width: 720px;
}

/* ========================================
   Header
   ======================================== */
.guest-portal-header {
    background: var(--cs-bg-primary);
    border-bottom: 1px solid var(--cs-gray-200);
    padding: 16px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-logo img {
    height: 40px;
    width: auto;
}

.header-logo .gp-logo-text {
    font-size: 20px;
    font-weight: 700;
    color: var(--cs-gray-900);
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 16px;
}

.logout-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--cs-gray-600);
    padding: 8px 16px;
    border-radius: var(--cs-radius-md);
    transition: all var(--cs-transition-normal);
}

.logout-link:hover {
    background: var(--cs-gray-100);
    color: var(--cs-gray-800);
}

/* ========================================
   Footer
   ======================================== */
.guest-portal-footer {
    background: var(--cs-bg-primary);
    border-top: 1px solid var(--cs-gray-200);
    padding: 24px 0;
    margin-top: auto;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}

.guest-portal-footer p {
    font-size: 14px;
    color: var(--cs-gray-500);
}

/* ========================================
   Page Header
   ======================================== */
.page-header {
    margin-bottom: 32px;
}

.page-header h1 {
    font-size: 28px;
    margin-bottom: 8px;
}

.page-subtitle {
    font-size: 16px;
    color: var(--cs-gray-500);
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--cs-gray-600);
    margin-bottom: 24px;
    transition: color var(--cs-transition-normal);
}

.back-link:hover {
    color: var(--cs-primary);
}

/* ========================================
   Buttons
   ======================================== */
.gp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    border: none;
    border-radius: var(--cs-radius-md);
    cursor: pointer;
    transition: all var(--cs-transition-normal);
    text-decoration: none;
}

.gp-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.gp-btn-sm {
    padding: 8px 16px;
    font-size: 14px;
}

.gp-btn-lg {
    padding: 14px 24px;
    font-size: 16px;
}

.gp-btn-primary {
    background: var(--gp-btn-primary-bg, var(--cs-primary));
    color: var(--gp-btn-primary-text, var(--cs-bg-primary));
}

.gp-btn-primary:hover:not(:disabled) {
    background: var(--gp-btn-primary-hover, var(--cs-primary-hover));
    color: var(--gp-btn-primary-text, var(--cs-bg-primary));
}

.gp-btn-secondary {
    background: var(--gp-btn-secondary-bg, var(--cs-gray-100));
    color: var(--gp-btn-secondary-text, var(--cs-gray-700));
    border: 1px solid var(--gp-btn-secondary-border, transparent);
}

.gp-btn-secondary:hover:not(:disabled) {
    background: var(--gp-btn-secondary-bg, var(--cs-gray-200));
    color: var(--gp-btn-secondary-text, var(--cs-gray-800));
}

.gp-btn-outline {
    background: transparent;
    color: var(--cs-primary);
    border: 1px solid var(--cs-primary);
}

.gp-btn-outline:hover:not(:disabled) {
    background: var(--cs-info-bg);
}

.gp-btn-block {
    width: 100%;
}

.gp-btn-link {
    background: none;
    border: none;
    color: var(--cs-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
}

.gp-btn-link:hover {
    text-decoration: underline;
}

/* ========================================
   Loading & States
   ======================================== */
.loading-state,
.error-state,
.empty-state,
.success-state {
    text-align: center;
    padding: 80px 24px;
}

/* Skeleton loading states override default centered padding */
.loading-state.skeleton-loading {
    text-align: left;
    padding: 0;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--cs-gray-200);
    border-top-color: var(--cs-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 24px;
}

.loading-spinner-small {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    display: inline-block;
}

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

@keyframes skeleton-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}

.loading-state p {
    font-size: 16px;
    color: var(--cs-gray-500);
}

/* ========================================
   Skeleton Loading Components
   ======================================== */
.skeleton-bone {
    background: var(--cs-gray-200);
    border-radius: 6px;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

/* Reservation card skeleton */
.skeleton-card {
    display: flex;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--cs-gray-200);
    border-radius: 12px;
    margin-bottom: 12px;
}

.skeleton-card-image {
    width: 140px;
    min-width: 140px;
    height: 100px;
    border-radius: 8px;
}

.skeleton-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skeleton-line {
    height: 14px;
    border-radius: 4px;
}

.skeleton-line-short { width: 40%; }
.skeleton-line-medium { width: 65%; }
.skeleton-line-long { width: 90%; }

/* Detail page skeleton */
.skeleton-detail {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
}

.skeleton-detail-hero {
    width: 100%;
    height: 240px;
    border-radius: 12px;
}

.skeleton-detail-row {
    display: flex;
    gap: 16px;
}

.skeleton-detail-block {
    flex: 1;
    height: 80px;
    border-radius: 8px;
}

/* Messages skeleton */
.skeleton-message-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--cs-gray-100);
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Profile skeleton */
.skeleton-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
}

.skeleton-input {
    height: 44px;
    border-radius: 8px;
}

/* Stagger skeleton animation for children */
.skeleton-card:nth-child(2) .skeleton-bone { animation-delay: 0.15s; }
.skeleton-card:nth-child(3) .skeleton-bone { animation-delay: 0.3s; }
.skeleton-message-row:nth-child(2) .skeleton-bone { animation-delay: 0.15s; }
.skeleton-message-row:nth-child(3) .skeleton-bone { animation-delay: 0.3s; }
.skeleton-message-row:nth-child(4) .skeleton-bone { animation-delay: 0.45s; }

@media (max-width: 600px) {
    .skeleton-card {
        flex-direction: column;
    }
    .skeleton-card-image {
        width: 100%;
        height: 160px;
    }
}

.error-icon,
.empty-icon,
.success-icon {
    margin-bottom: 24px;
}

.error-icon {
    color: var(--cs-error);
}

.empty-icon {
    color: var(--cs-gray-400);
}

.success-icon {
    color: var(--cs-success);
}

.error-state h2,
.empty-state h2,
.success-state h2 {
    font-size: 22px;
    margin-bottom: 12px;
}

.error-state p,
.empty-state p,
.success-state p {
    font-size: 15px;
    color: var(--cs-gray-500);
    margin-bottom: 24px;
}

/* ========================================
   Section Titles
   ======================================== */
.gp-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--cs-gray-900);
    margin-bottom: 16px;
}

.gp-section-title svg {
    color: var(--cs-gray-400);
}

.section-desc {
    font-size: 14px;
    color: var(--cs-gray-500);
    margin-bottom: 16px;
}

/* ========================================
   Reservations Section
   ======================================== */
.reservations-section {
    margin-bottom: 48px;
}

.reservations-section:last-child {
    margin-bottom: 0;
}

.reservations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
}

/* Past Reservations - Grayscale */
.past-reservations .reservation-card .card-image img {
    filter: grayscale(100%);
    opacity: 0.8;
}

.past-reservations .reservation-card:hover .card-image img {
    filter: grayscale(50%);
    opacity: 1;
}

/* ========================================
   Reservation Card
   ======================================== */
.reservation-card {
    background: var(--gp-card-bg, var(--cs-bg-primary));
    border-radius: var(--gp-card-radius, var(--cs-radius-lg));
    border: 1px solid var(--gp-card-border, transparent);
    box-shadow: var(--gp-card-shadow, var(--cs-shadow-sm));
    overflow: hidden;
    transition: box-shadow var(--cs-transition-normal), transform var(--cs-transition-normal);
}

.reservation-card:hover {
    box-shadow: var(--cs-shadow-md);
    transform: translateY(-2px);
}

.reservation-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.card-image {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--cs-gray-100) 0%, var(--cs-gray-200) 100%);
}

/* Placeholder pattern for missing images */
.card-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, transparent 25%, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0.1) 50%, transparent 50%, transparent 75%, rgba(255,255,255,0.1) 75%);
    background-size: 40px 40px;
    z-index: 0;
}

/* Property icon placeholder */
.card-image::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25' /%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.5;
    z-index: 0;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--cs-transition-normal);
    position: relative;
    z-index: 1;
}

/* Hide placeholder when image loads successfully */
.card-image img[src]:not([src=""]) ~ ::before,
.card-image img[src]:not([src=""]) ~ ::after {
    display: none;
}

/* Handle broken images */
.card-image img:not([src]),
.card-image img[src=""],
.card-image img[src="undefined"],
.card-image img[src="null"] {
    opacity: 0;
}

.reservation-card:hover .card-image img {
    transform: scale(1.02);
}

.card-content {
    padding: 20px;
}

.property-name {
    font-size: 17px;
    font-weight: 600;
    color: var(--cs-gray-800);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booked-date {
    display: block;
    font-size: 13px;
    color: var(--cs-gray-500);
    margin-bottom: 12px;
}

/* Dates Info */
.dates-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--cs-gray-50);
    border-radius: var(--cs-radius-md);
    margin-bottom: 16px;
}

.date-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.date-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--cs-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.date-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--cs-gray-800);
}

.time-value {
    font-size: 13px;
    color: var(--cs-gray-500);
}

.date-arrow {
    flex-shrink: 0;
    color: var(--cs-gray-400);
}

/* Host Info */
.host-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.host-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.host-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--cs-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.host-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--cs-gray-700);
}

.contact-host-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--cs-gray-700);
    background: var(--cs-gray-100);
    border-radius: var(--cs-radius-md);
    text-decoration: none;
    transition: all var(--cs-transition-normal);
    margin-bottom: 8px;
}

.contact-host-btn:hover {
    background: var(--cs-gray-200);
    color: var(--cs-gray-900);
}

/* Card Actions */
.card-actions {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--cs-gray-100);
}

.view-details-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--cs-primary);
    background: var(--cs-info-bg);
    border-radius: var(--cs-radius-md);
    text-decoration: none;
    transition: all var(--cs-transition-normal);
}

.view-details-btn:hover {
    background: var(--cs-primary);
    color: var(--cs-bg-primary);
}

.view-details-btn svg {
    transition: transform var(--cs-transition-normal);
}

.view-details-btn:hover svg {
    transform: translateX(4px);
}

.book-again-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--cs-primary);
    color: var(--cs-bg-primary) !important;
    border-radius: var(--cs-radius-md);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s;
    border: none;
    cursor: pointer;
}

.book-again-btn:hover {
    background: var(--cs-primary-hover);
    color: var(--cs-bg-primary) !important;
    text-decoration: none;
}

.book-again-btn svg {
    flex-shrink: 0;
}

/* ========================================
   Status Badge
   ======================================== */
.status-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 9999px;
    z-index: 1;
}

.status-badge.upcoming {
    background: var(--gp-badge-confirmed-bg, var(--cs-info-bg));
    color: var(--gp-badge-confirmed-text, var(--cs-primary));
}

.status-badge.checked-in {
    background: var(--gp-badge-confirmed-bg, var(--cs-success-bg));
    color: var(--gp-badge-confirmed-text, var(--cs-success));
}

.status-badge.completed {
    background: var(--cs-gray-100);
    color: var(--cs-gray-600);
}

.status-badge.cancelled {
    background: var(--gp-badge-cancelled-bg, var(--cs-error-bg));
    color: var(--gp-badge-cancelled-text, var(--cs-error));
}

/* Hide status badge on reservation cards */
.reservation-card .status-badge {
    display: none;
}

/* Static position variant for detail page */
.property-header .status-badge {
    position: static;
}

/* ========================================
   Reservation Detail Page
   ======================================== */
.reservation-detail-page .detail-content {
    max-width: 900px;
    margin: 0 auto;
}

/* Detail view inside portal layout */
.gp-portal-content .back-link {
    display: inline-flex;
    margin: 24px 32px 0 32px;
}

.gp-portal-content .detail-content {
    max-width: 950px;
    margin: 0 auto;
    padding: 24px 32px 32px 32px;
}

.gp-portal-content .loading-state,
.gp-portal-content .error-state {
    margin: 32px;
}

/* Photos Section */
.photos-section {
    position: relative;
    margin-bottom: 24px;
    width: 100%;
}

.photos-carousel {
    position: relative;
    border-radius: var(--cs-radius-lg);
    overflow: hidden;
    background: var(--cs-gray-100);
    width: 100%;
}

.carousel-track {
    display: flex;
    transition: transform 0.3s ease;
    width: 100%;
}

.carousel-slide {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 100%;
    height: 400px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--cs-gray-100) 0%, var(--cs-gray-200) 100%);
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-slide.placeholder-slide {
    background: linear-gradient(135deg, var(--cs-gray-100) 0%, var(--cs-gray-200) 100%);
}

.carousel-slide .placeholder-icon {
    color: var(--cs-gray-400);
}

/* Direct image in carousel-track (fallback) */
.carousel-track > img {
    width: 100%;
    min-width: 100%;
    height: 400px;
    object-fit: cover;
    flex-shrink: 0;
}

.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--cs-bg-primary) !important;
    border: 1px solid var(--cs-border-primary, #e5e7eb) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    color: var(--cs-gray-900) !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
    z-index: 2;
}

.carousel-nav:hover {
    background: var(--cs-gray-50) !important;
    border-color: var(--cs-gray-300) !important;
    transform: translateY(-50%) scale(1.05);
}

.carousel-prev {
    left: 16px;
}

.carousel-next {
    right: 16px;
}

.carousel-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
}

.carousel-dots .dot {
    width: 8px;
    height: 8px;
    background: var(--cs-gray-300);
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--cs-transition-normal);
}

.carousel-dots .dot.active {
    background: var(--cs-bg-primary);
}

.view-gallery-btn {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: flex !important;
    align-items: center !important;
    gap: 6px;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: var(--cs-bg-primary) !important;
    border: 1px solid var(--cs-border-primary, #e5e7eb) !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    color: var(--cs-gray-900) !important;
    transition: all 0.2s ease !important;
    z-index: 3;
}

.view-gallery-btn:hover {
    background: var(--cs-gray-50);
    border-color: var(--cs-gray-300);
    box-shadow: var(--cs-shadow-md);
}

/* Property Header */
.property-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.property-info h1 {
    font-size: 24px;
    font-weight: 600;
    color: var(--cs-gray-900);
    margin-bottom: 8px;
}

.property-address {
    font-size: 15px;
    color: var(--cs-gray-500);
}

/* Booking Details Card */
.booking-details-card {
    background: var(--cs-bg-primary);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-sm);
    padding: 24px;
    margin-bottom: 24px;
}

.details-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
}

.detail-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--cs-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--cs-gray-800);
}

.detail-sub {
    font-size: 14px;
    color: var(--cs-gray-500);
}

.detail-arrow {
    color: var(--cs-gray-400);
}

/* ========================================
   Payment Section
   ======================================== */
.payment-section {
    background: var(--cs-bg-primary);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-sm);
    padding: 24px;
    margin-bottom: 24px;
}

/* Payment Status Row */
.payment-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--cs-gray-200);
}

.payment-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
}

.payment-status-badge .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.payment-status-badge.status-paid,
.payment-status-badge.status-succeeded {
    background: var(--gp-badge-confirmed-bg, var(--cs-success-bg));
    color: var(--gp-badge-confirmed-text, var(--cs-success));
}

.payment-status-badge.status-paid .status-dot,
.payment-status-badge.status-succeeded .status-dot {
    background: var(--gp-badge-confirmed-text, var(--cs-success));
}

.payment-status-badge.status-pending {
    background: var(--gp-badge-pending-bg, var(--cs-warning-bg));
    color: var(--gp-badge-pending-text, var(--cs-warning));
}

.payment-status-badge.status-pending .status-dot {
    background: var(--gp-badge-pending-text, var(--cs-warning));
}

.payment-status-badge.status-partial {
    background: #fef3c7;
    color: #d97706;
}

.payment-status-badge.status-partial .status-dot {
    background: #d97706;
}

.payment-method-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--cs-gray-600);
    font-size: 14px;
}

.payment-method-info svg {
    color: var(--cs-gray-400);
}

/* Total icon */
.stat-icon.total {
    background: var(--cs-info-bg);
    color: var(--cs-primary);
}

/* Transaction Status in History Table */
.tx-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.tx-status.success {
    background: var(--cs-success-bg);
    color: var(--cs-success);
}

.tx-status.pending {
    background: var(--cs-warning-bg);
    color: var(--cs-warning);
}

.tx-status.failed {
    background: var(--cs-error-bg);
    color: var(--cs-error);
}

/* History toggle expanded state */
.history-toggle.expanded .toggle-icon {
    transform: rotate(180deg);
}

/* Payment Header */
.payment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.payment-header .gp-section-title {
    margin-bottom: 0;
}

/* Payment Method Card */
.payment-method-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, var(--cs-gray-800) 0%, var(--cs-gray-700) 100%);
    color: white;
    padding: 16px 20px;
    border-radius: var(--cs-radius-lg);
    margin-bottom: 20px;
}

.payment-method-card .card-icon {
    opacity: 0.7;
}

.payment-method-card .card-details {
    flex: 1;
}

.payment-method-card .card-brand {
    display: block;
    font-size: 12px;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.payment-method-card .card-number {
    display: block;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 2px;
    margin-top: 4px;
}

.payment-method-card .card-expiry {
    font-size: 12px;
    opacity: 0.7;
}

/* Price Breakdown */
.price-breakdown {
    background: var(--cs-gray-50);
    border-radius: var(--cs-radius-md);
    padding: 16px;
    margin-bottom: 20px;
}

.breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

.breakdown-row:first-child {
    padding-top: 0;
}

.breakdown-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--cs-gray-600);
    font-size: 14px;
}

.breakdown-label svg {
    color: var(--cs-gray-400);
    flex-shrink: 0;
}

.breakdown-value {
    font-weight: 500;
    color: var(--cs-gray-800);
}

.breakdown-row.discount-row .breakdown-label {
    color: var(--cs-success);
}

.breakdown-row.discount-row .breakdown-label svg {
    color: var(--cs-success);
}

.discount-value {
    color: var(--cs-success);
}

.breakdown-divider {
    height: 1px;
    background: var(--cs-gray-200);
    margin: 8px 0;
}

.breakdown-row.total-row {
    padding-bottom: 0;
}

.total-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--cs-gray-800);
}

.total-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--cs-gray-900);
}

/* Payment Summary */
.payment-summary {
    background: var(--cs-bg-primary);
    border: 1px solid var(--cs-gray-200);
    border-radius: var(--cs-radius-md);
    padding: 16px;
    margin-bottom: 20px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
}

.summary-row:first-child {
    padding-top: 0;
}

.summary-row:last-child {
    padding-bottom: 0;
}

.summary-row + .summary-row {
    border-top: 1px solid var(--cs-gray-100);
}

.summary-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--cs-gray-600);
}

.summary-label svg {
    flex-shrink: 0;
}

.paid-row .summary-label svg {
    color: var(--cs-success);
}

.balance-row .summary-label svg {
    color: var(--cs-warning);
}

.summary-value {
    font-size: 18px;
    font-weight: 600;
}

.paid-value {
    color: var(--cs-success);
}

.balance-value {
    color: var(--cs-warning);
}

.due-date {
    font-size: 12px;
    color: var(--cs-gray-400);
    margin-left: 8px;
}

/* Payment Schedule & Cancellation Policy Grid */
.schedule-policy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .schedule-policy-grid {
        grid-template-columns: 1fr;
    }
}

/* Payment Schedule */
.payment-schedule {
    background: var(--cs-bg-primary);
    border: 1px solid var(--cs-gray-200);
    border-radius: var(--cs-radius-md);
    padding: 20px;
}

/* Cancellation Policy Card */
.cancellation-policy-card {
    background: var(--cs-bg-primary);
    border: 1px solid var(--cs-gray-200);
    border-radius: var(--cs-radius-md);
    padding: 20px;
}

.cancellation-policy-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--cs-gray-900);
    margin: 0 0 8px 0;
}

.cancellation-policy-description {
    font-size: 14px;
    line-height: 1.6;
    color: var(--cs-gray-600);
    margin: 0;
}

.cancellation-policy-fallback {
    font-size: 14px;
    line-height: 1.6;
    color: var(--cs-gray-500);
    margin: 0;
}

.schedule-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 24px;
    color: var(--cs-gray-900);
}

.schedule-title svg {
    color: var(--cs-gray-400);
}

.schedule-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.schedule-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--cs-gray-100);
}

.schedule-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.schedule-row:first-child {
    padding-top: 0;
}

.schedule-row-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.schedule-row-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--cs-gray-900);
}

.schedule-row-date {
    font-size: 13px;
    color: var(--cs-gray-400);
}

.schedule-row.paid .schedule-row-date {
    color: var(--cs-gray-500);
}

.schedule-row-right {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: right;
}

.schedule-row-amount {
    font-size: 15px;
    font-weight: 600;
    color: var(--cs-gray-900);
}

.schedule-row-badge {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--cs-gray-900);
    color: var(--cs-bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Transaction History */
.transaction-history {
    margin-bottom: 20px;
}

.history-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--cs-gray-50);
    border: 1px solid var(--cs-gray-200);
    border-radius: var(--cs-radius-md);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--cs-gray-700);
    transition: background 0.2s;
}

.history-toggle:hover {
    background: var(--cs-gray-100);
}

.history-toggle span {
    display: flex;
    align-items: center;
    gap: 10px;
}

.history-toggle svg {
    color: var(--cs-gray-400);
}

.toggle-icon {
    transition: transform 0.2s;
}

.history-toggle.expanded .toggle-icon {
    transform: rotate(180deg);
}

.history-content {
    border: 1px solid var(--cs-gray-200);
    border-top: none;
    border-radius: 0 0 var(--cs-radius-md) var(--cs-radius-md);
    overflow: hidden;
}

.transaction-list {
    padding: 8px;
}

.transaction-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--cs-radius-md);
}

.transaction-item:hover {
    background: var(--cs-gray-50);
}

.tx-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tx-icon.success {
    background: var(--cs-success-bg);
    color: var(--cs-success);
}

.tx-icon.pending {
    background: var(--cs-warning-bg);
    color: var(--cs-warning);
}

.tx-icon.failed {
    background: var(--cs-error-bg);
    color: var(--cs-error);
}

.tx-details {
    flex: 1;
    min-width: 0;
}

.tx-type {
    font-weight: 500;
    color: var(--cs-gray-800);
}

.tx-datetime {
    font-size: 12px;
    color: var(--cs-gray-500);
}

.tx-amount {
    font-weight: 600;
    color: var(--cs-gray-800);
}

.tx-receipt {
    padding: 8px;
    border-radius: var(--cs-radius-md);
    color: var(--cs-gray-400);
    transition: color 0.2s, background 0.2s;
}

.tx-receipt:hover {
    color: var(--cs-primary);
    background: var(--cs-info-bg);
}

/* Receipt Actions */
.receipt-actions {
    text-align: center;
    padding-top: 8px;
}

.receipt-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--cs-info-bg);
    color: var(--cs-primary);
    border-radius: var(--cs-radius-md);
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.2s;
}

.receipt-link:hover {
    background: var(--cs-primary);
    color: white;
}

.payment-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
}

.payment-stat {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.stat-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cs-radius-md);
    flex-shrink: 0;
}

.stat-icon.paid {
    background: var(--cs-success-bg);
    color: var(--cs-success);
}

.stat-icon.pending {
    background: var(--cs-warning-bg);
    color: var(--cs-warning);
}

.stat-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-label {
    font-size: 13px;
    color: var(--cs-gray-500);
}

.stat-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--cs-gray-800);
}

.stat-sub {
    font-size: 13px;
    color: var(--cs-gray-500);
}

/* Deposits Section */
.deposits-section {
    border-top: 1px solid var(--cs-gray-200);
    padding-top: 24px;
    margin-bottom: 24px;
}

.deposits-section h3 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 16px;
}

.deposit-tracker {
    display: flex;
    align-items: center;
    gap: 24px;
}

.deposit-amount {
    font-size: 18px;
    font-weight: 600;
    color: var(--cs-gray-800);
}

.deposit-status-tracker {
    flex: 1;
    display: flex;
    align-items: center;
}

.tracker-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.step-dot {
    width: 24px;
    height: 24px;
    background: var(--cs-gray-200);
    border-radius: 50%;
    position: relative;
}

.tracker-step.active .step-dot {
    background: var(--cs-primary);
}

.tracker-step.active .step-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: var(--cs-bg-primary);
    border-radius: 50%;
}

.tracker-step.completed .step-dot {
    background: var(--cs-success);
}

.step-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--cs-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tracker-step.active .step-label,
.tracker-step.completed .step-label {
    color: var(--cs-gray-700);
}

.tracker-line {
    flex: 1;
    height: 2px;
    background: var(--cs-gray-200);
}

.tracker-line.completed {
    background: var(--cs-success);
}

/* Payment History */
.payment-history-section {
    border-top: 1px solid var(--cs-gray-200);
    padding-top: 16px;
}

.history-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    background: none;
    border: none;
    font-size: 15px;
    font-weight: 500;
    color: var(--cs-gray-700);
    cursor: pointer;
}

.history-toggle .toggle-icon {
    transition: transform var(--cs-transition-normal);
}

.history-toggle.open .toggle-icon {
    transform: rotate(180deg);
}

.history-content {
    padding-top: 16px;
}

.payment-history-table {
    width: 100%;
    border-collapse: collapse;
}

.payment-history-table th,
.payment-history-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--cs-gray-100);
}

.payment-history-table th {
    font-size: 12px;
    font-weight: 600;
    color: var(--cs-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.payment-history-table td {
    font-size: 14px;
    color: var(--cs-gray-700);
}

/* ========================================
   Modification Section
   ======================================== */
.modification-section {
    background: var(--cs-bg-primary);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-sm);
    padding: 24px;
    margin-bottom: 24px;
}

.modification-actions {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

.modification-actions .gp-btn {
    flex: 1;
}

.modification-actions .gp-btn svg {
    flex-shrink: 0;
}

.btn-cancel-reservation {
    background: transparent;
    color: var(--cs-error);
    border: 1px solid var(--cs-error);
}

.btn-cancel-reservation:hover:not(:disabled) {
    background: var(--cs-error-bg);
    color: var(--cs-error);
}

.btn-danger {
    background: var(--cs-error);
    color: var(--cs-bg-primary);
    border: none;
}

.btn-danger:hover:not(:disabled) {
    background: #dc2626;
    color: var(--cs-bg-primary);
}

.btn-danger:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Cancel Reservation Modal */
.cancel-reservation-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.cancel-reservation-modal.active {
    display: flex;
}

.cancel-reservation-modal-content {
    background: var(--cs-bg-primary);
    border-radius: var(--cs-radius-xl, 16px);
    padding: 32px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: cancelModalSlideIn 0.25s ease-out;
}

@keyframes cancelModalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.cancel-modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    background: var(--cs-error-bg);
    border-radius: 50%;
    color: var(--cs-error);
}

.cancel-modal-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--cs-gray-900);
    margin: 0 0 8px;
}

.cancel-modal-desc {
    font-size: 14px;
    color: var(--cs-gray-500);
    margin: 0 0 24px;
    line-height: 1.5;
}

.cancel-modal-reason {
    text-align: left;
    margin-bottom: 24px;
}

.cancel-modal-reason label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--cs-gray-700);
    margin-bottom: 6px;
}

.cancel-modal-reason textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--cs-gray-300);
    border-radius: var(--cs-radius-md, 8px);
    font-size: 14px;
    font-family: inherit;
    color: var(--cs-gray-900);
    background: var(--cs-bg-primary);
    resize: vertical;
    transition: border-color 0.2s;
}

.cancel-modal-reason textarea:focus {
    outline: none;
    border-color: var(--cs-primary);
    box-shadow: 0 0 0 3px rgba(var(--cs-primary-rgb, 37, 99, 235), 0.1);
}

.cancel-modal-actions {
    display: flex;
    gap: 12px;
}

.cancel-modal-actions .gp-btn {
    flex: 1;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
}

.cancel-modal-actions .btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

@media (max-width: 480px) {
    .modification-actions {
        flex-direction: column;
    }

    .cancel-modal-actions {
        flex-direction: column-reverse;
    }

    .cancel-reservation-modal-content {
        padding: 24px;
    }
}

/* ========================================
   Quick Actions
   ======================================== */
.quick-actions-section {
    margin-bottom: 24px;
}

.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 16px;
    background: var(--cs-bg-primary);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-sm);
    text-decoration: none;
    color: var(--cs-gray-700);
    transition: all var(--cs-transition-normal);
    cursor: pointer;
    border: none;
    font-family: inherit;
    font-size: inherit;
    width: 100%;
}

.action-card:hover {
    box-shadow: var(--cs-shadow-md);
    color: var(--cs-primary);
}

.action-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cs-gray-100);
    border-radius: var(--cs-radius-md);
    transition: background var(--cs-transition-normal);
}

.action-icon svg {
    width: 24px;
    height: 24px;
    color: var(--cs-gray-600);
}

.action-card:hover .action-icon {
    background: var(--cs-info-bg);
}

.action-card:hover .action-icon svg {
    color: var(--cs-primary);
}

.action-label {
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

/* ========================================
   Reservation Detail - Monochrome Overrides
   All colors: black, grey, or bold
   ======================================== */

/* Status badges on detail page */
.detail-content .status-badge.upcoming,
.detail-content .status-badge.checked-in {
    background: var(--cs-gray-100);
    color: var(--cs-gray-900);
}

.detail-content .status-badge.cancelled {
    background: var(--cs-gray-100);
    color: var(--cs-gray-600);
}

/* Payment status badges */
.detail-content .payment-status-badge.status-paid,
.detail-content .payment-status-badge.status-succeeded,
.detail-content .payment-status-badge.status-pending,
.detail-content .payment-status-badge.status-partial {
    background: var(--cs-gray-100);
    color: var(--cs-gray-900);
}

.detail-content .payment-status-badge.status-paid .status-dot,
.detail-content .payment-status-badge.status-succeeded .status-dot,
.detail-content .payment-status-badge.status-pending .status-dot,
.detail-content .payment-status-badge.status-partial .status-dot {
    background: var(--cs-gray-900);
}

/* Payment summary - remove colored icons */
.detail-content .paid-row .summary-label svg {
    color: var(--cs-gray-600);
}

.detail-content .balance-row .summary-label svg {
    color: var(--cs-gray-600);
}

.detail-content .paid-value {
    color: var(--cs-gray-900);
    font-weight: 700;
}

.detail-content .balance-value {
    color: var(--cs-gray-900);
    font-weight: 700;
}

/* Discount row */
.detail-content .breakdown-row.discount-row .breakdown-label,
.detail-content .breakdown-row.discount-row .breakdown-label svg {
    color: var(--cs-gray-600);
}

.detail-content .discount-value {
    color: var(--cs-gray-900);
}

/* Tracker steps */
.detail-content .tracker-step.completed .step-dot {
    background: var(--cs-gray-900);
}

.detail-content .tracker-line.completed {
    background: var(--cs-gray-900);
}

/* Quick action cards - hover to dark instead of blue */
.detail-content .action-card:hover {
    color: var(--cs-gray-900);
}

.detail-content .action-card:hover .action-icon {
    background: var(--cs-gray-200);
}

.detail-content .action-card:hover .action-icon svg {
    color: var(--cs-gray-900);
}

/* Receipt link */
.detail-content .receipt-link {
    background: var(--cs-gray-100);
    color: var(--cs-gray-900);
}

.detail-content .receipt-link:hover {
    background: var(--cs-gray-900);
    color: var(--cs-bg-primary);
}

/* Cancel reservation button */
.detail-content .btn-cancel-reservation {
    color: var(--cs-error);
    border: 1.5px solid var(--cs-error);
    background: transparent;
    font-weight: 600;
    border-radius: var(--cs-radius-md);
    transition: all var(--cs-transition-normal);
}

.detail-content .btn-cancel-reservation:hover:not(:disabled) {
    background: var(--cs-error);
    color: var(--cs-bg-primary);
    box-shadow: var(--cs-shadow-sm);
}

/* ========================================
   Host Section
   ======================================== */
.host-section {
    margin-bottom: 24px;
}

.host-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: var(--cs-bg-primary);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-sm);
}

.host-avatar {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cs-gray-100);
    border-radius: 50%;
    color: var(--cs-gray-400);
    overflow: hidden;
    flex-shrink: 0;
}

.host-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.host-card .host-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.host-card .host-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--cs-gray-800);
}

.host-response {
    font-size: 14px;
    color: var(--cs-gray-500);
}

/* ========================================
   Gallery Modal
   ======================================== */
.gallery-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
}

.gallery-modal-content {
    position: relative;
    width: 100%;
    max-width: 1200px;
    padding: 60px 80px;
}

.gallery-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--cs-bg-primary) !important;
    border: 1px solid var(--cs-border-primary, #e5e7eb) !important;
    border-radius: 50% !important;
    color: var(--cs-gray-900) !important;
    cursor: pointer !important;
    padding: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s ease !important;
    z-index: 11;
}

.gallery-close:hover {
    background: var(--cs-gray-50) !important;
    border-color: var(--cs-gray-300) !important;
    transform: scale(1.05);
}

.gallery-counter {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: var(--cs-bg-primary);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    z-index: 11;
}

.gallery-main-image {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.gallery-main-image img {
    max-width: 100%;
    max-height: 60vh;
    object-fit: contain;
    border-radius: var(--cs-radius-lg);
}

.gallery-thumbnails {
    display: flex;
    justify-content: center;
    gap: 12px;
    overflow-x: auto;
    padding: 8px 0;
}

.gallery-thumbnails img {
    width: 90px;
    height: 68px;
    object-fit: cover;
    border-radius: var(--cs-radius-md);
    cursor: pointer;
    opacity: 0.6;
    border: 2px solid transparent;
    transition: all var(--cs-transition-normal);
}

.gallery-thumbnails img.active {
    opacity: 1;
    border: 2px solid var(--cs-bg-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.gallery-thumbnails img:hover {
    opacity: 1;
}

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--cs-bg-primary) !important;
    border: 1px solid var(--cs-border-primary, #e5e7eb) !important;
    border-radius: 50% !important;
    color: var(--cs-gray-900) !important;
    cursor: pointer !important;
    padding: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s ease !important;
    z-index: 10;
}

.gallery-nav:hover {
    background: var(--cs-gray-50) !important;
    border-color: var(--cs-gray-300) !important;
    transform: translateY(-50%) scale(1.05);
}

.gallery-prev {
    left: 20px;
}

.gallery-next {
    right: 20px;
}

/* ========================================
   Modify Booking Page
   ======================================== */
.modify-booking-page .modify-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Current Booking Card */
.current-booking-card {
    background: var(--cs-bg-primary);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-sm);
    padding: 24px;
}

.card-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
}

.booking-summary {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.summary-property {
    display: flex;
    align-items: center;
    gap: 16px;
}

.property-thumb {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--cs-radius-md);
    background: var(--cs-gray-100);
}

.summary-property .property-info h3 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
}

.summary-property .property-info p {
    font-size: 13px;
    color: var(--cs-gray-500);
}

.summary-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 16px;
    padding: 16px;
    background: var(--cs-gray-50);
    border-radius: var(--cs-radius-md);
}

.summary-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.item-label {
    font-size: 12px;
    color: var(--cs-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.item-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--cs-gray-800);
}

/* Modify Section */
.modify-section {
    background: var(--cs-bg-primary);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-sm);
    padding: 24px;
}

/* Form Elements */
.gp-form-group {
    margin-bottom: 16px;
}

.gp-form-group:last-child {
    margin-bottom: 0;
}

.gp-form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--cs-gray-700);
    margin-bottom: 8px;
}

.gp-form-input {
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
    font-family: inherit;
    border: 1px solid var(--cs-gray-300);
    border-radius: var(--cs-radius-md);
    transition: border-color var(--cs-transition-normal), box-shadow var(--cs-transition-normal);
}

.gp-form-input:focus {
    outline: none;
    border-color: var(--cs-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.gp-form-hint {
    font-size: 13px;
    color: var(--cs-gray-500);
    margin-top: 8px;
}

.date-pickers {
    font-family: var(--cal-font-family, inherit);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Availability Status */
.availability-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--cs-radius-md);
    margin-top: 16px;
}

.availability-status.checking {
    background: var(--cs-gray-100);
    color: var(--cs-gray-600);
}

.availability-status.available {
    background: var(--cs-success-bg);
    color: #065f46;
}

.availability-status.unavailable {
    background: var(--cs-error-bg);
    color: #991b1b;
}

.status-icon svg {
    width: 20px;
    height: 20px;
}

/* Guest Selector */
.guest-selector {
    display: flex;
    align-items: center;
    gap: 16px;
    width: fit-content;
}

.guest-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cs-bg-primary);
    border: 1px solid var(--cs-gray-300);
    border-radius: 50%;
    cursor: pointer;
    color: var(--cs-gray-700);
    transition: all var(--cs-transition-normal);
}

.guest-btn:hover:not(:disabled) {
    border-color: var(--cs-primary);
    color: var(--cs-primary);
}

.guest-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.guest-input {
    width: 80px;
    padding: 12px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    border: 1px solid var(--cs-gray-300);
    border-radius: var(--cs-radius-md);
    background: var(--cs-gray-50);
}

/* Price Change Section */
.price-change-section {
    background: var(--cs-bg-primary);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-sm);
    padding: 24px;
}

.price-comparison {
    margin-top: 16px;
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
}

.price-label {
    font-size: 15px;
    color: var(--cs-gray-600);
}

.price-value {
    font-size: 15px;
    font-weight: 500;
    color: var(--cs-gray-800);
}

.price-divider {
    height: 1px;
    background: var(--cs-gray-200);
    margin: 8px 0;
}

.price-difference .price-label,
.price-difference .price-value {
    font-size: 16px;
    font-weight: 600;
}

.price-difference.increase .price-value {
    color: var(--cs-error);
}

.price-difference.decrease .price-value {
    color: var(--cs-success);
}

.price-note {
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--cs-gray-50);
    border-radius: var(--cs-radius-md);
    font-size: 14px;
    color: var(--cs-gray-600);
}

.price-note.increase {
    background: var(--cs-error-bg);
    color: #991b1b;
}

.price-note.decrease {
    background: var(--cs-success-bg);
    color: #065f46;
}

/* Verification Section */
.verification-section {
    background: var(--cs-bg-primary);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-sm);
    padding: 24px;
}

.verification-form {
    margin-top: 16px;
}

.phone-display {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    background: var(--cs-gray-50);
    border-radius: var(--cs-radius-md);
    margin-bottom: 16px;
}

.phone-label {
    font-size: 12px;
    color: var(--cs-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.phone-number {
    font-size: 16px;
    font-weight: 600;
    color: var(--cs-gray-800);
    letter-spacing: 1px;
}

.code-input-group {
    margin-top: 24px;
    text-align: center;
}

.code-input-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--cs-gray-700);
    margin-bottom: 16px;
}

.code-inputs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.code-digit {
    width: 56px;
    height: 64px;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    border: 2px solid var(--cs-gray-300);
    border-radius: var(--cs-radius-md);
    transition: border-color var(--cs-transition-normal);
}

.code-digit:focus {
    outline: none;
    border-color: var(--cs-primary);
}

.code-digit.error {
    border-color: var(--cs-error);
}

.code-digit.success {
    border-color: var(--cs-success);
}

.code-expires {
    font-size: 13px;
    color: var(--cs-gray-500);
    margin-bottom: 16px;
}

.verification-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-radius: var(--cs-radius-md);
    font-size: 14px;
    font-weight: 500;
    margin-top: 16px;
}

.verification-status.success {
    background: var(--cs-success-bg);
    color: #065f46;
}

.verification-status.error {
    background: var(--cs-error-bg);
    color: #991b1b;
}

/* Form Actions */
.gp-form-actions {
    display: flex;
    gap: 16px;
    margin-top: 24px;
}

.gp-form-actions .gp-btn {
    flex: 1;
    padding: 14px 24px;
}

/* Success Summary */
.success-summary {
    background: var(--cs-gray-50);
    border-radius: var(--cs-radius-md);
    padding: 20px;
    margin: 24px 0;
    text-align: left;
}

.success-summary .summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
}

.success-summary .summary-row:not(:last-child) {
    border-bottom: 1px solid var(--cs-gray-200);
}

.success-summary .summary-label {
    color: var(--cs-gray-500);
}

.success-summary .summary-value {
    font-weight: 500;
    color: var(--cs-gray-800);
}

/* ========================================
   Button Loading States
   ======================================== */
.gp-btn .gp-btn-loading {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gp-btn-primary .loading-spinner-small {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
}

/* ========================================
   Modify Booking Calendar
   ======================================== */
.gp-calendar-wrapper {
    background: var(--cs-bg-primary);
    border: 1px solid var(--cs-border-primary);
    border-radius: var(--cs-radius-lg);
    padding: 20px;
    margin-bottom: 20px;
}

.gp-calendar-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 16px;
    border-bottom: 1px solid var(--cs-border-primary);
    margin-bottom: 16px;
}

.gp-cal-nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--cs-border-primary);
    background: var(--cs-bg-primary);
    color: var(--cs-text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--cs-transition-normal);
}

.gp-cal-nav-btn:hover {
    background: var(--cs-gray-100);
    border-color: var(--cs-gray-300);
}

.gp-cal-title {
    font-weight: 600;
    font-size: 16px;
    color: var(--cs-text-primary);
}

.gp-calendars-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.gp-calendar-month {
    min-width: 0;
}

.gp-calendar-month-header {
    font-weight: 600;
    font-size: 14px;
    color: var(--cs-text-primary);
    text-align: center;
    padding-bottom: 12px;
}

.gp-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
}

.gp-calendar-weekday {
    font-size: 11px;
    font-weight: 600;
    color: var(--cs-text-secondary);
    text-align: center;
    padding: 8px 0;
    text-transform: uppercase;
}

.gp-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.gp-calendar-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--cs-text-primary);
    background: transparent;
    border: none;
    border-radius: var(--cs-radius-md);
    cursor: pointer;
    transition: all var(--cs-transition-normal);
    padding: 4px;
    position: relative;
}

.gp-calendar-day:hover:not(.disabled):not(.blocked):not(.empty) {
    background: var(--cs-info-bg);
    color: var(--cs-primary);
}

.gp-calendar-day.empty {
    cursor: default;
}

.gp-calendar-day.disabled {
    color: var(--cs-gray-300);
    cursor: not-allowed;
}

.gp-calendar-day.blocked {
    color: var(--cs-gray-300);
    cursor: not-allowed;
    text-decoration: line-through;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 3px,
        var(--cs-gray-100) 3px,
        var(--cs-gray-100) 6px
    );
}

.gp-calendar-day.selected {
    background: var(--cs-primary);
    color: #fff;
}

.gp-calendar-day.selected:hover {
    background: var(--cs-primary-hover);
    color: #fff;
}

.gp-calendar-day.selected.check-in {
    border-radius: var(--cs-radius-md) 0 0 var(--cs-radius-md);
}

.gp-calendar-day.selected.check-out {
    border-radius: 0 var(--cs-radius-md) var(--cs-radius-md) 0;
}

.gp-calendar-day.in-range {
    background: var(--cs-info-bg);
    color: var(--cs-primary);
    border-radius: 0;
}

.gp-calendar-day.current-booking {
    background: var(--cs-warning-bg);
    border: 2px dashed var(--cs-warning);
}

.gp-calendar-day.current-booking:not(.disabled) {
    cursor: pointer;
}

.gp-calendar-day .day-num {
    font-weight: 500;
    line-height: 1;
}

.gp-calendar-day .day-price {
    font-size: 9px;
    font-weight: 400;
    color: var(--cs-text-secondary);
    margin-top: 2px;
}

.gp-calendar-day.selected .day-price,
.gp-calendar-day.in-range .day-price {
    color: inherit;
    opacity: 0.8;
}

.gp-calendar-day.blocked .day-price,
.gp-calendar-day.disabled .day-price {
    display: none;
}

/* Calendar Legend */
.gp-calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--cs-border-primary);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 4px;
}

.legend-color.available {
    background: var(--cs-bg-primary);
    border: 1px solid var(--cs-border-primary);
}

.legend-color.blocked {
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 2px,
        var(--cs-gray-200) 2px,
        var(--cs-gray-200) 4px
    );
    border: 1px solid var(--cs-gray-200);
}

.legend-color.current {
    background: var(--cs-warning-bg);
    border: 2px dashed var(--cs-warning);
}

.legend-color.selected {
    background: var(--cs-primary);
}

.legend-label {
    font-size: 12px;
    color: var(--cs-text-secondary);
}

/* Selected Dates Display */
.selected-dates-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px;
    background: var(--cs-gray-50);
    border-radius: var(--cs-radius-lg);
    margin-bottom: 16px;
}

.selected-date-item {
    text-align: center;
}

.selected-date-item .date-label {
    display: block;
    font-size: 12px;
    color: var(--cs-text-secondary);
    margin-bottom: 4px;
}

.selected-date-item .date-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--cs-text-primary);
}

.selected-dates-display .date-arrow {
    color: var(--cs-gray-400);
}

/* Price note estimate style */
.price-note.estimate {
    font-style: italic;
}

/* Section description */
.section-desc {
    font-size: 14px;
    color: var(--cs-text-secondary);
    margin-bottom: 16px;
}

/* ========================================
   Chat-Style Messages
   ======================================== */
.email-thread {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    max-height: 500px;
    overflow-y: auto;
}

.email-date-separator {
    text-align: center;
    padding: 8px 0;
}

.email-date-separator span {
    display: inline-block;
    padding: 4px 12px;
    background: var(--cs-gray-100);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--cs-text-secondary);
}

.chat-message {
    display: flex;
    flex-direction: column;
}

.chat-message-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    max-width: 85%;
}

.chat-message.incoming .chat-message-row {
    margin-right: auto;
}

.chat-message.outgoing .chat-message-row {
    margin-left: auto;
    flex-direction: row-reverse;
}

.chat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
}

.chat-bubble-wrapper {
    flex: 1;
    min-width: 0;
}

.chat-sender-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.chat-message.outgoing .chat-sender-info {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

.chat-sender-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--cs-text-primary);
}

.chat-timestamp {
    font-size: 11px;
    color: var(--cs-text-secondary);
}

.chat-automated-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--cs-gray-500);
    background: var(--cs-gray-100);
    padding: 2px 8px;
    border-radius: 10px;
}

.chat-automated-badge svg {
    opacity: 0.7;
}

.chat-bubble {
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
}

.chat-message.incoming .chat-bubble {
    background: var(--cs-gray-100);
    color: var(--cs-text-primary);
    border-top-left-radius: 4px;
}

.chat-message.outgoing .chat-bubble {
    background: var(--cs-primary);
    color: #fff;
    border-top-right-radius: 4px;
}

.chat-message.automated .chat-bubble {
    background: var(--cs-gray-50);
    border: 1px dashed var(--cs-gray-200);
    color: var(--cs-text-secondary);
    font-style: italic;
}

/* Compose form styling */
.thread-compose {
    border-top: 1px solid var(--cs-border-primary);
    padding: 16px 20px;
    background: var(--cs-bg-primary);
}

.compose-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.compose-header {
    display: none;
}

.compose-body textarea {
    width: 100%;
    min-height: 80px;
    padding: 12px 16px;
    border: 1px solid var(--cs-border-primary);
    border-radius: var(--cs-radius-lg);
    font-family: var(--cs-font-sans);
    font-size: 14px;
    resize: vertical;
    transition: border-color var(--cs-transition-normal);
}

.compose-body textarea:focus {
    outline: none;
    border-color: var(--cs-primary);
    box-shadow: 0 0 0 3px var(--cs-info-bg);
}

.compose-body textarea::placeholder {
    color: var(--cs-text-secondary);
}

.compose-footer {
    display: flex;
    justify-content: flex-end;
}

.compose-footer .gp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Thread booking card styling */
.thread-booking-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--cs-gray-50);
    border-radius: var(--cs-radius-lg);
    margin-bottom: 16px;
}

.booking-card-image {
    width: 64px;
    height: 64px;
    border-radius: var(--cs-radius-md);
    overflow: hidden;
    background: var(--cs-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cs-gray-400);
    flex-shrink: 0;
}

.booking-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.booking-card-info h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--cs-text-primary);
    margin: 0 0 4px;
}

.booking-card-info p {
    font-size: 13px;
    color: var(--cs-text-secondary);
    margin: 0;
}

/* Thread header styling */
.thread-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.thread-header-left {
    flex-shrink: 0;
}

.thread-header-info {
    flex: 1;
    text-align: center;
    min-width: 0;
}

.thread-header-info .gp-content-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.thread-header-actions {
    flex-shrink: 0;
}

.btn-view-reservation {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--cs-primary);
    background: var(--cs-info-bg);
    border-radius: var(--cs-radius-md);
    text-decoration: none;
    transition: all var(--cs-transition-normal);
}

.btn-view-reservation:hover {
    background: var(--cs-primary);
    color: #fff;
}

/* ========================================
   Messages Inbox - 3 Panel Layout
   ======================================== */
.messages-inbox-layout {
    display: grid;
    grid-template-columns: 300px 1fr 320px;
    gap: 0;
    height: 100vh;
    background: var(--cs-bg-primary);
    overflow: hidden;
}

/* Make portal content fill height for messages view */
.gp-portal-content:has(.messages-inbox-layout) {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.gp-portal-content:has(.messages-inbox-layout) .messages-inbox-layout {
    flex: 1;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
}

/* Hide mobile header when messages inbox is visible on desktop */
@media (min-width: 1025px) {
    body.cloudstay-guest-portal:has(.messages-inbox-layout) .mobile-header {
        display: none !important;
    }
}

/* Left Panel - Conversations List */
.inbox-conversations-panel {
    border-right: 1px solid var(--cs-border-primary);
    display: flex;
    flex-direction: column;
    background: var(--cs-bg-primary);
}

.conversations-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--cs-border-primary);
}

.conversations-header h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--cs-text-primary);
    margin: 0;
}

.conversations-actions {
    display: flex;
    gap: 8px;
}

.gp-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--cs-radius-md);
    border: none;
    background: transparent;
    color: var(--cs-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--cs-transition-normal);
}

.gp-icon-btn:hover {
    background: var(--cs-gray-100);
    color: var(--cs-text-primary);
}

.conversations-search {
    padding: 12px 16px;
    border-bottom: 1px solid var(--cs-border-primary);
}

.conversations-search input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--cs-border-primary);
    border-radius: var(--cs-radius-md);
    font-size: 13px;
    font-family: var(--cs-font-sans);
}

.conversations-search input:focus {
    outline: none;
    border-color: var(--cs-primary);
}

.conversations-list {
    flex: 1;
    overflow-y: auto;
}

.conversations-loading,
.conversations-empty,
.conversations-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 20px;
    color: var(--cs-text-secondary);
    font-size: 13px;
}

.conversation-item {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--cs-gray-100);
    transition: background var(--cs-transition-normal);
}

.conversation-item:hover {
    background: var(--cs-gray-50);
}

.conversation-item.active {
    background: var(--cs-info-bg);
    border-left: 3px solid var(--cs-primary);
}

.conversation-item.unread {
    background: rgba(37, 99, 235, 0.05);
}

.conversation-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
}

.conversation-content {
    flex: 1;
    min-width: 0;
}

.conversation-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2px;
}

.conversation-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--cs-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-time {
    font-size: 11px;
    color: var(--cs-text-secondary);
    white-space: nowrap;
}

.conversation-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.conversation-status {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--cs-gray-100);
    color: var(--cs-text-secondary);
}

.conversation-status.status-inquiry {
    background: var(--cs-info-bg);
    color: var(--cs-primary);
}

.conversation-status.status-expired {
    background: var(--cs-error-bg);
    color: var(--cs-error);
}

.conversation-status.status-active {
    background: var(--cs-success-bg);
    color: var(--cs-success);
}

.conversation-date {
    font-size: 11px;
    color: var(--cs-text-secondary);
}

.conversation-preview {
    font-size: 13px;
    color: var(--cs-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-item.unread .conversation-preview {
    color: var(--cs-text-primary);
    font-weight: 500;
}

.conversation-indicator {
    display: flex;
    align-items: center;
}

.unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cs-primary);
    display: none;
}

/* Center Panel - Thread */
.inbox-thread-panel {
    display: flex;
    flex-direction: column;
    background: var(--cs-bg-primary);
    border-right: 1px solid var(--cs-border-primary);
    overflow: hidden;
    min-height: 0;
}

.thread-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--cs-text-secondary);
}

.thread-empty-state .empty-icon {
    color: var(--cs-gray-300);
    margin-bottom: 16px;
}

.thread-empty-state h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--cs-text-primary);
    margin: 0 0 8px;
}

.thread-empty-state p {
    font-size: 14px;
    margin: 0;
}

.thread-panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--cs-border-primary);
    background: var(--cs-bg-primary);
}

.thread-contact {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.contact-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--cs-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
}

.contact-info {
    display: flex;
    flex-direction: column;
}

.contact-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--cs-text-primary);
}

.contact-channel {
    font-size: 12px;
    color: var(--cs-text-secondary);
}

.thread-status-wrapper select {
    padding: 6px 12px;
    border: 1px solid var(--cs-border-primary);
    border-radius: var(--cs-radius-md);
    font-size: 13px;
    font-family: var(--cs-font-sans);
    background: var(--cs-bg-primary);
    cursor: pointer;
}

.thread-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.thread-loading,
.thread-error,
.thread-no-messages {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--cs-text-secondary);
    font-size: 14px;
}

.thread-date-separator {
    text-align: center;
    padding: 8px 0;
}

.thread-date-separator span {
    display: inline-block;
    padding: 4px 12px;
    background: var(--cs-gray-100);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--cs-text-secondary);
}

.new-inquiry-label {
    background: var(--cs-info-bg);
    color: var(--cs-primary);
}

.inbox-message {
    display: flex;
    gap: 12px;
    max-width: 85%;
}

.inbox-message.incoming {
    align-self: flex-start;
}

.inbox-message.outgoing {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.inbox-message .message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
}

.inbox-message .message-content {
    flex: 1;
    min-width: 0;
}

.inbox-message .message-bubble {
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
}

.inbox-message.incoming .message-bubble {
    background: var(--cs-gray-100);
    color: var(--cs-text-primary);
    border-top-left-radius: 4px;
}

.inbox-message.outgoing .message-bubble {
    background: var(--cs-primary);
    color: #fff;
    border-top-right-radius: 4px;
}

.inbox-message.automated .message-bubble {
    background: var(--cs-gray-50);
    border: 1px dashed var(--cs-gray-200);
    color: var(--cs-text-secondary);
}

.inbox-message .message-meta {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--cs-text-secondary);
}

.inbox-message.outgoing .message-meta {
    justify-content: flex-end;
}

.inbox-message .message-sender-name {
    font-weight: 500;
}

.inbox-message .message-automated-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 11px;
    color: var(--cs-text-secondary);
}

/* Interactive Card Messages */
.inbox-message.card-message {
    max-width: 90%;
}

.interactive-card {
    border: 1px solid var(--gp-card-border, var(--cs-border-primary));
    border-radius: var(--gp-card-radius, 12px);
    overflow: hidden;
    background: var(--gp-card-bg, var(--cs-bg-primary));
}

.interactive-card .card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--cs-gray-50);
    border-bottom: 1px solid var(--cs-border-primary);
}

.interactive-card .card-type-icon {
    display: flex;
    align-items: center;
    color: var(--cs-text-secondary);
}

.interactive-card .card-type-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--cs-text-primary);
    flex: 1;
}

.interactive-card .card-status-badge {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    padding: 2px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.interactive-card .card-details {
    padding: 12px 16px;
}

.interactive-card .card-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--cs-gray-100);
    font-size: 13px;
}

.interactive-card .card-detail-row:last-child {
    border-bottom: none;
}

.interactive-card .card-detail-row.full {
    flex-direction: column;
    gap: 4px;
}

.interactive-card .card-label {
    color: var(--cs-text-secondary);
    font-weight: 500;
}

.interactive-card .card-value {
    color: var(--cs-text-primary);
    font-weight: 500;
}

.interactive-card .card-response-note {
    padding: 10px 16px;
    background: var(--cs-gray-50);
    border-top: 1px solid var(--cs-border-primary);
    font-size: 12px;
    color: var(--cs-text-secondary);
}

/* Interactive Card Status Colors */
.interactive-card .card-status-badge.status-pending {
    background: #f59e0b;
}
.interactive-card .card-status-badge.status-approved {
    background: #10b981;
}
.interactive-card .card-status-badge.status-declined {
    background: #ef4444;
}
.interactive-card .card-status-badge.status-more-info {
    background: #3b82f6;
}

/* Interactive Card - Type-specific header colors */
.interactive-card[data-type="cancel-request"] .card-header {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border-bottom-color: #fecaca;
}
.interactive-card[data-type="cancel-request"] .card-type-icon {
    color: #dc2626;
}
.interactive-card[data-type="modify-request"] .card-header {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-bottom-color: #bfdbfe;
}
.interactive-card[data-type="modify-request"] .card-type-icon {
    color: #2563eb;
}
.interactive-card[data-type="refund-request"] .card-header {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border-bottom-color: #bbf7d0;
}
.interactive-card[data-type="refund-request"] .card-type-icon {
    color: #16a34a;
}

/* ========================================
   Action Form Modal Styles
   ======================================== */

/* Form sections */
.action-form-section {
    margin-bottom: 20px;
}
.action-form-section:last-child {
    margin-bottom: 0;
}

.action-form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--cs-text-primary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.action-form-label .optional-tag {
    font-weight: 400;
    font-size: 11px;
    color: var(--cs-text-secondary);
    text-transform: lowercase;
    letter-spacing: 0;
}

/* Date Pickers */
.action-date-pickers {
    display: flex;
    align-items: center;
    gap: 8px;
}

.action-date-field {
    flex: 1;
    position: relative;
}

.action-date-field .action-date-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cs-text-secondary);
    display: flex;
    pointer-events: none;
    z-index: 1;
}

.action-date-input {
    padding-left: 36px !important;
    font-size: 14px !important;
    height: 44px;
    cursor: pointer;
}

.action-date-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
}

.action-date-label {
    display: block;
    font-size: 11px;
    color: var(--cs-text-secondary);
    margin-top: 4px;
    padding-left: 2px;
}

.action-date-separator {
    display: flex;
    align-items: center;
    color: var(--cs-text-secondary);
    padding-top: 0;
    flex-shrink: 0;
}

/* Guest Selector */
.action-guest-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
}

.action-guest-input {
    width: 70px !important;
    text-align: center;
    font-size: 18px !important;
    font-weight: 600;
    background: var(--cs-gray-50) !important;
    -moz-appearance: textfield;
}

.action-guest-input::-webkit-inner-spin-button,
.action-guest-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Textarea */
.action-textarea {
    resize: vertical;
    min-height: 80px;
    font-size: 14px !important;
    line-height: 1.5;
}

/* Amount Input */
.action-amount-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.action-amount-prefix {
    position: absolute;
    left: 14px;
    font-size: 16px;
    font-weight: 600;
    color: var(--cs-text-secondary);
    pointer-events: none;
}

.action-amount-input {
    padding-left: 30px !important;
    font-size: 16px !important;
    font-weight: 600;
    height: 44px;
}

/* Message Attachments */
.message-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.message-attachments .attachment-image {
    display: block;
    max-width: 200px;
    border-radius: 8px;
    overflow: hidden;
}

.message-attachments .attachment-image img {
    width: 100%;
    height: auto;
    display: block;
}

.message-attachments .attachment-file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--cs-border-primary);
    border-radius: 8px;
    font-size: 12px;
    color: var(--cs-text-primary);
    text-decoration: none;
    transition: background var(--cs-transition-normal);
}

.message-attachments .attachment-file:hover {
    background: var(--cs-gray-50);
}

/* Compose Attachment Preview */
.compose-attachments-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 16px;
    border-top: 1px solid var(--cs-border-primary);
    background: var(--cs-gray-50);
}

.attachment-preview-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 72px;
    padding: 6px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid var(--cs-border-primary);
}

.attachment-preview-item img {
    width: 60px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
}

.attachment-file-icon {
    width: 60px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: var(--cs-text-secondary);
    background: var(--cs-gray-100);
    border-radius: 4px;
}

.attachment-preview-name {
    font-size: 10px;
    color: var(--cs-text-secondary);
    text-align: center;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.attachment-remove-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: var(--cs-error);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.attachment-remove-btn:hover {
    background: #dc2626;
}

/* Compose actions layout */
.compose-left-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.compose-right-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.attachment-btn {
    color: var(--cs-text-secondary);
    transition: color 0.15s ease;
}

.attachment-btn:hover {
    color: var(--cs-text-primary);
}

/* Thread Quick Actions */
.thread-quick-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid var(--cs-border-primary);
    flex-wrap: wrap;
}

.quick-action-btn {
    padding: 8px 16px;
    border: 1px solid var(--cs-border-primary);
    border-radius: 20px;
    background: var(--cs-bg-primary);
    font-size: 13px;
    color: var(--cs-text-secondary);
    cursor: pointer;
    transition: all var(--cs-transition-normal);
}

.quick-action-btn:hover {
    background: var(--cs-gray-50);
    color: var(--cs-text-primary);
}

.quick-action-btn.ai-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: #fff;
}

.quick-action-btn.ai-btn:hover {
    opacity: 0.9;
}

.quick-action-btn.ai-btn .dismiss-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    margin-left: 4px;
}

/* Compose */
.thread-compose-wrapper {
    padding: 16px 20px;
    border-top: 1px solid var(--cs-border-primary);
    background: var(--cs-bg-primary);
}

.inbox-compose-form .compose-input-wrapper textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--cs-border-primary);
    border-radius: var(--cs-radius-lg);
    font-family: var(--cs-font-sans);
    font-size: 14px;
    resize: none;
    min-height: 60px;
}

.inbox-compose-form .compose-input-wrapper textarea:focus {
    outline: none;
    border-color: var(--cs-primary);
}

.inbox-compose-form .compose-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
}

.inbox-compose-form .compose-channel {
    font-size: 13px;
    color: var(--cs-text-secondary);
}

.inbox-compose-form .channel-name {
    font-weight: 500;
    color: var(--cs-text-primary);
}

.inbox-compose-form .send-btn {
    min-width: 80px;
}

/* Right Panel - Booking Details */
.inbox-details-panel {
    display: flex;
    flex-direction: column;
    background: var(--cs-gray-50);
    overflow-y: auto;
}

.details-empty-state {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--cs-text-secondary);
    font-size: 14px;
    text-align: center;
}

.booking-details-content {
    padding: 20px;
}

.details-primary-action {
    margin-bottom: 20px;
}

.details-primary-action .gp-btn-block {
    width: 100%;
    justify-content: center;
}

.details-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.details-info-grid .info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.details-info-grid .info-item.full-width {
    grid-column: span 2;
}

.details-info-grid .info-label {
    font-size: 11px;
    color: var(--cs-text-secondary);
    text-transform: uppercase;
}

.details-info-grid .info-value {
    font-size: 13px;
    color: var(--cs-text-primary);
    font-weight: 500;
}

.section-label {
    display: block;
    font-size: 11px;
    color: var(--cs-text-secondary);
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* Listing Card */
.details-listing {
    margin-bottom: 20px;
}

.cloudstay-guest-portal .listing-card {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--cs-bg-primary);
    border-radius: var(--cs-radius-md);
}

.listing-image {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--cs-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cs-gray-400);
    flex-shrink: 0;
}

.listing-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.listing-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.listing-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--cs-text-primary);
    margin-bottom: 4px;
}

.listing-address {
    font-size: 11px;
    color: var(--cs-text-secondary);
    line-height: 1.3;
}

/* Dates */
.details-dates {
    margin-bottom: 20px;
}

.date-row {
    display: flex;
    gap: 12px;
}

.date-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.date-item.nights {
    flex: 0 0 auto;
    text-align: center;
}

.date-label {
    font-size: 11px;
    color: var(--cs-text-secondary);
}

.date-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--cs-text-primary);
}

.date-time {
    font-size: 11px;
    color: var(--cs-text-secondary);
}

/* Policy */
.details-policy {
    margin-bottom: 20px;
}

.policy-value {
    font-size: 13px;
    color: var(--cs-text-primary);
}

/* Mini Calendar */
.details-calendar {
    margin-bottom: 20px;
    background: var(--cs-bg-primary);
    border-radius: var(--cs-radius-md);
    padding: 12px;
}

.mini-calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.mini-cal-nav {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--cs-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mini-cal-nav:hover {
    background: var(--cs-gray-100);
}

.mini-cal-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--cs-text-primary);
}

.mini-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
}

.mini-cal-weekdays span {
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    color: var(--cs-text-secondary);
    padding: 4px 0;
}

.mini-cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.mini-cal-days span {
    text-align: center;
    font-size: 12px;
    padding: 6px 2px;
    border-radius: 4px;
    color: var(--cs-text-primary);
}

.mini-cal-days span.empty {
    color: transparent;
}

.mini-cal-days span.in-range {
    background: var(--cs-info-bg);
    color: var(--cs-primary);
}

.mini-cal-days span.check-in,
.mini-cal-days span.check-out {
    background: var(--cs-primary);
    color: #fff;
    font-weight: 600;
}

.mini-cal-days span.unavailable {
    background: var(--cs-gray-100);
    color: var(--cs-gray-400);
    text-decoration: line-through;
    position: relative;
}

.mini-cal-days span.unavailable::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 15%;
    right: 15%;
    height: 1px;
    background: var(--cs-gray-400);
}

.mini-cal-days span.past {
    color: var(--cs-gray-300);
}

.mini-cal-days span.past.unavailable {
    color: var(--cs-gray-300);
}

/* Payment */
.details-payment {
    margin-bottom: 20px;
}

.payment-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--cs-border-primary);
}

.payment-row:last-child {
    border-bottom: none;
}

.payment-label {
    font-size: 13px;
    color: var(--cs-text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.payment-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--cs-text-primary);
}

/* Reference */
.details-reference {
    margin-bottom: 20px;
}

.reference-value {
    font-size: 13px;
    color: var(--cs-text-primary);
    font-family: monospace;
}

/* Extra Info */
.details-extra {
    margin-bottom: 20px;
}

.extra-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.edit-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--cs-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.edit-btn:hover {
    background: var(--cs-gray-100);
}

.extra-content {
    background: var(--cs-bg-primary);
    border-radius: var(--cs-radius-md);
    padding: 12px;
}

.extra-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0;
    border-bottom: 1px solid var(--cs-gray-100);
}

.extra-item:last-child {
    border-bottom: none;
}

.extra-label {
    font-size: 11px;
    color: var(--cs-text-secondary);
}

.extra-value {
    font-size: 13px;
    color: var(--cs-text-primary);
}

/* Quick action marked state */
.quick-action-btn.marked {
    background: var(--cs-success-bg);
    border-color: var(--cs-success);
    color: var(--cs-success);
}

/* ========================================
   Modal Styles
   ======================================== */
.gp-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.gp-modal {
    background: var(--cs-bg-primary);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-lg);
    max-width: 500px;
    width: 100%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.2s ease;
}

.gp-modal.gp-modal-wide {
    max-width: 760px;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gp-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--cs-border-primary);
}

.gp-modal-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--cs-text-primary);
    margin: 0;
}

.gp-modal-header h3 svg {
    color: var(--cs-primary);
}

.modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--cs-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--cs-transition-normal);
}

.modal-close:hover {
    background: var(--cs-gray-100);
    color: var(--cs-text-primary);
}

.gp-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.summary-content {
    font-size: 14px;
    line-height: 1.6;
    color: var(--cs-text-primary);
    background: var(--cs-gray-50);
    padding: 16px;
    border-radius: var(--cs-radius-md);
    border-left: 3px solid var(--cs-primary);
}

.gp-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--cs-border-primary);
}

.gp-modal-footer .gp-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ========================================
   Responsive Design
   ======================================== */
@media (max-width: 1200px) {
    .messages-inbox-layout {
        grid-template-columns: 280px 1fr 280px;
    }
}

@media (max-width: 992px) {
    .messages-inbox-layout {
        grid-template-columns: 1fr;
        height: 100vh;
    }

    .inbox-conversations-panel {
        border-right: none;
        border-bottom: 1px solid var(--cs-border-primary);
        max-height: 40vh;
    }

    .inbox-thread-panel {
        border-right: none;
        min-height: 35vh;
        flex: 1;
    }

    .inbox-details-panel {
        border-top: 1px solid var(--cs-border-primary);
        max-height: 25vh;
        overflow-y: auto;
    }

    .gp-portal-content:has(.messages-inbox-layout) {
        height: 100vh;
        overflow: hidden;
    }
}

@media (max-width: 768px) {
    .portal-container {
        padding: 0 16px;
    }

    .guest-portal-main {
        padding: 24px 0;
    }

    .page-header h1 {
        font-size: 24px;
    }

    .reservations-grid {
        grid-template-columns: 1fr;
    }

    /* Detail Page */
    .carousel-track img {
        height: 280px;
    }

    .property-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .details-grid {
        flex-direction: column;
        gap: 16px;
    }

    .detail-arrow {
        transform: rotate(90deg);
        align-self: center;
    }

    .payment-overview {
        grid-template-columns: 1fr;
    }

    .deposit-tracker {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .deposit-status-tracker {
        width: 100%;
    }

    .actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .host-card {
        flex-direction: column;
        text-align: center;
    }

    .host-card .host-info {
        align-items: center;
    }

    /* Gallery Modal */
    .gallery-modal-content {
        padding: 60px 16px;
    }

    .gallery-nav {
        width: 44px;
        height: 44px;
    }

    .gallery-prev {
        left: 8px;
    }

    .gallery-next {
        right: 8px;
    }

    /* Modify Page */
    .date-pickers {
        grid-template-columns: 1fr;
    }

    .code-digit {
        width: 48px;
        height: 56px;
        font-size: 20px;
    }

    .gp-form-actions {
        flex-direction: column;
    }

    /* Wide modal responsive */
    .gp-modal.gp-modal-wide {
        max-width: 100%;
    }

    /* Calendar responsive */
    .gp-calendars-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .gp-calendar-wrapper {
        padding: 16px;
    }

    .gp-calendar-day {
        font-size: 13px;
    }

    .gp-calendar-day .day-price {
        font-size: 8px;
    }

    .gp-calendar-legend {
        gap: 12px;
    }

    .selected-dates-display {
        flex-direction: column;
        gap: 8px;
    }

    .selected-dates-display .date-arrow {
        transform: rotate(90deg);
    }

    /* Chat responsive */
    .email-thread {
        padding: 16px;
        max-height: 400px;
    }

    .chat-message-row {
        max-width: 95%;
    }

    .chat-avatar {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .chat-bubble {
        padding: 10px 14px;
        font-size: 13px;
    }

    .thread-content-header {
        flex-direction: column;
        text-align: center;
    }

    .thread-header-info {
        order: -1;
    }

    .thread-header-actions {
        width: 100%;
    }

    .btn-view-reservation {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .header-container {
        padding: 0 16px;
    }

    .dates-info {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .date-arrow {
        transform: rotate(90deg);
        align-self: center;
    }

    .actions-grid {
        grid-template-columns: 1fr;
    }

    .code-inputs {
        gap: 8px;
    }

    .code-digit {
        width: 44px;
        height: 52px;
        font-size: 18px;
    }

    .summary-details {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
    .guest-portal-header,
    .guest-portal-footer,
    .carousel-nav,
    .view-gallery-btn,
    .modification-section,
    .quick-actions-section,
    .gp-form-actions {
        display: none !important;
    }

    .guest-portal-wrapper {
        min-height: auto;
    }

    .guest-portal-main {
        padding: 0;
    }

    .reservation-card,
    .booking-details-card,
    .payment-section,
    .host-card {
        box-shadow: none;
        border: 1px solid var(--cs-gray-200);
    }
}

/* ========================================
   Guest Login Page
   ======================================== */
.cloudstay-guest-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    font-family: var(--cs-font-sans);
    font-size: 16px;
    line-height: 1.5;
    color: var(--cs-text-primary);
    background: var(--csg-gl-bg, linear-gradient(135deg, var(--csg-gl-gradient-start, #667eea) 0%, var(--csg-gl-gradient-end, #764ba2) 100%));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.cloudstay-guest-login * {
    box-sizing: border-box;
}

.login-container {
    width: 100%;
    max-width: 420px;
}

.login-logo {
    text-align: center;
    margin-bottom: 32px;
}

.login-logo img {
    max-height: 48px;
    width: auto;
}

.login-logo h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--cs-gray-900);
    margin: 0;
}

.login-card {
    background: var(--cs-bg-primary);
    border-radius: var(--cs-radius-xl);
    box-shadow: var(--cs-shadow-lg);
    padding: 40px;
}

.login-header {
    text-align: center;
    margin-bottom: 32px;
}

.login-header h2 {
    font-size: 22px;
    font-weight: 600;
    color: var(--cs-gray-900);
    margin: 0 0 8px 0;
}

.login-header p {
    font-size: 15px;
    color: var(--cs-gray-500);
    margin: 0;
}

/* Alert Messages */
.cloudstay-guest-login .alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: var(--cs-radius-md);
    margin-bottom: 24px;
    font-size: 14px;
}

.cloudstay-guest-login .alert svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.cloudstay-guest-login .alert-error {
    background: var(--cs-error-bg);
    color: #991b1b;
}

.cloudstay-guest-login .alert-success {
    background: var(--cs-success-bg);
    color: #065f46;
}

/* Login Form */
.gp-login-form .gp-form-group {
    margin-bottom: 24px;
}

.gp-login-form label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--cs-gray-700);
    margin-bottom: 8px;
}

.gp-login-form .input-wrapper {
    position: relative;
}

.gp-login-form .input-wrapper svg {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cs-gray-400);
}

.gp-login-form .input-wrapper input {
    width: 100%;
    padding: 14px 16px 14px 48px;
    font-size: 15px;
    font-family: inherit;
    border: 1px solid var(--cs-gray-300);
    border-radius: var(--cs-radius-md);
    transition: border-color var(--cs-transition-normal), box-shadow var(--cs-transition-normal);
}

.gp-login-form .input-wrapper input:focus {
    outline: none;
    border-color: var(--cs-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.gp-login-form .input-wrapper input::placeholder {
    color: var(--cs-gray-400);
}

/* Login Button - uses base .gp-btn classes, only login-specific overrides here */
.cloudstay-guest-login .gp-btn {
    padding: 14px 24px;
}

.cloudstay-guest-login .btn-full {
    width: 100%;
}

.cloudstay-guest-login .gp-btn-loading {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cloudstay-guest-login .spinner {
    animation: spin 0.8s linear infinite;
}

/* Magic Link Success */
.magic-link-success {
    text-align: center;
    padding: 16px 0;
}

.magic-link-success .success-icon {
    color: var(--cs-success);
    margin-bottom: 24px;
}

.magic-link-success h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--cs-gray-900);
    margin: 0 0 12px 0;
}

.magic-link-success p {
    font-size: 15px;
    color: var(--cs-gray-600);
    margin: 0 0 8px 0;
}

.magic-link-success .sent-email {
    font-weight: 600;
    color: var(--cs-gray-800);
    word-break: break-all;
}

.magic-link-success .hint {
    font-size: 14px;
    color: var(--cs-gray-500);
    margin-top: 16px;
    margin-bottom: 24px;
}

/* Login Footer */
.login-footer {
    margin-top: 24px;
    text-align: center;
}

.login-footer p {
    font-size: 13px;
    color: var(--cs-gray-500);
    margin: 0;
}

.login-footer a {
    color: var(--cs-primary);
    text-decoration: none;
}

.login-footer a:hover {
    text-decoration: underline;
}

/* ========================================
   Portal Header (updated structure)
   ======================================== */
.portal-header {
    background: var(--cs-bg-primary);
    border-bottom: 1px solid var(--cs-gray-200);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-left {
    display: flex;
    align-items: center;
}

.portal-logo {
    height: 36px;
    width: auto;
}

.portal-site-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--cs-gray-900);
}

.header-right {
    display: flex;
    align-items: center;
}

/* User Menu */
.user-menu {
    position: relative;
}

.user-menu-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid var(--cs-gray-200);
    border-radius: 9999px;
    cursor: pointer;
    transition: all var(--cs-transition-normal);
    font-family: inherit;
}

.user-menu-trigger:hover {
    background: var(--cs-gray-50);
    border-color: var(--cs-gray-300);
}

.user-avatar {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cs-info-bg);
    color: var(--cs-primary);
    border-radius: 50%;
    font-size: 14px;
    font-weight: 600;
}

.user-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--cs-gray-700);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 220px;
    background: var(--cs-bg-primary);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-lg);
    border: 1px solid var(--cs-gray-200);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--cs-transition-normal);
    z-index: 200;
}

.user-menu-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-menu-dropdown .menu-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--cs-gray-100);
}

.user-menu-dropdown .user-email {
    font-size: 13px;
    color: var(--cs-gray-500);
    word-break: break-all;
}

.user-menu-dropdown .menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--cs-gray-700);
    background: none;
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--cs-transition-normal);
    font-family: inherit;
}

.user-menu-dropdown .menu-item:hover {
    background: var(--cs-gray-50);
}

.user-menu-dropdown .menu-item svg {
    color: var(--cs-gray-400);
}

/* ========================================
   Portal Main & Footer
   ======================================== */
.portal-main {
    flex: 1;
    padding: 32px 0;
}

.portal-footer {
    background: var(--cs-bg-primary);
    border-top: 1px solid var(--cs-gray-200);
    padding: 24px 0;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}

.portal-footer p {
    font-size: 14px;
    color: var(--cs-gray-500);
    margin: 0;
}

/* ========================================
   Booking Success Toast
   ======================================== */
.booking-success-toast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: var(--cs-success);
    color: var(--cs-bg-primary);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-lg);
    z-index: 10000;
    animation: slideDown 0.3s ease, fadeOut 0.3s ease 4.7s forwards;
}

.booking-success-toast svg {
    flex-shrink: 0;
}

.booking-success-toast .toast-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.booking-success-toast .toast-title {
    font-size: 15px;
    font-weight: 600;
}

.booking-success-toast .toast-message {
    font-size: 13px;
    opacity: 0.9;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
}

/* ========================================
   Responsive Login Page
   ======================================== */
@media (max-width: 480px) {
    .cloudstay-guest-login {
        padding: 16px;
    }

    .login-card {
        padding: 32px 24px;
    }

    .login-header h2 {
        font-size: 20px;
    }

    .user-name {
        display: none;
    }
}

/* ========================================
   Email Thread View
   ======================================== */

/* Thread Header */
.thread-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--cs-bg-primary);
    border-bottom: 1px solid var(--cs-gray-200);
    padding: 24px 32px;
}

.thread-header-left {
    flex-shrink: 0;
}

.thread-header-info {
    flex: 1;
    min-width: 0;
}

.thread-header-actions {
    flex-shrink: 0;
}

.btn-view-reservation {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--cs-primary);
    background: var(--cs-info-bg);
    border-radius: var(--cs-radius-md);
    text-decoration: none;
    transition: all var(--cs-transition-normal);
}

.btn-view-reservation:hover {
    background: var(--cs-info-bg);
}

/* Thread Content Body */
.thread-content-body {
    display: flex;
    flex-direction: column;
    max-width: 900px;
    margin: 0 auto;
    padding: 32px;
}

/* Thread Booking Card */
.thread-booking-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--cs-bg-primary);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-sm);
    margin-bottom: 24px;
}

.booking-card-image {
    width: 80px;
    height: 60px;
    background: var(--cs-gray-100);
    border-radius: var(--cs-radius-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--cs-gray-400);
}

.booking-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.booking-card-info h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--cs-gray-900);
    margin: 0 0 4px;
}

.booking-card-info p {
    font-size: 14px;
    color: var(--cs-gray-500);
    margin: 0;
}

/* Email Thread Container */
.email-thread {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
    max-height: 500px;
    overflow-y: auto;
    padding-right: 8px;
}

/* Date Separator */
.email-date-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0;
}

.email-date-separator span {
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 500;
    color: var(--cs-gray-500);
    background: var(--cs-gray-100);
    border-radius: 9999px;
}

/* Email Message Card */
.email-message {
    background: var(--cs-bg-primary);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-sm);
    overflow: hidden;
    border-left: 3px solid var(--cs-gray-200);
}

.email-message.from-guest {
    border-left-color: var(--cs-primary);
}

.email-message.from-host {
    border-left-color: #10b981;
}

.email-message-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--cs-gray-50);
    border-bottom: 1px solid var(--cs-gray-100);
}

.email-sender {
    display: flex;
    align-items: center;
    gap: 12px;
}

.email-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    flex-shrink: 0;
}

.email-avatar.guest {
    background: var(--cs-info-bg);
    color: var(--cs-primary);
}

.email-avatar.host {
    background: #d1fae5;
    color: #059669;
}

.email-sender-info {
    display: flex;
    flex-direction: column;
}

.email-sender-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--cs-gray-900);
}

.email-sender-role {
    font-size: 12px;
    color: var(--cs-gray-500);
}

.email-date {
    font-size: 13px;
    color: var(--cs-gray-500);
}

.email-message-body {
    padding: 20px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--cs-gray-700);
}

/* Compose Form */
.thread-compose {
    margin-top: auto;
}

.compose-form {
    background: var(--cs-bg-primary);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-sm);
    overflow: hidden;
}

.compose-header {
    padding: 12px 20px;
    background: var(--cs-gray-50);
    border-bottom: 1px solid var(--cs-gray-100);
}

.compose-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--cs-gray-700);
}

.compose-body {
    padding: 16px 20px;
}

.compose-body textarea {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    font-size: 15px;
    font-family: inherit;
    line-height: 1.6;
    border: 1px solid var(--cs-gray-200);
    border-radius: var(--cs-radius-md);
    resize: vertical;
    transition: border-color var(--cs-transition-normal), box-shadow var(--cs-transition-normal);
}

.compose-body textarea:focus {
    outline: none;
    border-color: var(--cs-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.compose-body textarea::placeholder {
    color: var(--cs-gray-400);
}

.compose-footer {
    display: flex;
    justify-content: flex-end;
    padding: 12px 20px;
    background: var(--cs-gray-50);
    border-top: 1px solid var(--cs-gray-100);
}

.compose-footer .gp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Thread Empty State */
.thread-empty {
    text-align: center;
    padding: 40px 20px;
}

/* Small Loading Spinner */
.loading-spinner-small {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 0.8s linear infinite;
}

/* Thread View Responsive */
@media (max-width: 768px) {
    .thread-content-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 16px;
    }

    .thread-content-body {
        padding: 20px 16px;
    }

    .thread-header-info {
        order: -1;
        width: 100%;
    }

    .thread-header-actions {
        width: 100%;
    }

    .btn-view-reservation {
        width: 100%;
        justify-content: center;
    }

    .email-message-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .email-date {
        margin-left: 52px;
    }

    .email-thread {
        max-height: 400px;
    }
}

@media (max-width: 480px) {
    .thread-booking-card {
        flex-direction: column;
        text-align: center;
    }

    .booking-card-image {
        width: 100%;
        height: 120px;
    }
}

/* ========================================
   Property Detail View
   ======================================== */

/* Property Header */
.property-detail-page .property-header {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--cs-border-primary);
}

.property-detail-page .property-name {
    font-family: "ivypresto-display", Georgia, serif;
    font-size: 32px;
    font-weight: 600;
    color: var(--cs-gray-900);
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.property-detail-page .property-location {
    font-size: 16px;
    color: var(--cs-gray-600);
    margin-bottom: 16px;
}

.property-detail-page .property-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 14px;
    color: var(--cs-gray-700);
}

.property-detail-page .stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.property-detail-page .stat-item svg {
    width: 18px;
    height: 18px;
    color: var(--cs-gray-500);
    flex-shrink: 0;
}

/* Property Description Section */
.property-description {
    padding: 24px 0;
    border-top: 1px solid var(--cs-border-primary);
}

.property-description h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--cs-gray-900);
    margin: 0 0 16px 0;
}

.description-text {
    font-size: 16px;
    line-height: 1.6;
    color: var(--cs-gray-700);
    white-space: pre-wrap;
}

/* Amenities Section */
.property-amenities {
    padding: 24px 0;
    border-top: 1px solid var(--cs-border-primary);
}

.property-amenities h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--cs-gray-900);
    margin: 0 0 16px 0;
}

.amenities-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 24px;
}

@media (min-width: 768px) {
    .amenities-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.amenity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    font-size: 14px;
    color: var(--cs-gray-700);
}

.amenity-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--cs-gray-500);
}

/* Property Details Section */
.property-details {
    padding: 24px 0;
    border-top: 1px solid var(--cs-border-primary);
    margin-bottom: 40px;
}

.property-details h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--cs-gray-900);
    margin: 0 0 16px 0;
}

.details-list {
    display: grid;
    gap: 16px;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--cs-border-light);
}

.detail-item:last-child {
    border-bottom: none;
}

.detail-label {
    font-size: 14px;
    color: var(--cs-gray-600);
}

.detail-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--cs-gray-900);
}

/* Property Detail - Mobile Responsive */
@media (max-width: 768px) {
    .property-detail-page .property-name {
        font-size: 24px;
    }

    .property-detail-page .property-stats {
        gap: 12px;
        font-size: 13px;
    }

    .property-description h2,
    .property-amenities h2,
    .property-details h2 {
        font-size: 18px;
    }

    .description-text {
        font-size: 15px;
    }

    .amenities-grid {
        gap: 10px 16px;
    }

    .amenity-item {
        font-size: 13px;
    }
}

/* Ensure gallery styles from reservation-detail apply */
.property-detail-page .photos-carousel,
.property-detail-page .carousel-track,
.property-detail-page .carousel-slide,
.property-detail-page .carousel-nav,
.property-detail-page .view-gallery-btn,
.property-detail-page .gallery-modal,
.property-detail-page .gallery-modal-overlay,
.property-detail-page .gallery-modal-content,
.property-detail-page .gallery-close,
.property-detail-page .gallery-counter,
.property-detail-page .gallery-main-image,
.property-detail-page .gallery-nav,
.property-detail-page .gallery-thumbnails {
    /* Inherit all gallery styles from reservation-detail-page */
    /* These are defined earlier in this file and apply to both pages */
}

/* ========================================
   Modify Reservation Modal
   ======================================== */

.modify-details-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    overflow: hidden;
}

.modify-details-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modify-details-modal-content {
    width: 100%;
    max-width: 500px;
    max-height: 85vh;
    background: #fff;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    animation: modifyFadeIn 0.25s ease-out;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    margin: 20px;
}

@keyframes modifyFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Modal Header */
.modify-details-modal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 16px 20px;
    border-bottom: 1px solid var(--cs-gray-200, #e5e7eb);
    flex-shrink: 0;
}

.modify-details-modal-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--cs-gray-900, #111827);
    margin: 0;
}

.modify-details-modal-header .modal-close-btn {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cs-gray-100, #f3f4f6);
    border: none;
    color: var(--cs-gray-900, #111827);
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s;
    padding: 0;
}

.modify-details-modal-header .modal-close-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

.modify-details-modal-header .modal-close-btn:hover {
    background: var(--cs-gray-200, #e5e7eb);
}

/* Modal Tabs */
.modify-details-tabs {
    display: flex;
    padding: 12px 20px;
    gap: 8px;
    border-bottom: 1px solid var(--cs-gray-200, #e5e7eb);
    flex-shrink: 0;
}

.modify-details-tab {
    flex: 1;
    padding: 10px 16px;
    background: var(--cs-bg-primary);
    border: 1px solid var(--cs-gray-900);
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--cs-gray-900);
    cursor: pointer;
    transition: all 0.2s;
    outline: none;
}

.modify-details-tab:focus,
.modify-details-tab:focus-visible {
    outline: none;
    box-shadow: none;
}

.modify-details-tab:hover {
    background: var(--cs-gray-50);
}

.modify-details-tab.active {
    background: var(--cs-gray-900);
    color: var(--cs-bg-primary);
    border-color: var(--cs-gray-900);
}

/* Modal Body */
.modify-details-body {
    flex: 1 1 auto;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    overscroll-behavior: contain;
}

.modify-details-panel {
    display: none;
    padding: 20px;
}

.modify-details-panel.active {
    display: block;
}

.modify-details-panel#modify-panel-dates.active {
    padding: 0;
}

/* Calendar */
.modify-calendar-container {
    padding: 0 20px;
}

.modify-calendar-scroll {
    padding-bottom: 20px;
}

.modify-calendar-month {
    margin-bottom: 24px;
}

.modify-calendar-month-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--cs-gray-900, #111827);
    margin-bottom: 12px;
    padding: 0 4px;
    text-align: center;
}

.modify-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--cs-gray-500, #6b7280);
    margin-bottom: 8px;
}

.modify-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.modify-calendar-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--cs-gray-900, #111827);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    padding: 4px 2px;
}

.modify-calendar-day .day-number {
    font-weight: 500;
}

.modify-calendar-day:hover:not(.disabled):not(.blocked):not(.empty) {
    background: var(--cs-gray-100, #f3f4f6);
}

.modify-calendar-day.empty {
    cursor: default;
}

.modify-calendar-day.disabled {
    color: var(--cs-gray-300, #d1d5db);
    cursor: not-allowed;
}

.modify-calendar-day.blocked {
    color: var(--cs-gray-300, #d1d5db);
    text-decoration: line-through;
    cursor: not-allowed;
}

.modify-calendar-day.selected {
    background: var(--cs-gray-900, #111827);
    color: #fff;
}

.modify-calendar-day.in-range {
    background: var(--cs-gray-100, #f3f4f6);
    border-radius: 0;
}

.modify-calendar-day.range-start {
    border-radius: 8px 0 0 8px;
}

.modify-calendar-day.range-end {
    border-radius: 0 8px 8px 0;
}

/* Calendar Loading */
.modify-calendar-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.modify-calendar-loading .loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--cs-gray-200, #e5e7eb);
    border-top-color: var(--cs-gray-900, #111827);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.modify-calendar-loading p {
    margin-top: 12px;
    color: var(--cs-gray-500, #6b7280);
    font-size: 14px;
}

/* Calendar Error */
.modify-calendar-error {
    background: #fef2f2;
    color: #dc2626;
    padding: 10px 16px;
    font-size: 13px;
    text-align: center;
    border-bottom: 1px solid #fecaca;
}

/* Guest Rows */
.modify-guest-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid var(--cs-gray-100, #f3f4f6);
}

.modify-guest-row:last-child {
    border-bottom: none;
}

.modify-guest-info h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--cs-gray-900, #111827);
    margin: 0 0 2px;
}

.modify-guest-info p {
    font-size: 13px;
    color: var(--cs-gray-500, #6b7280);
    margin: 0;
}

/* Guest Counter */
.modify-guest-counter {
    display: flex;
    align-items: center;
    gap: 16px;
}

.modify-counter-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--cs-gray-300, #d1d5db);
    border-radius: 50%;
    color: var(--cs-gray-600, #4b5563);
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
    outline: none;
}

.modify-counter-btn:focus,
.modify-counter-btn:focus-visible {
    outline: none;
    box-shadow: none;
}

.modify-counter-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

.modify-counter-btn:hover:not(:disabled) {
    border-color: var(--cs-gray-900, #111827);
    color: var(--cs-gray-900, #111827);
}

.modify-counter-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.modify-counter-value {
    min-width: 32px;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    color: var(--cs-gray-900, #111827);
}

/* Modal Footer */
.modify-details-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--cs-gray-200, #e5e7eb);
    background: var(--cs-bg-primary);
    flex-shrink: 0;
}

.modify-selected-summary {
    font-size: 13px;
    color: var(--cs-gray-600, #4b5563);
    text-align: center;
    margin-bottom: 12px;
}

.modify-details-confirm {
    width: 100%;
    padding: 14px 24px;
    background: var(--cs-gray-900);
    color: var(--cs-bg-primary);
    border: none;
    border-radius: var(--cs-radius-md);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 48px;
    outline: none;
}

.modify-details-confirm:focus,
.modify-details-confirm:focus-visible {
    outline: none;
    box-shadow: none;
}

.modify-details-confirm:hover {
    background: var(--cs-gray-800);
}

.modify-details-confirm:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Remove all focus outlines in modify modal */
.modify-details-modal button:focus,
.modify-details-modal button:focus-visible,
.modify-details-modal *:focus,
.modify-details-modal *:focus-visible {
    outline: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}