/* custom-styles.css - No build process required */

/* Required Field Indicator */
.required-field {
    color: #ef4444; /* Red color for asterisk */
    font-weight: 700;
    margin-left: 4px;
}

.form-help-text {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #6b7280; /* Gray color for help text */
    font-style: italic;
}

/* Form input validation states */
.form-input:required {
    border-left: 3px solid #ef4444; /* Red left border for required fields */
}

.form-input:required:valid {
    border-left: 3px solid #10b981; /* Green left border when valid */
}

.form-input:invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-error {
    color: #ef4444;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

/* Hero Section */
.hero-section {
    background-color: #1e40af; /* bg-blue-800 */
    color: white;
    padding: 0; /* py-16 */
    position: relative;
    overflow: hidden;
    background-image: url('../../assets/img/shah.png');
    background-repeat: no-repeat;
    background-size: auto 120px; 
    background-position: right center;
    height: 120px; /* Set a fixed height for the hero section */
}

.hero-container {
    max-width: 1280px; /* max-w-screen-xl */
    margin: 0 auto;
    padding: 0 1rem; /* px-4 */
}

.hero-title {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 700; /* font-bold */
    margin-bottom: 1rem; /* mb-4 */
}

.hero-description {
    font-size: 1.25rem; /* text-xl */
    margin-bottom: 2rem; /* mb-8 */
}

/* Main Layout */
.main-wrapper {
    background-color: #f3f4f6; /* bg-gray-100 */
    padding: 3rem 0; /* py-12 */
}

.main-container {
    max-width: 1280px; /* max-w-screen-xl */
    margin: 0 auto;
    padding: 0 1rem; /* px-4 */
}

.main-flex {
    display: flex;
}

/* Sidebar Navigation */
.sidebar-nav {
    background-color: #9ca3af; /* bg-gray-400 */
    color: white;
    width: 16rem; /* w-64 */
    min-height: 100vh;
    padding: 1rem; /* p-4 */
    border-radius: 0.5rem; /* rounded-lg */
}

.profile-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.5rem; /* mb-6 */
}

.profile-image {
    width: 6rem; /* w-24 */
    height: 6rem; /* h-24 */
    border-radius: 50%; /* rounded-full */
    border: 2px solid #d1d5db; /* border-2 border-gray-300 */
}

.profile-title {
    font-size: 1.25rem; /* text-xl */
    font-weight: 700; /* font-bold */
    margin-top: 1rem; /* mt-4 */
}

.nav-item {
    margin-bottom: 1rem; /* mb-4 */
}

.nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem; /* px-4 py-2 */
    border-radius: 0.25rem; /* rounded */
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s;
}

.nav-link:hover {
    background-color: #1d4ed8; /* hover:bg-blue-700 */
}

.nav-link.active {
    background-color: #eab308; /* bg-yellow-500 */
}

.nav-icon-text {
    display: flex;
    align-items: center;
}

.nav-icon {
    margin-right: 0.75rem; /* mr-3 */
}

.status-icon-success {
    fill: #22c55e;
    stroke: white;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.status-icon-success polyline {
    fill: none;
}

.status-icon-error {
    fill: #ef4444;
    stroke: white;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.status-icon-error line {
    fill: none;
}

/* Main Content */
.main-content {
    flex: 1;
    padding: 2rem; /* p-8 */
}

.page-title {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    margin-bottom: 1.5rem; /* mb-6 */
}

.alert-success {
    background-color: #dcfce7; /* bg-green-100 */
    border: 1px solid #16a34a; /* border border-green-400 */
    color: #166534; /* text-green-700 */
    padding: 0.75rem 1rem; /* px-4 py-3 */
    border-radius: 0.25rem; /* rounded */
    position: relative;
    margin-bottom: 1rem; /* mb-4 */
}

.alert-error {
    background-color: #fef2f2; /* bg-red-100 */
    border: 1px solid #dc2626; /* border border-red-400 */
    color: #dc2626; /* text-red-700 */
    padding: 0.75rem 1rem; /* px-4 py-3 */
    border-radius: 0.25rem; /* rounded */
    position: relative;
    margin-bottom: 1rem; /* mb-4 */
}

/* Form Styles */
.form-container {
    background-color: white; /* bg-white */
    padding: 1.5rem; /* p-6 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem; /* gap-6 */
}

@media (min-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr 1fr; /* md:grid-cols-2 */
    }
}

.section-header {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    margin-bottom: 1rem; /* mb-4 */
    color: #2563eb; /* text-blue-600 */
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 0.5rem; /* pb-2 */
}

.form-group {
    display: block;
}

.form-label {
    display: block;
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    color: #374151; /* text-gray-700 */
}

.required-asterisk {
    color: #ef4444; /* text-red-500 */
}

.form-input,
.form-select,
.readonly-input {
    margin-top: 0.25rem; /* mt-1 */
    display: block;
    width: 100%; /* w-full */
    border-radius: 0.375rem; /* rounded-md */
    border: 1px solid #d1d5db; /* border-gray-300 */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    font-size: 0.875rem; /* sm:text-sm */
    padding: 0.5rem 0.75rem;
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: #3b82f6; /* focus:border-blue-500 */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); /* focus:ring-blue-500 */
}

/* Checkbox Grid */
.checkbox-grid {
    margin-top: 0.25rem; /* mt-1 */
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* grid-cols-3 */
    gap: 0.5rem; /* gap-2 */
}

.checkbox-item {
    display: flex;
    align-items: center;
}

.checkbox-input {
    border-radius: 0.25rem; /* rounded */
    border: 1px solid #d1d5db; /* border-gray-300 */
    color: #2563eb; /* text-blue-600 */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
}

.checkbox-input:focus {
    border-color: #3b82f6; /* focus:border-blue-500 */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); /* focus:ring-blue-500 */
}

.checkbox-label {
    margin-left: 0.5rem; /* ml-2 */
    font-size: 0.875rem; /* text-sm */
    color: #374151; /* text-gray-700 */
}

/* Submit Button */
.submit-btn {
    width: 100%; /* w-full */
    background-color: #2563eb; /* bg-blue-600 */
    color: white;
    padding: 0.5rem 1.5rem; /* px-6 py-2 */
    border-radius: 0.5rem; /* rounded-lg */
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.submit-btn:hover {
    background-color: #1d4ed8; /* hover:bg-blue-700 */
}

.submit-container {
    margin-top: 1.5rem; /* mt-6 */
}

/* Validation Styles */
.input-error {
    border-color: #ef4444 !important; /* border-red-500 */
}

/* Spacing */
.spacing-p {
    margin-bottom: 1rem; /* mb-4 */
}

/* Education Page Specific Styles */
.add-subject-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem; /* px-4 py-2 */
    margin-bottom: 1rem; /* mb-4 */
    background-color: #2563eb; /* bg-blue-600 */
    color: white;
    border-radius: 0.375rem; /* rounded-md */
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.add-subject-btn:hover {
    background-color: #1d4ed8; /* hover:bg-blue-700 */
}

.add-subject-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px #3b82f6, 0 0 0 4px rgba(59, 130, 246, 0.1); /* focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 */
}

.add-btn-icon {
    height: 1.25rem; /* h-5 */
    width: 1.25rem; /* w-5 */
    margin-right: 0.5rem; /* mr-2 */
}

.btn-container-right {
    text-align: right;
}

.education-table {
    width: 100%; /* w-full */
    margin-top: 0.5rem; /* mt-2 */
    border-collapse: collapse;
    border: 1px solid #d1d5db; /* border border-gray-300 */
}

.table-header {
    border: 1px solid #d1d5db; /* border border-gray-300 */
    padding: 0.5rem; /* p-2 */
    background-color: #f9fafb; /* bg-gray-50 */
    font-weight: 600;
    text-align: left;
}

.table-cell {
    border: 1px solid #d1d5db; /* border border-gray-300 */
    padding: 0.5rem; /* p-2 */
}

.table-cell-center {
    border: 1px solid #d1d5db; /* border border-gray-300 */
    padding: 0.5rem; /* p-2 */
    text-align: center;
}

.table-select {
    width: 100%; /* w-full */
    border-radius: 0.375rem; /* rounded-md */
    border: 1px solid #d1d5db; /* border-gray-300 */
}

.table-select:focus {
    border-color: #3b82f6; /* focus:border-blue-500 */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); /* focus:ring-blue-500 */
}

.table-input {
    width: 100%; /* w-full */
    border-radius: 0.375rem; /* rounded-md */
    border: 1px solid #d1d5db; /* border-gray-300 */
    font-size: 0.875rem; /* sm:text-sm */
    padding: 0.5rem 0.75rem;
}

.table-input:focus {
    border-color: #3b82f6; /* focus:border-blue-500 */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); /* focus:ring-blue-500 */
}

.delete-btn {
    color: #dc2626; /* text-red-600 */
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
}

.delete-btn:hover {
    color: #991b1b; /* hover:text-red-800 */
}

.delete-icon {
    width: 1.25rem; /* w-5 */
    height: 1.25rem; /* h-5 */
    display: inline-block;
}

.july-paper-container {
    margin-bottom: 0.5rem; /* mb-2 */
}

.grid-two-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem; /* gap-6 */
}

@media (min-width: 768px) {
    .grid-two-cols {
        grid-template-columns: 1fr 1fr; /* md:grid-cols-2 */
    }
}

/* Higher Education Page Specific Styles */
.education-card {
    background-color: white; /* bg-white */
    padding: 1.5rem; /* p-6 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    margin-bottom: 1.5rem; /* mb-6 */
    border: 2px solid #d1d5db; /* ring-2 ring-gray-300 */
}

.education-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* grid-cols-2 */
    gap: 1rem; /* gap-4 */
}

.education-card-full-width {
    grid-column: 1 / -1; /* col-span-2 */
}

.card-actions {
    display: flex;
    justify-content: flex-end; /* justify-end */
}

.delete-card-btn {
    background-color: #dc2626; /* bg-red-600 */
    color: white;
    padding: 0.5rem 1rem; /* px-4 py-2 */
    border-radius: 0.5rem; /* rounded-lg */
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.delete-card-btn:hover {
    background-color: #991b1b; /* hover:bg-red-700 */
}

.card-input {
    border-radius: 0.375rem; /* rounded-md */
    border: 1px solid #d1d5db; /* border-gray-300 */
    width: 100%; /* w-full */
    padding: 0.5rem 0.75rem;
}

.card-input:focus {
    outline: none;
    border-color: #3b82f6; /* focus:border-blue-500 */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); /* focus:ring-blue-500 */
}

.card-select {
    margin-top: 0.25rem; /* mt-1 */
    display: block;
    width: 100%; /* w-full */
    border-radius: 0.375rem; /* rounded-md */
    border: 1px solid #d1d5db; /* border-gray-300 */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    font-size: 0.875rem; /* sm:text-sm */
    padding: 0.5rem 0.75rem;
}

.card-select:focus {
    outline: none;
    border-color: #3b82f6; /* focus:border-blue-500 */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); /* focus:ring-blue-500 */
}

.card-label {
    display: block;
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    color: #374151; /* text-gray-700 */
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background-color: rgba(0, 0, 0, 0.5); /* bg-black bg-opacity-50 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-overlay.hidden {
    display: none;
}

.modal-content {
    background-color: white; /* bg-white */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    padding: 1.5rem; /* p-6 */
    width: 100%;
    max-width: 42rem; /* max-w-2xl */
    border: 2px solid #3b82f6; /* ring-2 ring-blue-300 */
}

.modal-title {
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    color: #374151; /* text-gray-700 */
    margin-bottom: 1rem; /* mb-4 */
}

.modal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* grid-cols-2 */
    gap: 1rem; /* gap-4 */
}

.modal-actions {
    display: flex;
    justify-content: flex-end; /* justify-end */
    margin-top: 1rem; /* mt-4 */
}

.modal-cancel-btn {
    color: #6b7280; /* text-gray-600 */
    margin-right: 1rem; /* mr-4 */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.modal-submit-btn {
    background-color: #2563eb; /* bg-blue-600 */
    color: white;
    padding: 0.5rem 1rem; /* px-4 py-2 */
    border-radius: 0.5rem; /* rounded-lg */
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.modal-submit-btn:hover {
    background-color: #1d4ed8; /* hover:bg-blue-700 */
}

/* Education Results Container */
.education-results-container {
    margin-top: 1rem; /* mt-4 */
}

/* Extra-Curricular Page Specific Styles */
.activity-container {
    background-color: white; /* bg-white */
    padding: 1.5rem; /* p-6 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    margin-bottom: 1.5rem; /* mb-6 */
}

.activity-table {
    margin-top: 1rem; /* mt-4 */
    border: 1px solid #d1d5db; /* border */
    border-radius: 0.5rem; /* rounded-lg */
    overflow: hidden;
}

.activity-table-header {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* grid-cols-6 */
    background-color: #f5f5f5; /* bg-gray-200 */
    font-weight: 600; /* font-semibold */
    padding: 0.5rem; /* p-2 */
    border-bottom: 1px solid #d1d5db; /* border-b */
}

.activity-table-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* grid-cols-6 */
    align-items: center;
    padding: 0.5rem; /* p-2 */
    border-bottom: 1px solid #d1d5db; /* border-b */
}

.activity-table-cell {
    /* Base cell styling */
    padding: 0.25rem;
}

.activity-table-cell-right {
    text-align: right;
}

.activity-form-section {
    margin-bottom: 2rem; /* Space between forms */
}

/* Five column layout for special activities */
.activity-table-header-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* grid-cols-5 */
    background-color: #f5f5f5; /* bg-gray-200 */
    font-weight: 600; /* font-semibold */
    padding: 0.5rem; /* p-2 */
    border-bottom: 1px solid #d1d5db; /* border-b */
}

.activity-table-row-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* grid-cols-5 */
    align-items: center;
    padding: 0.5rem; /* p-2 */
    border-bottom: 1px solid #d1d5db; /* border-b */
}

/* Modal input styling for extra-curricular */
.modal-input {
    border-radius: 0.375rem; /* rounded-md */
    border: 1px solid #d1d5db; /* border-gray-300 */
    width: 100%; /* w-full */
    padding: 0.5rem 0.75rem;
}

.modal-input:focus {
    outline: none;
    border-color: #3b82f6; /* focus:border-blue-500 */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); /* focus:ring-blue-500 */
}

.modal-select {
    width: 100%; /* w-full */
    border-radius: 0.375rem; /* rounded-md */
    border: 1px solid #d1d5db; /* border-gray-300 */
    padding: 0.5rem 0.75rem;
}

.modal-select:focus {
    outline: none;
    border-color: #3b82f6; /* focus:border-blue-500 */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); /* focus:ring-blue-500 */
}

.modal-label {
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    color: #374151; /* text-gray-700 */
}

/* Remove button styling */
.remove-activity-btn {
    color: #dc2626; /* text-red-600 */
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
}

.remove-activity-btn:hover {
    color: #991b1b; /* hover:text-red-800 */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .main-flex {
        flex-direction: column;
    }
    
    .sidebar-nav {
        width: 100%;
        min-height: auto;
        margin-bottom: 1rem;
    }
    
    .main-content {
        padding: 1rem;
    }
    
    .education-table {
        font-size: 0.75rem;
    }
    
    .table-cell,
    .table-header {
        padding: 0.25rem;
    }
    
    .modal-content {
        margin: 1rem;
        max-width: calc(100% - 2rem);
    }
    
    .modal-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
    }
    
    .education-card-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
    }
    
    .activity-table-header,
    .activity-table-row {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 0.5rem;
    }
    
    .activity-table-header-5,
    .activity-table-row-5 {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 0.5rem;
    }
    
    .activity-table-cell {
        text-align: left !important;
        border-bottom: 1px solid #e5e7eb;
        padding: 0.5rem;
    }
    
    .activity-table-cell::before {
        content: attr(data-label) ": ";
        font-weight: 600;
        display: inline-block;
        width: 120px;
    }
    
    .activity-table-header,
    .activity-table-header-5 {
        display: none; /* Hide headers on mobile */
    }

    
}

/* Work Experience Page Specific Styles */
.work-experience-container {
    background-color: white; /* bg-white */
    padding: 1.5rem; /* p-6 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    margin-bottom: 1.5rem; /* mb-6 */
}

.work-section {
    margin-bottom: 2rem; /* Space between work sections */
}

.work-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* grid-cols-2 */
    gap: 1rem; /* gap-4 */
    margin-top: 0.5rem; /* mt-2 */
}

.work-experience-table {
    margin-top: 1rem; /* mt-4 */
    border: 1px solid #d1d5db; /* border */
    border-radius: 0.5rem; /* rounded-lg */
    overflow: hidden;
}

.work-table-header {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* grid-cols-6 */
    background-color: #f5f5f5; /* bg-gray-200 */
    font-weight: 600; /* font-semibold */
    padding: 0.5rem; /* p-2 */
    border-bottom: 1px solid #d1d5db; /* border-b */
}

.work-table-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* grid-cols-6 */
    align-items: center;
    padding: 0.5rem; /* p-2 */
    border-bottom: 1px solid #d1d5db; /* border-b */
}

.work-table-cell {
    padding: 0.25rem;
}

.work-table-cell-right {
    text-align: right;
}

/* Responsive adjustments for work experience */
@media (max-width: 768px) {
    .work-form-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 0.5rem;
    }
    
    .work-table-header,
    .work-table-row {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 0.5rem;
    }
    
    .work-table-cell {
        text-align: left !important;
        border-bottom: 1px solid #e5e7eb;
        padding: 0.5rem;
    }
    
    .work-table-cell::before {
        content: attr(data-label) ": ";
        font-weight: 600;
        display: inline-block;
        width: 120px;
    }
    
    .work-table-header {
        display: none; /* Hide headers on mobile */
    }
}

/* Additional Info Page Specific Styles - Add to existing custom-styles.css */

/* Language and Training Tables */
.language-training-table {
    margin-top: 1rem; /* mt-4 */
    border: 1px solid #d1d5db; /* border */
    border-radius: 0.5rem; /* rounded-lg */
    overflow: hidden;
}

.language-table-header {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* grid-cols-3 */
    background-color: #f5f5f5; /* bg-gray-200 */
    font-weight: 600; /* font-semibold */
    padding: 0.5rem; /* p-2 */
    border-bottom: 1px solid #d1d5db; /* border-b */
}

.language-table-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* grid-cols-3 */
    align-items: center;
    padding: 0.5rem; /* p-2 */
    border-bottom: 1px solid #d1d5db; /* border-b */
}

.training-table-header {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* grid-cols-6 */
    background-color: #f5f5f5; /* bg-gray-200 */
    font-weight: 600; /* font-semibold */
    padding: 0.5rem; /* p-2 */
    border-bottom: 1px solid #d1d5db; /* border-b */
}

.training-table-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* grid-cols-6 */
    align-items: center;
    padding: 0.5rem; /* p-2 */
    border-bottom: 1px solid #d1d5db; /* border-b */
}

.table-cell-additional {
    padding: 0.25rem;
}

.table-cell-right-additional {
    text-align: right;
}

/* Remove button styling for additional info */
.remove-item-btn {
    color: #dc2626; /* text-red-600 */
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
}

.remove-item-btn:hover {
    color: #991b1b; /* hover:text-red-800 */
}

.remove-item-icon {
    width: 1.25rem; /* w-5 */
    height: 1.25rem; /* h-5 */
    display: inline-block;
}

/* Additional Info Container */
.additional-info-container {
    background-color: white; /* bg-white */
    padding: 1.5rem; /* p-6 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    margin-bottom: 1.5rem; /* mb-6 */
}

/* Grid layout for additional info form */
.additional-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* grid-cols-2 */
    gap: 1rem; /* gap-4 */
    margin-top: 0.5rem; /* mt-2 */
}

/* Modal styles specific to additional info */
.additional-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* grid-cols-2 */
    gap: 1rem; /* gap-4 */
}

.additional-modal-grid-single {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem; /* gap-4 */
}

/* Training modal special layout */
.training-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* grid-cols-2 */
    gap: 1rem; /* gap-4 */
}

.training-modal-full-width {
    grid-column: 1 / -1; /* col-span-2 */
}

/* Responsive adjustments for additional info */
@media (max-width: 768px) {
    .additional-info-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 0.5rem;
    }
    
    .language-table-header,
    .language-table-row {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 0.5rem;
    }
    
    .training-table-header,
    .training-table-row {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 0.5rem;
    }
    
    .table-cell-additional {
        text-align: left !important;
        border-bottom: 1px solid #e5e7eb;
        padding: 0.5rem;
    }
    
    .table-cell-additional::before {
        content: attr(data-label) ": ";
        font-weight: 600;
        display: inline-block;
        width: 120px;
    }
    
    .language-table-header,
    .training-table-header {
        display: none; /* Hide headers on mobile */
    }
    
    .additional-modal-grid,
    .training-modal-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
    }
}

/* Language and training row hover effects */
.language-row:hover,
.training-row:hover {
    background-color: #f9fafb; /* hover:bg-gray-50 */
}

/* Disabled section styling */
.disabled-section {
    margin-bottom: 2rem; /* Space between sections */
}

/* Language section styling */
.language-section {
    margin-bottom: 2rem; /* Space between sections */
}

/* Training section styling */
.training-section {
    margin-bottom: 2rem; /* Space between sections */
}

/* References Page Specific Styles - Add to existing custom-styles.css */

/* References form sections */
.references-form-section {
    margin-bottom: 2rem; /* Space between sections */
}

/* Acknowledgement Page Specific Styles - Add to existing custom-styles.css */

/* Acknowledgement Fieldset */
.acknowledgement-fieldset {
    margin-bottom: 1.5rem; /* Space between fieldset and other elements */
}

/* Checkbox Container */
.checkbox-container {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem; /* Increased spacing between checkboxes */
}

.checkbox-container:last-child {
    margin-bottom: 0;
}

/* Checkbox Input */
.checkbox-acknowledgement {
    height: 1.25rem; /* h-5 */
    width: 1.25rem; /* w-5 */
    color: #2563eb; /* text-blue-600 */
    border-radius: 0.25rem; /* rounded */
    border: 1px solid #d1d5db;
    margin-right: 0.75rem; /* ml-3 equivalent spacing */
}

.checkbox-acknowledgement:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); /* focus:ring-blue-500 */
}

/* Index Page Specific Styles - Add to existing custom-styles.css */

.breadcrumb-section {
    background-color: #f3f4f6; /* bg-gray-100 */
    border-bottom: 1px solid #e5e7eb;
}

.breadcrumb-container {
    max-width: 1280px; /* max-w-screen-xl */
    margin: 0 auto;
    padding: 0.5rem 1rem; /* px-4 py-2 */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.breadcrumb-nav {
    display: flex;
}

.breadcrumb-list {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem; /* space-x-1 */
    list-style: none; /* Remove default list styling */
    margin: 0;
    padding: 0;
}

@media (min-width: 768px) {
    .breadcrumb-list {
        gap: 0.75rem; /* md:space-x-3 */
    }
}

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
}

.breadcrumb-link {
    color: #374151; /* text-gray-700 */
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.breadcrumb-link:hover {
    color: #2563eb; /* hover:text-blue-600 */
}

.breadcrumb-icon {
    width: 1rem; /* w-4 */
    height: 1rem; /* h-4 */
    margin-right: 0.5rem; /* mr-2 */
    fill: currentColor;
}

.breadcrumb-separator {
    width: 1.5rem; /* w-6 */
    height: 1.5rem; /* h-6 */
    color: #9ca3af; /* text-gray-400 */
    fill: currentColor;
}

.breadcrumb-current {
    color: #6b7280; /* text-gray-500 */
    margin-left: 0.25rem; /* ml-1 - fixed the CSS variable syntax */
    font-weight: 500; /* font-medium */
}

/* Additional styles for user info section */
.user-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.user-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.register-link {
    color: #2563eb;
    text-decoration: none;
}

.register-link:hover {
    text-decoration: underline;
}

/* User Info Section */
.user-info {
    display: flex;
    align-items: center;
}

.user-icon {
    height: 1.5rem; /* h-6 */
    width: 1.5rem; /* w-6 */
    margin-right: 0.5rem; /* mr-2 */
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.register-link {
    font-weight: 700; /* font-bold */
    font-size: 1.125rem; /* text-lg */
    text-decoration: none;
    color: inherit;
}

/* Application Process Section */
.application-process-section {
    background-color: #f3f4f6; /* bg-gray-100 */
    padding: 3rem 0; /* py-12 */
}

.application-process-container {
    max-width: 1280px; /* max-w-screen-xl */
    margin: 0 auto;
    padding: 0 1rem; /* px-4 */
}

.application-process-title {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    margin-bottom: 2rem; /* mb-8 */
    color: #111827; /* text-gray-900 */
}

.process-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem; /* gap-6 */
}

@media (min-width: 768px) {
    .process-grid {
        grid-template-columns: repeat(4, 1fr); /* md:grid-cols-4 */
    }
}

.process-card {
    background-color: white; /* bg-white */
    padding: 1.5rem; /* p-6 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow */
    text-align: center;
}

.process-number {
    width: 3rem; /* w-12 */
    height: 3rem; /* h-12 */
    background-color: #dbeafe; /* bg-blue-100 */
    border-radius: 50%; /* rounded-full */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem; /* mx-auto mb-4 */
}

.process-number-text {
    color: #2563eb; /* text-blue-600 */
    font-weight: 700; /* font-bold */
}

.process-card-title {
    font-weight: 600; /* font-semibold */
    margin-bottom: 0.5rem; /* mb-2 */
}

.process-card-description {
    color: #4b5563; /* text-gray-600 */
}

.process-card-link {
    color: inherit;
    text-decoration: none;
}

/* Job Listings Section */
.job-listings-section {
    max-width: 1280px; /* max-w-screen-xl */
    margin: 0 auto;
    padding: 3rem 1rem; /* px-4 py-12 */
}

.job-listings-title {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    margin-bottom: 2rem; /* mb-8 */
    color: #111827; /* text-gray-900 */
}

.job-listings-container {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* space-y-4 */
}

/* Job Card */
.job-card {
    background-color: white; /* bg-white */
    padding: 1.5rem; /* p-6 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow */
    transition: box-shadow 0.2s;
}

.job-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* hover:shadow-lg */
}

.job-card-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.job-info {
    flex: 1;
}

.job-title-link {
    text-decoration: none;
    color: inherit;
}

.job-title {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    margin-bottom: 0.5rem; /* mb-2 */
}

.job-details {
    display: flex;
    gap: 1rem; /* gap-4 */
    font-size: 0.875rem; /* text-sm */
    color: #6b7280; /* text-gray-500 */
    margin-bottom: 1rem;
}

.job-details-separator {
    color: #6b7280; /* text-gray-500 */
}

.closing-date {
    color: #ef4444; /* text-red-500 */
}

.job-badge {
    display: inline-block;
    background-color: #dc2626; /* bg-red-600 */
    color: white;
    font-size: 0.75rem; /* text-xs */
    font-weight: 600; /* font-semibold */
    padding: 0.25rem 0.5rem; /* px-2 py-1 */
    border-radius: 9999px; /* rounded-full */
}

/* Apply Button */
.apply-btn {
    background-color: #2563eb; /* bg-blue-600 */
    color: white;
    padding: 0.5rem 1.5rem; /* px-6 py-2 */
    border-radius: 0.5rem; /* rounded-lg */
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
    font-weight: 500;
}

.apply-btn:hover {
    background-color: #1d4ed8; /* hover:bg-blue-700 */
}

/* No Vacancies Message */
.no-vacancies {
    background-color: white;
    padding: 1.5rem; /* p-6 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow */
    transition: box-shadow 0.2s;
    display: flex;
    justify-content: center;
}

.no-vacancies:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* hover:shadow-lg */
}

.no-vacancies-text {
    border: 1px solid #d1d5db; /* border-gray-300 */
    padding: 1rem; /* px-4 py-2 */
    text-align: center;
    grid-column: 1 / -1; /* colspan-6 equivalent */
}

/* Confirmation Dialog */
.confirm-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* bg-black bg-opacity-50 */
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirm-dialog-overlay.hidden {
    display: none;
}

.confirm-dialog-content {
    background-color: #e5e7eb; /* bg-gray-200 */
    border-radius: 0.5rem; /* rounded-lg */
    padding: 1.5rem; /* p-6 */
    width: 100%;
    max-width: 28rem; /* max-w-md */
    margin: 0 1rem; /* mx-4 */
}

.confirm-dialog-title {
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    margin-bottom: 1rem; /* mb-4 */
}

.confirm-dialog-text {
    color: #4b5563; /* text-gray-600 */
    margin-bottom: 1.5rem; /* mb-6 */
}

.confirm-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem; /* gap-4 */
}

.confirm-cancel-btn {
    padding: 0.5rem 1rem; /* px-4 py-2 */
    border: 1px solid #d1d5db; /* border-gray-300 */
    border-radius: 0.5rem; /* rounded-lg */
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.2s;
}

.confirm-cancel-btn:hover {
    background-color: #f9fafb; /* hover:bg-gray-50 */
}

.confirm-submit-btn {
    padding: 0.5rem 1rem; /* px-4 py-2 */
    background-color: #2563eb; /* bg-blue-600 */
    color: white;
    border-radius: 0.5rem; /* rounded-lg */
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.confirm-submit-btn:hover {
    background-color: #1d4ed8; /* hover:bg-blue-700 */
}

/* Success Alert */
.success-alert {
    background-color: #dcfce7; /* bg-green-100 */
    border: 1px solid #16a34a; /* border-green-400 */
    color: #166534; /* text-green-700 */
    padding: 0.75rem 1rem; /* px-4 py-3 */
    border-radius: 0.25rem; /* rounded */
    position: relative;
    margin-bottom: 2rem; /* Space before application process */
}

/* Responsive adjustments for index page */
@media (max-width: 768px) {
    .breadcrumb-container {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
    
    .job-card-content {
        flex-direction: column;
        gap: 1rem;
    }
    
    .job-details {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .apply-btn {
        width: 100%;
        text-align: center;
    }
    
    .confirm-dialog-content {
        margin: 1rem;
        max-width: calc(100% - 2rem);
    }
    
    .confirm-dialog-actions {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* Additional styles for index.php - Add these to your existing custom-styles.css */

/* User Guide Section Specific Styles */
.user-guide-section {
    background-color: #f3f4f6; /* bg-gray-100 */
    padding: 3rem 0; /* py-12 */
}

.user-guide-container {
    max-width: 1280px; /* max-w-screen-xl */
    margin: 0 auto;
    padding: 0 1rem; /* px-4 */
}

.user-guide-title {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    margin-bottom: 2rem; /* mb-8 */
    color: #111827; /* text-gray-900 */
}

.user-guide-text {
    text-align: justify;
    line-height: 1.6;
    color: #374151; /* text-gray-700 */
    background-color: white; /* bg-white */
    padding: 1.5rem; /* p-6 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow */
}

/* Enhanced Hero Section for Index Page */
.hero-section-index {
    background-color: #1e40af; /* bg-blue-800 */
    color: white;
    padding: 4rem 0; /* py-16 */
    position: relative;
    overflow: hidden;
    background-image: url('assets/img/shah.png');
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
}

.hero-container-index {
    max-width: 1280px; /* max-w-screen-xl */
    margin: 0 auto;
    padding: 0 1rem; /* px-4 */
}

.hero-title-index {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 700; /* font-bold */
    margin-bottom: 1rem; /* mb-4 */
}

.hero-description-index {
    font-size: 1.25rem; /* text-xl */
    margin-bottom: 2rem; /* mb-8 */
}

/* Breadcrumb enhancements for better consistency */
.breadcrumb-section {
    background-color: #f3f4f6; /* bg-gray-100 */
    border-bottom: 1px solid #e5e7eb;
}

.breadcrumb-container {
    max-width: 1280px; /* max-w-screen-xl */
    margin: 0 auto;
    padding: 0.5rem 1rem; /* px-4 py-2 */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* User info section styling consistency */
.user-info {
    display: flex;
    align-items: center;
    color: #374151; /* text-gray-700 */
}

.user-icon {
    height: 1.5rem; /* h-6 */
    width: 1.5rem; /* w-6 */
    margin-right: 0.5rem; /* mr-2 */
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.register-link {
    font-weight: 700; /* font-bold */
    font-size: 1.125rem; /* text-lg */
    text-decoration: none;
    color: inherit;
    transition: color 0.2s;
}

.register-link:hover {
    color: #2563eb; /* hover:text-blue-600 */
}

/* Responsive adjustments for index page */
@media (max-width: 768px) {
    .hero-section-index {
        padding: 2rem 0; /* py-8 on mobile */
        background-size: auto 100px;
        background-position: top right;
    }
    
    .hero-title-index {
        font-size: 1.875rem; /* text-3xl on mobile */
    }
    
    .hero-description-index {
        font-size: 1.125rem; /* text-lg on mobile */
    }
    
    .user-guide-title {
        font-size: 1.25rem; /* text-xl on mobile */
        margin-bottom: 1.5rem; /* mb-6 */
    }
    
    .user-guide-text {
        font-size: 0.875rem; /* text-sm on mobile */
    }
}

/* Privacy Policy Page Specific Styles - Add these to your existing custom-styles.css */

/* Privacy Policy Section */
.privacy-policy-section {
    background-color: #f3f4f6; /* bg-gray-100 */
    padding: 3rem 0; /* py-12 */
}

.privacy-policy-container {
    max-width: 1280px; /* max-w-screen-xl */
    margin: 0 auto;
    padding: 0 1rem; /* px-4 */
}

.privacy-policy-title {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    margin-bottom: 2rem; /* mb-8 */
    color: #111827; /* text-gray-900 */
}

.privacy-policy-content {
    text-align: justify;
    line-height: 1.6;
    color: #374151; /* text-gray-700 */
    background-color: white; /* bg-white */
    padding: 1.5rem; /* p-6 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow */
}

/* Responsive adjustments for privacy policy page */
@media (max-width: 768px) {
    .privacy-policy-title {
        font-size: 1.25rem; /* text-xl on mobile */
        margin-bottom: 1.5rem; /* mb-6 */
    }
    
    .privacy-policy-content {
        font-size: 0.875rem; /* text-sm on mobile */
        padding: 1rem; /* p-4 on mobile */
    }
}

/* Why Join UTHM Page Specific Styles - Add these to your existing custom-styles.css */

/* Why Join UTHM Section */
.whyjoin-section {
    background-color: #f3f4f6; /* bg-gray-100 */
    padding: 3rem 0; /* py-12 */
}

.whyjoin-container {
    max-width: 1280px; /* max-w-screen-xl */
    margin: 0 auto;
    padding: 0 1rem; /* px-4 */
}

.whyjoin-title {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    margin-bottom: 2rem; /* mb-8 */
    color: #111827; /* text-gray-900 */
}

.whyjoin-content {
    text-align: justify;
    line-height: 1.6;
    color: #374151; /* text-gray-700 */
    background-color: white; /* bg-white */
    padding: 1.5rem; /* p-6 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow */
}

/* Responsive adjustments for why join UTHM page */
@media (max-width: 768px) {
    .whyjoin-title {
        font-size: 1.25rem; /* text-xl on mobile */
        margin-bottom: 1.5rem; /* mb-6 */
    }
    
    .whyjoin-content {
        font-size: 0.875rem; /* text-sm on mobile */
        padding: 1rem; /* p-4 on mobile */
    }
}

/* FAQ Page Specific Styles - Add these to your existing custom-styles.css */

/* FAQ Section */
.faq-section {
    background-color: #f3f4f6; /* bg-gray-100 */
    padding: 3rem 0; /* py-12 */
}

.faq-container {
    max-width: 1280px; /* max-w-screen-xl */
    margin: 0 auto;
    padding: 0 1rem; /* px-4 */
}

.faq-title {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    margin-bottom: 2rem; /* mb-8 */
    color: #111827; /* text-gray-900 */
}

/* FAQ Accordion Container */
.faq-accordion-container {
    margin: 0 auto;
    padding: 2.5rem 1rem; /* py-10 px-4 */
    max-width: 1280px; /* container mx-auto */
}

.faq-accordion {
    max-width: 48rem; /* max-w-3xl */
    margin: 0 auto;
}

/* FAQ Accordion Item Styles */
.faq-accordion-heading {
    /* No additional styles needed - using existing styles */
}

.faq-accordion-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1.25rem; /* p-5 */
    font-weight: 500; /* font-medium */
    text-align: left;
    color: #111827; /* text-gray-900 */
    background-color: white; /* bg-white */
    border: 1px solid #e5e7eb; /* border border-gray-200 */
    transition: background-color 0.2s;
}

.faq-accordion-button:hover {
    background-color: #f9fafb; /* hover:bg-gray-100 */
}

.faq-accordion-button-first {
    border-top-left-radius: 0.75rem; /* rounded-t-xl */
    border-top-right-radius: 0.75rem;
}

.faq-accordion-button-last {
    border-bottom-left-radius: 0.75rem; /* rounded-b-xl */
    border-bottom-right-radius: 0.75rem;
}

.faq-accordion-icon {
    width: 1.5rem; /* w-6 */
    height: 1.5rem; /* h-6 */
    flex-shrink: 0; /* shrink-0 */
    fill: none;
    stroke: currentColor;
    transition: transform 0.2s;
}

.faq-accordion-icon-rotated {
    transform: rotate(180deg); /* rotate-180 */
}

.faq-accordion-body {
    /* Hidden by default */
}

.faq-accordion-body.hidden {
    display: none;
}

.faq-accordion-content {
    padding: 1.25rem; /* p-5 */
    background-color: white; /* bg-white */
    border: 1px solid #e5e7eb; /* border border-gray-200 */
}

.faq-accordion-text {
    color: #374151; /* text-gray-700 */
    line-height: 1.6;
}

/* Spacing adjustments */
.faq-spacing {
    margin-bottom: 3rem; /* br br br equivalent */
}

/* Responsive adjustments for FAQ page */
@media (max-width: 768px) {
    .faq-title {
        font-size: 1.25rem; /* text-xl on mobile */
        margin-bottom: 1.5rem; /* mb-6 */
    }
    
    .faq-accordion-container {
        padding: 1.5rem 1rem; /* py-6 px-4 on mobile */
    }
    
    .faq-accordion-button {
        padding: 1rem; /* p-4 on mobile */
        font-size: 0.875rem; /* text-sm on mobile */
    }
    
    .faq-accordion-content {
        padding: 1rem; /* p-4 on mobile */
    }
    
    .faq-accordion-text {
        font-size: 0.875rem; /* text-sm on mobile */
    }
}

/* Application Pages Specific Styles - Add these to your existing custom-styles.css */

/* My Application Page Specific Styles */
.my-application-section {
    background-color: #f3f4f6; /* bg-gray-100 */
    padding: 3rem 0; /* py-12 */
}

.my-application-container {
    max-width: 1280px; /* max-w-screen-xl */
    margin: 0 auto;
    padding: 0 1rem; /* px-4 */
}

.my-application-title {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    margin-bottom: 2rem; /* mb-8 */
    color: #111827; /* text-gray-900 */
}

.application-table-container {
    background-color: white; /* bg-white */
    padding: 1.5rem; /* p-6 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow */
    transition: box-shadow 0.2s;
    display: flex;
    justify-content: center;
}

.application-table-container:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* hover:shadow-lg */
}

.application-table {
    width: 100%; /* w-full */
    border-collapse: collapse;
    border: 1px solid #d1d5db; /* border-gray-300 */
}

.application-table-header {
    background-color: #f9fafb; /* bg-gray-200 */
    border: 1px solid #d1d5db; /* border-gray-300 */
    padding: 0.5rem 1rem; /* px-4 py-2 */
    text-align: left;
    font-weight: 600;
}

.application-table-header-center {
    background-color: #f9fafb; /* bg-gray-200 */
    border: 1px solid #d1d5db; /* border-gray-300 */
    padding: 0.5rem 1rem; /* px-4 py-2 */
    text-align: center;
    font-weight: 600;
}

.application-table-cell {
    border: 1px solid #d1d5db; /* border-gray-300 */
    padding: 0.5rem 1rem; /* px-4 py-2 */
}

.application-table-cell-center {
    border: 1px solid #d1d5db; /* border-gray-300 */
    padding: 0.5rem 1rem; /* px-4 py-2 */
    text-align: center;
}

.view-status-btn {
    background-color: #3b82f6; /* bg-blue-500 */
    color: white;
    padding: 0.25rem 1rem; /* px-4 py-1 */
    border-radius: 0.25rem; /* rounded */
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.view-status-btn:hover {
    background-color: #2563eb; /* hover:bg-blue-600 */
}

/* Application Status Page Specific Styles */
.status-info-container {
    background-color: white; /* bg-white */
    padding: 1.5rem; /* p-6 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow */
    transition: box-shadow 0.2s;
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem; /* mb-6 */
}

.status-info-container:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* hover:shadow-lg */
}

.status-table {
    width: 100%; /* w-full */
    border-collapse: collapse;
    border: 1px solid #d1d5db; /* border-gray-300 */
}

.status-table-header {
    background-color: #f9fafb; /* bg-gray-200 */
    border: 1px solid #d1d5db; /* border-gray-300 */
    padding: 0.5rem 1rem; /* px-4 py-2 */
    font-weight: 700; /* font-bold */
}

.status-table-cell {
    border: 1px solid #d1d5db; /* border-gray-300 */
    padding: 0.5rem 1rem; /* px-4 py-2 */
    text-align: center;
}

/* Progress Tracker Styles */
.progress-tracker-container {
    width: 100%;
    background-color: white; /* bg-white */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    border-radius: 0.5rem; /* rounded-lg */
    padding: 1.5rem; /* p-6 */
}

.progress-tracker-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem; /* space-x-4 */
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.progress-step-with-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    border-right: 2px solid #e5e7eb; /* border-r-2 border-gray-200 */
}

.progress-step-circle {
    width: 2.5rem; /* w-10 */
    height: 2.5rem; /* h-10 */
    border-radius: 50%; /* rounded-full */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem; /* mb-2 */
}

.progress-step-completed {
    background-color: #10b981; /* bg-green-500 */
    color: white;
}

.progress-step-current {
    background-color: #3b82f6; /* bg-blue-500 */
    color: white;
}

.progress-step-pending {
    background-color: #e5e7eb; /* bg-gray-200 */
    color: #6b7280; /* text-gray-600 */
}

.progress-step-failed {
    background-color: #ef4444; /* bg-red-500 */
    color: white;
}

.progress-step-check-icon {
    width: 1.5rem; /* w-6 */
    height: 1.5rem; /* h-6 */
}

.progress-step-number {
    font-weight: 700; /* font-bold */
}

.progress-step-title {
    font-size: 0.875rem; /* text-sm */
    text-align: center;
}

.progress-step-title-current {
    font-size: 0.875rem; /* text-sm */
    text-align: center;
    font-weight: 700; /* font-bold */
    color: #2563eb; /* text-blue-600 */
}

.progress-step-title-default {
    font-size: 0.875rem; /* text-sm */
    text-align: center;
    color: #6b7280; /* text-gray-600 */
}

.progress-step-title-failed {
    font-size: 0.875rem; /* same as .progress-step-title */
    text-align: center;
    font-weight: 700; /* font-bold */
    color: #f10303; /* same gray color */
}

/* Resume Display Page Specific Styles */
.resume-container {
    max-width: 112rem; /* max-w-7xl */
    margin: 0 auto;
    padding: 1.5rem; /* p-6 */
    gap: 1.5rem; /* space-y-6 */
}

.resume-header-section {
 background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.resume-header-gradient {
     background-color: #f3f4f6; /* Light gray background instead of blue */
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.resume-header-content {
     display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    gap: 1rem;
    color: #374151; /* Dark gray text instead of white */
}

.resume-section {
    background-color: white; /* bg-white */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
}

.resume-section-header {
   background-color: #f9fafb; /* bg-gray-50 */
    padding: 1rem 1.5rem; /* px-6 py-4 */
    border-bottom: 1px solid #e5e7eb; /* border-b border-gray-200 */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.resume-section-title {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    color: #1f2937; /* text-gray-800 */
}

.resume-edit-btn {
    background-color: #eab308; /* bg-yellow-500 */
    color: white;
    padding: 0.25rem 0.75rem; /* px-3 py-1 */
    border-radius: 0.5rem; /* rounded-lg */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    transition: background-color 0.2s;
    text-decoration: none;
}

.resume-edit-btn:hover {
    background-color: #ca8a04; /* hover:bg-yellow-600 */
}

.resume-section-content {
    padding: 1.5rem; /* p-6 */
}

.resume-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem; /* gap-8 */
}

@media (min-width: 1024px) {
    .resume-grid {
        grid-template-columns: 1fr 1fr; /* lg:grid-cols-2 */
    }
}

.resume-info-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem; /* gap-4 */
}

.resume-info-label {
    font-weight: 500; /* font-medium */
    color: #374151; /* text-gray-700 */
}

.resume-info-value {
    color: #111827; /* text-gray-900 */
}

.resume-contact-section {
    margin-top: 2rem; /* mt-8 */
    padding-top: 1.5rem; /* pt-6 */
    border-top: 1px solid #e5e7eb; /* border-t border-gray-200 */
}

.resume-contact-title {
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    color: #1f2937; /* text-gray-800 */
    margin-bottom: 1rem; /* mb-4 */
}

.resume-contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem; /* gap-4 */
}

@media (min-width: 1024px) {
    .resume-contact-grid {
        grid-template-columns: 1fr 3fr; /* lg:grid-cols-4 - but with span-3 for content */
    }
}

.resume-address-content {
    color: #111827; /* text-gray-900 */
    line-height: 1.6; /* leading-relaxed */
}

.resume-table-container {
    overflow-x: auto;
}

.resume-table {
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e5e7eb; /* divide-y divide-gray-200 */
}

.resume-table-header {
    background-color: #f9fafb; /* bg-gray-50 */
}

.resume-table-header-cell {
    padding: 0.75rem 1.5rem; /* px-6 py-3 */
    text-align: left;
    font-size: 0.75rem; /* text-xs */
    font-weight: 500; /* font-medium */
    color: #6b7280; /* text-gray-500 */
    text-transform: uppercase;
    letter-spacing: 0.05em; /* tracking-wider */
    border: 1px solid #e5e7eb;
}

.resume-table-body {
    background-color: white; /* bg-white */
    border-collapse: separate;
    border-spacing: 0;
}

.resume-table-cell {
    padding: 1rem 1.5rem; /* px-6 py-4 */
    white-space: nowrap;
    font-size: 0.875rem; /* text-sm */
    color: #111827; /* text-gray-900 */
    border: 1px solid #e5e7eb;
}

.resume-table-cell-wrap {
    padding: 1rem 1.5rem; /* px-6 py-4 */
    font-size: 0.875rem; /* text-sm */
    color: #111827; /* text-gray-900 */
    border: 1px solid #e5e7eb;
}

.resume-table-cell-highlight {
    padding: 1rem 1.5rem; /* px-6 py-4 */
    white-space: nowrap;
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    color: #2563eb; /* text-blue-600 */
    border: 1px solid #e5e7eb;
}

.resume-table-cell-success {
    padding: 1rem 1.5rem; /* px-6 py-4 */
    white-space: nowrap;
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    color: #059669; /* text-green-600 */
    border: 1px solid #e5e7eb;
}

.resume-flex-table {
    display: flex;
    gap: 1rem; /* gap-4 */
}

.resume-flex-table-section {
    overflow-x: auto;
}

.resume-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem; /* px-3 py-1 */
    border-radius: 9999px; /* rounded-full */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    background-color: #dbeafe; /* bg-blue-100 */
    color: #1e40af; /* text-blue-800 */
}

.resume-experience-card {
    background-color: #f9fafb; /* bg-gray-50 */
    border-radius: 0.5rem; /* rounded-lg */
    padding: 1rem; /* p-4 */
    gap: 0.75rem; /* space-y-3 */
}

.resume-experience-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem; /* gap-4 */
}

@media (min-width: 768px) {
    .resume-experience-grid {
        grid-template-columns: 1fr 1fr; /* md:grid-cols-2 */
    }
}

.resume-experience-item {
    display: flex;
    justify-content: space-between;
}

.resume-experience-label {
    font-weight: 500; /* font-medium */
    color: #374151; /* text-gray-700 */
}

.resume-experience-value {
    color: #111827; /* text-gray-900 */
}

.resume-language-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem; /* gap-4 */
}

@media (min-width: 768px) {
    .resume-language-grid {
        grid-template-columns: 1fr 1fr; /* md:grid-cols-2 */
    }
}

.resume-language-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem; /* p-3 */
    background-color: #f9fafb; /* bg-gray-50 */
    border-radius: 0.5rem; /* rounded-lg */
}

.resume-language-name {
    font-weight: 500; /* font-medium */
    color: #111827; /* text-gray-900 */
}

.resume-language-level {
    padding: 0.25rem 0.75rem; /* px-3 py-1 */
    background-color: #dbeafe; /* bg-blue-100 */
    color: #1e40af; /* text-blue-800 */
    border-radius: 9999px; /* rounded-full */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
}

.resume-declaration-box {
    background-color: #eff6ff; /* bg-blue-50 */
    border-left: 4px solid #3b82f6; /* border-l-4 border-blue-500 */
    padding: 1rem; /* p-4 */
    margin-bottom: 1.5rem; /* mb-6 */
}

.resume-declaration-text {
    color: #374151; /* text-gray-700 */
    line-height: 1.6; /* leading-relaxed */
}

.resume-status-box {
    background: linear-gradient(to right, #ecfdf5, #eff6ff); /* bg-gradient-to-r from-green-50 to-blue-50 */
    border: 1px solid #e5e7eb; /* border border-gray-200 */
    border-radius: 0.5rem; /* rounded-lg */
    padding: 1rem; /* p-4 */
}

.resume-status-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Print Styles for Resume */
@media print {
    .resume-edit-btn,
    .bg-yellow-500,
    .bg-blue-600,
    .bg-gray-600,
    .bg-indigo-600,
    button,
    a[href] .fas {
        display: none !important;
    }
    
    .resume-section,
    .shadow-md {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
    
    .resume-header-gradient {
        background-color: #f3f4f6; /* Light gray background instead of blue */
        padding: 1rem 1.5rem;
        border-bottom: 1px solid #e5e7eb;
    }



    .bg-gradient-to-r {
        background: #1e40af !important;
        color: white !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    body {
        font-size: 12px;
    }
    
    .resume-section-title,
    .text-2xl {
        font-size: 18px !important;
    }
    
    .text-xl {
        font-size: 16px !important;
    }
    
    .text-lg {
        font-size: 14px !important;
    }
    
    .resume-section-content,
    .p-6 {
        padding: 1rem !important;
    }
    
    .space-y-6 > * + * {
        margin-top: 1rem !important;
    }
    
    .resume-container {
        max-width: 100% !important;
        padding: 0.5rem !important;
    }
}

/* Responsive adjustments for application pages */
@media (max-width: 768px) {
    .application-table,
    .status-table,
    .resume-table {
        font-size: 0.875rem; /* text-sm */
    }
    
    .application-table-header,
    .application-table-header-center,
    .application-table-cell,
    .application-table-cell-center,
    .status-table-header,
    .status-table-cell {
        padding: 0.5rem; /* p-2 */
    }
    
    .progress-tracker-steps {
        flex-direction: column;
        gap: 1rem;
    }
    
    .progress-step-with-connector {
        border-right: none;
        border-bottom: 2px solid #e5e7eb;
        padding-bottom: 1rem;
    }
    
    .resume-grid,
    .resume-contact-grid,
    .resume-experience-grid,
    .resume-language-grid {
        grid-template-columns: 1fr;
    }
    
    .resume-flex-table {
        flex-direction: column;
    }
    
    .resume-table-cell,
    .resume-table-cell-wrap,
    .resume-table-cell-highlight,
    .resume-table-cell-success {
        padding: 0.5rem; /* p-2 */
        font-size: 0.75rem; /* text-xs */
    }
    
    .resume-info-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
}

/* Auth Pages Specific Styles - ADD THESE TO YOUR EXISTING CSS */

/* Auth Hero Section */
.auth-hero-section {
    background-color: #1e40af; /* bg-blue-800 */
    color: white;
    padding: 4rem 0; /* py-16 */
    position: relative;
    overflow: hidden;
    background-image: url('../../assets/img/shah.png');
    background-size: cover;
    background-position: right center;
}

/* Auth Main Container */
.auth-main-container {
    background-color: #f3f4f6; /* bg-gray-100 */
    padding: 3rem 0; /* py-12 */
}

/* Auth Form Wrapper */
.auth-form-wrapper {
    width: 100%;
    max-width: 28rem; /* max-w-md */
    margin: 0 auto;
}

/* Auth Form Container */
.auth-form-container {
    background-color: white; /* bg-white */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    border-radius: 0.5rem; /* rounded-lg */
    overflow: hidden;
}

/* Auth Form Content */
.auth-form-content {
    padding: 2.5rem 2rem; /* px-8 py-10 */
}

/* Auth Form Header */
.auth-form-header {
    text-align: center;
    margin-bottom: 2rem; /* mb-8 */
}

/* Auth Form Title */
.auth-form-title {
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    margin-bottom: 1rem; /* mb-4 */
    color: #003C71;
}

/* Auth Form */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* space-y-6 */
}

/* Auth Form Group */
.auth-form-group {
    display: flex;
    flex-direction: column;
}

/* Auth Form Label */
.auth-form-label {
    display: block;
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    color: #374151; /* text-gray-700 */
    margin-bottom: 0.25rem; /* mb-1 */
}

/* Auth Form Input */
.auth-form-input {
    width: 100%; /* w-full */
    padding: 0.5rem; /* p-2 */
    border: 1px solid #d1d5db; /* border-gray-300 */
    border-radius: 0.5rem; /* rounded-lg */
    font-size: 1rem;
}

.auth-form-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px #005BAB; /* focus:ring-2 focus:ring-[#005BAB] */
    border-color: #005BAB; /* focus:border-[#005BAB] */
}

/* Auth Form Input Error */
.auth-form-input-error {
    border-color: #ef4444; /* border-red-400 */
}

.auth-form-input-error:focus {
    box-shadow: 0 0 0 2px #ef4444; /* focus:ring-red-500 */
    border-color: #ef4444; /* focus:border-red-400 */
}

/* Auth Error Message */
.auth-error-message {
    color: #ef4444; /* text-red-500 */
    font-size: 0.75rem; /* text-xs */
    margin-top: 0.25rem; /* mt-1 */
}

/* Auth Form Actions */
.auth-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Auth Forgot Link */
.auth-forgot-link {
    font-size: 0.875rem; /* text-sm */
    color: #005BAA;
    text-decoration: none;
}

.auth-forgot-link:hover {
    color: #003C71;
}

/* Auth Submit Button */
.auth-submit-btn {
    width: 100%; /* w-full */
    padding: 0.75rem 0; /* py-3 */
    color: white;
    font-weight: 600; /* font-semibold */
    border-radius: 0.5rem; /* rounded-lg */
    transition: background-color 0.3s;
    background-color: #2563eb;
    border: none;
    cursor: pointer;
}

.auth-submit-btn:hover {
    background-color: #1d4ed8;
}

/* Auth Footer Text */
.auth-footer-text {
    margin-top: 1.5rem; /* mt-6 */
    text-align: center;
}

.auth-footer-text p {
    font-size: 0.875rem; /* text-sm */
    color: #6b7280; /* text-gray-600 */
}

/* Auth Register Link */
.auth-register-link {
    font-weight: 600; /* font-semibold */
    color: #005BAB;
    text-decoration: none;
}

.auth-register-link:hover {
    color: #003C71;
}

/* Reset Instructions */
.reset-instructions {
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: #6b7280;
}

/* Password Requirements */
.password-requirements {
    font-size: 0.75rem;
    color: #6b7280;
    font-style: italic;
}

/* Resend Verification Specific Styles */
.resend-container {
    max-width: 1280px; /* max-w-screen-xl */
    margin: 0 auto;
    padding: 3rem 1rem; /* px-4 py-12 */
}

.resend-form-container {
    max-width: 42rem; /* max-w-2xl */
    margin: 0 auto;
}

.resend-form-wrapper {
    background-color: white; /* bg-white */
    padding: 2rem; /* p-8 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow */
}

.resend-title {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    margin-bottom: 1.5rem; /* mb-6 */
    color: #111827; /* text-gray-900 */
}

.resend-description {
    color: #6b7280; /* text-gray-600 */
    margin-bottom: 1.5rem; /* mb-6 */
}

.resend-form-group {
    margin-bottom: 1rem; /* mb-4 */
}

.resend-form-label {
    display: block;
    margin-bottom: 0.5rem; /* mb-2 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    color: #111827; /* text-gray-900 */
}

.resend-form-input {
    background-color: #f9fafb; /* bg-gray-50 */
    border: 1px solid #d1d5db; /* border-gray-300 */
    color: #111827; /* text-gray-900 */
    font-size: 0.875rem; /* text-sm */
    border-radius: 0.5rem; /* rounded-lg */
    display: block;
    width: 100%; /* w-full */
    padding: 0.625rem; /* p-2.5 */
}

.resend-form-input:focus {
    box-shadow: 0 0 0 2px #3b82f6; /* focus:ring-blue-500 */
    border-color: #3b82f6; /* focus:border-blue-500 */
    outline: none;
}

.resend-form-input-error {
    border-color: #ef4444; /* border-red-500 */
}

.resend-submit-btn {
    width: 100%; /* w-full */
    color: white;
    background-color: #2563eb; /* bg-blue-600 */
    padding: 0.625rem 1.25rem; /* px-5 py-2.5 */
    text-align: center;
    font-weight: 500; /* font-medium */
    border-radius: 0.5rem; /* rounded-lg */
    font-size: 0.875rem; /* text-sm */
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.resend-submit-btn:hover {
    background-color: #1d4ed8; /* hover:bg-blue-700 */
}

.resend-submit-btn:focus {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3); /* focus:ring-4 focus:ring-blue-300 */
    outline: none;
}

.resend-back-link {
    margin-top: 1.5rem; /* mt-6 */
    text-align: center;
}

.resend-back-link a {
    color: #2563eb; /* text-blue-600 */
    text-decoration: none;
}

.resend-back-link a:hover {
    text-decoration: underline;
}

/* Responsive adjustments for auth pages */
@media (max-width: 768px) {
    .auth-hero-section {
        padding: 2rem 0; /* py-8 on mobile */
        background-size: auto 100px;
        background-position: top right;
    }
    
    .auth-form-content {
        padding: 1.5rem 1rem; /* px-4 py-6 on mobile */
    }
    
    .auth-form-title {
        font-size: 1rem; /* text-base on mobile */
    }
    
    .breadcrumb-container {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
    
    .resend-form-wrapper {
        padding: 1rem; /* p-4 on mobile */
        margin: 1rem;
    }
    
    .resend-title {
        font-size: 1.25rem; /* text-xl on mobile */
        margin-bottom: 1rem; /* mb-4 */
    }
}