@import "../ebmenu1-main.css";


:root {

    --ebmenu1fturs1-theme3-header-font-size: clamp(1.2rem, 2vw, 1.7rem);
    --ebmenu1fturs1-theme3-label-font-size: clamp(1rem, 1.5vw, 1.2rem);
    --ebmenu1fturs1-theme3-value-font-size: clamp(.9rem, 1.3vw, 1.05rem);

    /* -- Container -- */
    --ebmenu1fturs1-theme3-container-bg-color: #ffffff;
    --ebmenu1fturs1-theme3-container-border-color: var(--ebmenu1-primary-color);
    --ebmenu1fturs1-theme3-container-radius: 20px;
    --ebmenu1fturs1-theme3-container-shadow-color: rgba(75, 54, 45, 0.10);

    /* -- Header -- */
    --ebmenu1fturs1-theme3-header-bg-color: #ffffff;
    --ebmenu1fturs1-theme3-header-text-color: var(--ebmenu1-secondary-color);
    --ebmenu1fturs1-theme3-header-border-color: #68DBD4d0;
    --ebmenu1fturs1-theme3-header-font-weight: 800;
    --ebmenu1fturs1-theme3-header-icon-bg-color: var(--ebmenu1-primary-color);
    --ebmenu1fturs1-theme3-header-icon-color: #ffffff;

    /* -- Row -- */
    --ebmenu1fturs1-theme3-row-border-color: #68DBD4d0;
    --ebmenu1fturs1-theme3-row-divider-color: rgba(168, 137, 79, 0.35);
    --ebmenu1fturs1-theme3-row-hover-bg-color: #faf6ee;

    /* -- Label -- */
    --ebmenu1fturs1-theme3-label-width: 220px;
    --ebmenu1fturs1-theme3-label-color: var(--ebmenu1-secondary-color);
    --ebmenu1fturs1-theme3-label-marker-color: var(--ebmenu1-primary-color);

    /* -- Value -- */
    --ebmenu1fturs1-theme3-value-color: #6b5f53;
}

/* ===============================
   MAIN CONTAINER
================================ */
.ebmenu1fturs1-section {
    max-width: 1440px;
    width: calc(100% - 2em);
    margin: 0 auto;
    background: var(--ebmenu1fturs1-theme3-container-bg-color);
    border: 1.5px solid var(--ebmenu1fturs1-theme3-container-border-color);
    border-radius: var(--ebmenu1fturs1-theme3-container-radius);
    overflow: hidden;
    box-shadow: 0 16px 34px var(--ebmenu1fturs1-theme3-container-shadow-color);
}

/* ===============================
   HEADER
================================ */
.ebmenu1fturs1-header {
    display: flex;
    align-items: center;
    gap: 12px;
    direction: rtl;
    padding: 20px 24px;
    color: var(--ebmenu1fturs1-theme3-header-text-color);
    background: var(--ebmenu1fturs1-theme3-header-bg-color);
    border-bottom: 1.5px solid var(--ebmenu1fturs1-theme3-header-border-color);
    font-size: var(--ebmenu1fturs1-theme3-header-font-size);
    font-weight: var(--ebmenu1fturs1-theme3-header-font-weight);
}

/* شارة دائرية بعلامة صح بدل الخط الرأسي */
.ebmenu1fturs1-header::before {
    content: "\2713";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--ebmenu1fturs1-theme3-header-icon-bg-color);
    color: var(--ebmenu1fturs1-theme3-header-icon-color);
    font-size: 14px;
    font-weight: 800;
}

/* ===============================
   ROW
================================ */
.ebmenu1fturs1-row {
    position: relative;
    display: flex;
    align-items: stretch;
    direction: rtl;
    background-color: var(--ebmenu1fturs1-theme3-container-bg-color);
    border-bottom: 1px solid var(--ebmenu1fturs1-theme3-row-border-color);
    transition: background-color .2s ease, padding-right .2s ease;
}

.ebmenu1fturs1-row:hover {
    background-color: var(--ebmenu1fturs1-theme3-row-hover-bg-color);
}

.ebmenu1fturs1-row:last-child {
    border-bottom: none;
}

/* الفاصل الرأسي — خط رفيع صلب بدل التخريم */
.ebmenu1fturs1-row::after {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    right: var(--ebmenu1fturs1-theme3-label-width);
    width: 1px;
    background-color: var(--ebmenu1fturs1-theme3-row-divider-color);
}

/* ===============================
   FEATURE TITLE  —  علامة معينية (◆)
================================ */
.ebmenu1fturs1-label {
    display: flex;
    align-items: center;
    gap: 9px;
    width: var(--ebmenu1fturs1-theme3-label-width);
    flex-shrink: 0;
    padding: 16px 18px;
    color: var(--ebmenu1fturs1-theme3-label-color);
    font-size: var(--ebmenu1fturs1-theme3-label-font-size);
    font-weight: 700;
}

.ebmenu1fturs1-label::before {
    content: "";
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    transform: rotate(45deg);
    background-color: var(--ebmenu1fturs1-theme3-label-marker-color);
}

/* ===============================
   FEATURE DESCRIPTION
================================ */
.ebmenu1fturs1-value {
    flex: 1;
    padding: 16px 18px;
    color: var(--ebmenu1fturs1-theme3-value-color);
    font-size: var(--ebmenu1fturs1-theme3-value-font-size);
    line-height: 1.8;
}

/* ===============================
   MOBILE
================================ */
@media (max-width:600px) {
    .ebmenu1fturs1-section {
        width: calc(100% - 1em);
    }

    .ebmenu1fturs1-label {
        width: 140px;
    }

    .ebmenu1fturs1-row::after {
        right: 140px;
    }
}

/* Components area styles (single product) */
.ebmenu1components1-section {
    max-width: 1440px;
    width: calc(100% - 2em);
    margin: 18px auto;
    padding: 12px 16px;
    border: 1px solid #68DBD4d0;
    border-radius: 10px;
    background: #ffffff;
}

.ebmenu1components1-header {
    font-weight: 700;
    margin-bottom: 10px;
}

.ebmenu1components1-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ebmenu1components1-item {
    background: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 14px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}