/* =========================================================
   RRG Booking — Professional Premium Styles
   A modern, high-end design system for real estate booking.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    /* Brand Colors extracted from rrg.co.in */
    --rrg-primary:       #2C4A8C; /* Brand Dark Blue */
    --rrg-primary-hover: #233b70;
    --rrg-primary-d:     #233b70; /* Darker variant for gradients */
    --rrg-accent:        #D82B27; /* Brand Accent Red */
    --rrg-secondary:     #008DD2; /* Brand Light Blue */
    
    --rrg-slate-50:      #f8fafc;
    --rrg-slate-100:     #f1f5f9;
    --rrg-slate-200:     #e2e8f0;
    --rrg-slate-300:     #cbd5e1;
    --rrg-slate-400:     #94a3b8;
    --rrg-slate-500:     #64748b;
    --rrg-slate-600:     #475569;
    --rrg-slate-700:     #334155;
    --rrg-slate-800:     #1e293b;
    --rrg-slate-900:     #0f172a;

    --rrg-primary-l:     rgba(44, 74, 140, 0.08); /* 8% opacity primary */
    --rrg-primary-glow:  rgba(44, 74, 140, 0.15); /* 15% opacity primary */

    --rrg-emerald-500:   #10b981;
    --rrg-emerald-600:   #059669;
    --rrg-amber-500:     #f59e0b;
    --rrg-rose-500:      #D82B27; /* Aligning with brand red */
    
    --rrg-text:       var(--rrg-slate-950);
    --rrg-text-2:     var(--rrg-slate-700);
    --rrg-text-3:     var(--rrg-slate-500);
    --rrg-border:     var(--rrg-slate-200);
    --rrg-bg:         var(--rrg-slate-50);
    --rrg-white:      #ffffff;
    
    --rrg-radius:     12px;
    --rrg-radius-lg:  20px;
    --rrg-radius-sm:  8px;
    
    --rrg-shadow:     0 1px 2px rgba(0,0,0,0.05);
    --rrg-shadow-md:  0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    --rrg-shadow-lg:  0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
    
    --rrg-font:       'Inter', -apple-system, system-ui, sans-serif;
    --rrg-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* ---- Layout Utils ---- */
.rrg-mb-8 { margin-bottom: 32px; }
.rrg-mt-6 { margin-top: 24px; }
.rrg-p-4  { padding: 16px; }
.rrg-text-right { text-align: right; }
.rrg-font-bold { font-weight: 700; }
.rrg-text-xl   { font-size: 1.25rem; }
.rrg-text-success { color: var(--rrg-success); }

/* ---- Wrappers ---- */
.rrg-page {
    min-height: 100vh;
    background: radial-gradient(circle at top right, #f8fafc 0%, #eef2ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    font-family: var(--rrg-font);
    -webkit-font-smoothing: antialiased;
}

.rrg-wrap {
    width: 100%;
    max-width: 480px;
    animation: rrg-fade-up 0.6s ease-out;
}

.rrg-wrap--wide { max-width: 800px; }
.rrg-wrap--full { 
    max-width: 900px; 
    margin: 0 auto; 
    padding: 48px 20px; 
    font-family: var(--rrg-font); 
    animation: rrg-fade-up 0.6s ease-out;
}

@keyframes rrg-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---- Header Section ---- */
.rrg-header-section { margin-bottom: 32px; }
.rrg-page-title { font-size: 28px; font-weight: 800; color: var(--rrg-text); margin: 0 0 8px; letter-spacing: -0.02em; }
.rrg-page-subtitle { font-size: 16px; color: var(--rrg-text-3); margin: 0; line-height: 1.5; }

/* ---- Brand ---- */
.rrg-brand {
    text-align: center;
    margin-bottom: 32px;
}
.rrg-brand__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px; height: 64px;
    background: linear-gradient(135deg, var(--rrg-primary) 0%, var(--rrg-primary-d) 100%);
    border-radius: 18px;
    margin-bottom: 16px;
    box-shadow: 0 12px 24px -8px rgba(99, 102, 241, 0.5);
    transition: var(--rrg-transition);
}
.rrg-brand__logo:hover { transform: scale(1.05) rotate(-2deg); }
.rrg-brand__logo svg { width: 32px; height: 32px; fill: #fff; }
.rrg-brand__name { font-size: 26px; font-weight: 800; color: var(--rrg-text); margin: 0; letter-spacing: -0.02em; }
.rrg-brand__sub  { font-size: 14px; font-weight: 500; color: var(--rrg-text-2); margin: 6px 0 0; opacity: 0.8; }

/* ---- Card ---- */
.page-id-1221 .rrg-card, .page-id-1219 .rrg-card{
    display: block;
}
.rrg-card {
    background: var(--rrg-white);
    border: 1px solid var(--rrg-border);
    border-radius: var(--rrg-radius-lg);
    padding: 40px;
    box-shadow: var(--rrg-shadow-lg);
    position: relative;
    overflow: hidden;
}
.rrg-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--rrg-primary), var(--rrg-accent));
    opacity: 0;
    transition: var(--rrg-transition);
}
.rrg-card:hover::before { opacity: 1; }

.rrg-card--flat { box-shadow: var(--rrg-shadow-md); }
.rrg-card__title { font-size: 24px; font-weight: 800; color: var(--rrg-text); margin: 0 0 8px; letter-spacing: -0.01em; }
.rrg-card__sub   { font-size: 15px; color: var(--rrg-text-2); margin: 0 0 32px; line-height: 1.5; }

/* ---- Section Title ---- */
.rrg-section-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--rrg-slate-800);
    margin: 0 0 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.rrg-section-title::after { content: ''; flex: 1; height: 1.5px; background: var(--rrg-slate-100); }

/* ---- Details Grid ---- */
.rrg-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
}
.rrg-detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rrg-detail-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--rrg-slate-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.rrg-detail-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--rrg-slate-900);
}

/* ---- Form ---- */
.rrg-form-group { margin-bottom: 24px; }
.rrg-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--rrg-slate-700);
    margin-bottom: 8px;
    transition: var(--rrg-transition);
}
.rrg-label .req { color: var(--rrg-danger); margin-left: 2px; }

.rrg-input, .rrg-select, .rrg-textarea {
    width: 100%;
    padding: 12px 16px !important;
    border-radius: var(--rrg-radius) !important;
    font-size: 15px;
    color: var(--rrg-text) !important;
    background: var(--rrg-slate-50);
    transition: var(--rrg-transition);
    outline: none;
    font-family: var(--rrg-font);
}
.rrg-input:focus, .rrg-select:focus, .rrg-textarea:focus {
    background: #fff;
    border-color: var(--rrg-primary);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}
.rrg-input--disabled {
    background: var(--rrg-slate-100);
    color: var(--rrg-slate-500);
    cursor: not-allowed;
}
.rrg-input::placeholder { color: var(--rrg-slate-400); }

.rrg-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-right: 44px;
    cursor: pointer;
}

.rrg-textarea { resize: vertical; min-height: 110px; line-height: 1.6; }

.rrg-row { display: flex; gap: 20px; }
.rrg-row .rrg-form-group { flex: 1; }

.rrg-checkbox { width: 18px; height: 18px; cursor: pointer; }
.rrg-checkbox-label { font-size: 15px; color: var(--rrg-slate-700); font-weight: 500; cursor: pointer; }

/* ---- OTP Input ---- */
.rrg-otp-input {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: 12px;
    text-align: center;
    padding: 16px;
    color: var(--rrg-primary);
}

/* ---- Buttons ---- */
.rrg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: var(--rrg-radius);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: var(--rrg-transition);
    text-decoration: none;
    white-space: nowrap;
    font-family: var(--rrg-font);
}
.rrg-btn--full { width: 100%; }
.rrg-btn--sm   { padding: 10px 18px; font-size: 13px; }
.rrg-btn--lg   { padding: 16px 32px; font-size: 16px; }

.rrg-btn--primary {
    background: linear-gradient(135deg, var(--rrg-primary) 0%, var(--rrg-primary-d) 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}
.rrg-btn--primary:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.35); 
    filter: brightness(1.1);
}
.rrg-btn--primary:active { transform: translateY(0); }
.rrg-btn--primary:disabled { background: var(--rrg-slate-200); cursor: not-allowed; transform: none; box-shadow: none; }

.rrg-btn--ghost {
    background: var(--rrg-white);
    color: var(--rrg-text-2);
    border: 1.5px solid var(--rrg-border);
}
.rrg-btn--ghost:hover { background: var(--rrg-slate-50); border-color: var(--rrg-slate-300); color: var(--rrg-text); }

/* ---- Stats Grid ---- */
.rrg-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}
.rrg-stat {
    background: var(--rrg-white);
    border: 1px solid var(--rrg-border);
    border-radius: var(--rrg-radius);
    padding: 24px 16px;
    text-align: center;
    box-shadow: var(--rrg-shadow);
    transition: var(--rrg-transition);
}
.rrg-stat:hover { box-shadow: var(--rrg-shadow-md); transform: translateY(-4px); border-color: var(--rrg-primary-l); }
.rrg-stat__num   { font-size: 32px; font-weight: 800; line-height: 1; margin-bottom: 8px; letter-spacing: -0.02em; }
.rrg-stat__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--rrg-text-3); }

.rrg-stat--blue   .rrg-stat__num { color: #3b82f6; }
.rrg-stat--amber  .rrg-stat__num { color: #f59e0b; }
.rrg-stat--green  .rrg-stat__num { color: #10b981; }
.rrg-stat--red    .rrg-stat__num { color: #ef4444; }
.rrg-stat--purple { background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%); }
.rrg-stat--purple .rrg-stat__num, .rrg-stat--purple .rrg-stat__label { color: #fff; }

/* ---- Table ---- */
.rrg-table-wrap { overflow-x: auto; border-radius: var(--rrg-radius); border: 1px solid var(--rrg-border); }
.rrg-table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; }
.rrg-table th {
    background: var(--rrg-slate-50);
    text-align: left;
    padding: 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--rrg-slate-500);
    border-bottom: 1px solid var(--rrg-border);
}
.rrg-table td {
    padding: 16px;
    border-bottom: 1px solid var(--rrg-slate-100);
    color: var(--rrg-text);
    vertical-align: middle;
}
.rrg-table tbody tr { transition: background 0.2s; }
.rrg-table tbody tr:hover td { background: var(--rrg-slate-50); }

.rrg-row-highlight { background: var(--rrg-slate-50); }
.rrg-row-total { background: var(--rrg-slate-900); color: #fff; }
.rrg-row-total td { color: #fff; border-bottom: none; }
.rrg-table-divider { background: var(--rrg-slate-100); font-weight: 800; color: var(--rrg-slate-800); text-transform: uppercase; font-size: 10px; letter-spacing: 0.1em; padding: 8px 16px; }

.rrg-table--compact td, .rrg-table--compact th { padding: 10px 16px; }
.rrg-table--policy { font-size: 13px; background: var(--rrg-slate-50); }

/* ---- Payment Plan Highlight ---- */
.rrg-plan-highlight {
    margin-top: 32px;
    padding: 32px;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border-radius: var(--rrg-radius);
    border: 1px solid #ddd6fe;
}
.rrg-plan-label { font-weight: 700; color: #5b21b6; margin-bottom: 8px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; }
.rrg-plan-value { font-size: 24px; font-weight: 800; color: var(--rrg-slate-900); letter-spacing: -0.01em; }

.rrg-schedule-section { margin-top: 32px; padding-top: 32px; border-top: 1px dashed #c4b5fd; }
.rrg-schedule-header { font-weight: 700; color: #5b21b6; margin-bottom: 16px; font-size: 15px; }
.rrg-schedule-hint { font-weight: 400; font-size: 12px; color: #7c3aed; margin-left: 8px; }

/* ---- Policy Container ---- */
.rrg-policy-container {
    margin-top: 40px;
    padding: 32px;
    background: #fff;
    border: 1px solid var(--rrg-slate-200);
    border-radius: var(--rrg-radius);
}
.rrg-policy-warning { margin: 0 0 24px; font-size: 15px; color: var(--rrg-danger); font-weight: 600; line-height: 1.5; padding: 12px 16px; background: #fef2f2; border-radius: 8px; border-left: 4px solid var(--rrg-danger); }
.rrg-policy-title { font-size: 16px; font-weight: 700; color: var(--rrg-slate-900); margin: 0 0 16px; }

.rrg-verify-container { margin-top: 32px; display: flex; align-items: center; gap: 12px; }

/* ---- Badges ---- */
.rrg-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.rrg-badge--pending   { background: #fef3c7; color: #92400e; }
.rrg-badge--approved  { background: #dcfce7; color: #065f46; }
.rrg-badge--completed { background: #e0e7ff; color: #3730a3; }
.rrg-badge--rejected  { background: #fee2e2; color: #991b1b; }

/* ---- Dashboard Header ---- */
.rrg-dash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 40px;
}
.rrg-dash-title { font-size: 28px; font-weight: 800; color: var(--rrg-text); margin: 0; letter-spacing: -0.02em; }
.rrg-dash-sub   { font-size: 15px; color: var(--rrg-text-3); margin: 6px 0 0; }
.rrg-dash-actions { display: flex; gap: 12px; align-items: center; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .rrg-stats  { grid-template-columns: repeat(3, 1fr); }
    .rrg-dash-header { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
    .rrg-stats  { grid-template-columns: repeat(2, 1fr); }
    .rrg-row    { flex-direction: column; gap: 0; }
    .rrg-card   { padding: 32px 24px; }
    .rrg-brand__logo { width: 56px; height: 56px; }
    .rrg-plan-highlight { padding: 24px; }
    .rrg-policy-container { padding: 24px; }
}

/* ---- Toastr Overrides ---- */
#toast-container > div {
    border-radius: 12px !important;
    box-shadow: var(--rrg-shadow-lg) !important;
    padding: 16px 16px 16px 50px !important; /* Increased left padding for icon */
    font-family: var(--rrg-font) !important;
    background-position: 15px center !important;
    background-size: 24px !important;
    opacity: 1 !important;
}

.toast-success { background-color: var(--rrg-emerald-500) !important; }
.toast-error   { background-color: var(--rrg-rose-500) !important; }
.toast-warning { background-color: var(--rrg-amber-500) !important; }
.toast-info    { background-color: var(--rrg-primary) !important; }