@import url(headerfooter.css); 
       /* Custom Styles & Configuration */
        :root {
            --primary-color: #0c4a6e; /* Dark Blue - used for Headers/Total Payable Bar */
            --secondary-color: #34d399; /* Success Green */
            --text-color: #1f2937;
            --light-text: #6b7280;
            --bg-light: #f3f4f6;
            --card-bg: #ffffff;
            --border-color: #e5e7eb;
            --whatsapp-green: #25d366;
        }

        
         
        h1{padding-bottom: 20px; text-align: center;}
        .main-content-area{padding-top: 20px; }
       .iframe-container {margin: 30px 0px;
    /* कंटेनर को रिस्पॉन्सिव बनाने के लिए Aspect Ratio Hack */
    position: relative;
    width: 100%;
    padding: 20px; /* 16:9 अनुपात (9/16 * 100) */
    height: 415px;
    overflow: hidden;

    /* सुंदर दिखने के लिए स्टाइल */
    background-color: #ffffff;
    border-radius: 12px;
    /* 3D इफ़ेक्ट के साथ आकर्षक शैडो */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 
                0 5px 10px rgba(0, 0, 0, 0.08);
    border: 5px solid #3498db; /* आकर्षक बॉर्डर */
    transform: perspective(1px) translateZ(0); /* स्मूथ ट्रांज़िशन के लिए */
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.iframe-container:hover {
    /* माउस ले जाने पर हल्का ऊपर उठा हुआ इफ़ेक्ट */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25), 
                0 10px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.iframe-container iframe {
    /* Iframe को कंटेनर के अंदर पूरी तरह से फ़िट करें */
    
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none; /* Iframe का डिफॉल्ट बॉर्डर हटा दें */
    border-radius: 6px; /* कंटेनर के अंदर थोड़ा गोल कोने */
}


 /* Container styling to center and style the form */
    .modify-reservation-container {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        max-width: 500px;
        margin: 40px auto;
        padding: 30px;
        border: 1px solid #e1e1e1;
        border-radius: 8px;
        background-color: #fff;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    .modify-reservation-container h2 {
        margin-top: 0;
        color: #333;
        font-size: 24px;
        margin-bottom: 20px;
        border-bottom: 2px solid #28a745;
        padding-bottom: 10px;
    }

    .modify-reservation-container p {
        color: #666;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    /* Form group styling */
    .form-group {
        margin-bottom: 20px;
    }

    .form-group label {
        display: block;
        font-weight: 600;
        color: #444;
        margin-bottom: 8px;
    }

    .form-group input[type="text"] {
        width: 100%;
        padding: 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-sizing: border-box; /* Important for padding */
        font-size: 16px;
        transition: border-color 0.3s;
    }

    .form-group input[type="text"]:focus {
        border-color: #28a745;
        outline: none;
        box-shadow: 0 0 5px rgba(40, 167, 69, 0.2);
    }

    /* Error messages styling */
    .messages {
        list-style: none;
        padding: 0;
        margin-bottom: 15px;
    }

    .messages li {
        color: #dc3545;
        background-color: #f8d7da;
        border: 1px solid #f5c6cb;
        padding: 10px;
        border-radius: 4px;
        font-size: 14px;
    }

    /* Button styling */
    .btn-container {
        text-align: right;
        margin-top: 25px;
    }

    .btn-submit {
        background-color: #28a745;
        color: white;
        padding: 12px 24px;
        border: none;
        border-radius: 4px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.3s, transform 0.1s;
        text-decoration: none;
        display: inline-block;
    }

    .btn-submit:hover {
        background-color: #218838;
    }

    .btn-submit:active {
        transform: translateY(1px);
    }


    :root {
        --primary-color: #28a745;
        --danger-color: #dc3545;
        --text-dark: #333;
        --text-light: #777;
        --bg-light: #f8f9fa;
    }

    .booking-container {
        font-family: 'Segoe UI', Arial, sans-serif;
        max-width: 1000px;
        margin: 30px auto;
        padding: 20px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    }

    .booking-header {
        margin-bottom: 25px;
        border-bottom: 2px solid var(--bg-light);
        padding-bottom: 15px;
    }

    .booking-header h2 {
        margin: 0;
        color: var(--text-dark);
    }

    .booking-header p {
        color: var(--text-light);
        font-size: 14px;
        margin-top: 5px;
    }

    /* Table Styling */
    .table-responsive {
        overflow-x: auto;
    }

    .booking-table {
        width: 100%;
        border-collapse: collapse;
        text-align: left;
    }

    .booking-table th {
        background-color: var(--bg-light);
        padding: 15px;
        font-weight: 600;
        color: #555;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 0.5px;
    }

    .booking-table td {
        padding: 3px;
        border-bottom: 1px solid #eee;
        vertical-align: middle;
    }

    .booking-info .title {
        display: block;
        font-weight: 600;
        color: var(--text-dark);
    }

    .booking-info .subtitle {
        font-size: 12px;
        color: var(--text-light);
    }

    /* Status Badges */
    .status {
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
    }

    .status-confirmed {
        background-color: #d4edda;
        color: #155724;
    }

    .status-pending {
        background-color: #fff3cd;
        color: #856404;
    }

    /* Action Buttons */
    .actions {
        white-space: nowrap;
    }

    .btn-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 35px;
        height: 35px;
        border-radius: 6px;
        margin-right: 5px;
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .btn-icon.edit {
        background-color: #e7f3ff;
        color: #007bff;
    }

    .btn-icon.edit:hover {
        background-color: #007bff;
        color: #fff;
    }

    .btn-icon.delete {
        background-color: #ffeef0;
        color: var(--danger-color);
    }

    .btn-icon.delete:hover {
        background-color: var(--danger-color);
        color: #fff;
    }

    /* Hover effect on rows */
    .booking-table tr:hover {
        background-color: #fafafa;
    }