/* Mobile First Responsive Design */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100%;
}

/* Mobile Navigation - Base Styles */
@media (max-width: 768px) {
    /* 
      Sticky Footer and Full-Bleed Section Fixes.
      This ensures the footer stays at the bottom of the screen on pages with short content,
      and that the footer's background color extends to the full screen width.
    */
    body {
        min-height: 100vh; /* Make body at least as tall as the viewport */
        display: flex;
        flex-direction: column;
    }
    main {
        flex-grow: 1; /* Allow the main content to grow and push the footer down */
    }
    .footer {
        width: 100%; /* Ensure footer spans the full width */
        box-sizing: border-box; /* Include padding in the width calculation */
    }

    /* Standard Navigation */
    .navbar, .header-container {
        position: static;
        background: white;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        padding: 10px 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }
    
    /* Logo Section */
    .logo-section {
        display: flex;
        align-items: center;
        flex: 1;
    }
    
    .logo-image, .logo {
        width: 35px;
        height: 35px;
        margin-right: 10px;
    }
    
    .logo-text, .site-name {
        font-size: 16px;
        font-weight: bold;
    }
    
    /* Navigation Links */
    .nav-links {
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 0;
        margin: 10px 0 0 0;
        list-style: none;
        flex-wrap: wrap;
        gap: 8px;
        order: 3;
    }
    
    .nav-item {
        font-size: 12px;
        padding: 8px 12px;
        border-radius: 15px;
        background: rgba(183, 28, 80, 0.1);
        text-decoration: none;
        color: #333;
        white-space: nowrap;
        text-align: center;
        min-width: 70px;
    }
    
    .nav-item.active {
        background: #b71c50;
        color: white;
    }
    
    /* User Profile */
    .user-profile {
        display: flex;
        align-items: center;
        gap: 8px;
        order: 2;
    }
    
    .profile-image {
        width: 30px;
        height: 30px;
    }
    
    .profile-name {
        font-size: 12px;
    }
    
    .status-text {
        font-size: 10px;
    }
    
    .upgrade-btn {
        font-size: 9px;
        padding: 4px 8px;
        border-radius: 10px;
    }
    
    .logout-btn {
        font-size: 9px;
        padding: 3px 8px;
        border-radius: 8px;
    }
    
    /* Body Padding Reset */
    body {
        padding-top: 0 !important;
    }

    /* Home Page Hero Section Mobile Styles */
    .hero-section {
        flex-direction: column; /* Stack image and content vertically */
        padding: 0 !important; /* Remove padding to allow image to be full-width */
        height: auto;
        margin-top: 0 !important;
        min-height: auto;
    }

    .hero-banner-image {
        position: static !important; /* Make image part of the document flow */
        height: auto;
        max-height: 250px; /* Control the banner height on mobile */
        object-fit: cover; /* Ensure image covers the area nicely */
    }

    .hero-content {
        padding: 20px; /* Add padding around the button */
        width: 100%;
        background-color: #f5f5f5; /* Add a background for the button area */
    }

    /* Stats Section Mobile Styles */
    .stats-container {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 100%;
        padding: 0 10px;
    }

    .stat-card {
        padding: 20px;
    }

    /* Footer Mobile Styles */
    .footer {
        padding: 20px 15px;
        height: auto;
        background-color: #9f1e58;
    }

    .footer .container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin-top: 0;
    }

    .footer-column {
        text-align: center;
        width: 100%;
        margin-bottom: 20px;
        padding-right: 0;
    }

    .footer-column h3 {
        margin-top: 0;
        margin-right: 0;
        font-size: 16px;
    }

    .brand-column .footer-logo {
        margin: 0 auto 15px; /* Center the logo */
    }

    .footer-tagline {
        text-align: center;
        max-width: 300px; /* Prevent text from being too wide */
        margin: 0 auto;
    }

    .footer-column ul {
        text-align: center;
        margin: 0;
        margin-right: 0;
    }

    .footer-column li {
        margin-bottom: 10px;
    }

    .contact-item {
        justify-content: center;
        flex-direction: column;
        text-align: center;
    }

    .contact-item i {
        margin-right: 0;
        margin-bottom: 5px;
    }

    .footer-update, .social-icons {
        width: 100%;
        justify-content: center;
    }

    .social-icons {
        justify-content: center;
        margin-top: 0;
    }

    /* Why Choose Section Mobile Styles */
    .why-choose-section {
        padding: 20px 10px;
        overflow-x: visible;
    }

    .section-title {
        font-size: 28px;
        margin-bottom: 30px;
    }

    .features-container {
        flex-wrap: wrap;
        gap: 20px;
        justify-content: space-around;
        overflow-x: visible;
    }

    .feature-card {
        width: calc(50% - 10px);
        padding: 20px 10px;
        max-width: none;
    }

    /* App Download Section Mobile Styles */
    .app-download-section {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 20px 10px;
    }

    .app-store-buttons {
        display: flex;
        gap: 15px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .app-store-buttons img {
        max-width: 140px;
        height: auto;
        max-height: 50px;
    }

    /* Membership Page Banner Image Adjustment */
    .membership-image {
        margin-top: -5px;
    }

    /* Added styles for matches grid on mobile */
    .matches-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    .match-card {
        width: 100% !important;
        max-width: none !important;
        min-width: auto !important;
    }

    /* Styles for matches count on mobile */
    .matches-count {
        font-size: 1.5rem;
        margin: 20px 0;
        font-weight: bold;
        text-align: center;
        color: #b71c50;
    }

    /* Ensure matches list section is visible below filters in mobile */
    .matches-list-section {
        margin-top: 0 !important;
        margin-bottom: 20px;
    }

    /* Login page mobile styles are handled in login.css - no overrides needed */

}
/* Extra small screens for real phones */
@media (max-width: 480px) {
    /* Navigation adjustments */
    .logo-image, .logo {
        width: 30px;
        height: 30px;
        margin-right: 8px;
    }
    
    .logo-text, .site-name {
        font-size: 14px;
    }
    
    .nav-item {
        font-size: 11px;
        padding: 6px 10px;
        min-width: 60px;
    }
    
    .profile-image {
        width: 25px;
        height: 25px;
    }
    
    .profile-name {
        font-size: 11px;
    }
    
    .status-text {
        font-size: 9px;
    }
    
    .upgrade-btn {
        font-size: 8px;
        padding: 3px 6px;
    }
    
    .logout-btn {
        font-size: 8px;
        padding: 2px 6px;
    }
    
    /* Stats Section */
    .stats-container {
        padding: 0 5px;
        gap: 15px;
    }
    
    .stat-card {
        padding: 15px;
    }
    
    /* Footer */
    .footer {
        padding: 15px 10px;
    }
    
    .footer-column h3 {
        font-size: 14px;
    }
    
    .footer-column li {
        margin-bottom: 8px;
    }
    
    /* Why Choose Section */
    .why-choose-section {
        padding: 15px 5px;
    }
    
    .section-title {
        font-size: 24px;
        margin-bottom: 20px;
    }
    
    .features-container {
        gap: 15px;
    }
    
    .feature-card {
        width: 100%;
        padding: 15px 5px;
    }
    
    /* App Download */
    .app-download-section {
        padding: 15px 5px;
        gap: 15px;
    }
    
    .app-store-buttons img {
        max-width: 120px;
        max-height: 40px;
    }
    
    /* Matches */
    .matches-count {
        font-size: 1.2rem;
        margin: 15px 0;
    }

    /* Search Container Extra Small */
    .search-input {
        max-width: 250px;
        font-size: 14px;
        padding: 10px 12px;
    }

    .search-btn {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    /* Search Container Mobile */
    .search-and-count {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }

    .search-container {
        width: 100%;
        justify-content: center;
    }

    .search-input {
        width: 100%;
        max-width: 280px;
        font-size: 16px;
        padding: 12px 15px;
    }

    .search-btn {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }

    .matches-count {
        text-align: center;
        order: -1;
    }

    /* Registration Card */
    .registration-card {
        width: 95%;
        margin-top: 20px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .card-form {
        padding: 15px;
    }
    
    .card-title {
        font-size: 1.2rem;
    }
    
    .card-subtitle {
        font-size: 0.8rem;
    }

    /* Home page sliders */
    .profile-card {
        min-width: 200px; /* Adjust card width for better viewing on mobile */
    }

    .interest-card {
        min-width: 280px; /* Make interest cards wider */
        flex-shrink: 0;
    }
}

/* Contact Page Mobile */
@media (max-width: 768px) {
    .banner {
        height: 200px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .banner-content {
        text-align: center;
        color: white;
        z-index: 2;
    }
    
    .banner-content h1 {
        font-size: 28px;
        margin: 0;
        font-weight: 700;
    }
    
    .banner-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #b71c50, #8b1538);
        z-index: 1;
    }
    
    .main-content {
        flex-direction: column;
        padding: 10px;
        gap: 20px;
        margin-top: 0;
    }
    
    .contact-info-section {
        order: 2;
        margin: 20px 0;
        padding: 0;
    }
    
    .contact-cards {
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding: 0;
        margin: 0;
    }
    
    .contact-card {
        padding: 20px 15px;
        text-align: center;
        width: 100%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        background: white;
        margin: 0;
    }
    
    .contact-card h3 {
        font-size: 18px;
        margin-bottom: 10px;
        color: #b71c50;
    }
    
    .contact-card p {
        font-size: 14px;
        line-height: 1.5;
        margin: 0;
    }
    
    .contact-icon {
        margin-bottom: 15px;
    }
    
    .contact-form-section {
        order: 1;
        padding: 20px 0;
        margin: 0;
        width: 100%;
        max-width: 100%;
    }
    
    .form-container {
        margin: 0;
        padding: 0;
    }
    
    .form-container h2 {
        font-size: 22px;
        margin-bottom: 15px;
        text-align: center;
    }
    
    .form-container p {
        font-size: 14px;
        margin-bottom: 20px;
        text-align: center;
    }
    
    .contact-form {
        max-width: 100%;
        margin: 0;
        padding: 0 10px;
    }
    
    .form-row {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-bottom: 0;
    }
    
    .form-group {
        margin-bottom: 15px;
        width: 100%;
    }
    
    .form-group label {
        font-size: 14px;
        margin-bottom: 8px;
        display: block;
        font-weight: 600;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
        padding: 12px;
        font-size: 14px;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-sizing: border-box;
    }
    
    .form-group textarea {
        min-height: 100px;
        resize: vertical;
    }
    
    .submit-btn {
        width: 100%;
        padding: 15px;
        font-size: 16px;
        margin-top: 20px;
        border-radius: 8px;
        background: #b71c50;
        color: white;
        border: none;
        cursor: pointer;
        min-height: 50px;
    }
}

/* Styles for extra small screens (e.g., iPhone SE, screens < 375px) */
@media (max-width: 375px) {
    /* Home Page Specifics */
    .hero-heading {
        font-size: 1.8rem; /* Smaller heading for very small screens */
    }

    .hero-subtext {
        font-size: 0.9rem; /* Smaller subtext */
    }

    .hero-button {
        font-size: 0.9rem;
        padding: 10px 18px;
    }

    .stat-number {
        font-size: 1.8rem; /* Reduce size of stat numbers */
    }

    .recently-viewed-title,
    .daily-recommendation-title,
    .recent-interest-title {
        font-size: 1.2rem; /* Adjust section titles */
    }
}

/* Registration Success Popup */
.success-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.success-popup-content {
    background: white;
    padding: 30px 40px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.success-popup-content .success-icon {
    font-size: 48px;
    color: #28a745;
    margin-bottom: 15px;
}

.success-popup-content h3 {
    font-size: 24px;
    color: #333;
    margin: 0 0 10px;
}

.success-popup-content p {
    font-size: 16px;
    color: #666;
    margin: 0;
}

/* Styles for Inter-Caste Buttons (similar to Dosham buttons) */
.inter-caste-options {
    display: flex;
    gap: 10px;
}

.inter-caste-btn {
    padding: 10px 20px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    border-radius: 5px;
    cursor: pointer;
}

.inter-caste-btn.active {
    background-color: #b71c50;
    color: white;
    border-color: #b71c50;
}

/* Interest Sent Popup */
.interest-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.interest-popup-content {
    background: white;
    padding: 30px 40px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    transform: scale(0.7);
    opacity: 0;
    animation: popup-swoop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.interest-popup-icon {
    font-size: 48px;
    animation: popup-heart-beat 1.5s infinite;
}

.interest-popup-content h3 {
    font-size: 24px;
    color: #d81b60;
    margin: 10px 0;
}

@keyframes popup-swoop-in {
    to { transform: scale(1); opacity: 1; }
}

@keyframes popup-heart-beat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Interest Already Sent Popup */
.already-sent-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.already-sent-popup-content {
    background: white;
    padding: 30px 40px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    transform: scale(0.7);
    opacity: 0;
    animation: popup-swoop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.already-sent-popup-icon {
    font-size: 48px;
    color: #ffc107; /* A warm, friendly yellow */
}

.already-sent-popup-content h3 {
    font-size: 22px;
    color: #333;
    margin: 15px 0 10px;
}

.already-sent-popup-content p {
    font-size: 16px;
    color: #666;
    margin: 0;
}

/* Premium Required Modal for Chat */
.premium-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000; /* Higher than other popups */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.premium-modal-content {
    background: white;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    max-width: 450px;
    width: 90%;
    transform: scale(0.8);
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}

.premium-modal-overlay.show {
    opacity: 1;
}

.premium-modal-overlay.show .premium-modal-content {
    opacity: 1;
    transform: scale(1);
}

.premium-modal-icon {
    font-size: 60px;
    color: #d81b60; /* Pink/red for premium */
    margin-bottom: 20px;
    line-height: 1;
}

.premium-modal-content h2 {
    font-size: 26px;
    color: #333;
    margin-bottom: 15px;
}

.premium-modal-content p {
    font-size: 16px;
    color: #555;
    margin-bottom: 10px;
    line-height: 1.5;
}

.premium-modal-benefits {
    text-align: left;
    margin: 20px 0;
    padding: 0 20px;
}

.premium-modal-benefits .benefit {
    font-size: 15px;
    color: #444;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.premium-modal-benefits .benefit::before {
    content: '✓';
    color: #28a745; /* Green checkmark */
    font-weight: bold;
    margin-right: 10px;
    font-size: 18px;
}

.premium-modal-actions {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.premium-modal-actions .upgrade-btn {
    background-color: #b71c50;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-size: 17px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.premium-modal-actions .upgrade-btn:hover {
    background-color: #9f1e58;
}

.premium-modal-actions .back-btn {
    background-color: transparent;
    color: #b71c50;
    padding: 10px 20px;
    border: 1px solid #b71c50;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.premium-modal-actions .back-btn:hover {
    background-color: #f0f0f0;
}

@media (max-width: 480px) {
    .premium-modal-content {
        padding: 20px;
    }
    .premium-modal-icon {
        font-size: 50px;
    }
    .premium-modal-content h2 {
        font-size: 22px;
    }
    .premium-modal-content p {
        font-size: 14px;
    }
    .premium-modal-benefits {
        padding: 0 10px;
    }
    .premium-modal-actions .upgrade-btn,
    .premium-modal-actions .back-btn {
        font-size: 15px;
        padding: 10px 20px;
    }
}

/* ===== PAYMENT PAGE MOBILE RESPONSIVE STYLES ===== */
@media (max-width: 768px) {
    body {
        padding-top: 80px;
    }

    .u-wrapper {
        padding: 10px !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .top-content-wrapper {
        flex-direction: column !important;
        gap: 20px !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .plan-selection-card {
        width: 100% !important;
        margin: 0 !important;
        padding: 20px 15px !important;
        box-sizing: border-box;
    }

    .summary-and-promo-container {
        width: 100% !important;
        margin: 0 !important;
    }

    .billing-summary-container {
        width: 100% !important;
        padding: 15px !important;
        box-sizing: border-box;
    }

    .promo-container {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 15px !important;
    }

    .promo-input {
        width: 100% !important;
        flex-basis: auto !important;
        margin-bottom: 10px;
        box-sizing: border-box;
    }

    .apply-button {
        width: 100% !important;
        flex-basis: auto !important;
        padding: 12px !important;
    }

    .payment-method-container {
        width: 100% !important;
        margin: 0 !important;
        padding: 15px !important;
        box-sizing: border-box;
    }

    .payment-tabs {
        flex-wrap: wrap;
        gap: 5px;
    }

    .payment-tab {
        flex: 1;
        min-width: 80px;
        padding: 12px 8px;
        font-size: 14px;
        text-align: center;
    }

    .payment-section {
        padding: 15px 0;
    }

    .payment-section input,
    .payment-section select {
        width: 100% !important;
        padding: 12px;
        font-size: 16px;
        margin-bottom: 15px;
        box-sizing: border-box;
    }

    .upi-apps {
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }

    .app-item {
        flex: 1;
        min-width: 80px;
        padding: 10px;
        text-align: center;
    }

    .pay-now-button {
        width: 100% !important;
        padding: 15px;
        font-size: 16px;
        margin-top: 20px;
        box-sizing: border-box;
    }

    .payment-popup-overlay {
        padding: 20px;
    }

    .payment-popup {
        width: 90% !important;
        max-width: 400px;
        margin: 0 auto;
        padding: 20px;
        box-sizing: border-box;
    }
}

@media (max-width: 480px) {
    .plan-selection-card {
        padding: 15px 10px !important;
    }

    .plan-price {
        font-size: 1.8rem !important;
    }

    .payment-tab {
        font-size: 12px;
        padding: 10px 6px;
    }

    .app-item {
        min-width: 70px;
        padding: 8px;
        font-size: 12px;
    }

    .payment-popup {
        width: 95% !important;
        padding: 15px;
    }

    .billing-summary-container,
    .promo-container,
    .payment-method-container {
        padding: 10px !important;
    }

    /* Details page small screens */
    .photo-slider {
        height: 250px !important;
    }

    .main-photo {
        height: 250px !important;
    }

    .profile-info h1 {
        font-size: 1.5rem !important;
    }

    .about-section,
    .details-section {
        padding: 15px 10px !important;
    }

    .about-section h2,
    .details-section h2 {
        font-size: 1.1rem !important;
    }

    .detail-row .value {
        font-size: 13px !important;
    }

    .send-interest-btn,
    .start-chat-btn {
        padding: 10px 15px !important;
        font-size: 13px !important;
    }

    .slider-nav {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
    }

    .overlay-image {
        width: 95vw !important;
        height: 50vh !important;
    }

    .tab {
        padding: 8px 12px;
        font-size: 12px;
    }

    .contact-info {
        padding: 10px !important;
    }

    .phone-number {
        font-size: 14px !important;
    }

    .email-address {
        font-size: 12px !important;
    }
}

/* ===== DETAILS PAGE MOBILE RESPONSIVE STYLES ===== */
@media (max-width: 768px) {
    .matrimony-profile {
        padding: 10px !important;
    }

    .profile-header {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
        padding: 20px 15px !important;
        text-align: center;
    }

    .profile-photo {
        width: 100% !important;
        max-width: 280px !important;
        flex-shrink: 0;
    }

    .photo-slider {
        width: 100% !important;
        max-width: 280px !important;
        height: 300px !important;
    }

    .main-photo {
        width: 100% !important;
        max-width: 280px !important;
        height: 300px !important;
    }

    .profile-info {
        width: 100% !important;
        text-align: center !important;
        min-height: auto !important;
    }

    .profile-info h1 {
        font-size: 1.8rem !important;
        margin-bottom: 10px;
    }

    .basic-info {
        font-size: 16px !important;
    }

    .education-work {
        font-size: 14px !important;
    }

    .action-buttons {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        align-items: center;
    }

    .send-interest-btn,
    .start-chat-btn {
        width: 100% !important;
        max-width: 280px;
        padding: 12px 20px !important;
        font-size: 14px !important;
        text-align: center;
    }

    .about-section,
    .details-section {
        padding: 20px 15px !important;
        margin: 10px 0;
    }

    .about-section h2,
    .details-section h2 {
        font-size: 1.3rem !important;
    }

    .detail-row {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 10px 0;
    }

    .detail-row .label {
        font-weight: 600;
        color: #b71c50;
        margin-bottom: 5px;
    }

    .detail-row .value {
        color: #333;
        font-size: 14px;
    }

    .family-row,
    .career-row,
    .pref-row {
        flex-direction: column !important;
        gap: 5px !important;
        align-items: flex-start;
    }

    .family-row .value,
    .career-row .value,
    .pref-row .value {
        text-align: left !important;
        font-size: 14px;
    }

    .contact-info {
        padding: 15px !important;
        margin-top: 20px;
    }

    .contact-actions {
        justify-content: center;
        flex-wrap: wrap;
    }

    .phone-number {
        font-size: 16px !important;
    }

    .email-address {
        font-size: 14px !important;
    }

    .slider-nav {
        width: 35px !important;
        height: 35px !important;
        font-size: 16px !important;
    }

    .slider-prev {
        left: 5px !important;
    }

    .slider-next {
        right: 5px !important;
    }

    .overlay-image {
        width: 90vw !important;
        height: 60vh !important;
    }

    .close-overlay {
        top: 10px !important;
        right: 20px !important;
        font-size: 30px !important;
    }

    .tabs {
        flex-wrap: wrap;
        gap: 10px;
        margin-left: 0 !important;
        justify-content: center;
    }

    .tab {
        padding: 10px 15px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .photo-slider {
        height: 250px !important;
    }

    .profile-name {
        font-size: 1.3rem;
    }

    .detail-card {
        padding: 12px;
    }

    .detail-card h3 {
        font-size: 1rem;
    }

    .detail-value {
        font-size: 13px;
    }

    .action-btn {
        padding: 10px;
        font-size: 13px;
    }

    .slider-nav {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }

    .overlay-image {
        width: 95vw;
        height: 50vh;
    }

    .tab {
        padding: 8px 12px;
        font-size: 12px;
    }
}

/* ===== REGISTRATION PAGES MOBILE RESPONSIVE STYLES ===== */
@media (max-width: 768px) {
    /* Basic Details, Religious Details, Education Details, About Yourself Pages */
    .basic-container {
        padding: 0;
        min-height: 100vh;
    }

    /* Header Mobile for Registration Pages */
    .otp-header {
        padding: 10px 15px;
        flex-wrap: wrap;
    }
    
    .otp-logo {
        height: 35px;
        margin-right: 8px;
    }
    
    .otp-header-title {
        font-size: 16px;
    }

    /* Form Header Mobile */
    .form-header {
        padding: 20px 15px;
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .header-text {
        text-align: center;
    }
    
    .header-text h2 {
        font-size: 1.3rem;
        margin-bottom: 5px;
    }
    
    .header-text p {
        font-size: 0.9rem;
    }
    
    .progress {
        width: 50px;
        height: 50px;
        margin: 0;
        font-size: 12px;
    }
    
    .progress::before {
        width: 38px;
        height: 38px;
    }

    /* Main Content Mobile */
    .main-content {
        padding: 10px;
        align-items: stretch;
    }
    
    .form-wrapper {
        grid-template-columns: 1fr;
        max-width: 100%;
        margin: 0;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .image-section {
        order: 1;
        max-height: 200px;
        overflow: hidden;
    }
    
    .image-section img {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }
    
    .form-section {
        order: 2;
        padding: 20px 15px;
    }

    /* Form Elements Mobile */
    .dob-age-group {
        flex-direction: column;
        gap: 15px;
    }
    
    .form-group {
        margin-bottom: 15px;
    }
    
    label {
        font-size: 14px;
        margin-bottom: 6px;
    }
    
    input[type="text"],
    input[type="date"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    select,
    textarea {
        padding: 12px;
        font-size: 16px; /* Prevents zoom on iOS */
        border-radius: 6px;
    }
    
    .gender-options,
    .dosham-options,
    .inter-caste-options {
        flex-direction: column;
        gap: 8px;
    }
    
    .gender-btn,
    .dosham-btn,
    .inter-caste-btn {
        padding: 12px;
        font-size: 14px;
        text-align: center;
    }
    
    .continue-btn {
        padding: 15px;
        font-size: 16px;
        margin-top: 25px;
        border-radius: 8px;
    }

    /* Upload Area Mobile */
    .upload-area {
        padding: 20px 15px;
        border-radius: 6px;
    }
    
    .upload-area svg {
        width: 24px;
        height: 24px;
    }
    
    .upload-area span {
        font-size: 14px;
        margin-top: 8px;
    }
    
    .preview-container {
        gap: 8px;
        justify-content: center;
    }
    
    .preview-container img {
        width: 70px;
        height: 70px;
        border-radius: 6px;
    }

    /* About Yourself Textarea */
    #about-yourself {
        height: 120px;
        font-size: 14px;
        padding: 12px;
    }

    /* Password Requirements Mobile */
    .password-input-wrapper input {
        padding: 12px 40px 12px 12px;
        font-size: 16px;
    }
    
    .password-toggle {
        right: 10px;
        font-size: 16px;
    }
    
    .password-requirements {
        padding: 8px;
        margin-top: 6px;
    }
    
    .requirement {
        font-size: 11px;
    }

    /* Footer Mobile */
    .copyright {
        padding: 15px 10px;
        font-size: 0.8rem;
    }

    /* OTP Page Enhanced Mobile */
    .otp-main-container {
        padding: 15px 10px;
        min-height: calc(100vh - 70px);
        justify-content: center;
    }

    .otp-card-container {
        flex-direction: column;
        max-width: 100%;
        margin: 0;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .otp-image-section {
        width: 100%;
        padding: 20px;
        order: 1;
        background: linear-gradient(135deg, #f9dce5, #fce4ec);
        min-height: 150px;
    }
    
    .otp-illustration {
        max-width: 200px;
        height: auto;
    }

    .otp-form-section {
        width: 100%;
        padding: 25px 20px;
        order: 2;
        background-color: #fff;
    }
    
    .otp-title {
        font-size: 18px;
        margin-bottom: 12px;
        text-align: center;
        color: #333;
    }
    
    .otp-info {
        font-size: 13px;
        margin-bottom: 25px;
        text-align: center;
        color: #666;
        line-height: 1.4;
    }

    .otp-input-group {
        justify-content: center;
        gap: 8px;
        margin-bottom: 25px;
        flex-wrap: wrap;
    }
    
    .otp-prefix {
        font-size: 16px;
        margin-right: 8px;
        margin-bottom: 5px;
    }
    
    .otp-input {
        width: 45px;
        height: 45px;
        font-size: 18px;
        border: 2px solid #ddd;
        border-radius: 8px;
        background-color: #fff;
        transition: border-color 0.3s ease;
    }
    
    .otp-input:focus {
        outline: none;
        border-color: #9f1e58;
        box-shadow: 0 0 0 3px rgba(159, 30, 88, 0.1);
    }

    .otp-verify-btn {
        width: 100%;
        padding: 15px;
        font-size: 16px;
        border-radius: 8px;
        margin-bottom: 15px;
        transition: background-color 0.3s ease;
    }
    
    .otp-resend {
        font-size: 14px;
        margin-top: 15px;
        padding: 10px;
        text-decoration: underline;
    }

    .otp-footer-text {
        margin-top: 20px;
        font-size: 11px;
        padding: 0 10px;
    }
}

/* Registration Pages Extra Small Screens */
@media (max-width: 480px) {
    .otp-header {
        padding: 8px 10px;
    }
    
    .otp-logo {
        height: 30px;
        margin-right: 6px;
    }
    
    .otp-header-title {
        font-size: 14px;
    }
    
    .form-header {
        padding: 15px 10px;
    }
    
    .header-text h2 {
        font-size: 1.1rem;
    }
    
    .header-text p {
        font-size: 0.8rem;
    }
    
    .progress {
        width: 45px;
        height: 45px;
        font-size: 11px;
    }
    
    .progress::before {
        width: 33px;
        height: 33px;
    }
    
    .form-section {
        padding: 15px 10px;
    }
    
    .form-group {
        margin-bottom: 12px;
    }
    
    label {
        font-size: 13px;
    }
    
    input[type="text"],
    input[type="date"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    select,
    textarea {
        padding: 10px;
        font-size: 16px;
    }
    
    .gender-btn,
    .dosham-btn,
    .inter-caste-btn {
        padding: 10px;
        font-size: 13px;
    }
    
    .continue-btn {
        padding: 12px;
        font-size: 15px;
        margin-top: 20px;
    }
    
    .upload-area {
        padding: 15px 10px;
    }
    
    .upload-area svg {
        width: 20px;
        height: 20px;
    }
    
    .upload-area span {
        font-size: 13px;
    }
    
    .preview-container img {
        width: 60px;
        height: 60px;
    }
    
    #about-yourself {
        height: 100px;
        font-size: 13px;
    }

    /* Height input fields on mobile */
    .height-input-fields {
        display: flex;
        gap: 10px;
        width: 100%;
    }

    /* Matches grid: 1 column for very small screens */
    .matches-grid {
        grid-template-columns: 1fr;
    }

    .pagination a {
        padding: 6px 12px;
        margin: 0 4px;
    }
    
    .copyright {
        padding: 10px;
        font-size: 0.75rem;
    }

    /* OTP Extra Small */
    .otp-main-container {
        padding: 10px 5px;
    }
    
    .otp-form-section {
        padding: 20px 15px;
    }
    
    .otp-title {
        font-size: 16px;
    }
    
    .otp-info {
        font-size: 12px;
    }
    
    .otp-input-group {
        gap: 6px;
    }
    
    .otp-prefix {
        font-size: 14px;
    }
    
    .otp-input {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    .otp-verify-btn {
        padding: 12px;
        font-size: 15px;
    }
    
    .otp-resend {
        font-size: 13px;
    }
    
    .otp-footer-text {
        font-size: 10px;
    }
}

/* Registration Pages Landscape Orientation */
@media (max-width: 768px) and (orientation: landscape) {
    .image-section {
        display: none;
    }
    
    .form-header {
        padding: 10px 15px;
    }
    
    .main-content {
        padding: 5px;
    }
    
    .form-section {
        padding: 15px;
    }
    
    .form-group {
        margin-bottom: 10px;
    }
    
    #about-yourself {
        height: 80px;
    }

    .otp-image-section {
        display: none;
    }
    
    .otp-main-container {
        padding: 10px;
    }
    
    .otp-form-section {
        padding: 20px;
    }
    
    .otp-input-group {
        margin-bottom: 20px;
    }
}