/* ==========================================
   Coffee Calculator - محمصة عل
   ========================================== */

#ell-coffee-calculator {

    --ell-green: #4b4d2e;

    --ell-beige: #f0e0c7;

    --ell-beige-light: #faf5ed;

    --ell-border: #e2d7c7;

    --ell-text: #292929;


    direction: rtl;

    width: 100%;

    padding: 60px 20px;

    background:
        var(--ell-beige-light);

    box-sizing: border-box;

}


#ell-coffee-calculator * {

    box-sizing: border-box;

}



/* ==========================================
   الحاوية الرئيسية
   ========================================== */

.ell-calc-container {

    max-width: 950px;

    margin: 0 auto;

    background: #ffffff;

    border:
        1px solid
        var(--ell-border);

    border-radius: 24px;

    padding: 40px;

    box-shadow:
        0 12px 35px
        rgba(0, 0, 0, 0.06);

}



/* ==========================================
   رأس الحاسبة
   ========================================== */

.ell-calc-header {

    text-align: center;

    margin-bottom: 42px;

}



/* ==========================================
   شعار عل
   ========================================== */

.ell-calc-logo-wrapper {

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 14px;

}


.ell-calc-logo {

    display: block;

    width: auto;

    max-width: 105px;

    max-height: 72px;

    object-fit: contain;

}



/* ==========================================
   عنوان الحاسبة
   ========================================== */

.ell-calc-header h2 {

    margin:
        0 0 8px;

    color:
        var(--ell-green);

    font-size: 30px;

    font-weight: 800;

}


.ell-calc-header p {

    margin: 0;

    color: #777777;

    font-size: 15px;

}



/* ==========================================
   أقسام الحاسبة
   ========================================== */

.ell-calc-section {

    margin-bottom: 32px;

}


.ell-calc-section h3 {

    margin:
        0 0 14px;

    font-size: 16px;

    color:
        var(--ell-text);

    font-weight: 700;

}



/* ==========================================
   شبكة الاختيارات
   ========================================== */

.ell-options {

    display: grid;

    gap: 12px;

}


.ell-ratio-options {

    grid-template-columns:
        repeat(4, 1fr);

}


.ell-temperature-options {

    grid-template-columns:
        repeat(2, 1fr);

}


.ell-size-options {

    grid-template-columns:
        repeat(3, 1fr);

}



/* ==========================================
   أزرار الاختيارات
   ========================================== */

.ell-option {

    appearance: none;

    background: #ffffff;

    border:
        1.5px solid
        var(--ell-border);

    border-radius: 14px;

    padding:
        15px 10px;

    cursor: pointer;

    color:
        var(--ell-text);

    transition:
        0.25s ease;

    font-family: inherit;

    text-align: center;

}


.ell-option:hover {

    border-color:
        var(--ell-green);

    transform:
        translateY(-2px);

}


.ell-option strong {

    display: block;

    font-size: 17px;

    margin-bottom: 5px;

}


.ell-option span {

    display: block;

    font-size: 12px;

    color: #777777;

}



/* ==========================================
   الاختيار النشط
   ========================================== */

.ell-option.active {

    background:
        var(--ell-green);

    border-color:
        var(--ell-green);

    color: #ffffff;

    box-shadow:
        0 6px 15px
        rgba(75, 77, 46, 0.22);

}


.ell-option.active span {

    color:
        rgba(
            255,
            255,
            255,
            0.85
        );

}



/* ==========================================
   زر احسب وصفتي
   ========================================== */

#ell-calculate-btn {

    width: 100%;

    border: 0;

    border-radius: 14px;

    padding:
        17px 20px;

    background:
        var(--ell-green);

    color: #ffffff;

    font-family: inherit;

    font-size: 17px;

    font-weight: 700;

    cursor: pointer;

    transition:
        0.25s ease;

    margin-top: 5px;

}


#ell-calculate-btn:hover {

    opacity: 0.92;

    transform:
        translateY(-1px);

}


#ell-calculate-btn span {

    margin-right: 8px;

}



/* ==========================================
   منطقة النتيجة
   ========================================== */

.ell-result {

    margin-top: 32px;

    padding-top: 32px;

    border-top:
        1px solid
        var(--ell-border);

}



/* ==========================================
   عنوان الوصفة
   ========================================== */

.ell-result-title {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 22px;

}



/* ==========================================
   أيقونة كوب القهوة الخضراء
   ========================================== */

.ell-result-icon {

    width: 48px;

    height: 48px;

    min-width: 48px;

    background:
        var(--ell-beige);

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    color:
        var(--ell-green);

}


.ell-result-icon svg {

    width: 25px;

    height: 25px;

    display: block;

}



/* ==========================================
   نص عنوان النتيجة
   ========================================== */

.ell-result-title small {

    color: #777777;

}


.ell-result-title h3 {

    margin:
        3px 0 0;

    color:
        var(--ell-green);

    font-size: 21px;

}



/* ==========================================
   بيانات الوصفة
   ========================================== */

.ell-result-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 12px;

}


.ell-result-item {

    background:
        var(--ell-beige-light);

    border:
        1px solid
        var(--ell-border);

    border-radius: 14px;

    padding: 16px;

}


.ell-result-item span {

    display: block;

    color: #777777;

    font-size: 12px;

    margin-bottom: 5px;

}


.ell-result-item strong {

    color:
        var(--ell-green);

    font-size: 15px;

}



/* ==========================================
   الصبات
   ========================================== */

.ell-pours-box {

    margin-top: 22px;

    background:
        var(--ell-beige);

    border-radius: 16px;

    padding: 20px;

}


.ell-pours-box h4 {

    margin:
        0 0 15px;

    color:
        var(--ell-green);

    font-size: 16px;

}


#ell-pours {

    display: grid;

    gap: 9px;

}



/* ==========================================
   كل صبة
   ========================================== */

.ell-pour {

    background:
        rgba(
            255,
            255,
            255,
            0.72
        );

    border-radius: 10px;

    padding:
        12px 14px;

    display: flex;

    align-items: center;

    gap: 10px;

}


.ell-pour span {

    flex: 1;

    font-size: 13px;

}


.ell-pour strong {

    color:
        var(--ell-green);

}


.ell-pour small {

    color: #777777;

    font-size: 11px;

}



/* ==========================================
   الملاحظة
   ========================================== */

.ell-note {

    margin-top: 18px;

    color: #777777;

    font-size: 12px;

    line-height: 1.8;

    text-align: center;

}



/* ==========================================
   Tablet
   ========================================== */

@media (
    max-width: 768px
) {

    #ell-coffee-calculator {

        padding:
            35px 12px;

    }


    .ell-calc-container {

        padding:
            25px 18px;

        border-radius:
            18px;

    }


    .ell-ratio-options {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .ell-result-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .ell-calc-logo {

        max-width: 95px;

        max-height: 65px;

    }

}



/* ==========================================
   Mobile
   ========================================== */

@media (
    max-width: 480px
) {

    #ell-coffee-calculator {

        padding:
            30px 10px;

    }


    .ell-calc-container {

        padding:
            22px 15px;

    }


    .ell-calc-header {

        margin-bottom: 32px;

    }


    .ell-calc-header h2 {

        font-size: 25px;

    }


    .ell-calc-header p {

        font-size: 13px;

    }


    /* شعار عل أصغر في الجوال */

    .ell-calc-logo {

        max-width: 82px;

        max-height: 58px;

    }


    .ell-option {

        padding:
            13px 7px;

    }


    .ell-result-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .ell-pour {

        flex-wrap: wrap;

    }


    .ell-pour small {

        width: 100%;

    }


    .ell-result-icon {

        width: 44px;

        height: 44px;

        min-width: 44px;

    }


    .ell-result-icon svg {

        width: 23px;

        height: 23px;

    }

}