/* ============================================================
   ForComfort Product Enhancer - Frontend CSS v1.2
   RTL Arabic | Navy/Orange Brand Colors
   FIX: Accordion gaps + Icons + Buttons
   ============================================================ */

:root {
    --fcpe-navy:      #062b4f;
    --fcpe-orange:    #ff7a1a;
    --fcpe-light-bg:  #f5f9fc;
    --fcpe-border:    #e2edf3;
    --fcpe-text:      #071d33;
    --fcpe-sale:      #e81f55;
    --fcpe-radius:    8px;
    --fcpe-shadow:    0 2px 12px rgba(6,43,79,0.08);
    --fcpe-transition:0.22s ease;
}

/* ============================================================
   HERO LAYOUT
   ============================================================ */
@media (min-width: 1025px) {
    body.single-product .woocommerce div.product {
        display: grid !important;
        grid-template-columns: minmax(0,1.05fr) minmax(360px,0.95fr) !important;
        gap: 32px !important;
        align-items: start !important;
        max-width: 1180px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 32px 20px !important;
    }
    body.single-product .woocommerce div.product > * { grid-column: 1 / -1; }
    body.single-product .woocommerce div.product .woocommerce-product-gallery,
    body.single-product .woocommerce div.product .summary {
        grid-column: auto !important;
        grid-row: 1 !important;
        float: none !important;
        width: 100% !important;
    }
}
@media (max-width: 1024px) and (min-width: 769px) {
    body.single-product .woocommerce div.product {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 24px !important;
        padding: 24px 16px !important;
    }
    body.single-product .woocommerce div.product > * { grid-column: 1 / -1; }
    body.single-product .woocommerce div.product .woocommerce-product-gallery,
    body.single-product .woocommerce div.product .summary {
        grid-column: auto !important;
        grid-row: 1 !important;
        float: none !important;
        width: 100% !important;
    }
}
@media (max-width: 768px) {
    body.single-product .woocommerce div.product {
        display: block !important;
        padding: 12px !important;
        margin: 0 !important;
    }
    body.single-product .woocommerce div.product .woocommerce-product-gallery,
    body.single-product .woocommerce div.product .summary {
        float: none !important;
        width: 100% !important;
        margin-bottom: 12px !important;
    }
}

/* ============================================================
   PRICE
   ============================================================ */
.fcpe-price-from { font-size:1.1em; color:var(--fcpe-navy); font-weight:600; }
.fcpe-price-from .woocommerce-Price-amount { color:var(--fcpe-orange); font-size:1.2em; font-weight:700; }

/* ============================================================
   SWATCHES
   ============================================================ */
.fcpe-swatches-container { margin:12px 0; }
.fcpe-attribute-group { margin-bottom:14px; }
.fcpe-attribute-label { display:block; font-weight:600; color:var(--fcpe-navy); margin-bottom:8px; font-size:.95em; }
.fcpe-attribute-label .fcpe-selected-val { font-weight:400; color:#555; margin-right:6px; }
.fcpe-swatches-list { display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; }
.fcpe-swatch-btn {
    display:inline-flex; align-items:center; justify-content:center;
    padding:7px 16px; border:2px solid var(--fcpe-border); border-radius:var(--fcpe-radius);
    background:#fff; color:var(--fcpe-text); font-size:.9em; cursor:pointer;
    transition:var(--fcpe-transition); font-family:inherit; min-width:44px; min-height:40px; line-height:1;
}
.fcpe-swatch-btn:hover { border-color:var(--fcpe-orange); color:var(--fcpe-orange); }
.fcpe-swatch-btn.selected { border-color:var(--fcpe-navy); background:var(--fcpe-navy); color:#fff; }
.fcpe-swatch-btn.disabled { opacity:.4; cursor:not-allowed; text-decoration:line-through; }
.fcpe-swatch-msg { font-size:.85em; color:var(--fcpe-sale); margin-top:6px; display:none; }
.fcpe-swatch-msg.visible { display:block; }

/* ============================================================
   PRICE — عرض السعر مرة واحدة فقط
   يتحدث تلقائياً عند اختيار الخيار عبر JS
   ============================================================ */

/* منع تكرار السعر — إخفاء أي سعر إضافي يظهر من WooCommerce بجانب سعرنا */
.woocommerce-variation-price { display:none !important; }

/* سعر الإضافة الخاص بنا */
.fcpe-price-wrap { display:inline-block; }
.fcpe-price-wrap .woocommerce-Price-amount { color:var(--fcpe-orange); font-size:1.2em; font-weight:700; }

/* الأزرار الافتراضية للثيم — لا نخفيها بعد الآن */

/* ============================================================
   STORE FEATURES — أيقونات + نص أفقي داخل كل كارت
   ============================================================ */
.fcpe-store-features {
    display:grid;
    grid-template-columns:repeat(2,1fr); /* 2×2 على الكمبيوتر */
    gap:10px;
    margin:14px 0;
    padding:12px;
    background:var(--fcpe-light-bg);
    border-radius:var(--fcpe-radius);
    border:1px solid var(--fcpe-border);
}
@media (max-width:768px)  {
    .fcpe-store-features { grid-template-columns:repeat(2,1fr); gap:8px; padding:10px; margin:10px 0; }
}

.fcpe-store-feat-card {
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:10px;
    padding:10px;
    background:#fff;
    border-radius:var(--fcpe-radius);
    border:1px solid var(--fcpe-border);
}
@media (max-width:480px) {
    .fcpe-store-feat-card { flex-direction:column; text-align:center; gap:6px; padding:8px 6px; }
}

/* أيقونة المتجر */
.fcpe-feat-icon {
    width:44px; height:44px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:var(--fcpe-light-bg); border-radius:50%;
    color:var(--fcpe-orange);
}
.fcpe-feat-icon svg  { width:24px; height:24px; display:block; }
.fcpe-feat-icon img  { width:28px; height:28px; object-fit:contain; }

.fcpe-feat-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.fcpe-feat-title { font-weight:700; font-size:.82em; color:var(--fcpe-navy); line-height:1.3; }
.fcpe-feat-desc  { font-size:.74em; color:#666; line-height:1.3; }

/* ============================================================
   EXCEPTIONAL FEATURES
   ============================================================ */
.fcpe-exceptional-features { max-width:1180px; margin:24px auto; padding:0 16px; }
@media (max-width:768px) { .fcpe-exceptional-features { margin:16px 0; padding:0 12px; } }

.fcpe-section-title {
    font-size:1.3em; font-weight:700; color:var(--fcpe-navy);
    margin-bottom:18px; text-align:center; position:relative;
}
.fcpe-section-title::after {
    content:''; display:block; width:40px; height:3px;
    background:var(--fcpe-orange); margin:6px auto 0; border-radius:2px;
}
@media (max-width:768px) { .fcpe-section-title { font-size:1.1em; margin-bottom:12px; } }

.fcpe-exc-feats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:1024px) { .fcpe-exc-feats-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px)  { .fcpe-exc-feats-grid { grid-template-columns:repeat(2,1fr); gap:10px; } }

.fcpe-exc-feat-card {
    background:#fff; border:1px solid var(--fcpe-border); border-radius:var(--fcpe-radius);
    padding:18px 12px; text-align:center; transition:var(--fcpe-transition); box-shadow:var(--fcpe-shadow);
}
@media (max-width:768px) { .fcpe-exc-feat-card { padding:12px 8px; } }
.fcpe-exc-feat-card:hover { border-color:var(--fcpe-orange); transform:translateY(-2px); box-shadow:0 6px 20px rgba(255,122,26,.12); }

.fcpe-exc-feat-icon {
    width:52px; height:52px; display:flex; align-items:center; justify-content:center;
    margin:0 auto 10px; background:var(--fcpe-light-bg); border-radius:50%; color:var(--fcpe-orange);
}
@media (max-width:768px) { .fcpe-exc-feat-icon { width:44px; height:44px; margin-bottom:8px; } }
.fcpe-exc-feat-icon svg { width:26px; height:26px; display:block; }
.fcpe-exc-feat-icon img { width:26px; height:26px; object-fit:contain; }
.fcpe-exc-feat-title { font-size:.92em; font-weight:700; color:var(--fcpe-navy); margin:0 0 5px; }
.fcpe-exc-feat-desc  { font-size:.82em; color:#666; line-height:1.5; margin:0; }
@media (max-width:768px) { .fcpe-exc-feat-title { font-size:.82em; } .fcpe-exc-feat-desc { font-size:.75em; } }

/* ============================================================
   PRODUCT TABS — Desktop أفقية
   ============================================================ */
.woocommerce-tabs { max-width:1180px; margin:24px auto; padding:0 16px; clear:both; }
@media (max-width:768px) { .woocommerce-tabs { margin:0; padding:0; } }

@media (min-width:769px) {
    .woocommerce-tabs ul.tabs {
        display:flex !important; flex-wrap:wrap; gap:4px;
        border-bottom:2px solid var(--fcpe-border); margin:0; padding:0; list-style:none;
    }
    .woocommerce-tabs ul.tabs li { margin:0; padding:0; }
    .woocommerce-tabs ul.tabs li a {
        display:block; padding:10px 18px; font-size:.92em; font-weight:600; color:#666;
        text-decoration:none; border-radius:var(--fcpe-radius) var(--fcpe-radius) 0 0;
        border:1px solid transparent; border-bottom:none; transition:var(--fcpe-transition);
        position:relative; top:2px;
    }
    .woocommerce-tabs ul.tabs li a:hover { color:var(--fcpe-navy); }
    .woocommerce-tabs ul.tabs li.active a {
        color:var(--fcpe-navy); background:#fff;
        border-color:var(--fcpe-border); border-bottom-color:#fff;
    }
    .woocommerce-tabs .panel {
        padding:22px; background:#fff;
        border:1px solid var(--fcpe-border); border-top:none;
        border-radius:0 0 var(--fcpe-radius) var(--fcpe-radius);
    }
}

/* ============================================================
   MOBILE ACCORDION — إزالة الفراغات بالكامل
   الحل الجذري: نلغي كل margin/padding من .panel ونبني Accordion نظيف
   ============================================================ */
@media (max-width:768px) {

    /* إخفاء قائمة التبويبات الأفقية */
    .woocommerce-tabs ul.tabs { display:none !important; }

    /* إلغاء كل styles على .panel نفسه */
    .woocommerce-tabs .panel,
    .woocommerce-tabs .wc-tab,
    .woocommerce-tabs [role="tabpanel"] {
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;
        padding:0 !important;
        margin:0 !important;
        border:none !important;
        background:transparent !important;
        float:none !important;
        width:100% !important;
        box-shadow:none !important;
    }

    /* حاوية الـ Accordion */
    .fcpe-accordion-wrap {
        display:flex;
        flex-direction:column;
        gap:6px;
        padding:12px;
        margin:0;
    }
    /* كل عنصر accordion */
    .fcpe-accordion-item {
        border-radius:var(--fcpe-radius);
        overflow:hidden;
        border:1px solid var(--fcpe-border);
        background:#fff;
    }

    /* Trigger */
    .fcpe-accordion-trigger,
    .fcpe-accordion-item .fcpe-accordion-trigger {
        display:flex !important;
        align-items:center;
        justify-content:space-between;
        width:100%;
        padding:12px 14px;
        background:var(--fcpe-light-bg);
        border:1px solid var(--fcpe-border);
        border-radius:var(--fcpe-radius);
        font-size:.9em;
        font-weight:600;
        color:var(--fcpe-navy);
        cursor:pointer;
        text-align:right;
        font-family:inherit;
        transition:var(--fcpe-transition);
        margin:0;
    }
    .fcpe-accordion-trigger.open {
        background:var(--fcpe-navy);
        color:#fff;
        border-color:var(--fcpe-navy);
        border-radius:var(--fcpe-radius) var(--fcpe-radius) 0 0;
    }
    .fcpe-acc-icon {
        font-size:1.1em; transition:transform .22s; flex-shrink:0; line-height:1; font-style:normal;
    }
    .fcpe-accordion-trigger.open .fcpe-acc-icon { transform:rotate(45deg); }

    /* Body */
    .fcpe-accordion-body {
        display:none;
        padding:14px;
        background:#fff;
        border:1px solid var(--fcpe-border);
        border-top:none;
        border-radius:0 0 var(--fcpe-radius) var(--fcpe-radius);
        margin:0;
    }
    .fcpe-accordion-body.open { display:block; }
}

/* ============================================================
   SPECS GRID
   ============================================================ */
.fcpe-specs-grid {
    display:grid; grid-template-columns:repeat(2,1fr); gap:0;
    border:1px solid var(--fcpe-border); border-radius:var(--fcpe-radius); overflow:hidden;
}
@media (max-width:600px) { .fcpe-specs-grid { grid-template-columns:1fr; } }
.fcpe-spec-item {
    display:flex; align-items:flex-start; gap:10px; padding:10px 14px;
    border-bottom:1px solid var(--fcpe-border); background:#fff;
}
.fcpe-spec-item:nth-child(odd) { background:var(--fcpe-light-bg); }
.fcpe-spec-item:last-child { border-bottom:none; }
.fcpe-spec-label { font-weight:600; color:var(--fcpe-navy); font-size:.88em; min-width:110px; flex-shrink:0; }
.fcpe-spec-value { color:var(--fcpe-text); font-size:.88em; }

/* ============================================================
   CARE / SHIPPING
   ============================================================ */
.fcpe-care-content, .fcpe-shipping-content {
    font-size:.92em; line-height:1.7; color:var(--fcpe-text);
}
.fcpe-care-content ul, .fcpe-shipping-content ul { padding-right:20px; margin:8px 0; }
.fcpe-care-content li, .fcpe-shipping-content li { margin-bottom:5px; }

/* ============================================================
   FAQ
   ============================================================ */
.fcpe-faq-list { display:flex; flex-direction:column; gap:6px; }
.fcpe-faq-item { border:1px solid var(--fcpe-border); border-radius:var(--fcpe-radius); overflow:hidden; }
.fcpe-faq-question {
    width:100%; display:flex; align-items:center; justify-content:space-between;
    padding:12px 16px; background:var(--fcpe-light-bg); border:none;
    font-size:.92em; font-weight:600; color:var(--fcpe-navy);
    cursor:pointer; text-align:right; font-family:inherit; transition:var(--fcpe-transition); gap:10px;
}
.fcpe-faq-question:hover { background:#e8f0f7; }
.fcpe-faq-question.open { background:var(--fcpe-navy); color:#fff; }
.fcpe-faq-icon { font-size:1.2em; font-weight:400; flex-shrink:0; transition:transform .22s; line-height:1; }
.fcpe-faq-question.open .fcpe-faq-icon { transform:rotate(45deg); }
.fcpe-faq-answer { display:none; padding:12px 16px; font-size:.88em; line-height:1.6; color:var(--fcpe-text); background:#fff; }
.fcpe-faq-answer.open { display:block; }

/* ============================================================
   COMPLEMENTARY PRODUCTS
   ============================================================ */
.fcpe-complementary-products { max-width:1180px; margin:24px auto; padding:0 16px; }
@media (max-width:768px) { .fcpe-complementary-products { margin:16px 0; padding:0 12px; } }

.fcpe-comp-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:1024px) { .fcpe-comp-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:768px)  { .fcpe-comp-grid { grid-template-columns:repeat(2,1fr); gap:10px; } }

.fcpe-comp-card {
    background:#fff; border:1px solid var(--fcpe-border); border-radius:var(--fcpe-radius);
    overflow:hidden; transition:var(--fcpe-transition); display:flex; flex-direction:column;
}
.fcpe-comp-card:hover { border-color:var(--fcpe-orange); box-shadow:0 4px 16px rgba(255,122,26,.1); transform:translateY(-2px); }
.fcpe-comp-img-link { display:block; position:relative; aspect-ratio:1; overflow:hidden; background:var(--fcpe-light-bg); }
.fcpe-comp-img-link img { width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.fcpe-comp-card:hover .fcpe-comp-img-link img { transform:scale(1.04); }
.fcpe-comp-badge { position:absolute; top:6px; right:6px; background:var(--fcpe-sale); color:#fff; font-size:.72em; font-weight:700; padding:2px 7px; border-radius:4px; }
.fcpe-comp-no-img { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#aaa; font-size:.82em; }
.fcpe-comp-info { padding:10px; display:flex; flex-direction:column; gap:5px; flex:1; }
.fcpe-comp-name { font-size:.85em; font-weight:600; margin:0; line-height:1.4; }
.fcpe-comp-name a { color:var(--fcpe-navy); text-decoration:none; }
.fcpe-comp-name a:hover { color:var(--fcpe-orange); }
.fcpe-comp-rating { font-size:.78em; }
.fcpe-comp-price { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.fcpe-old-price { text-decoration:line-through; color:#999; font-size:.82em; }
.fcpe-current-price { font-weight:700; color:var(--fcpe-navy); font-size:.95em; }
.fcpe-comp-btn { margin-top:auto; }
.fcpe-comp-btn .button, .fcpe-comp-btn a.button {
    display:block; width:100%; text-align:center; padding:8px 10px;
    background:var(--fcpe-navy); color:#fff; border:none; border-radius:var(--fcpe-radius);
    font-size:.82em; font-weight:600; cursor:pointer; text-decoration:none;
    transition:var(--fcpe-transition); font-family:inherit;
}
.fcpe-comp-btn .button:hover, .fcpe-comp-btn a.button:hover { background:var(--fcpe-orange); color:#fff; }

/* ============================================================
   STICKY BAR
   ============================================================ */
.fcpe-sticky-bar {
    position:fixed; bottom:-100px; left:0; right:0; z-index:9999;
    background:#fff; border-top:2px solid var(--fcpe-border);
    box-shadow:0 -4px 20px rgba(6,43,79,.12); transition:bottom .3s ease;
    padding-bottom:env(safe-area-inset-bottom,0);
}
.fcpe-sticky-bar.visible { bottom:0; }

@media (max-width:768px) {
    .fcpe-sticky-bar { bottom:-120px; }
    .fcpe-sticky-bar.visible { bottom:56px; }
}

.fcpe-sticky-inner {
    display:flex; align-items:center; gap:12px;
    max-width:1180px; margin:0 auto; padding:8px 16px;
}
.fcpe-sticky-img { flex-shrink:0; width:46px; height:46px; border-radius:6px; overflow:hidden; border:1px solid var(--fcpe-border); }
.fcpe-sticky-img img { width:100%; height:100%; object-fit:cover; }
.fcpe-sticky-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.fcpe-sticky-name { font-size:.86em; font-weight:600; color:var(--fcpe-navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fcpe-sticky-price { font-size:.92em; font-weight:700; color:var(--fcpe-orange); }
.fcpe-sticky-price .woocommerce-Price-amount { color:var(--fcpe-orange); }
.fcpe-sticky-actions { flex-shrink:0; display:flex; gap:8px; }

.fcpe-sticky-add, .fcpe-sticky-select {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding:9px 14px; background:var(--fcpe-orange); color:#fff;
    border:none; border-radius:var(--fcpe-radius); font-size:.86em; font-weight:600;
    cursor:pointer; transition:var(--fcpe-transition); font-family:inherit; white-space:nowrap;
}
.fcpe-sticky-add:hover, .fcpe-sticky-select:hover { background:#e56a0f; }
.fcpe-sticky-add svg, .fcpe-sticky-select svg { width:16px; height:16px; flex-shrink:0; }

@media (max-width:480px) {
    .fcpe-sticky-inner { padding:7px 10px; gap:8px; }
    .fcpe-sticky-img { width:38px; height:38px; }
    .fcpe-sticky-name { font-size:.76em; }
    .fcpe-sticky-price { font-size:.82em; }
    .fcpe-sticky-add, .fcpe-sticky-select { padding:8px 10px; font-size:.76em; }
}

/* ============================================================
   RELATED PRODUCTS
   ============================================================ */
.woocommerce .related.products { max-width:1180px; margin:24px auto; padding:0 16px; clear:both; }
@media (max-width:768px) { .woocommerce .related.products { margin:16px 0; padding:0 12px; } }
.woocommerce .related.products ul.products { display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:14px !important; float:none !important; }
@media (max-width:1024px) { .woocommerce .related.products ul.products { grid-template-columns:repeat(3,1fr) !important; } }
@media (max-width:768px)  { .woocommerce .related.products ul.products { grid-template-columns:repeat(2,1fr) !important; gap:10px !important; } }
.woocommerce .related.products ul.products li.product { float:none !important; width:auto !important; margin:0 !important; }

/* ============================================================
   GLOBAL BOX-SIZING
   ============================================================ */
.fcpe-store-features *,
.fcpe-exceptional-features *,
.fcpe-complementary-products *,
.fcpe-sticky-bar *,
.fcpe-swatches-container *,
.fcpe-faq-list *,
.fcpe-specs-grid *,
.fcpe-action-buttons * {
    box-sizing:border-box;
}