/* Refsam frontend CSS - optimized */

/* Slider */
.refsam-boxed-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}

.refsam-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.refsam-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1) translate(0,0);
    transition: transform linear, opacity 1.2s ease-in-out;
}

.refsam-slide.active {
    opacity: 1;
}


.refsam-hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 20px;
    box-sizing: border-box;
}

.refsam-text-group {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out, transform 1.2s ease-in-out;
    box-sizing: border-box; /* مهم للحشو */
    padding: 0 60px; /* هامش افتراضي من الجانبين */
}

.refsam-text-group.active {
    opacity: 1;
}

.refsam-text-group h1 { font-size:48px; margin-bottom:12px; }
.refsam-text-group p { font-size:22px; margin:0; }

/* Content box */
.refsam-content-box { box-sizing:border-box; padding:20px; background:#fff; color:#222; text-align:center; margin:10px; }
.refsam-content-box.refsam-rounded { border-radius:12px; }
.refsam-content-box.refsam-shadow { box-shadow:0 8px 24px rgba(0,0,0,0.12); }
.refsam-content-box.align-left { text-align:left; }
.refsam-content-box.align-right { text-align:right; }
.refsam-cb-image img { max-width:100%; display:block; margin:0 auto 12px; border-radius:8px; }
.refsam-cb-icon { font-size:36px; margin-bottom:8px; }
.refsam-cb-title { font-size:22px; margin:8px 0; }
.refsam-cb-text { font-size:16px; margin-bottom:12px; }
.refsam-cb-items { margin-top:12px; display:flex; flex-direction:column; gap:8px; align-items:center; }
.refsam-cb-item { display:flex; gap:8px; align-items:flex-start; text-align:left; }
.refsam-cb-item i { font-size:20px; margin-right:8px; }
.refsam-btn { display:inline-block; padding:10px 18px; background:#1e73be; color:#fff; border-radius:6px; text-decoration:none; }

/* Parallax effects */
.refsam-effect-parallax_light { transform: scale(1.1) translateY(-5%); }
.refsam-effect-parallax_deep  { transform: scale(1.3) translateY(-10%); }

/* Responsive tweaks */


/* Buttons in text group */
.refsam-btn-wrapper { width:100%; box-sizing:border-box; }
.refsam-btn {
    display:inline-block;
    text-decoration:none;
    cursor:pointer;
    transition: all 0.18s ease;
    border: none;
}

/* basic styles — will be overridden by inline styles from PHP */
.refsam-btn-style-rounded { border-radius:8px; }
.refsam-btn-style-square { border-radius:0; }
.refsam-btn-style-circle { border-radius:50%; padding:10px; display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; }
.refsam-btn-style-outline { background:transparent; border:1px solid currentColor; }

/* Hover effect handled by CSS rule but values can come from data attributes via JS if needed */
.refsam-btn:hover {
    transform: translateY(-2px);
    opacity: 0.98;
}

/* ============================================================
   ✅ Responsive Improvements for Mobile 
   ============================================================ */

/* ✅ تقليل ارتفاع السلايدر على الموبايل إلى 60vh */
@media (max-width: 768px) {
    .refsam-hero {
        height: 20vh !important;
    }
}

@media (max-width: 768px){
 
    .refsam-cb-items { align-items:stretch; }
}

/* ✅ تقليل حجم النصوص قليلاً على الموبايل */
@media (max-width: 768px) {
    .refsam-text-group h1 {
        font-size: 24px !important;   /* كان 28 → تقليل بسيط */
        line-height: 1.3;
    }
    .refsam-text-group p {
        font-size: 14px !important;   /* كان 16 */
        line-height: 1.5;
    }
}

/* ✅ المحافظة على المحاذاة الأصلية (لا تعديل)، فقط إعطاء مساحة أفضل */
@media (max-width: 768px) {
    .refsam-text-group {
        padding: 0 18px !important; /* كان 22px */
        max-width: 100%;
    }
}

/* ✅ زر الموبايل — Padding جديد + جعل الحجم مناسب للشاشة */
@media (max-width: 768px) {
    .refsam-btn {
        padding: 8px 16px !important;    /* padding جديد للموبايل */
        font-size: 14px !important;
        min-width: auto;
        min-height: auto;
    }

    /* الأزرار الدائرية */
    .refsam-btn-style-circle {
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        font-size: 14px !important;
    }

    /* ضبط محاذاة زر الموبايل */
    .refsam-btn-wrapper {
        width: 100%;
    }
}

/* ============================================================
   ✅ Responsive Styling — Tablets (769px to 1024px)
   ============================================================ */

@media (min-width: 769px) and (max-width: 1024px) {

    /* ✅ ارتفاع السلايدر */
    .refsam-hero {
        height: 35vh !important;
    }

    /* ✅ النصوص: أكبر من الهاتف وأصغر من الديسكتوب */
    .refsam-text-group h1 {
        font-size: 32px !important;   /* كان 38 → مناسب للتابلت */
        line-height: 1.3;
    }
    .refsam-text-group p {
        font-size: 18px !important;   /* كان 22 */
        line-height: 1.5;
    }

    /* ✅ تحسين الحواف الداخلية */
    .refsam-text-group {
        padding: 0 40px !important;  /* بين 60 (ديسكتوب) و 18 (موبايل) */
    }

    /* ✅ زر بحجم متوسط */
    .refsam-btn {
        padding: 10px 20px !important;  /* أكبر من الهاتف */
        font-size: 15px !important;
    }

    .refsam-btn-style-circle {
        min-width: 46px !important;
        min-height: 46px !important;
        font-size: 15px !important;
        padding: 0 !important;
    }

    /* ✅ المسافة بين النص والزر */
    .refsam-btn-wrapper {
        margin-top: 16px !important;
    }
}