/* ======================================== */
/*          Registration Page Styles        */
/* ======================================== */

/* Page entry animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-on-load {
    animation: fadeInUp 0.6s ease-out forwards;
}

.stagger-children > * {
    animation: fadeInUp 0.6s ease-out forwards;
    animation-delay: var(--stagger-delay, 0.2s);
    opacity: 0; /* Start hidden */
}

        .main-container {
            display: grid;
            margin: auto; /* Ensures proper vertical alignment */
            grid-template-columns: 1fr 1.5fr; /* Left side smaller than right */
            width: 100%;
            max-width: 1200px;
            min-height: 80vh;
            background: rgba(23, 23, 31, 0.7);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
            border-radius: 16px;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.1);
            overflow: hidden; /* To contain the border-radius */
        }

        .left-panel {
            background: rgba(0, 0, 0, 0.2);
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: #fff;
        }

        .left-panel .illustration {
            width: 150px;
            height: 150px;
            margin-bottom: 20px;
        }

        .left-panel h3 {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .left-panel p {
            font-size: 15px;
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.6;
        }

        .right-panel {
            padding: 30px 40px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .form-wrapper {
            width: 100%;
            max-width: 500px;
        }

        .form-wrapper .global-error {
            margin-bottom: 15px;
        }

        /* Hide mobile illustration on desktop */
        .mobile-illustration {
            display: none;
        }

        /* ======================================== */
        /*        Multi-Step Form (Mobile)          */
        /* ======================================== */

        .progress-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            position: relative;
        }

        .progress-bar::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            height: 4px;
            width: 100%;
            background: rgba(255, 255, 255, 0.2);
            z-index: -1;
        }

        .progress-line {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            height: 4px;
            width: 0%; /* Start with 0 width */
            background: #3b82f6; /* Active color */
            z-index: -1;
            transition: width 0.4s ease;
        }


        .progress-step {
            width: 30px;
            height: 30px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-weight: bold;
            transition: background-color 0.4s ease, transform 0.4s ease;
            position: relative;
        }

        .progress-step.active {
            background-color: #3b82f6;
        }

        .progress-step.completed {
            background-color: #22c55e; /* Green for completed */
        }
        .progress-step.completed::before {
            content: '✓'; /* Checkmark for completed steps */
        }

        .form-step {
            display: none; /* All steps hidden by default on mobile */
        }
        .form-step.active {
            display: block;
        }

        /* Custom scrollbar */
        .main-container::-webkit-scrollbar {
            width: 6px;
        }

        .main-container::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
        }

        .main-container::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.3);
            border-radius: 10px;
        }

        h2 {
            text-align: center;
            color: #fff;
            margin-bottom: 20px;
            font-size: 26px;
            font-weight: 700;
            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
            letter-spacing: 0.5px;
        }

        h2 .highlight {
            background-color: #ffdd57; /* Yellow highlight color */
            color: #1c1c24; /* Dark text for contrast */
            padding: 2px 8px;
            border-radius: 5px;
        }

        /* Grid layout for form fields */
        .form-group {
            display: flex;
            flex-direction: column;
        }

        .form-group.full-width {
            /* No longer needed for grid */
        }

        label {
            font-weight: 600;
            color: #ffffff;
            font-size: 15px;
            margin-bottom: 6px;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
            letter-spacing: 0.3px;
        }

        /* Hide mobile-only link on desktop */
        .mobile-only-link {
            display: none;
        }

        .admin-link {
            margin-top: 15px;
            font-size: 14px;
        }

        .admin-link a {
            color: #fca5a5; /* A subtle red to distinguish it */
            text-decoration: none;
        }

        .validation-tick {
            display: inline-block;
            width: 8px;
            height: 14px;
            border: solid #22c55e; /* Green color */
            border-width: 0 3px 3px 0;
            transform: rotate(45deg) scale(0.8);
            margin-left: 8px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .validation-tick.show {
            opacity: 1;
        }

        input, textarea, select {
            width: 100%;
            padding: 12px 0;
            border: none;
            border-bottom: 2px solid rgba(255, 255, 255, 0.2);
            background: transparent;
            color: #fff;
            font-size: 15px;
            transition: all 0.3s ease;
            font-family: inherit;
        }

        select option {
            background: #1c1c24; /* Dark background for dropdown options */
            color: #fff;
        }

        input::placeholder, select::placeholder,
        textarea::placeholder {
            color: rgba(255, 255, 255, 0.6); /* Make placeholder text slightly transparent */
        }

        input:focus, select:focus,
        textarea:focus {
            outline: none;
            border-bottom-color: #3b82f6;
        }

        /* Valid state - green border */
        input.valid, textarea.valid, select.valid {
            border-bottom-color: #22c55e;
        }

        /* Invalid state - red border */
        input.invalid, textarea.invalid, select.invalid {
            border-bottom-color: #ef4444;
        }

        .error-message {
            font-size: 11px;
            color: #fca5a5;
            margin-top: 4px;
            display: none;
            font-weight: 500;
        }

        /* Special styles for duplicate contact error */
        .form-group.duplicate-error .error-message {
            font-size: 14px; /* Make the error message bigger */
            font-weight: 600;
        }

        .form-group.duplicate-error label {
            color: #ef4444; /* Make the label red */
        }

        .error-message.show {
            display: block;
        }

        textarea {
            resize: vertical;
            min-height: 70px;
        }

        .char-counter {
            font-size: 14px;
            color: rgb(255, 155, 5);
            text-align: right;
            margin-top: 3px;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .main-container {
                grid-template-columns: 1fr; /* Stack columns */
            }

            /* Hide desktop link and show mobile link on smaller screens */
            .desktop-only-link {
                display: none;
            }

            .mobile-only-link {
                display: block;
            }

            /* Show and style the mobile illustration */
            .mobile-illustration {
                display: block;
                width: 80px;
                height: 80px;
                margin: 0 auto 15px;
            }

            /* On mobile, transform the left panel into a header */
            .left-panel {
                background: transparent;
                padding: 20px 20px 0 20px; /* Padding for header view */
            }

            .left-panel .illustration {
                display: none; /* Hide large illustration on mobile */
            }

            .left-panel h3 {
                display: none; /* Hide the main welcome text */
            }

            .left-panel .description {
                display: none; /* Hide only the descriptive paragraph */
            }

            .right-panel {
                padding: 20px;
            }

            input, textarea {
                padding: 12px 0;
                font-size: 13px;
            }

            button {
                padding: 11px;
                font-size: 14px;
            }

            .step-nav {
                display: flex;
                justify-content: space-between;
                margin-top: 20px;
            }
            .step-nav button {
                width: auto;
                padding: 10px 20px;
                font-size: 14px;
            }
            .step-nav .prev-btn {
                background: #6b7280;
            }

        }

        @media (max-width: 480px) {
            .right-panel, .left-panel {
                padding: 20px 15px 0 15px;
            }

            h2 {
                font-size: 20px;
            }

            label {
                font-size: 12px;
            }
        }

/* ======================================== */
/*             Search Page Styles           */
/* ======================================== */

.container {
    background: rgba(23, 23, 31, 0.6); /* Dark, slightly transparent background */
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid;
    border-image-source: linear-gradient(to right, rgba(255,255,255,0.1), rgba(255,255,255,0.4), rgba(255,255,255,0.1));
    border-image-slice: 1;
    width: 100%;
    max-width: 500px;
    position: relative;
    z-index: 1;
}

/* ======================================== */
/*             Modal Styles                 */
/* ======================================== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.modal-card {
    background: #1c1c24; /* Dark card background */
    color: #fff;
    padding: 30px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 750px; /* Made the card wider */
    position: relative;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.modal-overlay.show .modal-card {
    transform: scale(1);
}

.close-button {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 22px;
    /* Use flexbox for perfect centering */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
    z-index: 10; /* Ensure it's above other modal content */
}

.close-button:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.modal-header {
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.modal-header h2 {
    margin-bottom: 5px;
    font-size: 24px;
}

.modal-header p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}
.modal-header span {
    font-weight: bold;
    color: #3b82f6;
    font-family: monospace;
}

.modal-body p {
    margin: 0;
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Add icons to details */
.modal-body p::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 12px;
    flex-shrink: 0; /* Prevents the icon from shrinking */
    opacity: 0.7;
}

.modal-body p:last-child {
    border-bottom: none;
}

.modal-body strong {
    min-width: 100px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
}

/* Ensure long text (like email/address) wraps correctly */
.modal-body p span {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.5; /* Improve readability for wrapped text */
}

.modal-footer {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.modal-footer a {
    display: inline-block;
    background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #8b5cf6 100%);
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.modal-footer a:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
}

/* Specific icons for each detail item */
.modal-body p[data-icon="name"]::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath d='M10 8a3 3 0 100-6 3 3 0 000 6zM3.465 14.493a1.23 1.23 0 00.41 1.412A9.957 9.957 0 0010 18c2.31 0 4.438-.784 6.131-2.095a1.23 1.23 0 00.41-1.412A9.99 9.99 0 0010 12a9.99 9.99 0 00-6.535 2.493z' /%3E%3C/svg%3E") center/contain no-repeat; }
.modal-body p[data-icon="contact"]::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M2 3.5A1.5 1.5 0 013.5 2h1.148a1.5 1.5 0 011.465 1.175l.716 3.578a1.5 1.5 0 01-1.052 1.767l-1.28.512c.097.242.22.48.37.702a1.5 1.5 0 00.37.702l.512-1.28a1.5 1.5 0 011.767-1.052l3.578.716A1.5 1.5 0 0116.5 10h.001c.66 0 1.26.4 1.486 1.031l.334.934a1.5 1.5 0 01-1.542 1.903l-3.262-.783a1.5 1.5 0 00-.923.22l-1.092.655a1.5 1.5 0 01-1.838-.21l-.003-.003a1.5 1.5 0 01-.21-1.838l.655-1.092a1.5 1.5 0 00.22-.923l-.783-3.262a1.5 1.5 0 011.903-1.542l.934.334A1.5 1.5 0 0110 3.5h.001z' clip-rule='evenodd' /%3E%3C/svg%3E") center/contain no-repeat; }
.modal-body p[data-icon="address"]::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M9.69 18.933l.003.001C9.89 19.02 10 19 10 19s.11.02.308-.066l.002-.001.006-.003.018-.008a5.741 5.741 0 00.281-.14c.186-.096.446-.24.757-.433.62-.384 1.445-.976 2.274-1.765C15.302 14.988 17 12.493 17 9A7 7 0 103 9c0 3.492 1.698 5.988 3.355 7.584a13.731 13.731 0 002.273 1.765 11.842 11.842 0 00.979.57c.01.006.02.01.03.016.024.013.048.027.072.04.036.019.07.038.102.056l.002.001zM10 11a2 2 0 100-4 2 2 0 000 4z' clip-rule='evenodd' /%3E%3C/svg%3E") center/contain no-repeat; }
.modal-body p[data-icon="email"]::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath d='M3 4a2 2 0 00-2 2v1.161l8.441 4.221a1.25 1.25 0 001.118 0L19 7.162V6a2 2 0 00-2-2H3z' /%3E%3Cpath d='M19 8.839l-7.77 3.885a2.75 2.75 0 01-2.46 0L1 8.839V14a2 2 0 002 2h14a2 2 0 002-2V8.839z' /%3E%3C/svg%3E") center/contain no-repeat; }
.modal-body p[data-icon="slot"]::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-3.25V5z' clip-rule='evenodd' /%3E%3C/svg%3E") center/contain no-repeat; }
.modal-body p[data-icon="seat"]::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath d='M11.983 1.904a3.013 3.013 0 00-4.012.936l-.323.538a29.132 29.132 0 00-3.223 4.217a2.5 2.5 0 00-.375.968c-.034.135-.057.272-.073.41a22.9 22.9 0 000 2.05c.016.138.039.275.073.41.09.36.248.703.468 1.005l.002.003c.72 1.01 1.75 1.544 2.967 1.544s2.247-.534 2.967-1.544l.002-.003c.22-.302.378-.646.468-1.005.034-.135-.057-.272-.073-.41a22.909 22.909 0 000-2.05c-.016-.138-.039-.275-.073-.41a2.5 2.5 0 00-.375-.968 29.131 29.131 0 00-3.223-4.217l-.323-.538zM9.987 3.457a1.513 1.513 0 012.006-.468l.323.538a27.632 27.632 0 013.06 4.002 1 1 0 01.15.387c.013.1.026.198.034.295a21.409 21.409 0 010 1.932c-.008.097-.021.195-.034.295a1 1 0 01-.15.387 27.632 27.632 0 01-3.06 4.002l-.323.538a1.513 1.513 0 01-2.006-.468l-.323-.538a27.632 27.632 0 01-3.06-4.002 1 1 0 01-.15-.387c-.013-.1-.026-.198-.034-.295a21.409 21.409 0 010-1.932c.008.097-.021.195.

.modal-footer {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.modal-footer a {
    display: inline-block;
    background: #3b82f6;
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.modal-footer a:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

/* Reserve space for the error message to prevent layout shift */
.error-container {
    min-height: 45px; /* Adjust based on the height of your .error div */
    margin-top: 15px;
}

/* Typewriter animation for "New here?" when a user is not found */
.typewriter-effect {
    font-size: 1.1em;
    font-weight: 600;
    /* The gradient background for the shimmer effect */
    background: linear-gradient(
        90deg, 
        #a7f5ff, /* Light cyan */
        #fff,    /* White */
        #a7f5ff  /* Light cyan */
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 2.5s infinite linear;
}

@keyframes shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* Responsive Design */
@media (max-width: 600px) {
    .container {
        padding: 30px 25px;
    }

    h2 {
        font-size: 24px;
    }

    input {
        padding: 11px 14px;
        font-size: 14px;
    }

    button {
        padding: 12px;
        font-size: 15px;
    }
}

@media (max-width: 400px) {
    h2 {
        font-size: 22px;
    }

    .modal-card {
        padding: 25px 20px;
    }

    .modal-header h2 {
        font-size: 20px;
    }

    .modal-body p {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        padding: 12px 0;
    }

    .modal-body p::before {
        display: none; /* Hide icons on very small screens to save space */
    }
}

/* Two-column layout for modal on larger screens */
@media (min-width: 601px) {
    .modal-body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 25px; /* Add gap between columns */
    }

    /* In a two-column layout, remove the top border from the first items in each column */
    .modal-body p:nth-child(1),
    .modal-body p:nth-child(4) {
        border-top: none;
    }
}