/* ===========================
RESET
=========================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Cairo,Arial,sans-serif;
}

body{
background:#f4f4f4;
direction:rtl;
color:#111;
}

/* ===========================
TOP BAR
=========================== */

.top-header{
background:#071526;
color:#fff;
}

.top-info{
    min-height:55px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:80px;
    font-size:16px;
    font-weight:bold;
    white-space:nowrap;
}

.top-info span{
    padding:0 25px;
}

.logo{
background:#fff;
text-align:center;
padding:6px;
border-bottom:1px solid #eee;
}

.logo img{
height:100px;
}

/* ===========================
TITLE
=========================== */

.hero{
    background:#fff;
    text-align:center;
    padding:5px 10px 5px;
}

.hero h1{
    font-size:42px;
    font-weight:800;
    color:#061324;
    margin-bottom:3px;
    font-family:Georgia,"Times New Roman",serif;
}

.hero h2{
    font-size:25px;
    color:#c98509;
    font-weight:bold;
    margin:0;
}

/* ===========================
LAYOUT
=========================== */

.product-container{

max-width:1200px;

margin:12px auto;

display:grid;

grid-template-columns:58% 42%;

gap:15px;

padding:0 10px;

align-items:start;

}

/* ===========================
LEFT
=========================== */
.gallery{
    background:#fff;
    padding:10px;
    border-radius:18px;
    box-shadow:0 5px 18px rgba(0,0,0,.08);
}

.product-images{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.product-images img{
    width:100%;
    aspect-ratio:1068 / 882;
    object-fit:contain;
    background:#fff;
    border-radius:12px;
    display:block;
    cursor:pointer;
}
/* ===========================
PRICE
=========================== */

.price-box{
    margin-top:0;
    margin-bottom:12px;
    background:linear-gradient(90deg,#d78d00,#f2b646);
    border-radius:12px;
    padding:6px 12px;
    text-align:center;
    color:#fff;
}

.price-box h3{
    font-size:20px;
    margin-bottom:0;
}

.price-box h1{
    font-size:50px;
    line-height:1;
    font-weight:900;
    margin:0;
}
/* ===========================
ORDER
=========================== */

.order-box{
    background:#fff;
    padding:12px;
    border-radius:16px;
    box-shadow:0 5px 18px rgba(0,0,0,.08);
}

.order-box h2{
    font-size:25px;
    text-align:center;
    margin-bottom:10px;
}
form{

display:flex;

flex-direction:column;

gap:7px;

}
input,
select{
    width:100%;
    height:42px;
    padding:0 12px;
    border:1px solid #ddd;
    border-radius:9px;
    font-size:14px;
    background:#fff;
}

textarea{
    width:100%;
    height:55px;
    padding:8px 12px;
    border:1px solid #ddd;
    border-radius:9px;
    font-size:14px;
    resize:none;
}

input:focus,
textarea:focus,
select:focus{

outline:none;

border:2px solid #d99108;

}

.box-row{
    display:flex;
    gap:7px;
    align-items:center;
}

.box-row input{
    flex:1;
}

.removeBox{
    flex:0 0 42px;
    height:42px;
    border:none;
    background:#d62828;
    color:#fff;
    border-radius:9px;
    font-size:25px;
    font-weight:bold;
    cursor:pointer;
    line-height:1;
}
#addBox{

height:52px;

background:#fff;

border:2px dashed #d99108;

color:#d99108;

font-size:22px;

font-weight:bold;

border-radius:10px;

cursor:pointer;

}

#confirmOrder{
    width:100%;
    height:52px;
    margin-top:8px;
    background:#d99108;
    color:#fff;
    border:none;
    font-size:22px;
    font-weight:bold;
    border-radius:10px;
    cursor:pointer;
    transition:.3s;
}

#confirmOrder:hover{
    background:#bf7d00;
}

#confirmOrder:hover{

background:#bf7d00;

}
/* ===========================
SUMMARY
=========================== */

.summary{

margin-top:18px;

background:#fff;

border-radius:16px;

box-shadow:0 5px 18px rgba(0,0,0,.08);

overflow:hidden;

}

.summary h2{

padding:0px;

text-align:center;

font-size:30px;

border-bottom:1px solid #eee;

}

.summary p{

display:flex;

justify-content:space-between;

padding:15px 20px;

font-size:18px;

border-bottom:1px solid #eee;

}

.summary h1{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px;

background:#061324;

color:#fff;

font-size:42px;

}

/* ===========================
FOOTER
=========================== */

footer{
    margin-top:25px;
    background:#061324;
    color:#fff;
    padding:25px 20px 12px;
}

.footer-content{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:1.2fr 1fr 1.5fr;
    gap:25px;
    align-items:center;
    text-align:center;
}

.footer-logo-space{
    width:65px;
    height:65px;
    margin:0 auto 8px;
}

.footer-logo-space img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.footer-content h3{
    color:#d99108;
    margin-bottom:5px;
    font-size:20px;
}

.footer-content p{
    font-size:14px;
    margin:3px 0;
}

.footer-contact p{
    font-size:22px;
    font-weight:bold;
}

.social-links{
    display:flex;
    justify-content:center;
    gap:35px;
    margin-top:15px;
}

.social-links a{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    color:#fff;
    text-decoration:none;
    font-size:16px;
    font-weight:bold;
}

.social-links a span{
    display:block;
}

.social-links a i{
    display:block;
    font-size:42px;
    line-height:1;
}

.social-links a:hover{
    color:#d99108;
}


.copyright{
    border-top:1px solid rgba(255,255,255,.2);
    margin-top:20px;
    padding-top:12px;
    text-align:center;
    font-size:14px;
}

/* ===========================
MOBILE
=========================== */

@media(max-width:900px){
 .gallery .box-content{
    background:#fffaf0 !important;
    border:2px solid #d99108 !important;
    border-radius:14px !important;
    box-sizing:border-box !important;
}

.product-container{
    grid-template-columns:1fr !important;
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    box-sizing:border-box !important;
}

.gallery .box-content .box-items div{
    font-size:25px ;
    padding:0 3px ;
}

.gallery .box-content .box-items div:not(:last-child)::after{
    content: "" !important;
    display: none !important;
    margin: 0 !important;
}

.gallery .box-content .box-price span{
    font-size:27px !important;
}


.gallery .box-content .box-price strong{
    font-size:30px !important;
}

.gallery .box-content .box-price small{
    font-size:11px !important;
    margin:0px 0 0 !important;
        color:#35022c !important;

}

#mainImage{

height:auto;

}

.thumbs{

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

}

.features{

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

}

.hero h1{

font-size:34px;

}

.hero h2{

font-size:22px;

}

.price-box h1{

font-size:55px;

}

.summary h1{

font-size:28px;

}

.top-info{
    width:100% !important;
    gap:10px !important;
    font-size:13px !important;
    white-space:normal !important;
    flex-wrap:wrap !important;
    text-align:center !important;
}

.gallery .box-content{
    height:auto !important;
    min-height:0 !important;
    margin-bottom:10px !important;
    transform:none !important;
    overflow:visible !important;
}

.gallery .product-images{
    transform:none !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
}

.gallery .features{
    transform:none !important;
    margin-top:10px !important;
    margin-bottom:0 !important;
}

}
/* الصور */
.product-images{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
}


/* رقم الهاتف */
input[type="tel"]{
    direction:rtl !important;
    text-align:right !important;
}

/* جميع الخانات إجبارية */
.order-box input,
.order-box select,
.order-box textarea{
    direction:rtl;
    text-align:right;
}

.order-box input[required],
.order-box select[required]{
    border-right:3px solid #d99108;
}
.product-images{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    align-items:start;
}

.product-images{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    align-items:start;
}

.image-frame{
    display:inline-flex;
    width:max-content;
    max-width:100%;
    padding:5px;
    background:#fff;
    border:2px solid #d9a441;
    border-radius:14px;
    box-shadow:0 3px 10px rgba(0,0,0,.12);
}

.image-frame img{
    display:block;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:245px;
    object-fit:contain;
    border-radius:9px;
}

.image-frame img{
    display:block;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:245px;
    object-fit:contain;
    border-radius:9px;
}
.features{
    margin-top:12px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    border:1px solid #eee;
}

.features div{
    padding:14px 8px;
    text-align:center;
    border-left:1px solid #eee;
}

.features div:last-child{
    border-left:none;
}

.features i{
    display:block;
    font-size:25px;
    color:#d99108;
    margin-bottom:7px;
}

.features strong{
    display:block;
    font-size:14px;
    color:#222;
}
/* ===========================
FEATURES
=========================== */
.features{
    width:100%;
    margin-top:14px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    background:#fff;
    border:1px solid #ddd;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 3px 12px rgba(0,0,0,.08);
}

.feature{
    min-height:90px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:12px 8px;
    border-left:1px solid #ddd;
}

.feature:last-child{
    border-left:none;
}

.feature i{
    font-size:28px;
    color:#d99108;
    margin-bottom:8px;
}

.feature span{
    font-size:15px;
    font-weight:700;
    color:#111;
}

@media(max-width:900px){
    .features{
        grid-template-columns:repeat(2,1fr);
    }

    .feature{
        min-height:75px;
    }
}
.features strong{
    display:block;
    font-size:20px !important;
    font-weight:800;
    color:#b22222 !important;
}
.success-message{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
}

.success-box{
    width:90%;
    max-width:450px;
    background:#fff;
    border-radius:20px;
    padding:35px 25px;
    text-align:center;
    box-shadow:0 10px 40px rgba(0,0,0,.3);
    animation:successPop .25s ease;
}

.success-icon{
    width:70px;
    height:70px;
    margin:0 auto 15px;
    border-radius:50%;
    background:#d99108;
    color:#fff;
    font-size:48px;
    font-weight:bold;
    line-height:70px;
}

.success-box h2{
    font-size:28px;
    color:#071526;
    margin-bottom:10px;
}

.success-box p{
    font-size:19px;
    color:#555;
    margin-bottom:22px;
}

.success-box button{
    width:100%;
    height:52px;
    border:none;
    border-radius:10px;
    background:#d99108;
    color:#fff;
    font-size:20px;
    font-weight:bold;
    cursor:pointer;
}

@keyframes successPop{
    from{
        transform:scale(.8);
        opacity:0;
    }
    to{
        transform:scale(1);
        opacity:1;
    }
}
#phone{
    direction:ltr !important;
    unicode-bidi:plaintext !important;
    text-align:right !important;
}
.social-links{
    display:flex;
    justify-content:center;
    gap:35px;
    margin-top:15px;
}

.social-links a{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    color:#fff;
    text-decoration:none;
    font-size:16px;
    font-weight:bold;
}

.social-links a span{
    order:1;
}

.social-links a i{
    order:2;
    font-size:42px;
    line-height:1;
}
/* ===== محتوى البوكس ===== */

@media(min-width:901px){
    .gallery .box-content{
        display:block !important;
        width:100%;
        height:160px !important;
        box-sizing:border-box;
        background:#fffaf0;
        border:2px solid #d99108;
        border-radius:14px;
        padding:8px 14px !important;
        margin-bottom:60px !important;
        direction:rtl !important;
        text-align:center !important;
    }
}


/* لا نلمس الصور */

.gallery .product-images{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
}

.gallery .product-images img{
    width:100% !important;
    aspect-ratio:1068 / 882 !important;
    object-fit:contain !important;
}


/* الخانات الأربع */

.gallery .features{
    margin-top:10px !important;
}
.gallery .features{
    transform:translateY(-60px);
    margin-bottom:-(60)px;
}

@media(min-width:901px){
    .gallery .features{
        transform:none !important;
        margin-top:-60px !important;
        margin-bottom:0 !important;
    }
}
@media(min-width:901px){
    .gallery .product-images{
        transform:translateY(-60px);
    }
}
@media (max-width:900px){

    .footer-content{
        grid-template-columns:minmax(0,1fr) !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
    }

    .footer-content > div{
        min-width:0 !important;
        max-width:100% !important;
    }

    .top-header,
    .hero,
    footer{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
    }

    .top-info{
        min-width:0 !important;
        max-width:100% !important;
    }
}
@media (max-width:900px){

    .product-container{
        min-width:0 !important;
        overflow:hidden !important;
    }

    .product-container > *{
        min-width:0 !important;
        width:100% !important;
        max-width:100% !important;
    }

    .gallery{
        min-width:0 !important;
        overflow:hidden !important;
    }

    .gallery .box-content{
        min-width:0 !important;
        width:100% !important;
        max-width:100% !important;
    }

    /* 1. تنسيق الحاوية بنظام الـ Grid لضمان سطرين منظمين (2 في 2) */
    .gallery .box-content .box-items{
        min-width:0 !important;
        max-width:100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 5px 20px !important;
        width: 100% !important;
        justify-content: center !important;
        align-content: center !important;
    }

    /* 2. إخفاء الشرطة القديمة التابعة للحاسوب */
    .gallery .box-content .box-items div:not(:last-child)::after {
        display: none !important;
    }

    /* 3. تنسيق الكلمات الأربعة لتتوسط بدقة من المنتصف */
    .gallery .box-content .box-items div {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        white-space: nowrap !important;
        width: 100% !important;
        font-size: 16px !important;
        font-weight: 900 !important;
        color: #000000 !important;
    }

    /* 4. إضافة إيموجي الهدية قبل كل كلمة */
    .gallery .box-content .box-items div::before {
        content: "🎁 " !important;
        margin-left: 6px !important;
        font-size: 16px !important;
    }
}
.gallery .box-content{
    background-image:url("../images/mohtaoua.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}
@media(max-width:900px){
    .gallery .box-content{
        background-image:url("../images/mohtaoua.png") !important;
        background-size:100% 100% !important;
        background-position:center !important;
        background-repeat:no-repeat !important;
    }
}
@media(max-width:900px){
    .gallery .box-content{
        min-height:160px !important;
        height:160px !important;
        width:100% !important;
        box-sizing:border-box !important;

        background-image:url("../images/mohtaoua.png") !important;
        background-size:100% 100% !important;
        background-position:center !important;
        background-repeat:no-repeat !important;
    }
}
/* =========================
   أزرار الشعار - الحاسوب
   ========================= */

@media(min-width:901px){

    .header-buttons{
    position:absolute;
            top:65px;
        left:0;
        right:0;
        width:100%;
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:0 20% !important;
        box-sizing:border-box;
        z-index:9999;
        pointer-events:none;
    }

    .header-buttons a{
        pointer-events:auto;
        display:flex;
        align-items:center;
        justify-content:center;
        text-decoration:none;
        font-weight:900;
        border-radius:14px;
        transition:transform .25s ease;
    }

    /* أطلب الآن - اليمين */
    .order-button{
        background:#d62828;
        color:#fff;
        font-size:40px;
        padding:14px 25px;
        box-shadow:
            0 5px 0 #9e1d1d,
            0 8px 18px rgba(0,0,0,.22);
        animation:order-button-move 1s ease-in-out infinite;
    }

    /* تواصل معنا - اليسار */
    .contact-button{
        background:#fff;
        color:#d62828;
        border:2px solid #d62828;
        font-size:22px;
        padding:10px 18px;
        box-shadow:
            0 4px 0 #d9d9d9,
            0 7px 14px rgba(0,0,0,.15);
    }

    .header-buttons a:hover{
        transform:translateY(-3px);
    }

    .header-buttons a:active{
        transform:translateY(2px);
    }

}


/* حركة زر أطلب الآن */

@keyframes order-button-move{
    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(+7px);
    }
}


/* =========================
   الهاتف
   ========================= */

@media(max-width:900px){

    .header-buttons{
        position:absolute;
        top:80px;
        left:0;
        right:0;
        width:100%;
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:0 8px;
        box-sizing:border-box;
        z-index:9999;
        pointer-events:none;
    }

    .header-buttons a{
        pointer-events:auto;
        display:flex;
        align-items:center;
        justify-content:center;
        text-decoration:none;
        font-weight:900;
        border-radius:12px;
    }

    .order-button{
        background:#d62828;
        color:#fff;
        font-size:22px;
        padding:9px 14px;
        box-shadow:
            0 4px 0 #9e1d1d,
            0 6px 12px rgba(0,0,0,.20);
            animation:order-button-attention 1.5s ease-in-out infinite !important;
    }

    .contact-button{
        background:#fff;
        color:#d62828;
        border:2px solid #d62828;
        font-size:16px;
        padding:7px 11px;
        box-shadow:
            0 3px 0 #d9d9d9,
            0 5px 10px rgba(0,0,0,.15);
    }

}
@media(max-width:900px){

    .header-buttons .order-button{
        animation:order-button-attention-mobile 1.5s ease-in-out infinite !important;
    }

}

@keyframes order-button-attention-mobile{

    0%,100%{
        transform:scale(1) translateY(0);
    }

    10%{
        transform:scale(1.10) translateY(-3px);
    }

    20%{
        transform:scale(1) translateY(0);
    }

    30%{
        transform:scale(1.10) translateY(-3px);
    }

    40%{
        transform:scale(1) translateY(0);
    }
}