.main-container{max-width:1200px;margin:0 auto} .form-anchor{position:relative;top:-100px;outline:none} .page-header{text-align:center;margin-bottom:40px;max-width:800px;margin-left:auto;margin-right:auto} .page-title{font-size:2.5rem;font-weight:800;color:var(--dark);margin-bottom:16px;line-height:1.2} .page-subtitle{font-size:1.1rem;color:var(--text-medium);opacity:0.9;font-weight:400} .results-top-container{display:<?php echo $show_result ? 'block':'none';?>;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1px solid var(--border-light);margin-bottom:60px;max-width:650px;margin-left:auto;margin-right:auto} .calculator-main-container{max-width:650px;margin:0 auto} .calculator-grid{display:grid;grid-template-columns:1fr;gap:30px;margin-bottom:60px} @media (min-width:992px){.calculator-grid{grid-template-columns:1fr} } .results-card{display:none} .calculator-card{position:relative;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1px solid var(--border-light);overflow:hidden;transition:var(--transition);height:100%} .calculator-header{padding:24px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white;text-align:center} .calculator-title{font-size:1.8rem;font-weight:700;margin-bottom:8px} .calculator-subtitle{font-size:1rem;opacity:0.9;font-weight:400} .calculator-body{padding:30px} .form-group{margin-bottom:24px} .form-label{display:block;margin-bottom:12px;font-weight:600;color:var(--text);font-size:1rem;display:flex;align-items:center} .form-label-icon{margin-right:10px;color:var(--primary);font-size:1.1rem} .date-input-wrapper{display:flex;gap:12px} .date-input{flex:1;position:relative} .date-dropdowns{display:flex;gap:8px} .date-dropdowns select{flex:1;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:1rem;background:var(--white);color:var(--text);transition:var(--transition);appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 10px center;background-size:16px} .date-dropdowns select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);outline:none} .date-icon-btn{width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:var(--bg-secondary);border-radius:var(--radius-sm);border:1px solid var(--border);cursor:pointer;transition:var(--transition)} .date-icon-btn:hover{background:var(--primary-light);border-color:var(--primary);color:var(--primary)} .date-icon-btn i{pointer-events:none;font-size:1.1rem} .date-presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .preset-btn{background:var(--bg-secondary);color:var(--text-medium);border:1px solid var(--border);padding:8px 14px;border-radius:20px;font-size:0.85rem;cursor:pointer;transition:var(--transition);display:inline-flex;align-items:center;gap:6px} .preset-btn i{font-size:0.8rem} .preset-btn:hover{background:var(--primary-light);border-color:var(--primary);color:var(--primary)} .submit-btn{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white;border:none;padding:16px 24px;border-radius:var(--radius-sm);font-size:1.1rem;font-weight:600;cursor:pointer;transition:var(--transition);width:100%;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px} .submit-btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(255,109,0,0.2);opacity:0.95} .results-card{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1px solid var(--border-light);overflow:hidden;transition:var(--transition);height:100%} .results-card:hover{} .results-header{padding:20px 24px;background:var(--primary-extra-light);border-bottom:1px solid var(--border-light);border-radius:14px 14px 0 0;display:flex;justify-content:space-between;align-items:center} .results-title{font-size:1.5rem;font-weight:700;color:var(--primary);display:flex;align-items:center;gap:10px} .results-title i{font-size:1.3rem} .results-body{padding:30px} .age-display{font-size:2.2rem;font-weight:800;color:var(--primary-dark);margin-bottom:30px;text-align:center;padding:20px;background:var(--primary-extra-light);border-radius:var(--radius-md);border:1px dashed var(--primary-light)} .results-section{margin-bottom:30px} .section-title{font-size:1.2rem;font-weight:600;color:var(--primary);margin-bottom:20px;display:flex;align-items:center;gap:10px;padding-bottom:8px;border-bottom:1px solid var(--border-light)} .section-title i{font-size:1.1rem} .results-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px} .result-item{padding:16px;background:var(--bg-secondary);border-radius:var(--radius-sm);font-size:0.95rem;transition:var(--transition);border:1px solid var(--border-light)} .result-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)} .result-item-label{font-weight:500;color:var(--text-medium);margin-bottom:8px;font-size:0.9rem;display:flex;align-items:center;gap:6px} .result-item-label i{font-size:0.8rem;color:var(--primary)} .result-item-value{font-weight:600;color:var(--text);font-size:1.05rem} .additional-info{padding:20px;background:var(--bg-secondary);border-radius:var(--radius-md);margin-top:30px;border:1px solid var(--border-light)} .info-item{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--border-light)} .info-item:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none} .info-label{font-weight:600;color:var(--text-medium);font-size:0.95rem;display:flex;align-items:center;gap:8px;margin-bottom:8px} .info-label i{color:var(--primary);font-size:0.9rem} .info-value{color:var(--text);margin-left:24px;font-size:1rem} .action-btn{background:var(--white);color:var(--primary);border:1px solid var(--primary);padding:14px 24px;border-radius:var(--radius-sm);font-size:1.1rem;font-weight:600;cursor:pointer;transition:var(--transition);width:100%;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:20px} .action-btn:hover{background:var(--primary-light);transform:translateY(-2px);box-shadow:0 5px 15px rgba(255,109,0,0.1)} .empty-state{text-align:center;padding:40px 20px} .empty-icon{font-size:3rem;color:var(--gray);margin-bottom:20px;opacity:0.5} .empty-text{color:var(--text-light);font-size:1.1rem;margin-bottom:20px} @media (max-width:768px){.page-title{font-size:2rem} } .tooltip{position:relative;display:inline-block;margin-left:8px} .tooltip i{color:var(--primary);font-size:0.9rem;cursor:pointer} .tooltip-text{visibility:hidden;width:200px;background-color:var(--dark);color:var(--white);text-align:center;border-radius:var(--radius-sm);padding:10px;position:absolute;z-index:1;bottom:125%;left:50%;transform:translateX(-50%);opacity:0;transition:opacity 0.3s;font-size:0.9rem;font-weight:normal} .tooltip:hover .tooltip-text{visibility:visible;opacity:1} .year-input{padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:1rem;background:var(--white);color:var(--text);transition:var(--transition);appearance:none;flex:1;width:100%} .year-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);outline:none} .error-message{color:#dc3545;margin-top:8px;font-size:0.9rem;display:flex;align-items:center;gap:6px} .error-message i{font-size:0.9rem} .dark-mode .date-dropdowns select{background-color:var(--white);color:var(--text);border-color:var(--border-light);background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2390A4AE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e")} .dark-mode .date-icon-btn{background:var(--bg-secondary);border-color:var(--border-light);color:var(--text-light)} .dark-mode .date-icon-btn:hover{background:var(--primary-light);border-color:var(--primary);color:var(--primary)} .dark-mode .age-circle{background:var(--white);box-shadow:0 4px 20px rgba(0,0,0,0.2);border:1px solid rgba(255,138,101,0.1)} .calculation-type-toggle{display:flex;gap:10px;margin-bottom:20px;border-bottom:1px solid var(--border-light);padding-bottom:15px} .toggle-btn{flex:1;padding:12px;background:var(--bg-secondary);color:var(--text);border:1px solid var(--border-light);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);font-weight:600;text-align:center} .toggle-btn.active{background:var(--primary);color:white;border-color:var(--primary)} .toggle-btn:not(.active):hover{background:var(--primary-light);border-color:var(--primary)} .operation-toggle{display:flex;gap:10px} .time-inputs{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin-top:15px} .time-input{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:1rem;background:var(--white);color:var(--text);transition:var(--transition)} .time-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);outline:none} @media (max-width:768px){.time-inputs{grid-template-columns:1fr} } @media (max-width:522px){.results-grid{grid-template-columns:1fr} } @media (max-width:480px){.calculator-body,.results-body{padding:18px} } .time-display{font-size:2.2rem;font-weight:800;color:var(--primary-dark);margin-bottom:30px;text-align:center;padding:20px;background:var(--primary-extra-light);border-radius:var(--radius-md);border:1px dashed var(--primary-light)} .time-input-wrapper{display:flex;gap:12px} .time-input-field{flex:1;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:1rem;background:var(--white);color:var(--text);transition:var(--transition)} .time-input-field:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);outline:none !important} .time-icon-btn{padding:12px 16px;background:var(--bg-secondary);color:var(--text-medium);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);display:flex;align-items:center;gap:6px;font-size:0.9rem} .time-icon-btn:hover{background:var(--primary-light);border-color:var(--primary);color:var(--primary)} .time-icon-btn i{font-size:0.9rem} .time-presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .date-options-grid{display:grid;grid-template-columns:1fr;gap:10px} .date-option{display:flex;align-items:center;gap:8px} .date-input-group{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:10px} .date-input input[type="date"]{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:1rem;background:var(--white);color:var(--text);transition:var(--transition)} .date-input input[type="date"]:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);outline:none} .advanced-options{background:var(--bg-secondary);padding:15px;border-radius:var(--radius-sm);border:1px solid var(--border-light)} .option-item{display:flex;align-items:center;gap:8px} .option-item label{font-size:0.9rem;color:var(--text-medium)} .dark-mode .time-input-field,.dark-mode .date-input input[type="date"]{background-color:var(--white);color:var(--text);border-color:var(--border-light)} .time-input-field.error-input{border-color:#ff6b6b !important;box-shadow:0 0 0 2px rgba(255,107,107,0.2);transition:all 0.3s ease} .error-container{color:#d32f2f;font-size:0.85rem;margin-top:5px;display:none;align-items:center;padding:5px 10px;background-color:#fde0e0;border-radius:4px;border-left:3px solid #d32f2f;margin-bottom:10px} .error-container.show{display:flex} .error-container i{margin-right:8px;font-size:14px} .error-input{border-color:#d32f2f !important;box-shadow:0 0 0 2px rgba(211,47,47,0.2)} .error-message{color:#d32f2f;background-color:#fde0e0;padding:12px 15px;border-radius:4px;margin-bottom:20px;display:flex;align-items:center;border-left:4px solid #d32f2f;animation:fadeIn 0.3s ease-in-out} @keyframes fadeIn{from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} } .custom-date-picker{background:var(--white);border:1px solid var(--border-light);border-radius:12px;box-shadow:0 10px 25px rgba(0,0,0,0.15);width:280px;font-family:var(--font-sans);overflow:hidden;animation:fadeIn 0.2s ease} .cdp-header{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white;padding:10px} .cdp-selects{display:flex;gap:6px} .cdp-month,.cdp-year{border:none;border-radius:6px;padding:4px 6px;font-size:0.9rem;color:var(--text);background:var(--white) } .cdp-nav{background:rgba(255,255,255,0.15);border:none;color:white;font-size:1rem;padding:6px 8px;border-radius:50%;cursor:pointer;transition:0.2s} .cdp-nav:hover{background:rgba(255,255,255,0.3)} .cdp-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-weight:600;color:var(--text-medium);background:var(--bg-secondary);padding:6px 0;border-bottom:1px solid var(--border-light)} .cdp-weekday{font-size:0.8rem;opacity:0.9} .cdp-day{text-align:center;padding:4px 0;border-radius:50%;cursor:pointer;transition:all 0.15s ease;font-size:0.85rem;color:var(--text);width:32px;height:32px;line-height:32px;margin:2px auto;display:flex;align-items:center;justify-content:center} .cdp-day:hover{background:var(--primary-light);color:var(--primary);transform:scale(1.05)} .cdp-day.selected{background:var(--primary);color:#fff;font-weight:600;transform:scale(1.1)} .cdp-day.prev-month,.cdp-day.next-month{color:var(--text-light);opacity:0.6} .cdp-days{display:grid;grid-template-columns:repeat(7,1fr);gap:0px;padding:8px 6px} .dark-mode .custom-date-picker{background:var(--bg);color:var(--text);border-color:var(--border)} .dark-mode .cdp-header{background:linear-gradient(135deg,var(--primary-dark),var(--primary-darker))} .dark-mode .cdp-weekdays{background:var(--bg-secondary)} .dark-mode .cdp-day:hover{background:var(--primary-light)} .dark-mode .cdp-day.selected{background:var(--primary);color:var(--white)} @media (max-width:480px){.date-dropdowns{gap:4px} .date-dropdowns select{padding:8px 10px;font-size:0.9rem;background-position:right 6px center;background-size:14px} .date-icon-btn{width:42px;height:42px} .date-icon-btn i{font-size:1rem} .year-input{padding:8px 10px;font-size:0.9rem} .date-presets{gap:6px} .preset-btn{padding:6px 10px;font-size:0.8rem} .preset-btn i{font-size:0.7rem} } @media (max-width:360px){.date-dropdowns{gap:2px;flex-wrap:wrap} .date-dropdowns select{padding:6px 8px;font-size:0.85rem;background-position:right 4px center;background-size:12px;min-height:36px} .date-dropdowns select:first-child{flex:0 0 28%} .date-dropdowns select:nth-child(2){flex:0 0 35%} .date-dropdowns .year-input{flex:0 0 32%;padding:6px 8px;font-size:0.85rem;min-height:36px} .date-icon-btn{width:36px;height:36px;min-width:36px} .date-icon-btn i{font-size:0.9rem} .date-input-wrapper{gap:8px} .date-presets{gap:4px} .preset-btn{padding:4px 8px;font-size:0.75rem;flex:1;min-width:0;justify-content:center} .preset-btn i{font-size:0.65rem;margin-right:2px} .calculator-body{padding:15px} .form-group{margin-bottom:20px} .form-label{font-size:0.9rem;margin-bottom:8px} .form-label-icon{font-size:1rem;margin-right:6px} .calculator-card{margin:0 -5px} } @media (max-width:320px){.date-dropdowns select:first-child{flex:0 0 26%} .date-dropdowns select:nth-child(2){flex:0 0 34%} .date-dropdowns .year-input{flex:0 0 35%} .date-dropdowns select,.date-dropdowns .year-input{padding:5px 6px;font-size:0.8rem;min-height:34px} .date-icon-btn{width:34px;height:34px} .preset-btn{padding:3px 6px;font-size:0.7rem} .preset-btn span{display:none} .preset-btn i{margin-right:0;font-size:0.7rem} .tooltip .tooltip-text{width:150px;font-size:0.8rem} } .svg-icon{width:18px;height:18px;flex-shrink:0;vertical-align:-0.125em} .form-label-icon{width:22px;height:22px;margin-right:10px;color:var(--primary)} .date-icon-btn .svg-icon{pointer-events:none} .tooltip-icon{width:18px;height:18px;color:var(--primary);flex-shrink:0;display:flex;align-items:center} .header-icon{width:24px;height:24px} .section-title .svg-icon{width:1.1em;height:1.1em} .result-item-label .svg-icon,.info-label .svg-icon{width:18px;height:18px;color:var(--primary)} .date-icon-btn .svg-icon{width:24px;height:24px} .preset-btn .svg-icon{width:18px;height:18px} .submit-btn .exchange{width:24px;height:24px} .action-btn .svg-icon{width:1.1em;height:1.1em} .error-message .svg-icon{width:0.9em;height:0.9em} .empty-icon .svg-icon{width:3em;height:3em;color:var(--gray);opacity:0.5} .feature-item .svg-icon{width:1em;height:1em;color:var(--primary)} .form-label,.results-title,.section-title,.result-item-label,.info-label,.preset-btn,.submit-btn,.action-btn{display:inline-flex;align-items:center;gap:6px} .form-label{gap:0} .results-title{gap:10px} .section-title{gap:10px} .preset-btn{gap:6px} .submit-btn{gap:10px} .action-btn{gap:10px} .dark-mode .svg-icon{fill:currentColor}