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

:root {


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

    /* -- لازم يتطابق مع خلفية الكارت عشان خط التخريم يبان صح -- */
    --ebmenu1fturs1-theme2-container-bg-color: #ffffff;

    /* -- Container -- */
    --ebmenu1fturs1-theme2-container-border-color: #e9ddc7;
    --ebmenu1fturs1-theme2-container-radius: 18px;
    --ebmenu1fturs1-theme2-container-shadow-color: rgba(75, 54, 45, 0.14);

    /* -- Header -- */
    --ebmenu1fturs1-theme2-header-bg-color: var(--ebmenu1-secondary-color);
    --ebmenu1fturs1-theme2-header-text-color: #ffffff;
    --ebmenu1fturs1-theme2-header-accent-color: var(--ebmenu1-primary-color);
    --ebmenu1fturs1-theme2-header-font-weight: 800;

    /* -- خط التخريم بين الهيدر والجسم -- */
    --ebmenu1fturs1-theme2-header-perforation-color: var(--ebmenu1fturs1-theme2-container-bg-color);
    --ebmenu1fturs1-theme2-header-perforation-size: 14px;
    --ebmenu1fturs1-theme2-header-perforation-gap: 20px;

    /* -- Row -- */
    --ebmenu1fturs1-theme2-row-border-color: #e9ddc7;
    --ebmenu1fturs1-theme2-row-bg-color-odd: #ffffff;
    --ebmenu1fturs1-theme2-row-bg-color-even: #FBF6EC;
    --ebmenu1fturs1-theme2-row-divider-color: #d8c9a8;
    --ebmenu1fturs1-theme2-row-hover-bg-color: #f5ecd9;

    /* -- Label (شكل الطابع) -- */
    --ebmenu1fturs1-theme2-label-width: 220px;
    --ebmenu1fturs1-theme2-label-color: var(--ebmenu1-secondary-color);
    --ebmenu1fturs1-theme2-label-bg-color: #f6efe1;
    --ebmenu1fturs1-theme2-label-border-color: var(--ebmenu1-primary-color);
    --ebmenu1fturs1-theme2-label-marker-color: var(--ebmenu1-primary-color);

    /* -- Value -- */
    --ebmenu1fturs1-theme2-value-color: #5b4f43;
}

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

/* ===============================
   HEADER
================================ */
.ebmenu1fturs1-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    direction: rtl;
    padding: 18px 22px 26px;
    color: var(--ebmenu1fturs1-theme2-header-text-color);
    background: var(--ebmenu1fturs1-theme2-header-bg-color);
    font-size: var(--ebmenu1fturs1-theme2-header-font-size);
    font-weight: var(--ebmenu1fturs1-theme2-header-font-weight);
}

.ebmenu1fturs1-header::before {
    content: "";
    width: 5px;
    height: 22px;
    border-radius: 3px;
    background: var(--ebmenu1fturs1-theme2-header-accent-color);
}

/* خط التخريم أسفل الهيدر، زي تذكرة اتقطعت من ورقة */
.ebmenu1fturs1-header::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    height: var(--ebmenu1fturs1-theme2-header-perforation-size);
    background-image: radial-gradient(circle at center,
            var(--ebmenu1fturs1-theme2-header-perforation-color) calc(var(--ebmenu1fturs1-theme2-header-perforation-size) / 2 - 1px),
            transparent calc(var(--ebmenu1fturs1-theme2-header-perforation-size) / 2 - 0.5px));
    background-size: var(--ebmenu1fturs1-theme2-header-perforation-gap) var(--ebmenu1fturs1-theme2-header-perforation-size);
    background-repeat: repeat-x;
    background-position: center;
}

/* ===============================
   ROW
================================ */
.ebmenu1fturs1-row {
    position: relative;
    display: flex;
    align-items: stretch;
    direction: rtl;
    background-color: var(--ebmenu1fturs1-theme2-row-bg-color-odd);
    border-bottom: 1px dashed var(--ebmenu1fturs1-theme2-row-border-color);
    transition: background-color .2s ease;
}

.ebmenu1fturs1-row:nth-child(even) {
    background-color: var(--ebmenu1fturs1-theme2-row-bg-color-even);
}

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

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

/* الفاصل الرأسي المتقطّع بين الـ label والـ value */
.ebmenu1fturs1-row::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: var(--ebmenu1fturs1-theme2-label-width);
    width: 1px;
    background-image: linear-gradient(to bottom, var(--ebmenu1fturs1-theme2-row-divider-color) 55%, transparent 45%);
    background-size: 1px 11px;
    background-repeat: repeat-y;
}

/* ===============================
   FEATURE TITLE  —  شكل "طابع" صغير
================================ */
.ebmenu1fturs1-label {
    display: flex;
    align-items: center;
    gap: 8px;
    width: var(--ebmenu1fturs1-theme2-label-width);
    flex-shrink: 0;
    padding: 14px 16px;
    color: var(--ebmenu1fturs1-theme2-label-color);
    font-size: var(--ebmenu1fturs1-theme2-label-font-size);
    font-weight: 700;
}

.ebmenu1fturs1-label::before {
    content: "";
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--ebmenu1fturs1-theme2-label-marker-color);
}

/* ===============================
   FEATURE DESCRIPTION
================================ */
.ebmenu1fturs1-value {
    flex: 1;
    padding: 14px 16px;
    color: var(--ebmenu1fturs1-theme2-value-color);
    font-size: var(--ebmenu1fturs1-theme2-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;
    }
}

/* ============================================================
   ديكور صفحة المعاينة بس (مش جزء من الكومبوننت)
   ============================================================ */
.preview-page {
    background-color: #F5F0E6;
    min-height: 100vh;
    padding: 3rem 1.25rem;
}

.preview-label {
    max-width: 1440px;
    margin: 0 auto 1.2rem;
    color: var(--ebmenu1-secondary-color);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    opacity: 0.7;
    padding: 0 1em;
}

/* Components area styles (single product) */
.ebmenu1components1-section {
    max-width: 1440px;
    width: calc(100% - 2em);
    margin: 18px auto;
    padding: 12px 16px;
    border: 1px solid #e9ddc7;
    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);
}