/* Kalyanam Matrimony - Modern Design System CSS */
/* Version 2.0 - Premium Redesign */

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

:root {
    --primary: #EE4359;
    --primary-light: #FF6B7D;
    --primary-dark: #D13347;
    --charcoal: #231F20;
    --grey: #727071;
    --grey-light: #9CA3AF;
    --blush: #E4B0B7;
    --white: #FEFEFE;
    --bg-light: #FFF8F9;
    --bg-cream: #FFFBF5;
    --success: #10B981;
    --gold: #F59E0B;
    --warning: #F97316;
    --info: #3B82F6;
    --error: #EF4444;
    --shadow-sm: 0 2px 8px rgba(238, 67, 89, 0.08);
    --shadow: 0 4px 20px rgba(238, 67, 89, 0.12);
    --shadow-lg: 0 10px 40px rgba(238, 67, 89, 0.18);
    --radius: 16px;
    --radius-sm: 10px;
    --radius-full: 50px;
}

/* Reset & Base */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    background: linear-gradient(180deg, var(--bg-light) 0%, var(--bg-cream) 100%);
    color: var(--charcoal);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--primary);
}

img {
    max-width: 100%;
    height: auto;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--charcoal);
    line-height: 1.3;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

p {
    color: var(--grey);
    line-height: 1.7;
}

/* Container */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Modern Header Override */
#header, .header, header {
    background: var(--white) !important;
    padding: 16px 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.06) !important;
    border-bottom: 1px solid var(--blush) !important;
}

/* Navigation */
.nav, .navigation, #navigation, .menu, .main-menu {
    display: flex !important;
    gap: 24px !important;
    align-items: center !important;
}

.nav a, .navigation a, .menu a {
    color: var(--charcoal) !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    padding: 8px 12px !important;
    border-radius: var(--radius-sm) !important;
    transition: all 0.3s ease !important;
}

.nav a:hover, .navigation a:hover, .menu a:hover {
    color: var(--primary) !important;
    background: rgba(238, 67, 89, 0.05) !important;
}

/* Buttons */
.btn, .btn1, .button, input[type="submit"], input[type="button"], button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 24px !important;
    border-radius: var(--radius) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border: none !important;
    font-family: inherit !important;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(238,67,89,0.3) !important;
}

.btn:hover, .btn1:hover, .button:hover, input[type="submit"]:hover, input[type="button"]:hover, button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(238,67,89,0.4) !important;
}

.btn-outline, .btn-secondary {
    background: transparent !important;
    border: 2px solid var(--primary) !important;
    color: var(--primary) !important;
    box-shadow: none !important;
}

.btn-outline:hover, .btn-secondary:hover {
    background: var(--primary) !important;
    color: white !important;
}

.btn-success, .btn-green {
    background: linear-gradient(135deg, var(--success), #059669) !important;
    box-shadow: 0 4px 15px rgba(16,185,129,0.3) !important;
}

.btn-gold, .btn-premium {
    background: linear-gradient(135deg, var(--gold), #D97706) !important;
    box-shadow: 0 4px 15px rgba(245,158,11,0.3) !important;
}

/* Form Elements */
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], 
input[type="number"], input[type="date"], select, textarea {
    width: 100%;
    padding: 14px 18px !important;
    border: 2px solid var(--blush) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 1rem !important;
    font-family: inherit !important;
    transition: all 0.3s ease !important;
    background: var(--white) !important;
    color: var(--charcoal) !important;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, 
input[type="tel"]:focus, input[type="number"]:focus, input[type="date"]:focus,
select:focus, textarea:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px rgba(238,67,89,0.1) !important;
}

input[type="checkbox"], input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    accent-color: var(--primary) !important;
    cursor: pointer !important;
}

label {
    font-weight: 500 !important;
    color: var(--charcoal) !important;
    font-size: 0.95rem !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* Cards */
.card, .box, .panel, .profile-card {
    background: var(--white) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;
    padding: 24px !important;
    transition: all 0.3s ease !important;
    border: none !important;
}

.card:hover, .box:hover, .panel:hover {
    box-shadow: var(--shadow-lg) !important;
}

/* Profile Cards */
.profile-box, .member-box, .user-card {
    background: var(--white) !important;
    border-radius: var(--radius) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow) !important;
    transition: all 0.3s ease !important;
}

.profile-box:hover, .member-box:hover, .user-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--shadow-lg) !important;
}

.profile-box img, .member-box img, .user-card img {
    width: 100% !important;
    aspect-ratio: 1 !important;
    object-fit: cover !important;
}

/* Tables */
table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: var(--white) !important;
    border-radius: var(--radius) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow) !important;
}

th {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    color: white !important;
    padding: 16px 20px !important;
    font-weight: 600 !important;
    text-align: left !important;
}

td {
    padding: 14px 20px !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    color: var(--charcoal) !important;
}

tr:hover td {
    background: rgba(238,67,89,0.02) !important;
}

/* Alerts & Messages */
.alert, .message, .notification, .error, .success {
    padding: 16px 20px !important;
    border-radius: var(--radius-sm) !important;
    margin-bottom: 16px !important;
    font-weight: 500 !important;
}

.alert-success, .success {
    background: rgba(16,185,129,0.1) !important;
    color: var(--success) !important;
    border: 1px solid var(--success) !important;
}

.alert-error, .error, .alert-danger {
    background: rgba(239,68,68,0.1) !important;
    color: var(--error) !important;
    border: 1px solid var(--error) !important;
}

.alert-warning, .warning {
    background: rgba(245,158,11,0.1) !important;
    color: var(--gold) !important;
    border: 1px solid var(--gold) !important;
}

/* Page Headers */
.page-header, .page-title, .page-heading {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    padding: 60px 0 !important;
    color: white !important;
    text-align: center !important;
    margin-bottom: 40px !important;
}

.page-header h1, .page-title h1 {
    color: white !important;
    font-size: 2.5rem !important;
    font-weight: 800 !important;
}

/* Sidebar / Filters */
.sidebar, .side-menu, .filter-box, #side_menu {
    background: var(--white) !important;
    border-radius: var(--radius) !important;
    padding: 24px !important;
    box-shadow: var(--shadow) !important;
}

.sidebar h3, .side-menu h3, .filter-box h3 {
    font-size: 1.1rem !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid var(--blush) !important;
}

/* Trust Badges */
.verified-badge, .trust-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    background: rgba(16,185,129,0.1) !important;
    color: var(--success) !important;
    border-radius: var(--radius-full) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
}

.verified-badge::before {
    content: '✓' !important;
}

/* Photo Upload */
.photo-upload, .image-upload, .upload-box {
    border: 2px dashed var(--blush) !important;
    border-radius: var(--radius) !important;
    padding: 40px !important;
    text-align: center !important;
    background: rgba(238,67,89,0.02) !important;
    transition: all 0.3s ease !important;
}

.photo-upload:hover, .image-upload:hover, .upload-box:hover {
    border-color: var(--primary) !important;
    background: rgba(238,67,89,0.05) !important;
}

/* Footer Override */
#footer, .footer, footer {
    background: var(--charcoal) !important;
    color: white !important;
    padding: 50px 0 30px !important;
    margin-top: 60px !important;
}

#footer a, .footer a, footer a {
    color: rgba(255,255,255,0.7) !important;
    transition: color 0.3s ease !important;
}

#footer a:hover, .footer a:hover, footer a:hover {
    color: white !important;
}

/* Pagination */
.pagination, .paging {
    display: flex !important;
    gap: 8px !important;
    justify-content: center !important;
    margin: 40px 0 !important;
}

.pagination a, .paging a, .pagination span {
    padding: 10px 16px !important;
    border-radius: var(--radius-sm) !important;
    background: var(--white) !important;
    color: var(--charcoal) !important;
    font-weight: 500 !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all 0.3s ease !important;
}

.pagination a:hover, .paging a:hover {
    background: var(--primary) !important;
    color: white !important;
}

.pagination .active, .pagination .current {
    background: var(--primary) !important;
    color: white !important;
}

/* Loading States */
.loading, .loader {
    display: inline-block !important;
    width: 40px !important;
    height: 40px !important;
    border: 4px solid var(--blush) !important;
    border-top-color: var(--primary) !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
    h1 { font-size: 1.8rem !important; }
    h2 { font-size: 1.5rem !important; }
    
    .container {
        padding: 0 16px !important;
    }
    
    .btn, input[type="submit"], input[type="button"] {
        padding: 12px 20px !important;
        font-size: 0.9rem !important;
    }
    
    .card, .box, .panel {
        padding: 16px !important;
    }
}

/* Utility Classes */
.text-primary { color: var(--primary) !important; }
.text-success { color: var(--success) !important; }
.text-gold { color: var(--gold) !important; }
.text-grey { color: var(--grey) !important; }
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

.bg-primary { background: var(--primary) !important; }
.bg-white { background: var(--white) !important; }
.bg-light { background: var(--bg-light) !important; }

.mt-1 { margin-top: 8px !important; }
.mt-2 { margin-top: 16px !important; }
.mt-3 { margin-top: 24px !important; }
.mt-4 { margin-top: 32px !important; }

.mb-1 { margin-bottom: 8px !important; }
.mb-2 { margin-bottom: 16px !important; }
.mb-3 { margin-bottom: 24px !important; }
.mb-4 { margin-bottom: 32px !important; }

.p-1 { padding: 8px !important; }
.p-2 { padding: 16px !important; }
.p-3 { padding: 24px !important; }
.p-4 { padding: 32px !important; }

.rounded { border-radius: var(--radius) !important; }
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

.shadow { box-shadow: var(--shadow) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }

/* Hide old design elements */
.old-design, .legacy-element {
    display: none !important;
}

/* ================================================
   MYPROFILE.PHP - MODERN EDIT PROFILE STYLES
   ================================================ */

/* Main Profile Edit Container */
.AccordionPanel, .AccordionPanelContent {
    background: var(--white) !important;
    border: none !important;
    border-radius: var(--radius) !important;
    margin-bottom: 16px !important;
    box-shadow: var(--shadow) !important;
}

.AccordionPanelTab, .Accordion .AccordionPanelTab {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    color: white !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    padding: 18px 24px !important;
    border: none !important;
    border-radius: var(--radius) var(--radius) 0 0 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.AccordionPanelTab:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary)) !important;
}

.AccordionPanelContent {
    padding: 24px !important;
    border-radius: 0 0 var(--radius) var(--radius) !important;
}

/* Sidebar Navigation */
.AccordionPanel ul, .profile-menu ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.AccordionPanel ul li a, .profile-menu ul li a {
    display: block !important;
    padding: 14px 20px !important;
    color: var(--charcoal) !important;
    font-weight: 500 !important;
    border-radius: var(--radius-sm) !important;
    margin: 4px 0 !important;
    transition: all 0.3s ease !important;
    border-left: 3px solid transparent !important;
}

.AccordionPanel ul li a:hover, .profile-menu ul li a:hover {
    background: var(--bg-light) !important;
    color: var(--primary) !important;
    border-left-color: var(--primary) !important;
}

.AccordionPanel ul li a.active, .profile-menu ul li a.active {
    background: linear-gradient(135deg, rgba(238,67,89,0.1), rgba(238,67,89,0.05)) !important;
    color: var(--primary) !important;
    border-left-color: var(--primary) !important;
    font-weight: 600 !important;
}

/* Form Styling */
.form-control, input[type="text"], input[type="email"], input[type="password"], 
input[type="tel"], input[type="number"], input[type="date"], textarea, select {
    width: 100% !important;
    padding: 14px 18px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.95rem !important;
    border: 2px solid var(--blush) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--white) !important;
    color: var(--charcoal) !important;
    transition: all 0.3s ease !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.form-control:focus, input[type="text"]:focus, input[type="email"]:focus, 
input[type="password"]:focus, input[type="tel"]:focus, input[type="number"]:focus,
input[type="date"]:focus, textarea:focus, select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px rgba(238, 67, 89, 0.1) !important;
}

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23727071' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    padding-right: 40px !important;
}

/* Form Labels */
label, .form-label, td:first-child {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 500 !important;
    color: var(--charcoal) !important;
    font-size: 0.9rem !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* Required field indicator */
.star, label .required, span.required {
    color: var(--primary) !important;
    font-weight: 700 !important;
}

/* Form Row Layout */
.form-group, .row, tr {
    margin-bottom: 20px !important;
}

/* Table Form Layout - Common in myprofile */
table.form-table, table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 12px !important;
}

table td {
    padding: 8px 12px !important;
    vertical-align: middle !important;
}

/* Section Headers */
h2, h3, h4, .section-title, .profile-title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: var(--charcoal) !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}

.profile-title, .section-header {
    color: var(--primary) !important;
    font-size: 1.3rem !important;
    border-bottom: 2px solid var(--blush) !important;
    padding-bottom: 12px !important;
    margin-bottom: 24px !important;
}

/* Radio & Checkbox Styling */
input[type="radio"], input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    accent-color: var(--primary) !important;
    cursor: pointer !important;
}

input[type="radio"] + label, input[type="checkbox"] + label {
    display: inline !important;
    margin-left: 8px !important;
    cursor: pointer !important;
}

/* Photo Upload Section */
.photo-upload, .upload-section, .image-upload {
    background: var(--bg-light) !important;
    border: 2px dashed var(--blush) !important;
    border-radius: var(--radius) !important;
    padding: 40px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
}

.photo-upload:hover, .upload-section:hover {
    border-color: var(--primary) !important;
    background: rgba(238, 67, 89, 0.05) !important;
}

/* Photo Grid */
.photo-grid, .gallery {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 16px !important;
    margin-top: 20px !important;
}

.photo-item, .gallery-item {
    position: relative !important;
    border-radius: var(--radius-sm) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-sm) !important;
}

.photo-item img, .gallery-item img {
    width: 100% !important;
    height: 150px !important;
    object-fit: cover !important;
}

/* Success/Error Messages */
.success-msg, .alert-success, .message-success {
    background: linear-gradient(135deg, #D1FAE5, #ECFDF5) !important;
    color: #065F46 !important;
    padding: 16px 20px !important;
    border-radius: var(--radius-sm) !important;
    border-left: 4px solid var(--success) !important;
    margin-bottom: 20px !important;
    font-weight: 500 !important;
}

.error-msg, .alert-danger, .message-error {
    background: linear-gradient(135deg, #FEE2E2, #FEF2F2) !important;
    color: #991B1B !important;
    padding: 16px 20px !important;
    border-radius: var(--radius-sm) !important;
    border-left: 4px solid var(--error) !important;
    margin-bottom: 20px !important;
    font-weight: 500 !important;
}

/* Tabs Override for SpryTabbedPanels */
.TabbedPanels, .TabbedPanelsTabGroup {
    background: transparent !important;
    border: none !important;
}

.TabbedPanelsTab {
    background: var(--white) !important;
    border: 2px solid var(--blush) !important;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    color: var(--grey) !important;
    transition: all 0.3s ease !important;
}

.TabbedPanelsTab:hover, .TabbedPanelsTabSelected {
    background: var(--primary) !important;
    color: white !important;
    border-color: var(--primary) !important;
}

.TabbedPanelsContentGroup {
    background: var(--white) !important;
    border: 2px solid var(--blush) !important;
    border-top: none !important;
    border-radius: 0 0 var(--radius) var(--radius) !important;
    padding: 24px !important;
}

/* Page Header Override */
.profile-header-section {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    color: white !important;
    padding: 40px 0 !important;
    margin-bottom: 30px !important;
    text-align: center !important;
}

.profile-header-section h1 {
    color: white !important;
    font-size: 2rem !important;
}

/* Sidebar Styling */
.sidebar-menu, .profile-sidebar, .left-panel {
    background: var(--white) !important;
    border-radius: var(--radius) !important;
    padding: 20px !important;
    box-shadow: var(--shadow) !important;
}

/* Main Content Area */
.main-content-area, .profile-content, .right-panel {
    background: var(--white) !important;
    border-radius: var(--radius) !important;
    padding: 30px !important;
    box-shadow: var(--shadow) !important;
}

/* Fix old table styles */
table[width], table[cellpadding], table[cellspacing] {
    width: 100% !important;
    background: transparent !important;
}

table[width] td {
    background: transparent !important;
}

/* Input file styling */
input[type="file"] {
    padding: 12px !important;
    border: 2px dashed var(--blush) !important;
    border-radius: var(--radius-sm) !important;
    width: 100% !important;
    cursor: pointer !important;
    background: var(--bg-light) !important;
}

input[type="file"]:hover {
    border-color: var(--primary) !important;
}

/* Date picker styling */
input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer !important;
    filter: invert(40%) sepia(90%) saturate(1500%) hue-rotate(330deg) !important;
}

/* Responsive for Edit Profile */
@media (max-width: 768px) {
    .AccordionPanelTab {
        font-size: 1rem !important;
        padding: 14px 18px !important;
    }
    
    .AccordionPanelContent {
        padding: 16px !important;
    }
    
    table td {
        display: block !important;
        width: 100% !important;
        padding: 8px 0 !important;
    }
    
    .main-content-area, .profile-content {
        padding: 16px !important;
    }
}