/* Love Compatibility Calculator - Romantic Theme *//* CSS Variables for Optimized Color Theme */:root {--primary-gradient: linear-gradient(135deg, #2D5A3D 0%, #245A32 50%, #1B4A27 100%);--secondary-gradient: linear-gradient(135deg, #00B894 0%, #00A085 50%, #008F76 100%);--accent-orange: #FF7675;--accent-white: #FFFFFF;--background-main: #F5F7FA;--background-light: #FFFFFF;--background-secondary: #E8F5EA;--background-gradient: linear-gradient(135deg, #F5F7FA 0%, #E8F5EA 100%);--text-dark: #2C3E50;--text-medium: #4A4A4A;--text-light: #6B7280;--heading-color: #2D5A3D;--button-primary: #00B894;--button-secondary: #2D5A3D;--highlight-color: #FF7675;--border-light: #DDE6ED;--card-border: #DDE6ED;--shadow-modern: 0 4px 20px rgba(45, 90, 61, 0.15);--shadow-hover: 0 8px 30px rgba(45, 90, 61, 0.25);--success-color: #007A61;--warning-color: #FF7675;--error-color: #E74C3C;--card-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);}/* Reset and Base Styles */* {margin: 0;padding: 0;box-sizing: border-box;}/* Screen reader only class for accessibility */.sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0;}/* Container */.container {max-width: 1200px;margin: 0 auto;padding: 0 1rem;}/* Navigation */.main-nav {background: var(--primary-gradient);backdrop-filter: blur(15px);border-bottom: 1px solid var(--border-light);position: sticky;top: 0;z-index: 100;box-shadow: var(--card-shadow);}.nav-content {display: flex;align-items: center;justify-content: space-between;padding: 1rem 0;gap: 2rem;}.logo {display: flex;align-items: center;gap: 0.75rem;text-decoration: none;font-weight: 800;font-size: 1.5rem;color: white;position: relative;text-shadow: 0 2px 4px rgba(0,0,0,0.3);}/* Heart icon removed from logo *//* Calculator Grid Layout */.calculators-grid {display: flex;flex-direction: column;gap: 3rem;}.calculator-card {/* Removed padding, border, box-shadow, border-radius as requested */}.calculator-column {background: var(--background-light);border-radius: 4px;padding: 1.5rem;box-shadow: var(--card-shadow);border: 1px solid var(--card-border);transition: all 0.3s ease;}.calculator-column:hover {transform: translateY(-2px);box-shadow: var(--shadow-hover);}/* Result Display Colors */.days-number {color: #1A3A23 !important;font-weight: 900 !important;text-shadow: 0 2px 4px rgba(26, 54, 93, 0.3) !important;}.final-date {font-size: 3rem;font-weight: 800;color: #1A3A23;line-height: 1;text-shadow: 0 2px 4px rgba(26, 54, 93, 0.3);}/* Form Alignment for Add/Subtract */.add-subtract-grid {display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 1rem;margin-bottom: 1rem;width: 100%;align-items: end;}@media (max-width: 768px) {.add-subtract-grid {grid-template-columns: 1fr;gap: 1rem;} .calculators-grid {gap: 2rem;}}@keyframes heartbeat {0%, 100% {transform: scale(1);} 50% {transform: scale(1.1);}}.nav-links {display: flex;gap: 2rem;align-items: center;}.nav-link {text-decoration: none;color: white;font-weight: 500;padding: 0.5rem 1rem;border-radius: 4px;transition: all 0.3s ease;position: relative;text-shadow: 0 1px 2px rgba(0,0,0,0.1);}.nav-link:hover,.nav-link.active {background: rgba(255, 255, 255, 0.2);color: white;transform: translateY(-2px);box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);}.language-selector select {background: var(--background-light-pink);border: 1px solid var(--border-light);border-radius: 4px;padding: 0.5rem 1rem;color: var(--text-dark);font-size: 0.9rem;cursor: pointer;}/* Remove conflicting mobile language selector rules */.calculator-grid {display: grid;grid-template-columns: 1fr;gap: 2rem;align-items: start;}/* Visual Section (Left) */.visual-section {position: relative;}.visual-card {background: white;border-radius: 4px;padding: 1.5rem;position: relative;overflow: hidden;max-width: 100%;}.visual-card::before {content: '';position: absolute;top: 0;left: 0;right: 0;background: var(--primary-gradient);}.main-heading {font-size: 2.5rem;font-weight: 800;margin-bottom: 1rem;background: var(--primary-gradient);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;line-height: 1.2;}.card-subtitle {font-size: 1.1rem;color: var(--text-medium);margin-bottom: 2rem;line-height: 1.5;text-align: center;}/* Smart Section (Right) */.smart-section {position: relative;display: none;}.smart-card {background: linear-gradient(135deg, #FFFFFF 0%, #fafafb 100%);border: 1px solid var(--border-light);border-radius: 4px;padding: 2.5rem;box-shadow: var(--shadow-romantic);border: 1px solid var(--border-light);position: relative;overflow: hidden;}.smart-card::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 4px;background: var(--secondary-gradient);}.card-title {font-size: 1.8rem;font-weight: 700;margin-bottom: 0.5rem;color: var(--text-dark);}/* Form Styles */.form-columns {display: grid;grid-template-columns: 1fr 1fr;gap: 2rem;margin-bottom: 2rem;}.form-column {display: flex;flex-direction: column;}.name-gender-row {display: flex;gap: 0;align-items: center;border: 2px solid var(--border-light);border-radius: 4px;background: white;overflow: hidden;transition: all 0.3s ease;}.name-gender-row:focus-within {border-color: #FF6B9D;box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.1);}.name-input {flex: 0 0 80%;border: none;background: transparent;outline: none;padding: 0.875rem 1rem;}.name-input:focus {border: none;box-shadow: none;}.gender-select {min-width: 110px;font-size: 0.9rem;border: none;border-left: 1px solid var(--border-light);background: transparent;outline: none;padding: 0.875rem 0.75rem;cursor: pointer;}.gender-select:focus {border-color: var(--border-light);box-shadow: none;}.form-section {background: var(--background-light-pink);border-radius: 4px;padding: 1.5rem;border: 1px solid var(--border-light);}.section-title {font-size: 1.2rem;font-weight: 600;margin-bottom: 1rem;color: var(--text-dark);display: flex;align-items: center;gap: 0.5rem;}.optional {font-size: 0.9rem;color: var(--text-medium);font-weight: 500;opacity: 0.8;}.form-row {margin-bottom: 1.5rem;}.form-label {display: block;font-weight: 600;margin-bottom: 0.5rem;color: var(--text-dark);}.form-input,.form-select,.form-textarea {width: 100%;padding: 0.875rem 1rem;border: 2px solid var(--border-light);border-radius: 4px;font-size: 1rem;background: white;transition: all 0.3s ease;}/* Override for name inputs inside combined fields */.name-input.form-input {border: none;border-radius: 0;}.gender-select.form-select {border: none;border-radius: 0;border-left: 1px solid var(--border-light);}.form-input:focus,.form-select:focus,.form-textarea:focus {outline: none;border-color: #FF6B9D;box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.1);transform: translateY(-1px);}.form-help {font-size: 0.85rem;color: var(--text-dark);margin-top: 0.25rem;opacity: 0.85;}/* Love Symbol Options - Small Version */.symbol-option-small {display: flex;align-items: center;justify-content: center;cursor: pointer;padding: 0.5rem;border-radius: 4px;border: 2px solid var(--border-light);background: white;transition: all 0.3s ease;position: relative;aspect-ratio: 1;}.symbol-option-small:hover {border-color: #FF6B9D;transform: translateY(-1px) scale(1.05);box-shadow: 0 2px 8px rgba(255, 107, 157, 0.15);}.symbol-option-small input[type="radio"] {position: absolute;opacity: 0;width: 0;height: 0;}.symbol-option-small input[type="radio"]:checked + .symbol-content {transform: scale(1.1);}.symbol-option-small:has(input[type="radio"]:checked) {border-color: #FF4444;background: linear-gradient(135deg, #FFE6E6 0%, #FFF8F8 100%);box-shadow: 0 0 0 2px rgba(255, 68, 68, 0.1);}.symbol-option-small .symbol-content {font-size: 1rem;transition: all 0.3s ease;display: flex;align-items: center;justify-content: center;}/* New Results Styles */.color-info {flex: 1;}.color-name {font-size: 1.2rem;font-weight: 600;color: var(--text-dark);margin-bottom: 0.5rem;}.color-meaning {font-size: 0.9rem;color: var(--text-medium);}.song-text {font-size: 1.1rem;font-style: italic;color: var(--text-medium);background: white;padding: 1.5rem;border-radius: 4px;border-left: 4px solid #FF6B9D;text-align: center;}.fate-quote {font-size: 1.2rem;font-style: italic;color: var(--text-medium);background: linear-gradient(135deg, #fafafb 0%, #f3f4f6 100%);padding: 2rem;border-radius: 4px;border: 1px solid var(--border-light);text-align: center;position: relative;}.fate-quote::before {content: '"';font-size: 3rem;position: absolute;top: 0.5rem;left: 1rem;color: var(--text-light);opacity: 0.5;}.fate-quote::after {content: '"';font-size: 3rem;position: absolute;bottom: 0.5rem;right: 1rem;color: var(--text-light);opacity: 0.5;}/* Match Breakdown Meter */.match-breakdown {display: grid;grid-template-columns: 1fr;gap: 1rem;}.breakdown-item {background: white;padding: 1rem;border-radius: 4px;border: 1px solid var(--border-light);display: flex;align-items: center;gap: 1rem;}.breakdown-label {font-weight: 600;color: var(--text-dark);min-width: 80px;}.breakdown-bar {flex: 1;height: 8px;background: var(--background-light-pink);border-radius: 4px;overflow: hidden;position: relative;}.breakdown-fill {height: 100%;background: var(--primary-gradient);border-radius: 4px;transition: width 1.5s ease-out;animation: slideIn 1.5s ease-out;}.breakdown-score {font-weight: 700;color: var(--text-dark);min-width: 40px;text-align: right;}@keyframes slideIn {from {width: 0;}}/* Personality Roles */.role-title {font-size: 1.1rem;font-weight: 600;color: var(--text-dark);margin-bottom: 0.5rem;}.role-icon {font-size: 2rem;margin-bottom: 0.5rem;}.role-description {font-size: 0.9rem;color: var(--text-medium);}/* New Result Displays */.couple-nickname-display {text-align: center;padding: 1.5rem;background: linear-gradient(135deg, #f3f4f6 0%, #fafafb 100%);border-radius: 4px;border: 1px solid var(--border-light);}.couple-nickname {font-size: 2rem;font-weight: 700;color: #FF6B9D;margin-bottom: 0.5rem;}.nickname-explanation {font-size: 0.9rem;color: var(--text-medium);}.lucky-day-display {display: flex;align-items: center;gap: 1rem;padding: 1.5rem;background: white;border-radius: 4px;border: 1px solid var(--border-light);}.lucky-day-icon {font-size: 2.5rem;}.lucky-day-info {flex: 1;}.lucky-day-name {font-size: 1.2rem;font-weight: 600;color: var(--text-dark);margin-bottom: 0.25rem;}.lucky-day-description {font-size: 0.9rem;color: var(--text-medium);}.symbol-meaning-display {display: flex;align-items: center;gap: 1.5rem;padding: 1.5rem;background: white;border-radius: 4px;border: 1px solid var(--border-light);}.symbol-display {font-size: 3rem;filter: drop-shadow(0 2px 4px rgba(255, 107, 157, 0.2));}.symbol-meaning {flex: 1;}.symbol-name {font-size: 1.1rem;font-weight: 600;color: var(--text-dark);margin-bottom: 0.5rem;}.symbol-description {font-size: 0.9rem;color: var(--text-medium);line-height: 1.5;}/* Add/Subtract Results Grid Styling */.results-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 1.5rem;margin-top: 2rem;}.result-card {background: white;border-radius: 12px;padding: 0;box-shadow: var(--card-shadow);border: 1px solid var(--border-light);transition: all 0.3s ease;overflow: hidden;}.result-card:hover {transform: translateY(-2px);box-shadow: var(--shadow-hover);}.result-card:nth-child(1) {border-top: 4px solid #2D5A3D;}.result-card:nth-child(2) {border-top: 4px solid #00B894;}.result-card:nth-child(3) {border-top: 4px solid #6C5CE7;}.result-card:nth-child(4) {border-top: 4px solid #FF7675;}.result-card-header {padding: 1rem 1.5rem 0.5rem;background: linear-gradient(135deg, #F8F9FA 0%, #E8F5EA 100%);border-bottom: 1px solid rgba(45, 90, 61, 0.1);}.result-card-title {font-size: 1rem;font-weight: 600;color: var(--heading-color);margin: 0;display: flex;align-items: center;gap: 0.5rem;}.result-items {padding: 1.5rem;}.result-item {display: flex;justify-content: space-between;align-items: center;padding: 0.75rem 0;border-bottom: 1px solid #F0F0F0;gap: 1rem;}.result-item:last-child {border-bottom: none;}.result-label {font-weight: 500;color: var(--text-medium);font-size: 0.9rem;min-width: 100px;}.result-value {font-weight: 600;color: var(--text-dark);text-align: right;font-size: 0.9rem;}.primary-result-section {background: linear-gradient(135deg, #F8F9FA 0%, #E8F5EA 100%);padding: 2rem;border-radius: 12px;margin-bottom: 2rem;border: 1px solid rgba(45, 90, 61, 0.15);text-align: center;}.primary-result-section .final-date-display {margin-bottom: 1.5rem;}.primary-result-section .final-date {font-size: 2.5rem;font-weight: 700;color: var(--heading-color);margin-bottom: 0.5rem;}.primary-result-section .final-weekday {font-size: 1.2rem;color: var(--text-medium);font-weight: 500;}.primary-result-section .calculation-explanation {font-size: 1.1rem;color: var(--text-dark);margin: 1rem 0;font-weight: 500;}.primary-result-section .reference-info {font-size: 1rem;color: var(--success-color);font-weight: 600;background: rgba(0, 122, 97, 0.1);padding: 0.75rem 1.5rem;border-radius: 25px;display: inline-block;margin-top: 1rem;}/* Responsive Form Columns */@media (max-width: 768px) {.form-columns {grid-template-columns: 1fr;gap: 1.5rem;} .results-grid {grid-template-columns: 1fr;gap: 1rem;} .result-card {border-radius: 8px;} .result-items {padding: 1rem;} .primary-result-section {padding: 1.5rem;margin-bottom: 1.5rem;} .primary-result-section .final-date {font-size: 2rem;} .lucky-day-display, .symbol-meaning-display {flex-direction: column;text-align: center;} .name-gender-row {flex-direction: column;align-items: stretch;gap: 0;} .name-input {flex: none;width: 100%;} .gender-select {min-width: auto;width: 100%;border-left: none;border-top: 1px solid var(--border-light);font-size: 1rem;padding: 0.875rem 1rem;text-align: center;} .result-header-two-columns {grid-template-columns: 1fr;gap: 1.5rem;text-align: center;} .date-card, .animal-card {flex-direction: column;text-align: center;gap: 0.75rem;} .energy-item {flex-direction: column;align-items: stretch;gap: 0.5rem;} .energy-label {min-width: auto;text-align: center;} .timeline-item {flex-direction: column;text-align: center;gap: 0.75rem;} .destination-header {flex-direction: column;gap: 0.5rem;} /* Modify desktop navigation for mobile */ .main-nav {background: var(--primary-gradient);box-shadow: var(--card-shadow);position: sticky;top: 0;z-index: 100;border-radius: 0 0 8px 8px;} /* Mobile navigation layout - clean approach */ .nav-content {display: flex !important;align-items: center !important;justify-content: space-between !important;padding: 0.75rem 0 !important;width: 100% !important;height: 60px !important;position: relative !important;overflow: visible !important;flex-wrap: nowrap !important;background: linear-gradient(135deg, #2D5A3D 0%, #245A32 50%, #1B4A27 100%) !important;border-radius: 0 !important;border-radius: 0 0 12px 12px !important;} /* Logo on left side */ .logo {display: flex !important;align-items: center !important;flex-shrink: 0 !important;margin-right: auto !important;height: 40px !important;max-width: 60% !important;/* Ensure logo doesn't take too much space on mobile */} /* Hide desktop nav links completely on mobile */ .nav-links {display: none !important;} /* Mobile header right side - absolutely positioned within header */ .mobile-header-right {display: flex !important;flex-direction: row !important;align-items: center !important;justify-content: flex-end !important;gap: 0.5rem !important;height: 40px !important;position: absolute !important;right: 0 !important;top: 50% !important;transform: translateY(-50%) !important;flex-shrink: 0 !important;white-space: nowrap !important;max-width: calc(100% - 180px) !important;/* Prevent overlap with logo */} /* Language selector - inline with toggle menu */ .mobile-header-right .language-selector {display: inline-flex !important;align-items: center !important;height: 28px !important;flex-shrink: 0 !important;vertical-align: middle !important;margin-right: 0.75rem !important;} .mobile-header-right .language-selector select {display: inline-block !important;background: rgba(255,255,255,0.98) !important;border: 1px solid rgba(255, 107, 157, 0.5) !important;border-radius: 4px !important;padding: 5px 10px !important;font-size: 13px !important;font-weight: 500 !important;height: 32px !important;min-width: 85px !important;max-width: 120px !important;color: #222 !important;vertical-align: middle !important;line-height: normal !important;text-align: center !important;text-overflow: ellipsis !important;} .mobile-header-right .mobile-menu-btn {display: flex !important;width: 36px !important;height: 36px !important;align-items: center !important;justify-content: center !important;flex-shrink: 0 !important;background: linear-gradient(135deg, #FF6B9D 0%, #FF8BA0 100%) !important;border: none !important;border-radius: 6px !important;cursor: pointer !important;flex-direction: column !important;gap: 3px !important;} .mobile-header-right .mobile-menu-btn .hamburger-line {width: 20px !important;height: 2px !important;background: white !important;border-radius: 1px !important;display: block !important;} /* Mobile navigation improvements */ /* Ensure main content has proper spacing when nav is hidden */ .main-content {padding-top: 0;} /* Make container more mobile-friendly */ .container {padding: 0 1rem;} /* Improve form layout on mobile - increase width */ .form-row {margin-bottom: 1.25rem;} .form-input, .form-select {font-size: 16px;/* Prevents zoom on iOS */ padding: 0.875rem;text-align: center;/* Center the input text */} .calculate-btn {padding: 1rem 2rem;font-size: 1.1rem;width: 100%;} /* Responsive text sizing */ .main-heading {font-size: 2rem;line-height: 1.2;} .card-subtitle {font-size: 1rem;line-height: 1.4;} .section-title {font-size: 1.3rem;} /* Better spacing for mobile */ .love-calculator-section {padding: 1rem 0;} .content-section {padding: 1rem 0;} /* Improve result cards on mobile */ .result-section {margin-bottom: 1.5rem;padding: 1.25rem;} .result-title {font-size: 1.2rem;margin-bottom: 1rem;} .feature-points {gap: 0.75rem;} .point-item {padding: 0.5rem;} .point-text {font-size: 0.9rem;}}/* Buttons */.action-buttons {display: flex;flex-direction: column;gap: 1rem;margin-top: 2rem;}.calc-btn {display: inline-flex;align-items: center;justify-content: center;gap: 0.5rem;padding: 1rem 2rem;border-radius: 4px;font-weight: 600;font-size: 1rem;text-decoration: none;border: none;cursor: pointer;transition: all 0.3s ease;position: relative;overflow: hidden;min-height: 52px;}.calc-btn.primary {background: var(--primary-gradient);color: white;box-shadow: var(--shadow-romantic);}.calc-btn.primary:hover {transform: translateY(-3px);box-shadow: var(--shadow-hover);}.calc-btn.primary:active {transform: translateY(-1px);}.calc-btn.secondary {background: var(--background-light-pink);color: var(--text-dark);border: 2px solid var(--border-light);}.calc-btn.secondary:hover {background: var(--primary-gradient);color: white;border-color: transparent;transform: translateY(-2px);}.calc-btn.outline {background: transparent;color: var(--text-medium);border: 2px solid var(--border-light);}.calc-btn.outline:hover {background: var(--primary-gradient);color: white;border-color: transparent;}.calc-btn.large {padding: 1.25rem 2.5rem;font-size: 1.1rem;}/* Button Loading State */.btn-loading {display: none;}.calc-btn.loading .btn-text {display: none;}.calc-btn.loading .btn-loading {display: flex;align-items: center;gap: 0.5rem;}/* Heart Pulse Animation */.heart-pulse {animation: heartPulse 1.5s ease-in-out infinite;}@keyframes heartPulse {0%, 100% {transform: scale(1);} 50% {transform: scale(1.2);}}/* Results Section */.result-header-two-columns {display: grid;grid-template-columns: 1fr 1fr;gap: 2rem;margin-bottom: 2rem;align-items: start;}.score-column {display: flex;justify-content: center;align-items: center;}.message-column {display: flex;flex-direction: column;}/* Marriage Prediction Styling */.prediction-item {background: white;border-radius: 4px;padding: 1.25rem;border: 1px solid var(--border-light);text-align: center;transition: all 0.3s ease;}.prediction-item:hover {transform: translateY(-2px);box-shadow: 0 4px 12px rgba(255, 107, 157, 0.15);}.prediction-icon {font-size: 2rem;margin-bottom: 0.75rem;display: block;}.prediction-content h5 {font-size: 1rem;font-weight: 600;color: var(--text-dark);margin-bottom: 0.5rem;}.prediction-content p {font-size: 1.1rem;font-weight: 700;color: #FF6B9D;margin-bottom: 0.5rem;}.prediction-content small {font-size: 0.85rem;color: var(--text-medium);line-height: 1.4;}/* Additional Fun Features Styling */.meeting-vibe-card, .anniversary-card, .travel-card, .date-card, .animal-card {background: white;border-radius: 4px;padding: 1.5rem;border: 1px solid var(--border-light);text-align: center;transition: all 0.3s ease;}.meeting-vibe-card:hover, .anniversary-card:hover, .travel-card:hover, .date-card:hover, .animal-card:hover {transform: translateY(-2px);box-shadow: 0 4px 12px rgba(255, 107, 157, 0.15);}.vibe-icon, .date-icon, .animal-icon {font-size: 2.5rem;margin-bottom: 1rem;display: block;}.vibe-text {font-size: 1.1rem;color: var(--text-dark);line-height: 1.5;}.anniversary-timeline {display: flex;flex-direction: column;gap: 0.5rem;}.timeline-text {font-weight: 600;color: #FF6B9D;font-size: 1.1rem;}.celebration-text {color: var(--text-medium);font-size: 1rem;}.destination-header {display: flex;align-items: center;justify-content: center;gap: 0.5rem;margin-bottom: 1rem;}.destination-flag {font-size: 1.5rem;}.destination-header h5 {font-size: 1.2rem;font-weight: 600;color: var(--text-dark);margin: 0;}.destination-reason {color: var(--text-medium);font-style: italic;}.date-card {display: flex;align-items: center;text-align: left;gap: 1rem;}.date-content h5 {font-size: 1.1rem;font-weight: 600;color: var(--text-dark);margin-bottom: 0.5rem;}.date-content p {color: var(--text-medium);margin: 0;}.timeline-container {display: flex;flex-direction: column;gap: 1rem;}.timeline-item {display: flex;align-items: center;gap: 1rem;padding: 1rem;background: white;border-radius: 4px;border: 1px solid var(--border-light);}.timeline-marker {font-size: 1.5rem;flex-shrink: 0;}.timeline-content {display: flex;flex-direction: column;gap: 0.25rem;}.timeline-year {font-weight: 600;color: #FF6B9D;font-size: 1rem;}.timeline-milestone {color: var(--text-dark);font-size: 0.95rem;}.animal-card {display: flex;align-items: center;text-align: left;gap: 1rem;}.animal-content h5 {font-size: 1.1rem;font-weight: 600;color: var(--text-dark);margin-bottom: 0.5rem;}.animal-content p {color: var(--text-medium);margin: 0;}.energy-chart {display: flex;flex-direction: column;gap: 1rem;}.energy-item {display: flex;align-items: center;gap: 1rem;}.energy-label {min-width: 150px;font-size: 0.9rem;font-weight: 500;color: var(--text-dark);}.energy-bar {flex: 1;height: 8px;background: var(--border-light);border-radius: 4px;overflow: hidden;}.energy-fill {height: 100%;background: linear-gradient(90deg, #FF6B9D 0%, #FF8BA0 50%, #FFA8B8 100%);border-radius: 4px;transition: width 0.8s ease;}.energy-percent {min-width: 40px;text-align: right;font-weight: 600;color: #FF6B9D;font-size: 0.9rem;}/* Desktop Navigation - Hide on Mobile */.main-nav {background: var(--primary-gradient);box-shadow: var(--card-shadow);position: sticky;top: 0;z-index: 100;transition: all 0.3s ease;}.nav-content {display: flex;align-items: center;justify-content: space-between;padding: 1rem 0;}.logo {display: flex;align-items: center;gap: 0.5rem;text-decoration: none;color: var(--text-dark);font-weight: 600;font-size: 1.2rem;}.nav-links {display: flex;align-items: center;gap: 2rem;}.nav-link {text-decoration: none;color: white;font-weight: 500;transition: all 0.3s ease;padding: 0.5rem 1rem;border-radius: 4px;text-shadow: 0 1px 2px rgba(0,0,0,0.1);}.nav-link:hover,.nav-link.active {color: white;background: rgba(255, 255, 255, 0.2);transform: translateY(-1px);box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);}.language-selector select {padding: 0.5rem;border: 1px solid var(--border-light);border-radius: 4px;background: white;color: var(--text-dark);font-size: 0.9rem;}/* Mobile Navigation - positioned within header */.mobile-menu-btn {display: none;position: relative;background: linear-gradient(135deg, #FF6B9D 0%, #FF8BA0 100%);border: none;border-radius: 8px;width: 40px;height: 40px;flex-direction: column;justify-content: center;align-items: center;gap: 3px;cursor: pointer;box-shadow: 0 4px 12px rgba(255, 107, 157, 0.3);transition: all 0.3s ease;}/* Show mobile menu button on smaller screens */@media (max-width: 768px) {.mobile-menu-btn {display: flex !important;}}.mobile-menu-btn:hover {transform: scale(1.1);box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4);}.hamburger-line {width: 20px;height: 2px;background: white;border-radius: 1px;transition: all 0.3s ease;}.mobile-nav {position: fixed;top: 0;right: -300px;width: 300px;height: 100vh;background: white;z-index: 1001;box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);transition: right 0.3s ease;display: flex;flex-direction: column;}.mobile-nav.active {right: 0;}.mobile-nav-header {padding: 1.5rem;border-bottom: 1px solid var(--border-light);display: flex;justify-content: space-between;align-items: center;background: linear-gradient(135deg, #FF6B9D 0%, #FF8BA0 100%);color: white;}.mobile-nav-title {font-size: 1.2rem;font-weight: 600;}.mobile-nav-close {background: none;border: none;font-size: 2rem;color: white;cursor: pointer;padding: 0;width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;}.mobile-nav-links {padding: 1rem 0;display: flex;flex-direction: column;}.mobile-nav-links .nav-link {padding: 1rem 1.5rem;color: var(--text-dark);text-decoration: none;transition: all 0.3s ease;border-bottom: 1px solid var(--border-light);}.mobile-nav-links .nav-link:hover {background: #FFF0F5;color: #FF6B9D;}.mobile-nav-overlay {position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background: rgba(0, 0, 0, 0.5);z-index: 1000;opacity: 0;visibility: hidden;transition: all 0.3s ease;}.mobile-nav-overlay.active {opacity: 1;visibility: visible;}/* Content Feature Points */.feature-points {margin-top: 1.5rem;display: flex;flex-direction: column;gap: 1rem;}.point-item {display: flex;align-items: center;gap: 0.75rem;padding: 0.75rem;background: rgba(255, 255, 255, 0.7);border-radius: 4px;border: 1px solid var(--border-light);transition: all 0.3s ease;}.point-item:hover {background: white;transform: translateX(5px);box-shadow: 0 2px 8px rgba(255, 107, 157, 0.1);}.point-icon {font-size: 1.25rem;flex-shrink: 0;}.point-text {color: var(--text-dark);font-size: 0.95rem;line-height: 1.4;}@keyframes fadeInUp {from {opacity: 0;transform: translateY(30px);} to {opacity: 1;transform: translateY(0);}}.result-header {text-align: center;margin-bottom: 2rem;}.score-display {display: flex;flex-direction: column;align-items: center;gap: 1rem;}.score-circle {width: 120px;height: 120px;border-radius: 50%;background: var(--primary-gradient);display: flex;align-items: center;justify-content: center;color: white;font-size: 2rem;font-weight: 800;box-shadow: var(--shadow-romantic);position: relative;overflow: hidden;}.score-circle::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.1) 50%, transparent 60%);animation: shimmer 2s infinite;}@keyframes shimmer {0% {transform: translateX(-100%);} 100% {transform: translateX(100%);}}.score-number {font-size: 2.5rem;}.score-percent {font-size: 1.5rem;opacity: 0.9;}.score-title {font-size: 1.5rem;font-weight: 700;color: var(--text-dark);}.result-content {display: flex;flex-direction: column;gap: 2rem;}.result-section {background: var(--background-light-pink);border-radius: 4px;padding: 1.5rem;border: 1px solid var(--border-light);}.result-title {font-size: 1.2rem;font-weight: 600;margin-bottom: 1rem;color: var(--text-dark);}.result-text {font-size: 1rem;line-height: 1.6;color: var(--text-medium);}.strengths-weaknesses {display: flex;flex-direction: column;gap: 1rem;}.strength-item,.improvement-item {display: flex;align-items: center;gap: 0.75rem;padding: 0.75rem;background: white;border-radius: 4px;border: 1px solid var(--border-light);}.strength-item {border-left: 4px solid #10B981;}.improvement-item {border-left: 4px solid #F59E0B;}.zodiac-info {display: grid;grid-template-columns: 1fr 1fr;gap: 1rem;}.zodiac-item {background: white;padding: 1rem;border-radius: 4px;text-align: center;border: 1px solid var(--border-light);}.fun-metrics {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 1rem;}.fun-metric {background: white;padding: 1rem;border-radius: 4px;text-align: center;border: 1px solid var(--border-light);transition: transform 0.3s ease;}.fun-metric:hover {transform: translateY(-2px);box-shadow: var(--shadow-romantic);}.metric-value {font-size: 1.5rem;font-weight: 700;background: var(--primary-gradient);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;}.metric-label {font-size: 0.9rem;color: var(--text-medium);margin-top: 0.5rem;}.advice-text {font-size: 1.1rem;font-style: italic;color: var(--text-medium);background: white;padding: 1.5rem;border-radius: 4px;border-left: 4px solid #FF6B9D;}.result-actions {display: flex;gap: 1rem;margin-top: 2rem;justify-content: center;flex-wrap: wrap;}/* Tips Section */.tips-section {margin-top: 2rem;}.tips-title {font-size: 1.1rem;font-weight: 600;margin-bottom: 1rem;color: var(--text-dark);}.tips-list {list-style: none;display: flex;flex-direction: column;gap: 0.75rem;}.tips-list li {display: flex;align-items: flex-start;gap: 0.5rem;font-size: 0.9rem;color: var(--text-medium);padding: 0.5rem;background: rgba(255, 255, 255, 0.7);border-radius: 4px;}.tips-list li::before {content: '💡';flex-shrink: 0;}/* Content Section */.content-section {padding: 4rem 0;background: linear-gradient(135deg, #fafafb 0%, #f3f4f6 100%);}.content-grid {display: grid;grid-template-columns: 1fr;gap: 3rem;}.content-item {background: white;border-radius: 4px;padding: 2.5rem;box-shadow: var(--shadow-romantic);border: 1px solid var(--border-light);}.content-item h2 {font-size: 1.8rem;font-weight: 700;margin-bottom: 1.5rem;color: var(--text-dark);}.features-list {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 1.5rem;margin-top: 1.5rem;}.feature-item {display: flex;align-items: flex-start;gap: 1rem;padding: 1.5rem;background: var(--background-light-pink);border-radius: 4px;border: 1px solid var(--border-light);}.feature-icon {font-size: 1.5rem;flex-shrink: 0;}.feature-content h4 {font-size: 1.1rem;font-weight: 600;margin-bottom: 0.5rem;color: var(--text-dark);}.feature-content p {font-size: 0.95rem;color: var(--text-medium);line-height: 1.5;}.ways-list {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 1rem;margin-top: 1.5rem;}.way-item {background: var(--background-light-pink);padding: 1rem 1.5rem;border-radius: 4px;border: 1px solid var(--border-light);font-size: 0.95rem;color: var(--text-medium);transition: transform 0.3s ease;}.way-item:hover {transform: translateY(-2px);box-shadow: var(--shadow-romantic);}/* FAQ Section */.faq-section {padding: 4rem 0;background: white;}.section-heading {text-align: center;font-size: 2.5rem;font-weight: 700;margin-bottom: 3rem;background: var(--primary-gradient);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;}.faq-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 2rem;}.faq-item {padding: 1.5rem 0;border-bottom: 1px solid rgba(255, 107, 157, 0.1);}.faq-item:hover {/* Remove hover effects for plain style */}.faq-question {font-size: 1.1rem;font-weight: 600;margin-bottom: 0.5rem;color: var(--text-dark);}.faq-answer {color: var(--text-medium);line-height: 1.6;margin-bottom: 1rem;}/* Blog Styles */.blog-header {text-align: center;margin-bottom: 4rem;}.blog-subtitle {font-size: 1.2rem;color: var(--text-medium);margin-bottom: 2rem;}.blog-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));gap: 2rem;margin-bottom: 4rem;}.blog-card {background: white;border-radius: 4px;overflow: hidden;box-shadow: var(--shadow-romantic);border: 1px solid var(--border-light);transition: transform 0.3s ease;}.blog-card:hover {transform: translateY(-8px);box-shadow: var(--shadow-hover);}.blog-card-image {width: 100%;height: 200px;overflow: hidden;}.blog-card-content {padding: 2rem;}.blog-meta {display: flex;align-items: center;gap: 0.5rem;font-size: 0.9rem;color: var(--text-light);margin-bottom: 1rem;}.blog-title {font-size: 1.3rem;font-weight: 600;margin-bottom: 1rem;}.blog-title a {text-decoration: none;color: var(--text-dark);transition: color 0.3s ease;}.blog-title a:hover {background: var(--primary-gradient);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;}.blog-excerpt {color: var(--text-medium);line-height: 1.6;margin-bottom: 1.5rem;}.read-more-btn {display: inline-flex;align-items: center;gap: 0.5rem;color: #FF6B9D;text-decoration: none;font-weight: 600;transition: gap 0.3s ease;}.read-more-btn:hover {gap: 0.75rem;}.blog-cta {text-align: center;background: var(--primary-gradient);color: white;padding: 4rem 2rem;border-radius: 4px;margin-top: 4rem;}.blog-cta h2 {font-size: 2rem;font-weight: 700;margin-bottom: 1rem;}.blog-cta p {font-size: 1.1rem;margin-bottom: 2rem;opacity: 0.9;max-width: 600px;margin-left: auto;margin-right: auto;}/* Blog Post Styles */.blog-post {padding: 4rem 0;}.blog-post__header {text-align: center;margin-bottom: 3rem;}.blog-post__meta {display: flex;align-items: center;justify-content: center;gap: 0.5rem;font-size: 0.9rem;color: var(--text-light);margin-bottom: 1.5rem;}.blog-post__title {font-size: 3rem;font-weight: 800;margin-bottom: 1rem;background: var(--primary-gradient);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;line-height: 1.2;}.blog-post__excerpt {font-size: 1.2rem;color: var(--text-medium);max-width: 800px;margin: 0 auto;line-height: 1.6;}.blog-post__image {margin-bottom: 3rem;border-radius: 4px;overflow: hidden;}.blog-post__content {max-width: 800px;margin: 0 auto;line-height: 1.8;}.blog-post__content h2 {font-size: 2rem;font-weight: 700;margin: 3rem 0 1.5rem 0;color: var(--text-dark);}.blog-post__content h3 {font-size: 1.5rem;font-weight: 600;margin: 2rem 0 1rem 0;color: var(--text-dark);}.blog-post__content p {margin-bottom: 1.5rem;color: var(--text-medium);}.blog-post__content ul {margin-bottom: 2rem;padding-left: 2rem;}.blog-post__content li {margin-bottom: 0.5rem;color: var(--text-medium);}.blog-navigation {display: flex;justify-content: space-between;margin-top: 4rem;padding-top: 2rem;border-top: 2px solid var(--border-light);flex-wrap: wrap;gap: 1rem;}.blog-nav-link {display: flex;align-items: center;gap: 0.5rem;text-decoration: none;color: var(--text-medium);font-weight: 600;padding: 0.75rem 1.5rem;border-radius: 4px;border: 1px solid var(--border-light);transition: all 0.3s ease;}.blog-nav-link:hover {background: var(--primary-gradient);color: white;border-color: transparent;transform: translateY(-2px);}/* Footer */.main-footer {background: var(--text-dark);color: white;padding: 3rem 0 2rem 0;}.footer-content {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 2rem;}.footer-section h4 {font-size: 1.2rem;font-weight: 600;margin-bottom: 1rem;color: var(--accent-gold);}.footer-logo {display: flex;align-items: center;gap: 0.5rem;font-size: 1.2rem;font-weight: 700;margin-bottom: 1rem;}.footer-description {color: rgba(255, 255, 255, 0.7);line-height: 1.6;}.footer-links {list-style: none;display: flex;flex-direction: column;gap: 0.5rem;}.footer-links a {color: rgba(255, 255, 255, 0.7);text-decoration: none;transition: color 0.3s ease;}.footer-links a:hover {color: var(--accent-gold);}/* Contact & Other Pages */.contact-info {display: flex;flex-direction: column;gap: 1.5rem;}.contact-method {background: white;padding: 1.5rem;border-radius: 4px;border: 1px solid var(--border-light);}.contact-method strong {display: block;font-size: 1.1rem;color: var(--text-dark);margin-bottom: 0.5rem;}.contact-method p {color: var(--text-medium);}.success-message,.error-message {margin-top: 1rem;padding: 1rem;border-radius: 4px;font-weight: 600;}.success-message {background: #D1FAE5;color: #065F46;border: 1px solid #10B981;}.error-message {background: #FEE2E2;color: #991B1B;border: 1px solid #EF4444;}.simple-list {list-style: none;padding-left: 1rem;}.simple-list li {margin-bottom: 0.5rem;position: relative;}.simple-list li::before {content: '💖';position: absolute;left: -1.5rem;}.feature-list {display: flex;flex-direction: column;gap: 1.5rem;}.feature-item {background: white;padding: 1.5rem;border-radius: 4px;border: 1px solid var(--border-light);transition: transform 0.3s ease;}.feature-item:hover {transform: translateY(-2px);box-shadow: var(--shadow-romantic);}.feature-item strong {display: block;font-size: 1.1rem;color: var(--text-dark);margin-bottom: 0.5rem;}.feature-item p {color: var(--text-medium);font-size: 0.9rem;line-height: 1.5;}/* Confetti Animation */.confetti {position: fixed;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;z-index: 1000;}.confetti-piece {position: absolute;width: 8px;height: 8px;background: var(--accent-gold);animation: confettiFall 3s linear forwards;}.confetti-piece:nth-child(2n) {background: #FF6B9D;}.confetti-piece:nth-child(3n) {background: #C44593;}.confetti-piece:nth-child(4n) {background: #8B2868;}@keyframes confettiFall {0% {transform: translateY(-100vh) rotate(0deg);opacity: 1;} 100% {transform: translateY(100vh) rotate(360deg);opacity: 0;}}/* Responsive Design */@media (max-width: 768px) {.calculator-grid {grid-template-columns: 1fr;gap: 2rem;} .main-heading {font-size: 2rem;} .blog-post__title {font-size: 2rem;} .nav-content {flex-direction: column;gap: 1rem;} .nav-links {flex-wrap: wrap;justify-content: center;} .result-actions {flex-direction: column;} .zodiac-info {grid-template-columns: 1fr;} .fun-metrics {grid-template-columns: 1fr;} .blog-navigation {justify-content: center;} .visual-card, .smart-card {padding: 1rem;}}/* Additional mobile optimizations */@media (max-width: 480px) {.container {padding: 0 0.75rem;} /* Fix mobile header overlap on very small screens */ .mobile-header-right {gap: 0.15rem !important;max-width: calc(100% - 100px) !important;/* Even less space for logo on small screens */ flex-wrap: nowrap !important;} /* Make logo even smaller on tiny screens */ .logo {max-width: 50% !important;font-size: 0.9rem !important;} .logo svg {width: 28px !important;height: 28px !important;} .mobile-header-right .language-selector select {font-size: 13px !important;font-weight: 600 !important;padding: 5px 8px !important;min-width: 85px !important;max-width: 120px !important;height: 32px !important;background: rgba(255,255,255,0.98) !important;border: 2px solid rgba(255, 107, 157, 0.6) !important;border-radius: 5px !important;color: #111 !important;text-align: center !important;box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;} .mobile-header-right .mobile-menu-btn {width: 24px !important;height: 24px !important;background: rgba(255,255,255,0.2) !important;border: 1px solid rgba(255,255,255,0.3) !important;gap: 2px !important;} .mobile-header-right .mobile-menu-btn .hamburger-line {width: 12px !important;height: 1px !important;} .mobile-menu-btn {top: 0.75rem;right: 0.75rem;width: 45px;height: 45px;} .mobile-nav {width: 100vw;right: -100vw;} .mobile-nav.active {right: 0;} .main-heading {font-size: 1.75rem;} .form-columns {gap: 1rem;} .name-gender-row {flex-direction: column;gap: 0.75rem;} .name-input, .gender-select {width: 100%;} .point-item {padding: 0.625rem;gap: 0.5rem;} .point-text {font-size: 0.875rem;} .visual-card, .smart-card {padding: 1rem;} .main-heading {font-size: 1.75rem;} .score-circle {width: 100px;height: 100px;font-size: 1.5rem;} .score-number {font-size: 2rem;}}/* Print Styles */@media print {.main-nav, .main-footer, .action-buttons, .result-actions {display: none;} .love-calculator-section {background: white;} .visual-card, .smart-card {box-shadow: none;border: 1px solid #ddd;}}/* Dark mode disabled to maintain romantic pink theme *//* @media (prefers-color-scheme: dark) {:root {--background-cream: #1a0f12;--background-light-pink: #2d1a1e;--text-dark: #f5f5f5;--text-medium: #d1c7ca;--text-light: #a69399;}} *//* High contrast mode support */@media (prefers-contrast: high) {:root {--border-light: rgba(255, 107, 157, 0.5);--shadow-romantic: 0 8px 32px rgba(0, 0, 0, 0.3);} .form-input:focus, .form-select:focus, .form-textarea:focus {border-width: 3px;}}/* Reduced motion support */@media (prefers-reduced-motion: reduce) {* {animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;} .heart-pulse {animation: none;} .confetti-piece {animation: none;}}/* Focus visible for better accessibility */.calc-btn:focus-visible,.nav-link:focus-visible,.form-input:focus-visible,.form-select:focus-visible {outline: 2px solid #FF6B9D;outline-offset: 2px;}/* High DPI display support */@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {.visual-card, .smart-card {box-shadow: 0 8px 32px rgba(255, 107, 157, 0.15), 0 2px 8px rgba(255, 107, 157, 0.1);}}