/* reset */
* { margin:0; padding:0; box-sizing:border-box; }

/* body */
body {
    font-family:'Tahoma','Arial',sans-serif;
    background:linear-gradient(135deg,#fef7ed,#fed7aa);
    min-height:100vh;
    padding:20px;
    direction:rtl;
}

/* container */
.soapcalc-container { max-width:1400px; margin:0 auto; }
.soapcalc-header { text-align:center; margin-bottom:30px; }
.soapcalc-header h1 {
    color:#92400e;
    font-size:2.5rem;
    margin-bottom:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
}
.soapcalc-header p { color:#a16207; font-size:1.1rem; }

/* grid */
.soapcalc-calculator-grid {
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:20px;
    margin-bottom:20px;
}

/* responsive grid for tablets and mobiles */
@media (max-width:1200px){
    .soapcalc-calculator-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px){
    .soapcalc-calculator-grid { grid-template-columns:1fr; }
}

/* card */
.soapcalc-card {
    background:rgba(255,255,255,0.95);
    border-radius:12px;
    padding:20px;
    box-shadow:0 8px 32px rgba(0,0,0,0.06);
    border:1px solid #f3e8ff;
}
.soapcalc-card-title { color:#92400e; font-size:1.3rem; font-weight:700; margin-bottom:15px; text-align:right; }

/* form */
.soapcalc-form-group { margin-bottom:15px; }
.soapcalc-form-label { display:block; margin-bottom:5px; color:#374151; font-weight:500; text-align:right; }
.soapcalc-form-input {
    width:100%;
    padding:10px;
    border:2px solid #e5e7eb;
    border-radius:8px;
    font-size:1rem;
    text-align:center;
    transition:border-color .3s;
}
.soapcalc-form-input:focus { outline:none; border-color:#d97706; }
.soapcalc-form-select {
    width:100%;
    padding:10px;
    border:2px solid #e5e7eb;
    border-radius:8px;
    font-size:1rem;
    background:white;
    text-align:right;
}

/* buttons */
.soapcalc-button-group { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:15px; }
.soapcalc-btn { padding:12px 20px; border:none; border-radius:8px; font-size:1rem; cursor:pointer; transition:all .3s; font-weight:500; }
.soapcalc-btn-primary { background:#d97706; color:white; }
.soapcalc-btn-secondary { background:#f3f4f6; color:#374151; border:2px solid #d1d5db; }
.soapcalc-btn-secondary.active { background:#d97706; color:white; border-color:#d97706; }
.soapcalc-btn-calculate {
    width:100%;
    padding:15px;
    background:#d97706;
    color:white;
    border:none;
    border-radius:8px;
    font-size:1.2rem;
    font-weight:700;
    cursor:pointer;
    transition:background .3s;
    box-shadow:0 4px 16px rgba(217,119,6,.3);
}
.soapcalc-btn-calculate:disabled { background:#9ca3af; cursor:not-allowed; }

/* oil row */
.soapcalc-oil-row { background:#fefce8; border:2px solid #fde68a; border-radius:8px; padding:15px; margin-bottom:10px; }
.soapcalc-oil-row-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; flex-wrap:wrap; }
.soapcalc-oil-row-controls { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; align-items:end; }
.soapcalc-btn-remove { background:#ef4444; color:white; border:none; padding:5px 10px; border-radius:5px; cursor:pointer; font-size:.9rem; }
.soapcalc-btn-add { background:#10b981; color:white; border:none; padding:10px 15px; border-radius:8px; cursor:pointer; margin-bottom:15px; display:flex; align-items:center; gap:8px; }

/* total badge */
.soapcalc-total-badge { text-align:center; padding:10px; border-radius:8px; font-weight:700; margin-top:15px; }
.soapcalc-total-badge.success { background:#dcfce7; color:#166534; border:2px solid #16a34a; }
.soapcalc-total-badge.error { background:#fee2e2; color:#991b1b; border:2px solid #ef4444; }

/* tabs */
.soapcalc-results-tabs { display:flex; margin-bottom:20px; background:#f3f4f6; border-radius:8px; padding:4px; }
.soapcalc-tab-button { flex:1; padding:10px; background:transparent; border:none; border-radius:6px; cursor:pointer; font-weight:500; transition:all .3s; }
.soapcalc-tab-button.active { background:white; color:#d97706; box-shadow:0 2px 8px rgba(0,0,0,.1); }
.soapcalc-tab-content { display:none; }
.soapcalc-tab-content.active { display:block; }

/* properties */
.soapcalc-property-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid #f3f4f6; flex-wrap:wrap; }
.soapcalc-property-row:last-child { border-bottom:none; }

/* --- اصلاح شده برای موبایل و visibility --- */
.soapcalc-quality-indicator {
    width:18px !important;
    height:18px !important;
    border-radius:50% !important;
    margin-left:8px;
    display:inline-block !important;
}

/* رنگ‌ها با !important برای موبایل */
.quality-good { background-color:#10b981 !important; }
.quality-warning { background-color:#f59e0b !important; }
.quality-bad { background-color:#ef4444 !important; }

/* result highlights */
.soapcalc-result-highlight { background:#dbeafe; border:2px solid #3b82f6; border-radius:8px; padding:20px; text-align:center; margin-bottom:15px; }
.soapcalc-result-highlight h3 { color:#1e40af; margin-bottom:10px; }
.soapcalc-result-highlight .amount { font-size:2rem; font-weight:700; color:#1e40af; }

/* fatty acids */
.soapcalc-fatty-acids-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.soapcalc-fatty-acid-row { display:flex; justify-content:space-between; padding:5px 0; font-size:.9rem; }

/* info section */
.soapcalc-info-section { background:#f8fafc; border-radius:8px; padding:15px; margin-top:15px; }
.soapcalc-info-section h4 { color:#374151; margin-bottom:10px; text-align:right; }
.soapcalc-info-list { list-style:none; padding:0; }
.soapcalc-info-list li { padding:3px 0; color:#6b7280; text-align:right; }

/* scrollable */
.soapcalc-scrollable { max-height:400px; overflow-y:auto; }

/* icons */
.soapcalc-calculator-icon { width:40px; height:40px; background:#d97706; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; color:white; font-size:20px; }
.soapcalc-center-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; flex-wrap:wrap; }
.soapcalc-result-highlight.water { background:#ecfdf5; border-color:#10b981; }

/* responsive fonts & spacing for mobile */
@media (max-width:768px){
    body { padding:10px; }
    .soapcalc-header h1 { font-size:2rem; gap:10px; }
    .soapcalc-card { padding:15px; }
    .soapcalc-card-title { font-size:1.2rem; }
    .soapcalc-form-input, .soapcalc-form-select { font-size:0.95rem; padding:8px; }
    .soapcalc-btn { font-size:0.95rem; padding:10px 15px; }
    .soapcalc-btn-calculate { font-size:1.1rem; padding:12px; }
    .soapcalc-property-row { font-size:0.95rem; }
    .soapcalc-fatty-acids-grid { gap:15px; }
}