/* ===================================================
   Hosty Design V2
   style.css - Part 1
   Reset + Global + Top Bar + Header + Hero
=================================================== */

/* Reset */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}
.hero{
    margin-top:20px;
}
body{
    font-family:var(--font-family);
    background:var(--body-bg);
    color:var(--text-color);
    line-height:1.8;
    overflow-x:hidden;
}

img{
    display:block;
    max-width:100%;
}

a{
    text-decoration:none;
    color:inherit;
    transition:var(--transition);
}

ul{
    list-style:none;
}

.container{
    width:min(100%,var(--container-width));
    margin:auto;
    padding-inline:var(--container-padding);
}

/* Top Bar */
.top-bar{
    background:var(--primary-dark);
    color:var(--text-white);
    padding:10px 0;
    font-size:var(--fs-sm);
}

.top-bar .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}

.top-contact,
.top-social{
    display:flex;
    gap:18px;
}

/* Header */
.header{
    position:sticky;
    top:0;
    z-index:var(--z-sticky);
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(10px);
    box-shadow:var(--shadow-sm);
}

.header .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:var(--header-height);
    margin-bottom: -30px;
  margin-top: -20px;
}

.logo img{
    height:80px;
    width:auto;
    margin:7px 0px 7px 0px;
}

.navbar > ul{
    display:flex;
    align-items:center;
    gap:28px;
}

/* القوائم الداخلية لا تتأثر بتنسيق القائمة الرئيسية */
.navbar ul.sub-menu{
    display:none;
}

.navbar a{
    font-weight:var(--fw-semibold);
    color:var(--text-dark);
    position:relative;
}

.navbar a.active,
.navbar a:hover{
    color:var(--primary-color);
}

.menu-btn{
    display:none;
    font-size:28px;
    cursor:pointer;
}

/* Hero */
.hero{
    position:relative;
    min-height:90vh;
    display:flex;
    align-items:center;
    background:linear-gradient(rgba(13,27,42,.65),rgba(13,27,42,.65)),
               url("../images/hero-bg.jpg") center/cover no-repeat;
}

.hero-content{
    max-width:700px;
    color:var(--text-white);
}

.hero-content span{
    display:inline-block;
    margin-bottom:16px;
    color:var(--secondary-color);
    font-weight:var(--fw-bold);
}

.hero-content h1{
    font-size:clamp(2.5rem,5vw,4.5rem);
    line-height:1.2;
    margin-bottom:20px;
}

.hero-content p{
    font-size:var(--fs-md);
    max-width:620px;
    margin-bottom:30px;
}

.hero-buttons{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
}

.btn-primary,
.btn-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:var(--btn-padding);
    border-radius:var(--btn-radius);
    font-weight:var(--fw-bold);
}

.btn-primary{
    background:var(--gradient-primary);
    color:#fff;
}

.btn-secondary{
    border:2px solid #fff;
    color:#fff;
}

.btn-primary:hover,
.btn-secondary:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-md);
background:var(--secondary-color)
}

/* ===================================================
   Hosty Design V2
   style.css - Part 2
   Latest Projects + CTA + Products
=================================================== */

/* Sections */
section{
    padding:30px 30px 30px 30px
}

.section-header{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:20px;
    margin-bottom:40px;
    flex-wrap:wrap;
}
.gallery-preview h2{

    text-align:center;

    width:100%;

}

.section-header h2{
    font-size:var(--fs-2xl);
    color:var(--text-dark);
}

.section-header p{
    color:var(--text-light);
    max-width:650px;
}

.view-more{
    color:var(--primary-color);
    font-weight:var(--fw-bold);
}

/* Latest Projects */
.projects-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
}
.project-card::before{

    content:"";

    position:absolute;

    top:0;

    right:0;

    width:100%;

    height:4px;



}
.project-card{
background: #fff;
  border: 1px solid #000ee9;
  border-top-width: 4px;
  border-top-style: solid;
  border-top-color: rgb(105, 111, 215);
  border-right-width: 4px;
  border-right-style: solid;
  border-right-color: rgb(105, 111, 215);
  border-bottom-width: 4px;
  border-bottom-style: solid;
  border-bottom-color: rgb(105, 111, 215);
  border-left-width: 4px;
  border-left-style: solid;
  border-left-color: rgb(105, 111, 215);
  border-image-outset: 0;
  border-image-repeat: stretch;
  border-image-slice: 100%;
  border-image-source: none;
  border-image-width: 1;
  border-radius: 20px;
  overflow: hidden;
  transition: .35s ease;
  box-shadow: 0 5px 20px rgba(0,0,0,.05);
  position: relative;
}

.project-card:hover{

    transform:translateY(-8px);

    border-color:#f4a100;

    box-shadow:
    0 15px 35px rgba(0,0,0,.12);

}

.project-card img{
    width:100%;
    height:240px;
    object-fit:cover;
transition:.4s;
}
.project-card:hover img{
    transform:scale(1.05);
}

.project-content{
    padding:24px;
}

.project-content h3{
    color:var(--text-dark);
    margin-bottom:12px;
}

.project-content p{
    color:var(--text-light);
    margin-bottom:16px;
}

.project-content a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 28px;

    background:var(--primary-color);

    color:#fff;

    border-radius:50px;

    font-weight:700;

    transition:.3s ease;

    margin-top:15px;

}
.project-content a:hover{

    background:var(--secondary-color);

    transform:translateY(-3px);

    box-shadow:0 10px 20px rgba(0,0,0,.15);

}

/* CTA */
.cta-banner{
    background:var(--gradient-primary);
    color:#fff;
    text-align:center;
}
.cta-banner .btn-primary{

    background:#fff;

    color:var(--primary-color);

    border:none;

    padding:16px 35px;

    border-radius:50px;

    font-weight:700;

}
.cta-banner h2{
    font-size:var(--fs-2xl);
    margin-bottom:18px;
}

.cta-banner p{
    max-width:760px;
    margin:0 auto 30px;
}

/* =========================
   Products New Design
========================= */

.products{
    background:#f8f9fc;
}

.products-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:0px;
}

.product-card{
    background:#fff;
    border-radius:50px 0px 50px 0px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.4s;
    text-align:center;
    border:3px solid #5a6fd8;
}

.product-card:hover{

    transform:translateY(-10px);

    border-color:#f4a100;


    box-shadow:
    0 20px 40px rgba(0,0,0,.12);

}
.product-card .btn:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 25px rgba(37,99,235,.35);
    background:var(--secondary-color);
}
.printing-card{
    border-color:#ff9800;
}

.gifts-card{
    border-color:#2563eb;
}

.handmade-card{
    border-color:#c026d3;
}

.product-image{
    height:170px;
    overflow:hidden;
}

.product-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.product-card:hover img{

    transform:scale(1.08);

}

.product-content{

    padding:15px;

    text-align:center;

}

.product-content h3{

    color:var(--primary-color);

    font-size:18px;

    margin-bottom:5px;

}

.product-content p{

    color:var(--text-light);

    margin-bottom:25px;

}

.product-content .btn-primary{

    display:inline-flex;

    padding:14px 32px;

    border-radius:50px;

}
/* ===================================================
   Hosty Design V2
   style.css - Part 3
   Gallery + Statistics + Why Hosty
=================================================== */

/* Featured Services */
.featured-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
}

.feature-card{
    background:var(--section-bg);
    border-radius:var(--card-radius);
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    transition:var(--transition);
}

.feature-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-lg);
}

.feature-card img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.feature-card h3{
    padding:20px 20px 10px;
    color:var(--primary-color);
}

.feature-card p{
    padding:0 20px 20px;
    color:var(--text-light);
}

.feature-card a{
    display:inline-block;
    margin:0 20px 24px;
    font-weight:var(--fw-bold);
    color:var(--secondary-dark);
}

/* Gallery */
/* ==========================
   Gallery Slider
========================== */

.gallery-track{

    display:flex;

    gap:25px;

    width:max-content;

}
.slider-left .gallery-track{

    animation:moveLeft 60s linear infinite;

}
.slider-right .gallery-track{

    animation:moveRight 60s linear infinite;

}
@keyframes moveLeft{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}
@keyframes moveRight{

    from{
        transform:translateX(-50%);
    }

    to{
        transform:translateX(0);
    }

}
.slider-left .gallery-track:hover,
.slider-right .gallery-track:hover{
    animation-play-state: paused;
}
.slider-left .gallery-track:active,
.slider-right .gallery-track:active{
    animation-play-state: paused;
}

.gallery-preview{

    overflow:hidden;

    background:#fff;

}

.gallery-slider{

    width:100%;

    overflow:hidden;

    position:relative;

    margin-top:40px;

}

.gallery-track{

    display:flex;

    gap:25px;

    width:max-content;

    animation:galleryMove 50s linear infinite;

}
.gallery-item{

    flex-shrink:0;

    width:320px;

    height:240px;

    overflow:hidden;

    border-radius:20px;

    box-shadow:
    0 10px 25px rgba(0,0,0,.08);

}
.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s ease;

}
.gallery-item:hover img{

    transform:scale(1.08);

}
@keyframes galleryMove {

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}



/* Statistics */

.statistics{
background:linear-gradient(135deg,#0F4C81,#2D6FA7);
    padding:80px 0;

    color:#fff;

    position:relative;

    overflow:hidden;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:25px;
}

.stat-box{

    text-align:center;

    padding:40px 20px;

    border-radius:25px 0px 25px 0px;

    background:rgba(8, 0, 255, 0.06);

    backdrop-filter:blur(10px);

    border:2px solid rgb(255, 255, 255);

    transition:.4s ease;

}
.stat-box:hover{

    transform:translateY(-8px);

    background:rgba(255,255,255,.10);

    box-shadow:0 20px 40px rgba(0,0,0,.25);

}

.stat-box h3{

    color:#fff;

    font-size:58px;

    font-weight:800;

}

.stat-box p{

    color:rgba(255,255,255,.9);

}

.features-bar{

    background:#102844;

    border-radius:30px;

    padding:20px 50px 20px 50px;

    margin:20px auto;
width:95%;

}

.feature-item i{

    font-size:60px;

    color:#f4a100;

    margin-bottom:15px;

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

    .features-grid{

        flex-direction:column;

        gap:50px;

    }

}
.features-grid{

    display:grid;

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

    gap:40px;

    text-align:center;

}

.feature-item{

    flex:1;

    color:#fff;

}

.feature-item i{

    font-size:55px;

    color:#f4a100;

    margin-bottom:20px;

}

.feature-item h3{

    font-size:32px;

    margin-bottom:10px;

    color:#fff;

}

.feature-item p{

    color:rgba(255,255,255,.85);

    line-height:1.8;

}

@media(max-width:768px){

    .features-grid{

        grid-template-columns:1fr;

        gap:40px;

    }

}
/* ===================================================
   Hosty Design V2
   style.css - Part 4
   Testimonials + FAQ + Footer
=================================================== */

/* Testimonials */
.testimonials-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:30px;
}

.testimonial-card{
    background:var(--section-bg);
    padding:30px;
    border-radius:var(--card-radius);
    box-shadow:var(--shadow-sm);
    transition:var(--transition);
    position:relative;
}

.testimonial-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-lg);
}

.testimonial-card p{
    color:var(--text-light);
    margin-bottom:20px;
    font-style:italic;
}

.testimonial-card h4{
    color:var(--primary-color);
}

/* FAQ */
.faq-list{
    max-width:900px;
    margin:0 auto;
}

.faq-list details{
    background:var(--section-bg);
    border-radius:12px;
    margin-bottom:16px;
    box-shadow:var(--shadow-sm);
    overflow:hidden;
}

.faq-list summary{
    cursor:pointer;
    padding:20px 24px;
    font-weight:var(--fw-bold);
    color:var(--text-dark);
}

.faq-list p{
    padding:0 24px 20px;
    color:var(--text-light);
}

/* Footer */
.footer{
    background:var(--footer-bg);
    color:var(--text-white);
    padding:70px 0 25px;
}

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:40px;
}

.footer h3,
.footer h4{
    margin-bottom:20px;
}

.footer p,
.footer li{
    color:rgba(255,255,255,.8);
    margin-bottom:12px;
}

.footer a{
    color:rgba(255,255,255,.85);
}

.footer a:hover{
    color:var(--secondary-color);
}

.copyright{
    text-align:center;
    margin-top:40px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.15);
    font-size:var(--fs-sm);
}

/* Utilities */
.text-center{text-align:center;}
.mb-1{margin-bottom:var(--space-1);}
.mb-2{margin-bottom:var(--space-2);}
.mb-3{margin-bottom:var(--space-3);}
.mb-4{margin-bottom:var(--space-4);}
.mb-5{margin-bottom:var(--space-5);}




.services-icons-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin-top:50px;
}
.service-icon-card{
    background:#ffffff;
    padding:35px 25px;
    border-radius:20px;
    text-align:center;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.4s ease;
}
.service-icon-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(0,0,0,.15);
}
.service-icon{
    font-size:50px;
    color:#2d6cdf;
    margin-bottom:20px;
}
.service-icon-card h3{
    font-size:24px;
    color:#0f172a;
    margin-bottom:15px;
}
.service-icon-card p{
    color:#64748b;
    line-height:1.8;
    font-size:15px;
}
@media(max-width:768px){

.services-icons-grid{
    grid-template-columns:1fr;
}


}
/* ==========================
   Main Categories
========================== */

.main-categories{

    background:#ffffff;

}

.categories-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:25px;

    margin-top:50px;

}
.category-card{

    background:#fff;

    border:3px solid #5a6fd8;

    border-radius:25px;

    padding:35px 25px;

    text-align:center;

    transition:.4s ease;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

    position:relative;

    overflow:hidden;

}
.category-card:hover{

    transform:translateY(-10px);

    border-color:#f4a100;

    box-shadow:0 15px 35px rgba(0,0,0,.12);

}

.category-icon{

    font-size:48px;

    margin-bottom:18px;

}
.category-card h3{

    color:var(--primary-color);

    font-size:22px;

    margin-bottom:12px;

}

.category-card p{

    color:var(--text-light);

    font-size:15px;

    line-height:1.8;

}
.section-header{
    text-align:center;
    margin-bottom:60px;
}

.section-header h2{
    font-size:48px;
}
/* =========================
   Footer
========================= */

.footer{
    border-top:6px solid #f7b500;
    background:#102844;

    color:#fff;

    padding:70px 0 25px;

    margin-top:80px;

}

.footer-grid{

    display:grid;

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

    gap:40px;

}

.footer-column h3{

    color:#f7b500;

    margin-bottom:20px;

    font-size:24px;

}

.footer-column p{

    color:#d6dce5;

    line-height:1.9;

}

.footer-column ul{

    list-style:none;

    padding:0;

}

.footer-column ul li{

    margin-bottom:12px;

}

.footer-column ul li a{

    color:#d6dce5;

    text-decoration:none;

    transition:.3s;

}

.footer-column ul li a:hover{

    color:#f7b500;

    padding-right:5px;

}

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.15);

    margin-top:40px;

    padding-top:20px;

    text-align:center;

    color:#d6dce5;

}
.footer-column a:hover{
    color:#f7b500;
    transform:translateX(-5px);
}
.copyright{
    text-align:center;
    padding:20px;
    border-top:1px solid rgba(255,255,255,.1);
    margin-top:30px;
    color:#cfd8e3;
}

@media(max-width:992px){

    .footer-grid{

        grid-template-columns:1fr 1fr;

    }

}

@media(max-width:768px){

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

}
.menu{
    display:flex;
    align-items:center;
    gap:35px;
    list-style:none;
    margin:0;
    padding:0;
}

.menu li{
    list-style:none;
}

.menu li a{
    text-decoration:none;
    color:#222;
    font-size:18px;
    font-weight:600;
    transition:0.3s;
}

.menu li a:hover{
    color:#1f5f99;
}
.navbar-menu{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:30px !important;
    list-style:none !important;
    padding:0 !important;
    margin:20px 0 0 0 !important;
    position:relative !important;
    z-index:99999 !important;
}

.navbar-menu li{
    list-style:none !important;
    position:relative !important;
}

.navbar-menu > li > a{
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    color:#222 !important;
    text-decoration:none !important;
    font-size:18px !important;
    font-weight:600 !important;
    white-space:nowrap !important;
}

/* =========================================================
   القائمة المنسدلة متعددة المستويات
   تدعم قسم > قسم فرعي > قسم داخلي > ... بدون حد أقصى
   ========================================================= */

.navbar-menu .menu-item-has-children > a::after{
    content:"⌄";
    display:inline-block;
    font-size:14px;
    line-height:1;
    margin-right:5px;
    transition:transform .25s ease;
}

.navbar-menu > li.menu-item-has-children:hover > a::after{
    transform:rotate(180deg);
}

/* كل القوائم الداخلية تكون عمودية */
.navbar-menu .sub-menu{
    display:none !important;
    position:absolute !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
    list-style:none !important;
    width:240px !important;
    min-width:240px !important;
    margin:0 !important;
    padding:8px 0 !important;
    background:#fff !important;
    border:1px solid #e5e5e5 !important;
    border-radius:12px !important;
    box-shadow:0 12px 30px rgba(0,0,0,.15) !important;
    z-index:100000 !important;
}

/* المستوى الأول */
.navbar-menu > li.menu-item-has-children > .sub-menu{
    top:calc(100% + 5px) !important;
    right:0 !important;
}

/* إظهار المستوى المطلوب فقط */
.navbar-menu > li.menu-item-has-children:hover > .sub-menu,
.navbar-menu .sub-menu li.menu-item-has-children:hover > .sub-menu{
    display:flex !important;
}

/* عناصر القوائم الداخلية */
.navbar-menu .sub-menu li{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
}

.navbar-menu .sub-menu li > a{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
    min-height:44px !important;
    padding:10px 16px !important;
    box-sizing:border-box !important;
    color:#222 !important;
    background:#fff !important;
    text-decoration:none !important;
    font-size:16px !important;
    font-weight:500 !important;
    line-height:1.5 !important;
    text-align:right !important;
    white-space:normal !important;
}

.navbar-menu .sub-menu li > a:hover{
    color:#0f4c81 !important;
    background:#f5f7fa !important;
}

/* السهم للأقسام التي بداخلها أقسام أخرى */
.navbar-menu .sub-menu .menu-item-has-children > a::after{
    content:"‹";
    margin-right:auto;
    margin-left:0;
    font-size:20px;
    line-height:1;
}

/* المستوى الثاني والثالث والرابع وجميع المستويات التالية
   تفتح إلى يسار المستوى السابق لأن الموقع RTL */
.navbar-menu .sub-menu .sub-menu{
    top:-8px !important;
    right:100% !important;
}

/* منع قواعد ul العامة من تحويل القوائم الفرعية إلى صفوف */
.navbar-menu .sub-menu,
.navbar-menu .sub-menu ul{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
}

/* المحافظة على ظهور القائمة فوق الهيرو والهيدر */
.header,
.navbar,
.navbar-menu{
    z-index:99995 !important;
}

/* =========================================================
   الموبايل: القائمة متعددة المستويات
   ========================================================= */

@media (max-width:768px){

    .navbar > ul,
    .navbar-menu{
        flex-direction:column !important;
        align-items:stretch !important;
        gap:0 !important;
    }

    .navbar-menu .sub-menu{
        position:static !important;
        width:100% !important;
        min-width:0 !important;
        box-shadow:none !important;
        border:0 !important;
        border-radius:0 !important;
        padding:0 12px !important;
        background:#f8fafc !important;
    }

    .navbar-menu > li.menu-item-has-children > .sub-menu,
    .navbar-menu .sub-menu .sub-menu{
        right:auto !important;
        top:auto !important;
    }

    .navbar-menu .sub-menu li > a{
        min-height:42px !important;
        padding:9px 14px !important;
        font-size:15px !important;
    }

}
.products-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
}

.product-price{
    margin:10px 0;
    font-size:18px;
    font-weight:700;
    color:#0f4c81;
}

.products-more{
    text-align:center;
    margin-top:40px;
}

@media(max-width:768px){

    .products-grid{
        grid-template-columns:repeat(3,1fr);
        gap:15px;
    }

}
.categories-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
}

.category-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    text-align:center;
    text-decoration:none;
    transition:.3s;
}

.category-card:hover{
    transform:translateY(-5px);
}

.category-image{
    height:180px;
    overflow:hidden;
}

.category-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.category-card h3{
    margin:15px 0 5px;
}

.category-card p{
    margin-bottom:15px;
    color:#666;
}

@media(max-width:768px){

    .categories-grid{
        grid-template-columns:repeat(3,1fr);
    }

}

.shop-layout{
    display:grid;
    grid-template-columns:250px 1fr;
    gap:30px;
    margin-top:40px;
}

.categories-sidebar{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.category-tab{
    width:100%;
    border:none;
    background:#fff;
    padding:15px 20px;
    border-radius:12px;
    cursor:pointer;
    text-align:right;
    font-size:16px;
    font-weight:600;
    transition:.3s;
    border:1px solid #e5e5e5;
}

.category-tab:hover{
    background:#0f4c81;
    color:#fff;
}

.category-tab.active{
    background:#0f4c81;
    color:#fff;
}

.category-products{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.category-products .product-card{
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    transition:.3s;
    border:1px solid #eee;
}

.category-products .product-card:hover{
    transform:translateY(-5px);
}

.category-products img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.category-products h3{
    font-size:16px;
    padding:0px;
    color:#222;
    display:contents;
}

.category-products .price{
    display:block;
    padding:0 15px 20px;
    color:#0f4c81;
    font-weight:bold;
}

@media(max-width:991px){

    .shop-layout{
        grid-template-columns:1fr;
    }

    .category-products{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:576px){

    .category-products{
        grid-template-columns:repeat(2,1fr);
        gap:15px;
    }

}
/* =========================
   Product Card
========================= */
.product-card{
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 4px 15px rgba(0,0,0,.08);
    transition:.3s;
}

.product-card:hover{
    transform:translateY(-5px);
}

.product-card img{
    width:100%;
    height:200px;
    object-fit:cover;
    display:block;
}

.product-info{
    padding:10px;
}

.product-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
}

.product-title{
    font-size:15px;
    font-weight:700;
    color:#222;
}

.product-price{
    font-size:14px;
    font-weight:700;
    color:#0d4d8b;
}

.product-actions{
    display:flex;
    gap:10px;
}

.product-actions a,
.product-actions .button{
    flex:1;
    text-align:center;
    padding:5px;
    border-radius:8px;
    text-decoration:none;
    font-size:13px;
    font-weight:700;
}

.view-product{
    background:#0d4d8b;
    color:#fff;
}

.add-cart{
    background:#28a745;
    color:#fff;
}

/* ===================================
   SINGLE PRODUCT
=================================== */

.hosty-product-wrapper{
    display:flex;
    gap:40px;
    align-items:flex-start;
    padding:60px 0;
}

.hosty-product-gallery{
    width:60%;
    flex:0 0 70%;
}

.hosty-product-info{
    width:40%;
    flex:0 0 30%;
    padding-top:10px;
}

.hosty-product-title{
    font-size:36px;
    margin-bottom:20px;
    color:#1a1a1a;
}

.hosty-product-price{
    font-size:40px;
    font-weight:800;
    color:#0d4f8b;
    margin-bottom:0px;
}
.hosty-product-short{
    font-size:16px;
    line-height:1.9;
    margin-bottom:25px;
}

.hosty-product-cart{
    margin-top:20px;
}

.hosty-product-description{
    background:#fff;
    padding:40px;
    border-radius:20px;
    margin:60px 0;
    box-shadow:0 5px 20px rgba(0,0,0,.05);
}

.hosty-product-description h2{
    margin-bottom:25px;
    color:#222;
    font-size:36px;
}
.hosty-product-description p{
    line-height:2;
    font-size:18px;
    color:#555;
}

.hosty-related-products{
    margin-top:60px;
}

.hosty-related-products h2{
    text-align:center;
    font-size:42px;
    margin-bottom:40px;
    color:#222;
}


@media(max-width:991px){

    .hosty-product-wrapper{
        flex-direction:column;
    }

    .hosty-product-gallery,
    .hosty-product-info{
        width:100%;
    }

}

.hosty-product-price{
    color:#0d4f8b;
    font-size:40px;
    font-weight:700;
    margin-bottom:0px;
}

.single_add_to_cart_button{
    width:320px;
    height:60px;
    font-size:26px;
    font-weight:700;
    border-radius:15px;
}

.hosty-product-wrapper{
    display:flex;
    gap:40px;
    align-items:flex-start;
}

/* =====================================
   SINGLE PRODUCT PAGE
===================================== */
.hosty-product-gallery{
    display:flex;
    gap:20px;
    flex:0 0 55%;
    align-items:flex-start;
}

.hosty-product-thumbs{
    width:90px;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.hosty-thumb{
    width:90px;
    height:60px;
    object-fit:cover;
    cursor:pointer;
    border-radius:12px;
    border:2px solid transparent;
}

.hosty-thumb.active{
    border-color:#0d4f8b;
}

    
.hosty-product-main-image{
    width:100%;
    height:450px;
    max-height:500px;
    overflow:hidden;
    border-radius:20px;
    background:#fff;

    display:flex;
    align-items:center;
    justify-content:center;
}

.hosty-product-main-image img{
    width:100%;
    height:100%;
    object-fit:contain;
}
/* =========================
   Related Products
========================= */

.hosty-related-products{
    margin-top:80px;
}

.hosty-related-products h2{
    text-align:center;
    font-size:42px;
    margin-bottom:40px;
}

.hosty-related-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
}

.related-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    text-align:center;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
    transition:.3s;
}



.related-card img{
    width:100%;
    height:250px;
    object-fit:cover;
    border-radius:20px 20px 0 0;
}

.related-card{
    transition:.3s ease;
}

.related-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(0,0,0,.12);
}


.related-card h3{
    padding:15px;
    font-size:20px;
}

.related-price{
    color:#0d4f8b;
    font-size:22px;
    font-weight:700;
    margin-bottom:15px;
}

.related-card .btn-primary{
    margin-bottom:20px;
}

@media(max-width:991px){

    .hosty-related-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:576px){

    .hosty-related-grid{
        grid-template-columns:1fr;
    }

}
.related-card{
    display:flex;
    flex-direction:column;
}

.related-card .btn-primary{
    margin-top:auto;
}

/* Product Info */

.hosty-product-info{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.hosty-product-title{
    font-size:56px;
    font-weight:700;
    line-height:1.2;
    margin-bottom:20px;
    color:#1f2937;
}

.hosty-product-short{
    font-size:18px;
    line-height:2;
    color:#666;
    margin-bottom:30px;
}

.hosty-product-price{
    font-size:15px;
    font-weight:700;
    color:#0d5aa7;
    margin-bottom:0px;
}

.hosty-product-info form.cart{
    margin-top:10px;
}
.hosty-product-short{
    margin:20px 0;
    font-size:18px;
    line-height:1.9;
    color:#666;
}
.hosty-stock-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    margin:25px 0;
    flex-wrap:wrap;
}

.hosty-stock-text{
    font-size:18px;
    color:#555;
}
.single-product form.cart{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0px;
}

.single-product .quantity{
    display:flex;
    align-items:center;
    justify-content:center;
}

.single-product .stock{
    text-align:center;
    font-size:18px;
    color:#555;
    margin:0;
}

.single-product .single_add_to_cart_button{
    width:100%;
    max-width:350px;
    height:60px;
    border-radius:12px;
}
.stock{
    margin:20px 0;
    font-size:20px;
}

.quantity{
    margin-bottom:25px;
}
/* المخزون والكمية فى سطر واحد */


form.cart{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
}

form.cart .quantity{
    margin:0;
}

form.cart .single_add_to_cart_button{
    flex-basis:100%;
    margin-top:15px;
}

.hosty-cart-row{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
    margin-top:30px;
}

.hosty-stock-line{
    margin:0px 0px -33px 0px;
    font-size:15px;
    font-weight:600;
}

.hosty-cart-row .cart{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:15px;
    width:100%;
}

.hosty-cart-row .quantity{
    margin:0;
}

.hosty-cart-row .single_add_to_cart_button{
    width:100%;
    max-width:350px;
}

.hosty-product-price{
    margin:0px 0px -5px 0px;
}

.hosty-product-price ins{
    text-decoration:none;
}

.hosty-product-price ins .woocommerce-Price-amount{
    font-size:4rem;
    font-weight:800;
    color:#0d5aa7;
}

.hosty-product-price del{
    display:block;
    margin-top:-40px;
    opacity:1;
}

.hosty-product-price del .woocommerce-Price-amount{
    color:#dc2626;
    font-size:1rem;
    font-weight:600;
}

.hosty-product-price del::before{
    content:"قبل الخصم: ";
    color:#dc2626;
    font-size:0.8rem;
    font-weight:700;
}

.hosty-product-main-image{
    overflow:hidden;
    border-radius:20px;
}

.hosty-product-main-image img{
    transition:0.4s ease;
    cursor:zoom-in;
}

.hosty-product-main-image img:hover{
    transform:scale(1.05);
}

/* نسبة الخصم */

.hosty-discount-badge{
    display:inline-block;
    background:#dc2626;
    color:#fff;
    padding:15px 20px;
    border-radius:8px;
    font-size:14px;
    font-weight:700;
    margin-bottom:0px;
}

/* قيمة التوفير */

.hosty-saving{
    color:#16a34a;
    font-size:18px;
    font-weight:700;
    margin-bottom:0px;
}

/* السعر قبل الخصم */

.hosty-product-price del{
    display:block;
    margin-top:0px;
}

.hosty-product-price del .woocommerce-Price-amount{
    color:#dc2626;
    font-size:1.3rem;
}

.hosty-product-price ins{
    text-decoration:none;
}

.hosty-product-price ins .woocommerce-Price-amount{
    color:#0d5aa7;
    font-size:2.8rem;
    font-weight:800;
}

/* ==========================================
   PRODUCT CATEGORY PANELS
========================================== */

.category-products-panel {
    display: none;
    width: 100%;
}

.category-products-panel.active {
    display: block;
}


/* ==========================================
   CATEGORY PRODUCTS GRID
========================================== */

.category-products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}


/* ==========================================
   PRODUCT CARD
========================================== */

.category-products .product-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #eee;
    transition: .3s;
}

.category-products .product-card:hover {
    transform: translateY(-5px);
}


.category-products .product-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}


.category-products .product-content {
    padding: 15px;
}


.category-products .product-content h3 {
    margin: 0 0 10px;
    font-size: 18px;
}


.category-products .product-content h3 a {
    color: #222;
    text-decoration: none;
}


.category-products .product-price {
    margin-bottom: 15px;
    color: #0f4c81;
    font-weight: 700;
}


.category-products .btn-primary {
    display: block;
    text-align: center;
}


/* ==========================================
   EMPTY CATEGORY
========================================== */

.category-empty {
    width: 100%;
    padding: 50px 20px;
    text-align: center;
    font-size: 18px;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 991px) {

    .category-products {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

}


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

@media (max-width: 576px) {

    .category-products {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }


    .category-products .product-image img {
        height: 170px;
    }


    .category-products .product-content {
        padding: 10px;
    }


    .category-products .product-content h3 {
        font-size: 14px;
        line-height: 1.5;
    }


    .category-products .product-price {
        font-size: 13px;
    }


    .category-products .btn-primary {
        font-size: 13px;
        padding: 8px 5px;
    }

}
/* ==========================================
   إصلاح ظهور سعر المنتج في الصفحة الرئيسية
========================================== */

.category-products .product-price {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    direction: ltr !important;
    margin: 10px 0 15px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* منع السعر من الخروج خارج الكارت */
.category-products .product-price .price {
    display: inline-block !important;
    width: auto !important;
    white-space: nowrap !important;
    text-align: center !important;
}

/* شكل السعر */
.category-products .product-price,
.category-products .product-price .amount {
    font-weight: 700 !important;
    font-size: 16px !important;
    color: #0f4c81 !important;
}

@media (max-width: 576px) {

    .category-products .product-price {
        font-size: 13px !important;
        margin: 8px 0 12px !important;
    }

    .category-products .product-price .price {
        font-size: 13px !important;
    }

}


/* ==========================================
   HOSTY STORE
   تنسيق صفحة تأكيد الطلب WooCommerce
   ========================================== */

body.woocommerce-order-received {

    background: #f5f8fc;
}

/* الحاوية الرئيسية */
body.woocommerce-order-received .woocommerce {

    max-width: 1150px;
    margin: 50px auto 80px;
    padding: 0 20px;
    direction: rtl;
}

/* ==========================================
   رسالة نجاح الطلب
   ========================================== */

body.woocommerce-order-received .woocommerce-order {

    font-family: inherit;
}

/* ==========================================
   عنوان نجاح الطلب
   ========================================== */

body.woocommerce-order-received .woocommerce-order > p:first-child {

    background: #ffffff;
    border-right: 5px solid #145a8d;
    border-radius: 12px;
    padding: 22px 28px;
    margin-bottom: 25px;

    color: #333;
    font-size: 18px;
    font-weight: 600;

    box-shadow: 0 4px 18px rgba(0,0,0,0.05);
}

/* ==========================================
   بيانات الطلب العلوية
   ========================================== */

body.woocommerce-order-received ul.order_details {

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;

    margin: 0 0 35px;
    padding: 0;

    list-style: none;
}

body.woocommerce-order-received ul.order_details li {

    background: #ffffff;

    border: 1px solid #e4eaf1;
    border-radius: 12px;

    padding: 20px 18px;

    text-align: center;

    color: #555;

    box-shadow: 0 4px 15px rgba(0,0,0,0.04);

    transition: all .25s ease;
}

body.woocommerce-order-received ul.order_details li:hover {

    transform: translateY(-3px);

    box-shadow: 0 8px 22px rgba(0,0,0,0.08);

    border-color: #145a8d;
}

body.woocommerce-order-received ul.order_details li strong {

    display: block;

    margin-top: 8px;

    color: #145a8d;

    font-size: 17px;
}

/* ==========================================
   عناوين الأقسام
   ========================================== */

body.woocommerce-order-received h2 {

    position: relative;

    margin: 40px 0 20px;

    padding-right: 16px;

    color: #222;

    font-size: 28px;

    font-weight: 700;
}

body.woocommerce-order-received h2::before {

    content: "";

    position: absolute;

    right: 0;

    top: 5px;

    width: 5px;

    height: 28px;

    border-radius: 5px;

    background: #145a8d;
}

/* ==========================================
   تفاصيل الطلب
   ========================================== */

body.woocommerce-order-received .woocommerce-order-details {

    background: #ffffff;

    border: 1px solid #e2e8ef;

    border-radius: 16px;

    padding: 25px;

    margin-bottom: 35px;

    box-shadow: 0 5px 25px rgba(0,0,0,0.05);
}

/* ==========================================
   جدول المنتجات
   ========================================== */

body.woocommerce-order-received .woocommerce-table--order-details {

    width: 100%;

    border-collapse: separate;
    border-spacing: 0;

    overflow: hidden;

    border: 1px solid #e4e9ef;

    border-radius: 12px;

    background: #fff;
}

body.woocommerce-order-received
.woocommerce-table--order-details th {

    background: #145a8d;

    color: #ffffff;

    padding: 16px;

    font-size: 16px;

    font-weight: 700;
}

body.woocommerce-order-received
.woocommerce-table--order-details td {

    padding: 16px;

    border-bottom: 1px solid #edf0f3;

    color: #333;

    font-size: 15px;
}

body.woocommerce-order-received
.woocommerce-table--order-details tr:last-child td {

    border-bottom: none;
}

/* صفوف المنتجات */
body.woocommerce-order-received
.woocommerce-table--order-details tbody tr {

    transition: background .2s ease;
}

body.woocommerce-order-received
.woocommerce-table--order-details tbody tr:hover {

    background: #f7fafc;
}

/* اسم المنتج */
body.woocommerce-order-received
.woocommerce-table--order-details .product-name a {

    color: #145a8d;

    font-weight: 700;

    text-decoration: none;
}

body.woocommerce-order-received
.woocommerce-table--order-details .product-name a:hover {

    color: #0d4268;
}

/* ==========================================
   الإجمالي
   ========================================== */

body.woocommerce-order-received
.woocommerce-table--order-details tfoot th {

    text-align: right;

    background: #f7f9fb;

    color: #333;
}

body.woocommerce-order-received
.woocommerce-table--order-details tfoot td {

    background: #f7f9fb;

    color: #145a8d;

    font-size: 17px;

    font-weight: 700;
}

/* ==========================================
   عنوان الفاتورة / بيانات العميل
   ========================================== */

body.woocommerce-order-received .woocommerce-customer-details {

    background: #ffffff;

    border: 1px solid #e2e8ef;

    border-radius: 16px;

    padding: 25px;

    margin-bottom: 35px;

    box-shadow: 0 5px 25px rgba(0,0,0,0.05);
}

body.woocommerce-order-received
.woocommerce-customer-details address {

    background: #f8fafc;

    border: 1px solid #e5ebf1;

    border-radius: 12px;

    padding: 22px;

    line-height: 2;

    color: #444;

    font-style: normal;

    text-align: right;
}

/* ==========================================
   رقم الهاتف والبريد
   ========================================== */

body.woocommerce-order-received
.woocommerce-customer-details--phone,
body.woocommerce-order-received
.woocommerce-customer-details--email {

    color: #145a8d;

    font-weight: 600;
}

/* ==========================================
   الموبايل
   ========================================== */

@media (max-width: 768px) {

    body.woocommerce-order-received .woocommerce {

        margin-top: 25px;

        padding: 0 12px;
    }

    body.woocommerce-order-received ul.order_details {

        grid-template-columns: 1fr 1fr;

        gap: 10px;
    }

    body.woocommerce-order-received ul.order_details li {

        padding: 15px 10px;

        font-size: 13px;
    }

    body.woocommerce-order-received ul.order_details li strong {

        font-size: 14px;
    }

    body.woocommerce-order-received h2 {

        font-size: 23px;
    }

    body.woocommerce-order-received
    .woocommerce-order-details,
    body.woocommerce-order-received
    .woocommerce-customer-details {

        padding: 15px;

        border-radius: 12px;
    }

    body.woocommerce-order-received
    .woocommerce-table--order-details {

        font-size: 13px;
    }

    body.woocommerce-order-received
    .woocommerce-table--order-details th,
    body.woocommerce-order-received
    .woocommerce-table--order-details td {

        padding: 10px 7px;
    }
}

/* ==========================================
   الموبايل الصغير
   ========================================== */

@media (max-width: 480px) {

    body.woocommerce-order-received ul.order_details {

        grid-template-columns: 1fr;
    }

    body.woocommerce-order-received h2 {

        font-size: 21px;
    }
}

/* ==========================================
   صفحة تأكيد الطلب
   تخطيط تفاصيل الطلب + الكروت الجانبية
   ========================================== */

@media (min-width: 900px) {

    /* جعل منطقة الطلب الرئيسية Grid */
    body.woocommerce-order-received
    .woocommerce-order {

        display: grid;

        grid-template-columns: 1fr 320px;

        grid-template-areas:
            "message message"
            "details info"
            "customer customer";

        gap: 25px;

        align-items: start;
    }


    /* رسالة نجاح الطلب */
    body.woocommerce-order-received
    .woocommerce-order > p:first-child {

        grid-area: message;

        width: 100%;
    }


    /* ==========================================
       الكروت الجانبية
       ========================================== */

    body.woocommerce-order-received
    ul.order_details {

        grid-area: info;

        display: flex;

        flex-direction: column;

        gap: 15px;

        margin: 0;

        padding: 0;
    }


    body.woocommerce-order-received
    ul.order_details li {

        width: 100%;

        box-sizing: border-box;

        min-height: 90px;

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        margin: 0;
    }


    /* ==========================================
       تفاصيل الطلب
       ========================================== */

    body.woocommerce-order-received
    .woocommerce-order-details {

        grid-area: details;

        margin: 0;

        width: 100%;

        box-sizing: border-box;
    }


    /* ==========================================
       بيانات العميل
       ========================================== */

    body.woocommerce-order-received
    .woocommerce-customer-details {

        grid-area: customer;

        width: 100%;

        box-sizing: border-box;
    }

}


/* ==========================================
   تحسين الكروت الجانبية
   ========================================== */

@media (min-width: 900px) {

    body.woocommerce-order-received
    ul.order_details li strong {

        margin-top: 6px;

        font-size: 18px;
    }

}


/* ==========================================
   الشاشات المتوسطة
   ========================================== */

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

    body.woocommerce-order-received
    ul.order_details {

        display: grid;

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

        gap: 15px;
    }

}


/* ==========================================
   الموبايل
   ========================================== */

@media (max-width: 768px) {

    body.woocommerce-order-received
    .woocommerce-order {

        display: flex;

        flex-direction: column;
    }

    body.woocommerce-order-received
    ul.order_details {

        width: 100%;

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 12px;

        margin-bottom: 25px;
    }

    body.woocommerce-order-received
    ul.order_details li {

        width: 100%;

        margin: 0;
    }

    body.woocommerce-order-received
    .woocommerce-order-details {

        width: 100%;

        margin-bottom: 25px;
    }

    body.woocommerce-order-received
    .woocommerce-customer-details {

        width: 100%;
    }

}


/* ==========================================
   الموبايل الصغير
   ========================================== */

@media (max-width: 480px) {

    body.woocommerce-order-received
    ul.order_details {

        grid-template-columns: 1fr;
    }

}

/* ==========================================
   HOSTY STORE
   اللمسات النهائية لصفحة تأكيد الطلب
   ========================================== */


/* ==========================================
   1 - أيقونات كروت معلومات الطلب
   ========================================== */

@media (min-width: 900px) {

    body.woocommerce-order-received
    ul.order_details li {
        position: relative;
        overflow: hidden;
    }

    /* رقم الطلب */
    body.woocommerce-order-received
    ul.order_details li:nth-child(1)::before {
        content: "✓";
        position: absolute;
        top: 12px;
        right: 15px;

        width: 28px;
        height: 28px;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 50%;

        background: #eaf4fb;
        color: #145a8d;

        font-size: 15px;
        font-weight: 700;
    }

    /* التاريخ */
    body.woocommerce-order-received
    ul.order_details li:nth-child(2)::before {
        content: "◷";
        position: absolute;
        top: 12px;
        right: 15px;

        width: 28px;
        height: 28px;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 50%;

        background: #eaf4fb;
        color: #145a8d;

        font-size: 17px;
        font-weight: 700;
    }

    /* البريد الإلكتروني */
    body.woocommerce-order-received
    ul.order_details li:nth-child(3)::before {
        content: "✉";
        position: absolute;
        top: 12px;
        right: 15px;

        width: 28px;
        height: 28px;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 50%;

        background: #eaf4fb;
        color: #145a8d;

        font-size: 14px;
    }

    /* الإجمالي */
    body.woocommerce-order-received
    ul.order_details li:nth-child(4)::before {
        content: "$";
        position: absolute;
        top: 12px;
        right: 15px;

        width: 28px;
        height: 28px;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 50%;

        background: #eaf4fb;
        color: #145a8d;

        font-size: 15px;
        font-weight: 700;
    }

    /* وسيلة الدفع */
    body.woocommerce-order-received
    ul.order_details li:nth-child(5)::before {
        content: "✓";
        position: absolute;
        top: 12px;
        right: 15px;

        width: 28px;
        height: 28px;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 50%;

        background: #eaf4fb;
        color: #145a8d;

        font-size: 15px;
        font-weight: 700;
    }

}


/* ==========================================
   2 - تحسين عنوان الكارت
   ========================================== */

body.woocommerce-order-received
ul.order_details li strong {

    position: relative;

    z-index: 2;

    margin-top: 8px;

    color: #145a8d;

    font-size: 18px;

    line-height: 1.5;
}


/* ==========================================
   3 - تحسين جدول المنتجات
   ========================================== */

body.woocommerce-order-received
.woocommerce-table--order-details .product-name {

    font-weight: 700;
}

body.woocommerce-order-received
.woocommerce-table--order-details .product-total {

    font-weight: 600;

    color: #145a8d;
}


/* زيادة وضوح السعر */
body.woocommerce-order-received
.woocommerce-table--order-details .amount {

    font-weight: 700;
}


/* ==========================================
   4 - تحسين صفوف الإجمالي
   ========================================== */

body.woocommerce-order-received
.woocommerce-table--order-details tfoot tr {

    transition: all .2s ease;
}

body.woocommerce-order-received
.woocommerce-table--order-details tfoot tr:last-child th,
body.woocommerce-order-received
.woocommerce-table--order-details tfoot tr:last-child td {

    background: #eaf4fb;

    color: #145a8d;

    font-size: 18px;

    font-weight: 800;
}


/* ==========================================
   5 - تحسين عنوان تفاصيل الطلب
   ========================================== */

body.woocommerce-order-received
.woocommerce-order-details h2 {

    margin-top: 0;

    margin-bottom: 25px;
}


/* ==========================================
   6 - تحسين بطاقة بيانات العميل
   ========================================== */

body.woocommerce-order-received
.woocommerce-customer-details {

    position: relative;
}

body.woocommerce-order-received
.woocommerce-customer-details address {

    font-size: 16px;

    line-height: 2.1;
}


/* ==========================================
   7 - تحسين النصوص داخل عنوان الفاتورة
   ========================================== */

body.woocommerce-order-received
.woocommerce-customer-details address p {

    margin-bottom: 5px;
}


/* ==========================================
   8 - تحسين الروابط
   ========================================== */

body.woocommerce-order-received a {

    transition: all .2s ease;
}

body.woocommerce-order-received
.woocommerce-table--order-details a:hover {

    color: #0d4268;
}


/* ==========================================
   9 - زر العودة إلى المتجر
   إذا كان موجودًا في الصفحة
   ========================================== */

body.woocommerce-order-received
.woocommerce-order a.button,
body.woocommerce-order-received
.woocommerce-order .button {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 48px;

    padding: 0 28px;

    border: none;

    border-radius: 10px;

    background: #145a8d;

    color: #ffffff !important;

    font-size: 16px;

    font-weight: 700;

    text-decoration: none;

    transition: all .25s ease;
}

body.woocommerce-order-received
.woocommerce-order a.button:hover,
body.woocommerce-order-received
.woocommerce-order .button:hover {

    background: #0d4268;

    transform: translateY(-2px);

    box-shadow: 0 7px 18px rgba(20,90,141,.20);
}


/* ==========================================
   10 - تحسين الموبايل
   ========================================== */

@media (max-width: 768px) {

    body.woocommerce-order-received
    ul.order_details li {

        position: relative;

        overflow: hidden;
    }

    body.woocommerce-order-received
    ul.order_details li strong {

        font-size: 16px;
    }

    body.woocommerce-order-received
    .woocommerce-table--order-details {

        border-radius: 10px;
    }

    body.woocommerce-order-received
    .woocommerce-table--order-details th {

        font-size: 14px;
    }

    body.woocommerce-order-received
    .woocommerce-table--order-details td {

        font-size: 14px;
    }

}


/* ==========================================
   11 - حركة بسيطة عند ظهور الكروت
   ========================================== */

@media (min-width: 900px) {

    body.woocommerce-order-received
    ul.order_details li {

        animation: hostyCardIn .45s ease both;
    }

    body.woocommerce-order-received
    ul.order_details li:nth-child(1) {
        animation-delay: .05s;
    }

    body.woocommerce-order-received
    ul.order_details li:nth-child(2) {
        animation-delay: .10s;
    }

    body.woocommerce-order-received
    ul.order_details li:nth-child(3) {
        animation-delay: .15s;
    }

    body.woocommerce-order-received
    ul.order_details li:nth-child(4) {
        animation-delay: .20s;
    }

    body.woocommerce-order-received
    ul.order_details li:nth-child(5) {
        animation-delay: .25s;
    }

}

@keyframes hostyCardIn {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

/* إعادة إظهار عنوان عمود الإجمالي في جدول تفاصيل الطلب */

body.woocommerce-order-received
.woocommerce-table--order-details thead th.product-total {
    display: table-cell !important;
    visibility: visible !important;
    width: 35% !important;
    text-align: center !important;
}

/* التأكد من ظهور عنوان المنتج */
body.woocommerce-order-received
.woocommerce-table--order-details thead th.product-name {
    display: table-cell !important;
    visibility: visible !important;
    width: 65% !important;
}

/* تنسيق عناوين الأعمدة */
body.woocommerce-order-received
.woocommerce-table--order-details thead th {
    display: table-cell !important;
    visibility: visible !important;
    background: #145a8d !important;
    color: #ffffff !important;
    padding: 16px !important;
    font-weight: 700 !important;
    text-align: center !important;
}

/* ==========================================
   HOSTY STORE - تحسين صفحة المنتج
   Single Product Modern Layout
   ========================================== */

.single-product {
    background: #f5f8fc;
}

/* المنطقة الرئيسية */
.single-product .hosty-product-wrapper {
    width: min(1200px, 94%);
    margin: 40px auto 70px;
    padding: 35px;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.07);

    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 45px;

    direction: rtl;
}

/* ==========================================
   معرض الصور
   ========================================== */

.single-product .hosty-product-gallery {
    flex: 0 0 55%;
    width: 55%;

    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 15px;

    direction: ltr;
}

/* الصورة الرئيسية */
.single-product .hosty-product-main-image {
    flex: 1;
    width: auto;
    height: 550px;
    max-height: 550px;

    background: #f8fafc;
    border: 1px solid #e5eaf0;
    border-radius: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

/* صورة المنتج */
.single-product .hosty-product-main-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;

    transition: transform .4s ease;
}

/* تأثير التكبير */
.single-product .hosty-product-main-image:hover img {
    transform: scale(1.04);
}

/* ==========================================
   الصور المصغرة
   ========================================== */

.single-product .hosty-product-thumbs {
    width: 82px;
    flex: 0 0 82px;

    display: flex;
    flex-direction: column;
    gap: 12px;
}

.single-product .hosty-thumb {
    width: 82px;
    height: 72px;

    object-fit: cover;

    border-radius: 12px;
    border: 2px solid #e2e8f0;

    background: #fff;

    cursor: pointer;

    transition: .25s ease;
}

.single-product .hosty-thumb:hover {
    border-color: #0d5aa7;
    transform: translateY(-2px);
}

.single-product .hosty-thumb.active {
    border-color: #0d5aa7;
    box-shadow: 0 0 0 2px rgba(13, 90, 167, .12);
}

/* ==========================================
   معلومات المنتج
   ========================================== */

.single-product .hosty-product-info {
    flex: 1;
    width: auto;

    padding: 20px 10px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;

    direction: rtl;
}

/* اسم المنتج */
.single-product .hosty-product-title {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.3;

    margin: 0 0 18px;

    color: #172033;
}

/* خط صغير أسفل العنوان */
.single-product .hosty-product-title::after {
    content: "";
    display: block;

    width: 65px;
    height: 2px;

    margin-top: 10px;

    background: #0d5aa7;
    border-radius: 10px;
}

/* الوصف المختصر */
.single-product .hosty-product-short {
    font-size: 18px;
    line-height: 1.9;

    color: #64748b;

    margin: 10px 0 25px;
}

/* ==========================================
   السعر
   ========================================== */

.single-product .hosty-product-price {
    margin: 0 0 20px;

    color: #0d5aa7;

    font-size: 25px;
    font-weight: 800;
    line-height: 1.3;
}

.single-product .hosty-product-price ins {
    text-decoration: none;
}

.single-product .hosty-product-price ins .woocommerce-Price-amount {
    font-size: 36px;
    font-weight: 800;
    color: #0d5aa7;
}

/* السعر القديم */
.single-product .hosty-product-price del {
    display: block;
    margin: 5px 0 8px;

    opacity: 1;
}

.single-product .hosty-product-price del .woocommerce-Price-amount {
    font-size: 17px;
    font-weight: 600;
    color: #dc2626;
}

/* ==========================================
   المخزون
   ========================================== */

.single-product .hosty-stock-row {
    justify-content: flex-start;

    margin: 10px 0 20px;

    padding: 12px 16px;

    background: #f8fafc;
    border: 1px solid #e5eaf0;
    border-radius: 12px;
}

.single-product .hosty-stock-text {
    font-size: 16px;
    font-weight: 600;
    color: #475569;
}

/* ==========================================
   منطقة الشراء
   ========================================== */

.single-product .hosty-cart-row {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 15px;

    margin-top: 10px;
}

/* الكمية */
.single-product .hosty-cart-row .quantity {
    margin: 0;
}

/* فورم السلة */
.single-product .hosty-cart-row .cart {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 15px;
}

/* حقل الكمية */
.single-product .quantity input.qty {
    width: 100px;
    height: 52px;

    border: 1px solid #d9e1ea;
    border-radius: 10px;

    font-size: 20px;
    font-weight: 700;

    text-align: center;
}

/* زر إضافة إلى السلة */
.single-product .single_add_to_cart_button {
    width: 100%;
    max-width: none;

    height: 58px;

    margin: 0 !important;

    border: none;
    border-radius: 12px;

    background: #0d5aa7;
    color: #fff;

    font-size: 20px;
    font-weight: 800;

    cursor: pointer;

    transition: .3s ease;
}

.single-product .single_add_to_cart_button:hover {
    background: #f4a100;

    transform: translateY(-3px);

    box-shadow: 0 10px 25px rgba(13, 90, 167, .20);
}

/* ==========================================
   شارة الخصم
   ========================================== */

.single-product .hosty-discount-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;

    margin-bottom: 15px;
    padding: 8px 15px;

    background: #dc2626;
    color: #fff;

    border-radius: 8px;

    font-size: 14px;
    font-weight: 700;
}

/* قيمة التوفير */
.single-product .hosty-saving {
    margin: 0 0 15px;

    color: #16a34a;

    font-size: 16px;
    font-weight: 700;
}

/* ==========================================
   وصف المنتج أسفل القسم الرئيسي
   ========================================== */

.single-product .hosty-product-description {
    width: min(1200px, 94%);

    margin: 0 auto 60px;
    padding: 40px;

    background: #fff;

    border: 1px solid #e5eaf0;
    border-radius: 22px;

    box-shadow: 0 8px 30px rgba(0, 0, 0, .05);

    direction: rtl;
}

.single-product .hosty-product-description h2 {
    position: relative;

    margin: 0 0 30px;
    padding-right: 18px;

    font-size: 34px;
    font-weight: 800;

    color: #172033;
}

.single-product .hosty-product-description h2::before {
    content: "";

    position: absolute;
    right: 0;
    top: 5px;

    width: 5px;
    height: 35px;

    background: #0d5aa7;

    border-radius: 10px;
}

.single-product .hosty-product-description p {
    font-size: 18px;
    line-height: 2;

    color: #555;
}

/* ==========================================
   المنتجات المرتبطة
   ========================================== */

.single-product .hosty-related-products {
    width: min(1200px, 94%);

    margin: 70px auto;

    direction: rtl;
}

.single-product .hosty-related-products h2 {
    font-size: 38px;
    font-weight: 800;

    color: #172033;

    margin-bottom: 35px;
}

/* ==========================================
   Tablet
   ========================================== */

@media (max-width: 991px) {

    .single-product .hosty-product-wrapper {
        flex-direction: column;

        width: 94%;
        padding: 25px;

        gap: 30px;
    }

    .single-product .hosty-product-gallery {
        width: 100%;
        flex: none;
    }

    .single-product .hosty-product-info {
        width: 100%;
        padding: 10px;
    }

    .single-product .hosty-product-title {
        font-size: 38px;
    }

    .single-product .hosty-product-main-image {
        height: 450px;
    }

}

/* ==========================================
   Mobile
   ========================================== */

@media (max-width: 600px) {

    .single-product .hosty-product-wrapper {
        width: 94%;
        margin: 20px auto 40px;

        padding: 15px;

        border-radius: 18px;
    }

    .single-product .hosty-product-gallery {
        flex-direction: column-reverse;

        gap: 12px;
    }

    .single-product .hosty-product-main-image {
        width: 100%;
        height: 350px;

        border-radius: 15px;
    }

.single-product .hosty-product-thumbs {
    width: 80px;
    display: flex;
    flex-direction: column !important;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-y: auto;
    overflow-x: hidden;
}

    .single-product .hosty-thumb {
        flex: 0 0 70px;

        width: 70px;
        height: 65px;
    }

    .single-product .hosty-product-title {
        font-size: 30px;

        line-height: 1.4;
    }

    .single-product .hosty-product-short {
        font-size: 16px;
    }

    .single-product .hosty-product-price ins .woocommerce-Price-amount {
        font-size: 30px;
    }

    .single-product .single_add_to_cart_button {
        height: 55px;

        font-size: 18px;
    }

    .single-product .hosty-product-description {
        width: 94%;

        padding: 25px 20px;

        border-radius: 18px;
    }

    .single-product .hosty-product-description h2 {
        font-size: 28px;
    }

}

/* ==========================================
   تثبيت الصور المصغرة على اليمين
   ========================================== */

.single-product .hosty-product-gallery {
    direction: rtl !important;
    flex-direction: row !important;
}

/* الصور المصغرة على اليمين */
.single-product .hosty-product-thumbs {
    order: 1;
}

/* الصورة الرئيسية على اليسار */
.single-product .hosty-product-main-image {
    order: 2;
}

/* ==========================================
   ضبط منطقة معلومات المنتج
   ========================================== */

.single-product .hosty-product-info {
    direction: rtl;
    text-align: right;
}

/* زر إضافة للسلة */
.single-product .hosty-product-info .hosty-cart-row,
.single-product .hosty-product-info form.cart {
    width: 100%;
    max-width: 100%;
}

.single-product .hosty-product-info .single_add_to_cart_button {
    width: 50% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* الكمية والمخزون */
.single-product .hosty-stock-row {
    justify-content: flex-start;
}

/* ==========================================
   تحسين توزيع القسم الرئيسي
   ========================================== */

@media (min-width: 992px) {

    .single-product .hosty-product-gallery {
        flex: 0 0 58%;
        width: 58%;
    }

    .single-product .hosty-product-info {
        flex: 0 0 calc(42% - 45px);
        width: calc(42% - 45px);
    }

}

/* =========================================
   تحسين تنسيق معلومات المنتج
   ========================================= */

/* منطقة معلومات المنتج */
.single-product .hosty-product-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    text-align: right;
    direction: rtl;
}

/* عنوان المنتج */
.single-product .hosty-product-info h1 {
    margin: 5px 0 5px;
    line-height: 1.3;
}

/* الخط أسفل العنوان */
.single-product .hosty-product-info h1::after {
    content: "";
    display: block;
    width: 65px;
    height: 2px;
    margin-top: 10px;
    margin-right: 0;
    border-radius: 4px;
}

/* الوصف المختصر */
.single-product .hosty-product-info .short-description {
    margin: 18px 0 22px;
    line-height: 1.8;
    font-size: 16px;
}

/* عنوان مواصفات المنتج */
.single-product .hosty-product-info h2 {
    margin: 10px 0 8px;
}

/* جدول المواصفات */
.single-product .hosty-product-info table {
    width: 100%;
    margin: 0 0 22px;
    border-collapse: collapse;
}

.single-product .hosty-product-info table td {
    padding: 9px 6px;
    border-bottom: 1px solid #eeeeee;
}

.single-product .hosty-product-info table td:first-child {
    font-weight: 700;
}

/* =========================================
   السعر والخصم
   ========================================= */

.single-product .hosty-product-info .price {
    margin: 12px 0 18px;
    text-align: right;
}

.single-product .hosty-product-info .price del {
    display: block;
    margin-bottom: 8px;
}

.single-product .hosty-product-info .price ins {
    display: block;
    text-decoration: none;
    font-size: 34px;
    font-weight: 800;
}

/* =========================================
   المخزون والكمية والزر
   ========================================= */

.single-product .hosty-product-info form.cart {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 8px;
}

/* كمية المنتج */
.single-product .hosty-product-info form.cart .quantity {
    flex: 0 0 auto;
    margin: 0 !important;
}

.single-product .hosty-product-info form.cart .quantity input {
    height: 52px;
    min-width: 75px;
    text-align: center;
    border-radius: 10px;
}

/* زر إضافة إلى السلة */
.single-product .hosty-product-info form.cart .single_add_to_cart_button {
    flex: 1;
    height: 52px;
    margin: 0 !important;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 700;
}

/* =========================================
   المخزون
   ========================================= */

.single-product .hosty-product-info .stock {
    margin: 8px 0 10px;
    font-size: 15px;
    text-align: right;
}

/* =========================================
   الشاشات الصغيرة
   ========================================= */

@media (max-width: 767px) {

    .single-product .hosty-product-info {
        padding: 15px;
    }

    .single-product .hosty-product-info h1 {
        font-size: 30px;
    }

    .single-product .hosty-product-info .price ins {
        font-size: 30px;
    }

    .single-product .hosty-product-info form.cart {
        flex-direction: column;
        align-items: stretch;
    }

    .single-product .hosty-product-info form.cart .quantity {
        width: 100%;
    }

    .single-product .hosty-product-info form.cart .quantity input {
        width: 100%;
    }

    .single-product .hosty-product-info form.cart .single_add_to_cart_button {
        width: 100%;
    }
}

/* =========================================
   ترتيب المخزون والكمية وزر السلة
   في صف واحد
   ========================================= */

.single-product .hosty-product-info form.cart {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 70% !important;
    margin-top: 40px !important;
}

/* المخزون */
.single-product .hosty-product-info form.cart .stock,
.single-product .hosty-product-info .stock {
    margin: 0 !important;
    white-space: nowrap;
    font-size: 15px;
}

/* صندوق الكمية */
.single-product .hosty-product-info form.cart .quantity {
    flex: 0 0 100px !important;
    width: 100px !important;
    margin: 0 !important;
}

/* حقل الكمية */
.single-product .hosty-product-info form.cart .quantity input {
    width: 100% !important;
    height: 52px !important;
    box-sizing: border-box;
    text-align: center;
    border-radius: 10px;
}

/* زر إضافة إلى السلة */
.single-product .hosty-product-info form.cart .single_add_to_cart_button {
    flex: 1 1 auto !important;
    width: auto !important;
    height: 52px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    white-space: nowrap;
}

/* منع الزر من النزول لسطر جديد */
.single-product .hosty-product-info form.cart {
    flex-wrap: nowrap !important;
}

/* =========================================================
   أحدث الأعمال - تحسين الموبايل فقط
   لا يؤثر على الكمبيوتر
========================================================= */

@media (max-width: 768px) {

    /* جعل قسم أحدث الأعمال يستغل عرض الهاتف */
    .projects-grid {
        width: 100vw !important;
        max-width: 100vw !important;

        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;

        padding-left: 8px !important;
        padding-right: 8px !important;

        box-sizing: border-box !important;

        /* كارتين دائمًا */
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 12px !important;
    }


    /* تكبير الكارت نفسه */
    .projects-grid .project-card {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;

        box-sizing: border-box !important;
    }


    /* تكبير صورة العمل داخل الكارت */
    .projects-grid .project-card img {
        width: 100% !important;
        height: 250px !important;

        object-fit: cover !important;
    }


    /* ضبط محتوى الكارت */
    .projects-grid .project-content {
        padding: 16px 12px !important;
        text-align: center !important;
    }


    /* عنوان العمل */
    .projects-grid .project-content h3 {
        font-size: 20px !important;
        line-height: 1.5 !important;
        margin-bottom: 10px !important;
    }


    /* الوصف */
    .projects-grid .project-content p {
        font-size: 15px !important;
        line-height: 1.8 !important;
        margin-bottom: 12px !important;
    }


    /* زر عرض التفاصيل */
    .projects-grid .project-content a {
        width: 90% !important;
        margin: 10px auto 5px !important;
        padding: 11px 10px !important;
    }

}

/* =========================================================
   أحدث المنتجات - تحسين الهاتف فقط
========================================================= */

@media (max-width: 768px) {

    /* جعل أحدث المنتجات يستغل عرض الهاتف بالكامل */
    .products-grid {
        width: 100vw !important;
        max-width: 100vw !important;

        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;

        padding-left: 8px !important;
        padding-right: 8px !important;

        box-sizing: border-box !important;

        /* كارتين في الصف */
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 12px !important;
    }

    /* الكارت يستغل كامل المساحة المتاحة */
    .products-grid .product-card {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

}

/* =========================================================
   PRODUCTS BY CATEGORY
   MOBILE FULL WIDTH
========================================================= */

@media (max-width: 768px) {

    /* =========================================
       جعل القسم بالكامل بعرض شاشة الهاتف
    ========================================= */

    .shop-categories-products {
        width: 100% !important;
        max-width: none !important;
        overflow: visible !important;
    }

    .shop-categories-products > .container {
        width: 100vw !important;
        max-width: 100vw !important;

        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;

        padding-left: 8px !important;
        padding-right: 8px !important;

        box-sizing: border-box !important;
    }


    /* =========================================
       القائمة + المنتجات
    ========================================= */

    .shop-layout {
        display: grid !important;

        /* القائمة ثابتة + المنتجات تأخذ كل الباقي */
        grid-template-columns: 105px minmax(0, 1fr) !important;

        gap: 10px !important;

        width: 100% !important;
        max-width: none !important;

        margin: 30px 0 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;

        /* يجعل القائمة فعليًا في أقصى اليسار */
        direction: ltr !important;

        align-items: start !important;
    }


    /* =========================================
       القائمة الجانبية
    ========================================= */

    .categories-sidebar {
        grid-column: 1 !important;

        width: 105px !important;
        min-width: 105px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 10px !important;

        direction: rtl !important;

        box-sizing: border-box !important;
    }

    .categories-sidebar .category-tab {
        width: 105px !important;
        min-width: 105px !important;

        min-height: 58px !important;

        padding: 9px 5px !important;
        margin: 0 !important;

        font-size: 15px !important;
        line-height: 1.4 !important;

        text-align: center !important;

        box-sizing: border-box !important;
    }


    /* =========================================
       منطقة المنتجات
    ========================================= */

    .products-area {
        grid-column: 2 !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        direction: rtl !important;

        box-sizing: border-box !important;
    }


    /* =========================================
       المنتجات تستغل المساحة بالكامل
    ========================================= */

    .category-products {
        width: 100% !important;
        max-width: none !important;

        display: grid !important;

        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 12px !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }


    /* =========================================
       كارت المنتج
    ========================================= */

    .category-products .product-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;

        box-sizing: border-box !important;

        border-radius: 16px !important;
    }


    /* =========================================
       صورة المنتج - أكبر
    ========================================= */

    .category-products .product-image {
        width: 100% !important;
        height: 220px !important;

        overflow: hidden !important;
    }

    .category-products .product-image img {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;

        display: block !important;
    }


    /* =========================================
       عنوان المنتج
    ========================================= */

    .category-products h3 {
        font-size: 13px !important;

        line-height: 1.45 !important;

        padding: 12px 7px !important;
        margin: 0 !important;

        text-align: center !important;

        min-height: 58px !important;

        box-sizing: border-box !important;
    }


    /* =========================================
       السعر
    ========================================= */

    .category-products .price {
        display: block !important;

        padding: 5px 5px 12px !important;

        font-size: 18px !important;

        text-align: center !important;
    }

}


/* =====================================================
   HOSTY HEADER SEARCH
===================================================== */

.hosty-header-search{
    position:relative;
    display:flex;
    align-items:center;
    flex:0 0 auto;
}

.hosty-search-toggle{
    width:42px;
    height:42px;
    border:2px solid #e5e7eb;
    border-radius:25%;
    background:#fff;
    color:var(--primary-color);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:20px;
    transition:.25s ease;
    margin:5px;
}

.hosty-search-toggle:hover{
    background:var(--primary-color);
    color:#fff;
}

.hosty-search-form{
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    width:300px;
    display:flex;
    align-items:center;
    gap:0;
    padding:6px;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:14px;
    box-shadow:0 12px 30px rgba(0,0,0,.14);
    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);
    transition:.2s ease;
    z-index:100001;
}

.hosty-header-search.search-open .hosty-search-form{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.hosty-search-form input[type="search"]{
    flex:1;
    min-width:0;
    height:40px;
    border:0 !important;
    outline:0 !important;
    background:transparent;
    padding:0 12px;
    font-family:inherit;
    font-size:15px;
    color:#222;
    box-shadow:none !important;
}

.hosty-search-form > button{
    width:40px;
    height:40px;
    flex:0 0 40px;
    border:0;
    border-radius:10px;
    background:var(--primary-color);
    color:#fff;
    cursor:pointer;
}

.hosty-search-form > button:hover{
    background:#f4a100;
}

.screen-reader-text{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
}


/* =====================================================
   HOSTY BREADCRUMBS
===================================================== */

.hosty-breadcrumbs{
    width:100%;
    background:#f7f9fc;
    border-bottom:1px solid #e8edf2;
}

.hosty-breadcrumbs .container{
    padding-top:60px;
    padding-bottom:12px;
}

.hosty-breadcrumbs ol{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    margin:0;
    padding:0;
    list-style:none;
    font-size:14px;
}

.hosty-breadcrumbs li{
    display:flex;
    align-items:center;
    gap:6px;
}

.hosty-breadcrumbs a{
    color:#0f4c81;
    text-decoration:none;
    font-weight:600;
}

.hosty-breadcrumbs a:hover{
    color:#f4a100;
}

.hosty-breadcrumbs li:last-child span{
    color:#667085;
    font-weight:600;
}

.hosty-breadcrumb-separator{
    color:#f4a100 !important;
    font-size:20px;
    line-height:1;
}

/* =====================================================
   HOSTY 404
===================================================== */

.hosty-404-page{
    min-height:60vh;
    display:flex;
    align-items:center;
    padding:70px 0 90px;
    background:#f7f9fc;
}

.hosty-404-card{
    max-width:850px;
    margin:0 auto;
    padding:55px 35px;
    text-align:center;
    background:#fff;
    border:1px solid #e6ebf0;
    border-radius:24px;
    box-shadow:0 15px 45px rgba(15,76,129,.08);
}

.hosty-404-number{
    color:#0f4c81;
    font-size:clamp(70px,12vw,150px);
    font-weight:800;
    line-height:.9;
    letter-spacing:-4px;
    margin-bottom:15px;
}

.hosty-404-kicker{
    display:inline-block;
    color:#f4a100;
    font-weight:800;
    font-size:16px;
    margin-bottom:10px;
}

.hosty-404-card h1{
    margin:0 0 15px;
    color:#172033;
    font-size:clamp(28px,4vw,44px);
}

.hosty-404-card > p{
    max-width:650px;
    margin:0 auto 28px;
    color:#64748b;
    line-height:1.9;
    font-size:17px;
}

.hosty-404-actions{
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:35px;
}

.hosty-404-actions a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:160px;
    min-height:48px;
    padding:10px 24px;
    border-radius:12px;
    text-decoration:none;
    font-weight:700;
    transition:.25s ease;
}

.hosty-404-primary{
    background:#0f4c81;
    color:#fff !important;
}

.hosty-404-primary:hover{
    background:#f4a100;
}

.hosty-404-secondary{
    background:#fff;
    color:#0f4c81 !important;
    border:1px solid #d9e1e8;
}

.hosty-404-secondary:hover{
    border-color:#0f4c81;
}

.hosty-404-search{
    max-width:620px;
    margin:0 auto;
    text-align:right;
}

.hosty-404-search > label{
    display:block;
    margin-bottom:8px;
    color:#172033;
    font-weight:700;
}

.hosty-404-search > div{
    display:flex;
    gap:8px;
}

.hosty-404-search input[type="search"]{
    flex:1;
    min-width:0;
    height:48px;
    padding:0 14px;
    border:1px solid #d9e1e8;
    border-radius:12px;
    outline:none;
    background:#fff;
    font:inherit;
}

.hosty-404-search input[type="search"]:focus{
    border-color:#0f4c81;
    box-shadow:0 0 0 3px rgba(15,76,129,.08);
}

.hosty-404-search button{
    min-width:100px;
    border:0;
    border-radius:12px;
    background:#0f4c81;
    color:#fff;
    font:inherit;
    font-weight:700;
    cursor:pointer;
}

.hosty-404-search button:hover{
    background:#f4a100;
}

/* Generic fallback page */
.hosty-index-page{
    padding:55px 0 80px;
    background:#f7f9fc;
    min-height:60vh;
}

.hosty-index-header{
    margin-bottom:30px;
}

.hosty-index-header h1{
    color:#172033;
    font-size:36px;
    margin:0 0 10px;
}

.hosty-index-description{
    color:#64748b;
    line-height:1.9;
}

.hosty-index-list{
    display:grid;
    gap:18px;
}

.hosty-index-item{
    background:#fff;
    border:1px solid #e6ebf0;
    border-radius:16px;
    padding:22px;
}

.hosty-index-item h2{
    margin:0 0 10px;
    font-size:22px;
}

.hosty-index-item h2 a{
    color:#0f4c81;
    text-decoration:none;
}

.hosty-index-excerpt{
    color:#64748b;
    line-height:1.8;
}

@media(max-width:576px){

    .hosty-breadcrumbs ol{
        font-size:12px;
    }

    .hosty-404-page{
        padding:45px 0 60px;
    }

    .hosty-404-card{
        padding:40px 18px;
        border-radius:18px;
    }

    .hosty-404-card > p{
        font-size:15px;
    }

    .hosty-404-search > div{
        flex-direction:column;
    }

    .hosty-404-search button{
        height:46px;
    }

}
/* =========================================================
   Related Products - Typography
   ========================================================= */

.hosty-related-products .hosty-product-title {
    font-size: 16px;
    line-height: 1;
    margin: 0;
}

.hosty-related-products .hosty-product-price {
    font-size: 18px;
    line-height: 1;
    margin-bottom: 5px;
}

/* =========================================================
   HOSTY STORE
   MY ACCOUNT
   FINAL COMPLETE DESIGN
   ========================================================= */


/* =========================================================
   1. MAIN LAYOUT
   ========================================================= */

body.woocommerce-account
.woocommerce:has(.woocommerce-MyAccount-navigation) {

    width: min(1180px, 100%);

    margin: 45px auto 70px;

    padding: 0 20px;

    display: grid;

    /*
     * المحتوى أولاً ثم القائمة
     * حتى تكون القائمة في اليمين
     */
    grid-template-columns:
        minmax(0, 1fr) 260px;

    gap: 28px;

    align-items: start;

    direction: ltr;

    box-sizing: border-box;
}


/* =========================================================
   2. NAVIGATION
   ========================================================= */

body.woocommerce-account
.woocommerce:has(.woocommerce-MyAccount-navigation)
.woocommerce-MyAccount-navigation {

    grid-column: 2;

    width: 260px !important;

    max-width: 260px !important;

    float: none !important;

    margin: 0 !important;

    padding: 14px;

    background: #ffffff;

    border: 1px solid #e4eaf0;

    border-radius: 16px;

    box-shadow:
        0 7px 25px rgba(15, 76, 129, .07);

    box-sizing: border-box;

    direction: rtl;

    overflow: hidden;
}


/* القائمة */

body.woocommerce-account
.woocommerce-MyAccount-navigation ul {

    margin: 0;

    padding: 0;

    list-style: none;
}


/* العناصر */

body.woocommerce-account
.woocommerce-MyAccount-navigation li {

    margin: 0;

    padding: 0;

    border-bottom: 1px solid #edf1f4;
}


body.woocommerce-account
.woocommerce-MyAccount-navigation li:last-child {

    border-bottom: none;
}


/* الروابط */

body.woocommerce-account
.woocommerce-MyAccount-navigation li a {

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 48px;

    padding: 0 14px;

    color: #173d68;

    background: transparent;

    border-radius: 9px;

    font-size: 15px;

    font-weight: 600;

    text-decoration: none;

    box-sizing: border-box;

    transition:
        background-color .2s ease,
        color .2s ease,
        transform .2s ease;
}


/* Hover */

body.woocommerce-account
.woocommerce-MyAccount-navigation li a:hover {

    background: #f1f8fc;

    color: #168dcc;

    transform: translateX(-3px);
}


/* Active */

body.woocommerce-account
.woocommerce-MyAccount-navigation li.is-active a {

    background: #168dcc;

    color: #ffffff;

    font-weight: 800;

    box-shadow:
        0 5px 14px rgba(22, 141, 204, .18);
}


body.woocommerce-account
.woocommerce-MyAccount-navigation li.is-active a:hover {

    background: #117eb7;

    color: #ffffff;

    transform: none;
}


/* تسجيل الخروج */

body.woocommerce-account
.woocommerce-MyAccount-navigation
li.woocommerce-MyAccount-navigation-link--customer-logout {

    margin-top: 5px;
}


body.woocommerce-account
.woocommerce-MyAccount-navigation
li.woocommerce-MyAccount-navigation-link--customer-logout a {

    color: #c44848;
}


body.woocommerce-account
.woocommerce-MyAccount-navigation
li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {

    background: #fff4f4;

    color: #c0392b;

    transform: translateX(-3px);
}


/* =========================================================
   3. CONTENT
   ========================================================= */

body.woocommerce-account
.woocommerce:has(.woocommerce-MyAccount-navigation)
.woocommerce-MyAccount-content {

    grid-column: 1;

    width: 100% !important;

    max-width: none !important;

    min-width: 0;

    float: none !important;

    margin: 0 !important;

    padding: 0;

    direction: rtl;

    color: #33485c;

    font-size: 15px;

    line-height: 1.9;

    box-sizing: border-box;
}


/* =========================================================
   4. NOTICES
   ========================================================= */

body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-info,

body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-message,

body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-error {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    width: 100%;

    margin: 0 0 25px !important;

    padding: 15px 18px !important;

    background: #ffffff !important;

    border: 1px solid #e4eaf0 !important;

    border-top: 3px solid #168dcc !important;

    border-radius: 0 0 12px 12px;

    color: #38536b !important;

    font-size: 14px;

    line-height: 1.8;

    box-shadow:
        0 5px 20px rgba(20,55,85,.04);

    box-sizing: border-box;
}


/* روابط الإشعارات */

body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-info a,

body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-message a {

    color: #168dcc;

    font-weight: 800;

    text-decoration: none;
}


/* أزرار الإشعارات */

body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-info .button,

body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-message .button {

    margin: 0;

    padding: 7px 15px;

    background: #eef2f6;

    border: 1px solid #dfe6ec;

    border-radius: 7px;

    color: #33485c;

    font-size: 13px;

    font-weight: 700;

    white-space: nowrap;
}


body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-info .button:hover,

body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-message .button:hover {

    background: #168dcc;

    border-color: #168dcc;

    color: #ffffff;
}


/* =========================================================
   5. DASHBOARD
   ========================================================= */

body.woocommerce-account
.woocommerce-MyAccount-content
> p:first-child {

    margin: 0 0 12px;

    padding: 22px 24px;

    background: #ffffff;

    border: 1px solid #e3e9ef;

    border-right: 4px solid #168dcc;

    border-radius: 14px;

    color: #173d68;

    font-size: 17px;

    font-weight: 600;

    line-height: 2;

    box-shadow:
        0 5px 20px rgba(20,55,85,.05);

    box-sizing: border-box;
}


body.woocommerce-account
.woocommerce-MyAccount-content
> p:first-child a {

    color: #168dcc;

    font-weight: 800;

    text-decoration: none;
}


body.woocommerce-account
.woocommerce-MyAccount-content
> p:first-child a:hover {

    text-decoration: underline;
}


body.woocommerce-account
.woocommerce-MyAccount-content
> p:nth-of-type(2) {

    margin: 0;

    color: #64748b;

    font-size: 15px;

    line-height: 2;
}


/* =========================================================
   6. HEADINGS
   ========================================================= */

body.woocommerce-account
.woocommerce-MyAccount-content h2 {

    margin: 0 0 20px;

    color: #173d68;

    font-size: 25px;

    font-weight: 800;

    line-height: 1.4;
}


body.woocommerce-account
.woocommerce-MyAccount-content h3 {

    color: #173d68;

    font-weight: 800;
}


/* =========================================================
   7. ORDERS
   ========================================================= */

body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-orders-table {

    width: 100%;

    margin: 0;

    background: #ffffff;

    border: 1px solid #e1e8ee;

    border-radius: 15px;

    border-collapse: separate;

    border-spacing: 0;

    overflow: hidden;

    box-shadow:
        0 6px 24px rgba(20,55,85,.05);

    box-sizing: border-box;
}


/* رأس الجدول */

body.woocommerce-account
.woocommerce-orders-table thead th {

    padding: 15px 12px;

    background: #f4f8fb;

    color: #173d68;

    border: 0;

    border-bottom: 1px solid #e1e8ee;

    font-size: 14px;

    font-weight: 800;

    text-align: center;

    white-space: nowrap;
}


/* الصفوف */

body.woocommerce-account
.woocommerce-orders-table tbody tr {

    transition: background .2s ease;
}


body.woocommerce-account
.woocommerce-orders-table tbody tr:hover td {

    background: #f8fbfd;
}


/* الخلايا */

body.woocommerce-account
.woocommerce-orders-table tbody td {

    padding: 14px 12px;

    background: #ffffff;

    color: #465d70;

    border: 0;

    border-bottom: 1px solid #edf1f4;

    font-size: 14px;

    font-weight: 500;

    text-align: center;

    vertical-align: middle;
}


body.woocommerce-account
.woocommerce-orders-table tbody tr:last-child td {

    border-bottom: none;
}


/* رقم الطلب */

body.woocommerce-account
.woocommerce-orders-table
.woocommerce-orders-table__cell-order-number a {

    color: #145a8d;

    font-weight: 800;

    text-decoration: none;
}


body.woocommerce-account
.woocommerce-orders-table
.woocommerce-orders-table__cell-order-number a:hover {

    color: #168dcc;

    text-decoration: underline;
}


/* الإجمالي */

body.woocommerce-account
.woocommerce-orders-table
.woocommerce-orders-table__cell-order-total {

    color: #173d68;

    font-weight: 800;
}


/* الحالة */

body.woocommerce-account
.woocommerce-orders-table
.woocommerce-orders-table__cell-order-status {

    color: #168dcc;

    font-weight: 800;
}


/* زر العرض */

body.woocommerce-account
.woocommerce-orders-table
.woocommerce-orders-table__cell-order-actions
.woocommerce-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 65px;

    min-height: 35px;

    padding: 6px 14px;

    background: #eef2f6;

    border: 1px solid #dfe6ec;

    border-radius: 7px;

    color: #33485c;

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;

    transition: .2s ease;
}


body.woocommerce-account
.woocommerce-orders-table
.woocommerce-orders-table__cell-order-actions
.woocommerce-button:hover {

    background: #168dcc;

    border-color: #168dcc;

    color: #ffffff;

    transform: translateY(-1px);
}


/* =========================================================
   8. ADDRESSES
   ========================================================= */

body.woocommerce-account
.woocommerce-Addresses {

    display: grid;

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

    gap: 24px;

    width: 100%;

    margin: 10px 0 0;
}


/* بطاقة العنوان */

body.woocommerce-account
.woocommerce-Addresses
.woocommerce-Address {

    width: auto !important;

    max-width: none !important;

    float: none !important;

    margin: 0 !important;

    padding: 24px;

    background: #ffffff;

    border: 1px solid #e3e9ef;

    border-radius: 15px;

    box-shadow:
        0 6px 24px rgba(20,55,85,.05);

    box-sizing: border-box;
}


/* رأس البطاقة */

body.woocommerce-account
.woocommerce-Addresses
.woocommerce-Address-title {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 18px;

    padding-bottom: 14px;

    border-bottom: 1px solid #edf1f4;
}


body.woocommerce-account
.woocommerce-Addresses
.woocommerce-Address-title h2,

body.woocommerce-account
.woocommerce-Addresses
.woocommerce-Address-title h3 {

    margin: 0;

    color: #173d68;

    font-size: 21px;

    font-weight: 800;
}


/* تعديل العنوان */

body.woocommerce-account
.woocommerce-Addresses
.woocommerce-Address-title .edit {

    color: #168dcc;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;
}


body.woocommerce-account
.woocommerce-Addresses
.woocommerce-Address-title .edit:hover {

    color: #117eb7;

    text-decoration: underline;
}


/* بيانات العنوان */

body.woocommerce-account
.woocommerce-Addresses
.woocommerce-Address address {

    margin: 0;

    padding: 0;

    color: #506579;

    font-size: 15px;

    line-height: 2;

    font-style: normal;
}


/* =========================================================
   9. ACCOUNT DETAILS
   ========================================================= */

body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-EditAccountForm {

    width: 100%;

    padding: 28px;

    background: #ffffff;

    border: 1px solid #e3e9ef;

    border-radius: 15px;

    box-shadow:
        0 6px 24px rgba(20,55,85,.05);

    box-sizing: border-box;
}


/* الحقول */

body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-EditAccountForm
.form-row {

    margin: 0 0 20px;

    padding: 0;
}


/* Labels */

body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-EditAccountForm
.form-row label {

    display: block;

    margin-bottom: 8px;

    color: #173d68;

    font-size: 14px;

    font-weight: 700;

    text-align: right;
}


/* Inputs */

body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-EditAccountForm
.form-row input,

body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-EditAccountForm
.form-row select,

body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-EditAccountForm
.form-row textarea {

    width: 100%;

    min-height: 48px;

    padding: 10px 14px;

    background: #ffffff;

    border: 1px solid #d8e0e7;

    border-radius: 9px;

    color: #33485c;

    font-family: inherit;

    font-size: 14px;

    outline: none;

    box-sizing: border-box;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-EditAccountForm
.form-row textarea {

    min-height: 120px;

    resize: vertical;
}


body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-EditAccountForm
.form-row input:focus,

body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-EditAccountForm
.form-row select:focus,

body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-EditAccountForm
.form-row textarea:focus {

    border-color: #168dcc;

    box-shadow:
        0 0 0 3px rgba(22,141,204,.10);
}


/* =========================================================
   10. PASSWORD
   ========================================================= */

body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-EditAccountForm fieldset {

    margin: 28px 0;

    padding: 22px;

    background: #f9fbfd;

    border: 1px solid #e2e9ef;

    border-radius: 12px;

    box-sizing: border-box;
}


body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-EditAccountForm fieldset legend {

    padding: 0 10px;

    color: #173d68;

    font-size: 18px;

    font-weight: 800;
}


/* =========================================================
   11. ACCOUNT BUTTONS
   ========================================================= */

body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-EditAccountForm
button[type="submit"],

body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-EditAccountForm
input[type="submit"] {

    min-height: 46px;

    padding: 9px 26px;

    background: #168dcc;

    border: 1px solid #168dcc;

    border-radius: 9px;

    color: #ffffff;

    font-family: inherit;

    font-weight: 700;

    cursor: pointer;

    transition: .2s ease;
}


body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-EditAccountForm
button[type="submit"]:hover,

body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-EditAccountForm
input[type="submit"]:hover {

    background: #117eb7;

    border-color: #117eb7;

    color: #ffffff;

    transform: translateY(-1px);
}


/* =========================================================
   12. ADDRESS EDIT
   ========================================================= */

body.woocommerce-account
.woocommerce-MyAccount-content
form.woocommerce-address-fields {

    width: 100%;

    padding: 28px;

    background: #ffffff;

    border: 1px solid #e3e9ef;

    border-radius: 15px;

    box-shadow:
        0 6px 24px rgba(20,55,85,.05);

    box-sizing: border-box;
}


body.woocommerce-account
.woocommerce-address-fields
.form-row {

    margin: 0 0 19px;

    padding: 0;
}


body.woocommerce-account
.woocommerce-address-fields
.form-row label {

    display: block;

    margin-bottom: 7px;

    color: #173d68;

    font-size: 14px;

    font-weight: 700;
}


body.woocommerce-account
.woocommerce-address-fields
.form-row input,

body.woocommerce-account
.woocommerce-address-fields
.form-row select,

body.woocommerce-account
.woocommerce-address-fields
.form-row textarea {

    width: 100%;

    min-height: 47px;

    padding: 10px 13px;

    background: #ffffff;

    border: 1px solid #d8e0e7;

    border-radius: 9px;

    color: #33485c;

    font-family: inherit;

    box-sizing: border-box;

    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


body.woocommerce-account
.woocommerce-address-fields
.form-row textarea {

    min-height: 120px;

    resize: vertical;
}


body.woocommerce-account
.woocommerce-address-fields
.form-row input:focus,

body.woocommerce-account
.woocommerce-address-fields
.form-row select:focus,

body.woocommerce-account
.woocommerce-address-fields
.form-row textarea:focus {

    border-color: #168dcc;

    box-shadow:
        0 0 0 3px rgba(22,141,204,.10);
}


body.woocommerce-account
.woocommerce-address-fields
button,

body.woocommerce-account
.woocommerce-address-fields
input[type="submit"] {

    min-height: 46px;

    padding: 9px 26px;

    background: #168dcc;

    border: 1px solid #168dcc;

    border-radius: 9px;

    color: #ffffff;

    font-family: inherit;

    font-weight: 700;

    cursor: pointer;

    transition: .2s ease;
}


body.woocommerce-account
.woocommerce-address-fields
button:hover,

body.woocommerce-account
.woocommerce-address-fields
input[type="submit"]:hover {

    background: #117eb7;

    border-color: #117eb7;

    transform: translateY(-1px);
}


/* =========================================================
   13. DOWNLOADS
   ========================================================= */

body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-table--order-downloads {

    width: 100%;

    margin: 0;

    background: #ffffff;

    border: 1px solid #e3e9ef;

    border-radius: 14px;

    border-collapse: separate;

    border-spacing: 0;

    overflow: hidden;

    box-shadow:
        0 5px 20px rgba(20,55,85,.04);
}


body.woocommerce-account
.woocommerce-table--order-downloads th {

    padding: 14px;

    background: #f4f8fb;

    color: #173d68;

    border-bottom: 1px solid #e2e9ef;

    font-weight: 800;

    text-align: center;
}


body.woocommerce-account
.woocommerce-table--order-downloads td {

    padding: 14px;

    color: #506579;

    border-bottom: 1px solid #edf1f4;

    text-align: center;
}


body.woocommerce-account
.woocommerce-table--order-downloads tr:last-child td {

    border-bottom: none;
}


body.woocommerce-account
.woocommerce-table--order-downloads
.download-file .button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 7px 14px;

    background: #168dcc;

    border: 1px solid #168dcc;

    border-radius: 7px;

    color: #ffffff;

    font-size: 13px;

    font-weight: 700;
}


body.woocommerce-account
.woocommerce-table--order-downloads
.download-file .button:hover {

    background: #117eb7;

    border-color: #117eb7;
}


/* =========================================================
   14. ORDER DETAILS
   ========================================================= */

body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-order-details,

body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-customer-details {

    margin-top: 25px;

    padding: 24px;

    background: #ffffff;

    border: 1px solid #e3e9ef;

    border-radius: 15px;

    box-shadow:
        0 6px 24px rgba(20,55,85,.05);

    box-sizing: border-box;
}


body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-table--order-details {

    width: 100%;

    border-collapse: collapse;
}


body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-table--order-details th {

    padding: 13px;

    background: #f4f8fb;

    color: #173d68;

    font-weight: 800;
}


body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-table--order-details td {

    padding: 13px;

    border-bottom: 1px solid #edf1f4;

    color: #506579;
}


/* =========================================================
   15. TABLET
   ========================================================= */

@media (max-width: 950px) {

    body.woocommerce-account
    .woocommerce:has(.woocommerce-MyAccount-navigation) {

        grid-template-columns:
            minmax(0, 1fr) 220px;

        gap: 20px;

        padding: 0 15px;
    }


    body.woocommerce-account
    .woocommerce-MyAccount-navigation {

        width: 220px !important;

        max-width: 220px !important;
    }


    body.woocommerce-account
    .woocommerce-MyAccount-content h2 {

        font-size: 23px;
    }


    body.woocommerce-account
    .woocommerce-orders-table thead th,

    body.woocommerce-account
    .woocommerce-orders-table tbody td {

        padding: 11px 8px;

        font-size: 13px;
    }
}


/* =========================================================
   16. MOBILE
   ========================================================= */

@media (max-width: 700px) {

    body.woocommerce-account
    .woocommerce:has(.woocommerce-MyAccount-navigation) {

        width: 100%;

        margin: 25px auto 50px;

        padding: 0 12px;

        display: flex;

        flex-direction: column;

        gap: 18px;

        box-sizing: border-box;
    }


    /* القائمة */

    body.woocommerce-account
    .woocommerce-MyAccount-navigation {

        order: 1;

        width: 100% !important;

        max-width: none !important;

        padding: 10px;

        border-radius: 14px;
    }


    /* المحتوى */

    body.woocommerce-account
    .woocommerce-MyAccount-content {

        order: 2;

        width: 100% !important;

        max-width: none !important;
    }


    /* القائمة في شكل شبكة */

    body.woocommerce-account
    .woocommerce-MyAccount-navigation ul {

        display: grid;

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

        gap: 5px;
    }


    body.woocommerce-account
    .woocommerce-MyAccount-navigation li {

        border: none;
    }


    body.woocommerce-account
    .woocommerce-MyAccount-navigation li a {

        min-height: 44px;

        justify-content: center;

        padding: 0 7px;

        font-size: 13px;

        text-align: center;
    }


    body.woocommerce-account
    .woocommerce-MyAccount-navigation li a:hover {

        transform: none;
    }


    /* المحتوى */

    body.woocommerce-account
    .woocommerce-MyAccount-content
    > p:first-child {

        padding: 17px;

        font-size: 15px;
    }


    body.woocommerce-account
    .woocommerce-MyAccount-content h2 {

        font-size: 21px;

        margin-bottom: 15px;
    }


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

    body.woocommerce-account
    .woocommerce-MyAccount-content
    .woocommerce-orders-table {

        display: block;

        width: 100%;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;
    }


    body.woocommerce-account
    .woocommerce-MyAccount-content
    .woocommerce-orders-table thead,

    body.woocommerce-account
    .woocommerce-MyAccount-content
    .woocommerce-orders-table tbody {

        min-width: 620px;
    }


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

    body.woocommerce-account
    .woocommerce-Addresses {

        grid-template-columns: 1fr;

        gap: 16px;
    }


    body.woocommerce-account
    .woocommerce-Addresses
    .woocommerce-Address {

        padding: 19px;
    }


    /* =====================================================
       ACCOUNT FORM MOBILE
       ===================================================== */

    body.woocommerce-account
    .woocommerce-MyAccount-content
    .woocommerce-EditAccountForm,

    body.woocommerce-account
    .woocommerce-MyAccount-content
    form.woocommerce-address-fields {

        padding: 18px;
    }


    /* منع WooCommerce من عمل عمودين للاسم */

    body.woocommerce-account
    .woocommerce-EditAccountForm
    .form-row-first,

    body.woocommerce-account
    .woocommerce-EditAccountForm
    .form-row-last,

    body.woocommerce-account
    .woocommerce-address-fields
    .form-row-first,

    body.woocommerce-account
    .woocommerce-address-fields
    .form-row-last {

        width: 100% !important;

        float: none !important;

        margin-left: 0 !important;

        margin-right: 0 !important;
    }


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

    body.woocommerce-account
    .woocommerce-table--order-downloads {

        display: block;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;
    }


    body.woocommerce-account
    .woocommerce-table--order-downloads thead,

    body.woocommerce-account
    .woocommerce-table--order-downloads tbody {

        min-width: 560px;
    }


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

    body.woocommerce-account
    .woocommerce-MyAccount-content
    .woocommerce-info,

    body.woocommerce-account
    .woocommerce-MyAccount-content
    .woocommerce-message,

    body.woocommerce-account
    .woocommerce-MyAccount-content
    .woocommerce-error {

        display: block;

        padding: 14px 15px !important;

        font-size: 13px;
    }


    body.woocommerce-account
    .woocommerce-MyAccount-content
    .woocommerce-info .button,

    body.woocommerce-account
    .woocommerce-MyAccount-content
    .woocommerce-message .button {

        float: none;

        display: inline-flex;

        margin-top: 8px;
    }


    /* تفاصيل الطلب */

    body.woocommerce-account
    .woocommerce-order-details,

    body.woocommerce-account
    .woocommerce-customer-details {

        padding: 18px;
    }
}


/* =========================================================
   17. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    body.woocommerce-account
    .woocommerce-MyAccount-navigation ul {

        grid-template-columns: 1fr 1fr;
    }


    body.woocommerce-account
    .woocommerce-MyAccount-navigation li a {

        min-height: 42px;

        font-size: 12px;
    }


    body.woocommerce-account
    .woocommerce-MyAccount-content {

        font-size: 14px;
    }


    body.woocommerce-account
    .woocommerce-MyAccount-content
    > p:first-child {

        padding: 15px;

        font-size: 14px;
    }


    body.woocommerce-account
    .woocommerce-Addresses
    .woocommerce-Address {

        padding: 17px;
    }


    body.woocommerce-account
    .woocommerce-Addresses
    .woocommerce-Address-title h2,

    body.woocommerce-account
    .woocommerce-Addresses
    .woocommerce-Address-title h3 {

        font-size: 18px;
    }


    body.woocommerce-account
    .woocommerce-Addresses
    .woocommerce-Address address {

        font-size: 14px;

        line-height: 1.9;
    }


    body.woocommerce-account
    .woocommerce-EditAccountForm,

    body.woocommerce-account
    form.woocommerce-address-fields {

        padding: 15px !important;
    }


    body.woocommerce-account
    .woocommerce-EditAccountForm
    button[type="submit"],

    body.woocommerce-account
    .woocommerce-address-fields
    button,

    body.woocommerce-account
    .woocommerce-address-fields
    input[type="submit"] {

        width: 100%;
    }
}

/* =========================================================
   HOSTY STORE
   MY ACCOUNT - FINAL STRUCTURE FIX
   ========================================================= */


/* =========================================================
   1. MAIN ACCOUNT LAYOUT
   ========================================================= */

body.woocommerce-account
.woocommerce:has(.woocommerce-MyAccount-navigation) {

    width: min(1180px, calc(100% - 40px)) !important;
    max-width: 1180px !important;

    margin: 80px auto 70px !important;
    padding: 0 !important;

    display: grid !important;

    grid-template-columns:
        260px
        minmax(0, 1fr) !important;

    gap: 28px !important;

    align-items: start !important;

    direction: rtl !important;

    float: none !important;

    box-sizing: border-box !important;
}


/* =========================================================
   2. FORCE NAV + CONTENT INTO GRID
   ========================================================= */

body.woocommerce-account
.woocommerce:has(.woocommerce-MyAccount-navigation)
.woocommerce-MyAccount-navigation {

    grid-column: 1 !important;
    grid-row: 1 !important;

    float: none !important;

    width: 260px !important;
    max-width: 260px !important;

    margin: 0 !important;

    box-sizing: border-box !important;
}


body.woocommerce-account
.woocommerce:has(.woocommerce-MyAccount-navigation)
.woocommerce-MyAccount-content {

    grid-column: 2 !important;
    grid-row: 1 !important;

    float: none !important;

    width: 100% !important;
    max-width: none !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   3. SIDEBAR
   ========================================================= */

body.woocommerce-account
.woocommerce-MyAccount-navigation {

    background: #ffffff !important;

    border: 1px solid #e5ebf0 !important;

    border-radius: 15px !important;

    box-shadow:
        0 5px 20px rgba(20, 55, 85, 0.06) !important;

    overflow: hidden !important;

    padding: 10px !important;
}


body.woocommerce-account
.woocommerce-MyAccount-navigation ul {

    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}


body.woocommerce-account
.woocommerce-MyAccount-navigation li {

    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border-bottom: 1px solid #edf1f4 !important;
}


body.woocommerce-account
.woocommerce-MyAccount-navigation li:last-child {

    border-bottom: none !important;
}


body.woocommerce-account
.woocommerce-MyAccount-navigation li a {

    display: flex !important;

    align-items: center !important;

    width: 100% !important;

    min-height: 48px !important;

    margin: 0 !important;

    padding: 0 14px !important;

    box-sizing: border-box !important;

    color: #173d68 !important;

    background: transparent !important;

    border-radius: 9px !important;

    text-decoration: none !important;

    font-size: 15px !important;

    font-weight: 600 !important;

    transition: all .2s ease !important;
}


body.woocommerce-account
.woocommerce-MyAccount-navigation li a:hover {

    background: #f1f8fc !important;

    color: #168dcc !important;

    padding-right: 18px !important;
}


body.woocommerce-account
.woocommerce-MyAccount-navigation
li.is-active > a {

    background: #168dcc !important;

    color: #ffffff !important;

    font-weight: 800 !important;

    padding-right: 14px !important;
}


body.woocommerce-account
.woocommerce-MyAccount-navigation
li.is-active > a:hover {

    background: #117eb7 !important;

    color: #ffffff !important;

    padding-right: 14px !important;
}


/* تسجيل الخروج */

body.woocommerce-account
.woocommerce-MyAccount-navigation
li.woocommerce-MyAccount-navigation-link--customer-logout a {

    color: #c44848 !important;
}


body.woocommerce-account
.woocommerce-MyAccount-navigation
li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {

    background: #fff4f4 !important;

    color: #c0392b !important;
}


/* =========================================================
   4. ACCOUNT CONTENT RESET
   ========================================================= */

body.woocommerce-account
.woocommerce-MyAccount-content > * {

    box-sizing: border-box !important;
}


body.woocommerce-account
.woocommerce-MyAccount-content > *:first-child {

    margin-top: 0 !important;
}


/* =========================================================
   5. ORDERS TABLE - FULL WIDTH
   ========================================================= */

body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-orders-table {

    display: table !important;

    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    table-layout: auto !important;

    border-collapse: separate !important;

    border-spacing: 0 !important;

    background: #ffffff !important;

    border: 1px solid #e2e9ef !important;

    border-radius: 14px !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}


/* رأس الجدول */

body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-orders-table thead {

    display: table-header-group !important;
}


body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-orders-table tbody {

    display: table-row-group !important;
}


body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-orders-table tr {

    display: table-row !important;

    width: 100% !important;
}


/* خلايا الجدول */

body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-orders-table th,

body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-orders-table td {

    display: table-cell !important;

    box-sizing: border-box !important;

    text-align: center !important;

    vertical-align: middle !important;
}


/* رأس الجدول */

body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-orders-table thead th {

    padding: 15px 12px !important;

    background: #f4f8fb !important;

    color: #173d68 !important;

    border: 0 !important;

    border-bottom: 1px solid #e2e9ef !important;

    font-size: 14px !important;

    font-weight: 800 !important;

    white-space: nowrap !important;
}


/* محتوى الجدول */

body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-orders-table tbody td {

    padding: 14px 12px !important;

    background: #ffffff !important;

    color: #465d70 !important;

    border: 0 !important;

    border-bottom: 1px solid #edf1f4 !important;

    font-size: 14px !important;
}


body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-orders-table tbody tr:last-child td {

    border-bottom: none !important;
}


/* =========================================================
   6. ADDRESS CARDS - FORCE SAME ROW
   ========================================================= */

body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-Addresses {

    display: grid !important;

    width: 100% !important;

    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 24px !important;

    align-items: stretch !important;

    box-sizing: border-box !important;
}


/* كل بطاقة */

body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-Addresses
.woocommerce-Address {

    display: block !important;

    position: relative !important;

    float: none !important;

    width: 100% !important;

    max-width: none !important;

    min-width: 0 !important;

    margin: 0 !important;

    padding: 24px !important;

    box-sizing: border-box !important;

    background: #ffffff !important;

    border: 1px solid #e3e9ef !important;

    border-radius: 14px !important;

    box-shadow:
        0 5px 20px rgba(20, 55, 85, 0.05) !important;
}


/* =========================================================
   7. ADDRESS CARD HEADER
   ========================================================= */

body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-Address-title {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    width: 100% !important;

    margin: 0 0 18px !important;

    padding: 0 0 14px !important;

    border-bottom: 1px solid #edf1f4 !important;

    box-sizing: border-box !important;
}


body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-Address-title h2,

body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-Address-title h3 {

    margin: 0 !important;

    padding: 0 !important;

    color: #173d68 !important;

    font-size: 21px !important;

    font-weight: 800 !important;
}


body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-Address-title .edit {

    margin: 0 !important;

    color: #168dcc !important;

    font-size: 14px !important;

    font-weight: 700 !important;

    text-decoration: none !important;
}


/* =========================================================
   8. ADDRESS TEXT
   ========================================================= */

body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-Address address {

    display: block !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    color: #506579 !important;

    font-size: 15px !important;

    line-height: 2 !important;

    font-style: normal !important;

    text-align: right !important;

    box-sizing: border-box !important;
}


/* =========================================================
   9. ACCOUNT DETAILS FORM
   ========================================================= */

body.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-EditAccountForm {

    width: 100% !important;

    margin: 0 !important;

    padding: 26px !important;

    background: #ffffff !important;

    border: 1px solid #e3e9ef !important;

    border-radius: 14px !important;

    box-shadow:
        0 5px 20px rgba(20, 55, 85, 0.05) !important;

    box-sizing: border-box !important;
}


/* =========================================================
   10. MOBILE
   ========================================================= */

@media (max-width: 768px) {

    body.woocommerce-account
    .woocommerce:has(.woocommerce-MyAccount-navigation) {

        display: flex !important;

        flex-direction: column !important;

        width: calc(100% - 24px) !important;

        max-width: none !important;

        margin: 25px auto 50px !important;

        padding: 0 !important;

        gap: 20px !important;
    }


    body.woocommerce-account
    .woocommerce:has(.woocommerce-MyAccount-navigation)
    .woocommerce-MyAccount-navigation {

        order: 1 !important;

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;
    }


    body.woocommerce-account
    .woocommerce:has(.woocommerce-MyAccount-navigation)
    .woocommerce-MyAccount-content {

        order: 2 !important;

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;
    }


    /* قائمة الحساب */

    body.woocommerce-account
    .woocommerce-MyAccount-navigation ul {

        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 5px !important;
    }


    body.woocommerce-account
    .woocommerce-MyAccount-navigation li {

        border: none !important;
    }


    body.woocommerce-account
    .woocommerce-MyAccount-navigation li a {

        min-height: 44px !important;

        justify-content: center !important;

        padding: 0 8px !important;

        font-size: 13px !important;

        text-align: center !important;
    }


    /* العناوين */

    body.woocommerce-account
    .woocommerce-MyAccount-content
    .woocommerce-Addresses {

        grid-template-columns: 1fr !important;

        gap: 16px !important;
    }


    /* الطلبات على الهاتف */

    body.woocommerce-account
    .woocommerce-MyAccount-content
    .woocommerce-orders-table {

        display: block !important;

        width: 100% !important;

        max-width: 100% !important;

        overflow-x: auto !important;
    }


    body.woocommerce-account
    .woocommerce-orders-table thead,

    body.woocommerce-account
    .woocommerce-orders-table tbody {

        min-width: 620px !important;
    }
}


/* =========================================================
   11. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    body.woocommerce-account
    .woocommerce:has(.woocommerce-MyAccount-navigation) {

        width: calc(100% - 16px) !important;
    }


    body.woocommerce-account
    .woocommerce-MyAccount-navigation li a {

        min-height: 42px !important;

        font-size: 12px !important;
    }


    body.woocommerce-account
    .woocommerce-MyAccount-content {

        font-size: 14px !important;
    }
}

/* =========================================================
   HOSTY STORE
   LOGIN / REGISTER PAGE
   FINAL CARD DESIGN
   ========================================================= */


/* =========================================================
   1. الصفحة الرئيسية
   ========================================================= */

body.woocommerce-account
.woocommerce:has(.u-columns) {

    width: 100% !important;
    max-width: 1180px !important;

    margin: 80px auto 70px !important;

    padding: 0px !important;

    box-sizing: border-box !important;
}


/* =========================================================
   2. العمودان
   ========================================================= */

body.woocommerce-account
.woocommerce:has(.u-columns)
.u-columns {

    width: 100% !important;

    max-width: 1100px !important;

    margin: 0 auto !important;

    padding: 0 !important;

    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 30px !important;

    align-items: stretch !important;

    box-sizing: border-box !important;
}


/* =========================================================
   3. البطاقتان
   ========================================================= */

body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column1,

body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column2 {

    position: relative !important;

    width: 100% !important;

    max-width: none !important;

    float: none !important;

    margin: 0 !important;

    padding: 30px !important;

    box-sizing: border-box !important;

    background: #ffffff !important;

    border: 1px solid #e4ebf1 !important;

    border-radius: 18px !important;

    box-shadow:
        0 8px 28px rgba(20, 55, 85, 0.07) !important;

    min-height: 470px !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: flex-start !important;

}


/* =========================================================
   4. عنوان تسجيل الدخول
   ========================================================= */

body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column1 h2 {

    margin: 0 0 25px !important;

    padding: 0 0 18px !important;

    color: #173d68 !important;

    font-size: 28px !important;

    font-weight: 800 !important;

    line-height: 1.4 !important;

    text-align: right !important;

    border-bottom: 1px solid #edf1f4 !important;
}


/* =========================================================
   5. عنوان التسجيل
   ========================================================= */

body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column2 h2 {

    margin: 0 0 25px !important;

    padding: 0 0 18px !important;

    color: #173d68 !important;

    font-size: 28px !important;

    font-weight: 800 !important;

    line-height: 1.4 !important;

    text-align: right !important;

    border-bottom: 1px solid #edf1f4 !important;
}


/* =========================================================
   6. استبدال عنوان تسجيل جديد بـ التسجيل
   ========================================================= */

body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column2 h2 {

    font-size: 0 !important;
}


body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column2 h2::after {

    content: "تسجيل عضو جديد";

    display: block;

    color: #173d68;

    font-size: 28px;

    font-weight: 800;

    line-height: 1.4;
}


/* =========================================================
   7. عنوان تسجيل الدخول
   ========================================================= */

body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column1 h2 {

    font-size: 0 !important;
}


body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column1 h2::after {

    content: "تسجيل الدخول";

    display: block;

    color: #173d68;

    font-size: 28px;

    font-weight: 800;

    line-height: 1.4;
}


/* =========================================================
   8. النماذج
   ========================================================= */

body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column1 form,

body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column2 form {

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    box-sizing: border-box !important;

    background: transparent !important;

    border: none !important;
}


/* =========================================================
   9. Labels
   ========================================================= */

body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column1 label,

body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column2 label {

    display: block !important;

    margin: 0 0 8px !important;

    color: #173d68 !important;

    font-size: 15px !important;

    font-weight: 700 !important;

    line-height: 1.6 !important;
}


/* =========================================================
   10. الحقول
   ========================================================= */

body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column1 input[type="text"],

body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column1 input[type="email"],

body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column1 input[type="password"],

body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column2 input[type="text"],

body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column2 input[type="email"],

body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column2 input[type="password"] {

    width: 100% !important;

    height: 48px !important;

    padding: 0 14px !important;

    box-sizing: border-box !important;

    background: #ffffff !important;

    border: 1px solid #d7e0e8 !important;

    border-radius: 9px !important;

    color: #33485c !important;

    font-family: inherit !important;

    font-size: 14px !important;

    outline: none !important;

    transition:
        border-color .2s ease,
        box-shadow .2s ease !important;
}


body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column1 input:focus,

body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column2 input:focus {

    border-color: #168dcc !important;

    box-shadow:
        0 0 0 3px rgba(22, 141, 204, .10) !important;
}


/* =========================================================
   11. مسافات الحقول
   ========================================================= */

body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column1 .form-row,

body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column2 .form-row {

    margin-bottom: 18px !important;

    padding: 0 !important;
}


/* =========================================================
   12. نص التسجيل
   ========================================================= */

body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column2 p {

    color: #52687b !important;

    font-size: 14px !important;

    line-height: 2 !important;

    margin: 0 0 18px !important;
}


/* =========================================================
   13. تذكرني
   ========================================================= */

body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column1 .woocommerce-form__label-for-checkbox {

    display: inline-flex !important;

    align-items: center !important;

    gap: 7px !important;

    color: #52687b !important;

    font-size: 14px !important;

    font-weight: 500 !important;
}


body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column1 input[type="checkbox"] {

    width: 16px !important;

    height: 16px !important;

    margin: 0 !important;

    accent-color: #168dcc;
}


/* =========================================================
   14. نسيت كلمة المرور
   ========================================================= */

body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column1 .woocommerce-LostPassword {

    margin: 15px 0 0 !important;

    text-align: right !important;
}


body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column1 .woocommerce-LostPassword a {

    color: #168dcc !important;

    font-size: 14px !important;

    font-weight: 700 !important;

    text-decoration: none !important;
}


body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column1 .woocommerce-LostPassword a:hover {

    color: #117eb7 !important;

    text-decoration: underline !important;
}


/* =========================================================
   15. الأزرار
   ========================================================= */

body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column1 button[type="submit"],

body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column1 input[type="submit"],

body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column2 button[type="submit"],

body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column2 input[type="submit"] {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 100% !important;

    min-height: 50px !important;

    margin-top: 15px !important;

    padding: 10px 20px !important;

    background: #168dcc !important;

    border: 1px solid #168dcc !important;

    border-radius: 9px !important;

    color: #ffffff !important;

    font-family: inherit !important;

    font-size: 15px !important;

    font-weight: 800 !important;

    cursor: pointer !important;

    transition: all .2s ease !important;
}


body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column1 button[type="submit"]:hover,

body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column1 input[type="submit"]:hover,

body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column2 button[type="submit"]:hover,

body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column2 input[type="submit"]:hover {

    background: #117eb7 !important;

    border-color: #117eb7 !important;

    transform: translateY(-1px) !important;

    box-shadow:
        0 5px 15px rgba(22, 141, 204, .18) !important;
}


/* =========================================================
   16. زر التسجيل الجديد
   ========================================================= */

body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column2 .button {

    background: #1db879 !important;

    border-color: #1db879 !important;

    color: #ffffff !important;
}


body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column2 .button:hover {

    background: #159d66 !important;

    border-color: #159d66 !important;
}


/* =========================================================
   17. تحسين المساحة داخل البطاقة
   ========================================================= */

body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column1 .woocommerce-form-row:last-of-type,

body.woocommerce-account
.woocommerce:has(.u-columns)
.u-column2 .woocommerce-form-row:last-of-type {

    margin-bottom: 0 !important;
}


/* =========================================================
   18. TABLET
   ========================================================= */

@media (max-width: 900px) {

    body.woocommerce-account
    .woocommerce:has(.u-columns) {

        max-width: 100% !important;

        padding: 0 15px !important;
    }

    body.woocommerce-account
    .woocommerce:has(.u-columns)
    .u-columns {

        gap: 20px !important;
    }

    body.woocommerce-account
    .woocommerce:has(.u-columns)
    .u-column1,

    body.woocommerce-account
    .woocommerce:has(.u-columns)
    .u-column2 {

        padding: 24px !important;

        min-height: 440px !important;
    }
}


/* =========================================================
   19. MOBILE
   ========================================================= */

@media (max-width: 768px) {

    body.woocommerce-account
    .woocommerce:has(.u-columns) {

        width: 100% !important;

        margin: 25px auto 50px !important;

        padding: 0 12px !important;
    }


    body.woocommerce-account
    .woocommerce:has(.u-columns)
    .u-columns {

        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;

        max-width: none !important;

        gap: 18px !important;
    }


    body.woocommerce-account
    .woocommerce:has(.u-columns)
    .u-column1,

    body.woocommerce-account
    .woocommerce:has(.u-columns)
    .u-column2 {

        width: 100% !important;

        min-height: auto !important;

        padding: 22px 18px !important;

        border-radius: 15px !important;
    }


    body.woocommerce-account
    .woocommerce:has(.u-columns)
    .u-column1 h2::after,

    body.woocommerce-account
    .woocommerce:has(.u-columns)
    .u-column2 h2::after {

        font-size: 23px !important;
    }


    body.woocommerce-account
    .woocommerce:has(.u-columns)
    .u-column1 h2,

    body.woocommerce-account
    .woocommerce:has(.u-columns)
    .u-column2 h2 {

        margin-bottom: 20px !important;

        padding-bottom: 14px !important;
    }


    body.woocommerce-account
    .woocommerce:has(.u-columns)
    .u-column1 input[type="text"],

    body.woocommerce-account
    .woocommerce:has(.u-columns)
    .u-column1 input[type="email"],

    body.woocommerce-account
    .woocommerce:has(.u-columns)
    .u-column1 input[type="password"],

    body.woocommerce-account
    .woocommerce:has(.u-columns)
    .u-column2 input[type="text"],

    body.woocommerce-account
    .woocommerce:has(.u-columns)
    .u-column2 input[type="email"],

    body.woocommerce-account
    .woocommerce:has(.u-columns)
    .u-column2 input[type="password"] {

        height: 46px !important;
    }
}


/* =========================================================
   20. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    body.woocommerce-account
    .woocommerce:has(.u-columns)
    .u-column1,

    body.woocommerce-account
    .woocommerce:has(.u-columns)
    .u-column2 {

        padding: 20px 15px !important;
    }


    body.woocommerce-account
    .woocommerce:has(.u-columns)
    .u-column1 h2::after,

    body.woocommerce-account
    .woocommerce:has(.u-columns)
    .u-column2 h2::after {

        font-size: 21px !important;
    }


    body.woocommerce-account
    .woocommerce:has(.u-columns)
    .u-column1 label,

    body.woocommerce-account
    .woocommerce:has(.u-columns)
    .u-column2 label {

        font-size: 14px !important;
    }
}

/* =========================================================
   HOSTY STORE
   LOGIN / REGISTER
   FIX GRID POSITION
   ========================================================= */

@media (min-width: 769px) {

    /* منع عناصر WooCommerce الوهمية من أخذ صف داخل Grid */
    body.woocommerce-account
    .woocommerce:has(.u-columns)
    .u-columns::before,

    body.woocommerce-account
    .woocommerce:has(.u-columns)
    .u-columns::after {

        display: none !important;
        content: none !important;
    }


    /* إجبار العمودين على نفس الصف */
    body.woocommerce-account
    .woocommerce:has(.u-columns)
    .u-column1 {

        grid-column: 1 !important;
        grid-row: 1 !important;

        align-self: start !important;
    }


    body.woocommerce-account
    .woocommerce:has(.u-columns)
    .u-column2 {

        grid-column: 2 !important;
        grid-row: 1 !important;

        align-self: start !important;
    }


    /* منع أي Float قديم من WooCommerce */
    body.woocommerce-account
    .woocommerce:has(.u-columns)
    .u-column1,

    body.woocommerce-account
    .woocommerce:has(.u-columns)
    .u-column2 {

        float: none !important;

        position: relative !important;

        top: auto !important;

        transform: none !important;
    }


    /* توحيد بداية البطاقتين */
    body.woocommerce-account
    .woocommerce:has(.u-columns)
    .u-columns {

        align-items: start !important;

        grid-auto-flow: row !important;

        grid-auto-rows: auto !important;
    }
}


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

@media (max-width: 768px) {

    body.woocommerce-account
    .woocommerce:has(.u-columns)
    .u-columns::before,

    body.woocommerce-account
    .woocommerce:has(.u-columns)
    .u-columns::after {

        display: none !important;

        content: none !important;
    }


    body.woocommerce-account
    .woocommerce:has(.u-columns)
    .u-column1,

    body.woocommerce-account
    .woocommerce:has(.u-columns)
    .u-column2 {

        grid-column: auto !important;

        grid-row: auto !important;

        align-self: auto !important;
    }
}

/* =========================================================
   HOSTY STORE
   FIX LOGIN/REGISTER CSS LEAKING INTO MY ACCOUNT ADDRESSES
   ========================================================= */


/* ---------------------------------------------------------
   إلغاء تأثير عناوين التسجيل عن بطاقات العناوين
   --------------------------------------------------------- */

body.woocommerce-account
.woocommerce-Addresses
.u-column1 h2,
body.woocommerce-account
.woocommerce-Addresses
.u-column2 h2 {

    font-size: revert !important;

    color: revert !important;

    font-weight: revert !important;

    line-height: revert !important;

    margin: revert !important;

    padding: revert !important;

    border-bottom: none !important;
}


/* إزالة النصوص التي أضافها كود Login/Register */

body.woocommerce-account
.woocommerce-Addresses
.u-column1 h2::after,
body.woocommerce-account
.woocommerce-Addresses
.u-column2 h2::after {

    content: none !important;

    display: none !important;
}


/* ---------------------------------------------------------
   إعادة عنوان بطاقة الفاتورة
   --------------------------------------------------------- */

body.woocommerce-account
.woocommerce-Addresses
.u-column1 .woocommerce-Address-title h2 {

    font-size: 21px !important;

    color: #173d68 !important;

    font-weight: 800 !important;

    line-height: 1.4 !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;
}


/* ---------------------------------------------------------
   إعادة عنوان بطاقة الشحن
   --------------------------------------------------------- */

body.woocommerce-account
.woocommerce-Addresses
.u-column2 .woocommerce-Address-title h2 {

    font-size: 21px !important;

    color: #173d68 !important;

    font-weight: 800 !important;

    line-height: 1.4 !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;
}


/* ---------------------------------------------------------
   منع استبدال النص الأصلي داخل العناوين
   --------------------------------------------------------- */

body.woocommerce-account
.woocommerce-Addresses
.u-column1 .woocommerce-Address-title h2::after,

body.woocommerce-account
.woocommerce-Addresses
.u-column2 .woocommerce-Address-title h2::after {

    content: none !important;

    display: none !important;
}

/* =========================================================
   HOSTY STORE
   MY ACCOUNT - VIEW ORDER
   تصميم صفحة تفاصيل الطلب فقط
   ========================================================= */


/* ---------------------------------------------------------
   الحاوية الرئيسية لصفحة تفاصيل الطلب
   --------------------------------------------------------- */

body.woocommerce-view-order
.woocommerce-MyAccount-content {

    color: #173d68;

}


/* ---------------------------------------------------------
   رسالة حالة الطلب
   --------------------------------------------------------- */

body.woocommerce-view-order
.woocommerce-MyAccount-content > p:first-child {

    background: #ffffff;

    border: 1px solid #e3eaf1;

    border-top: 3px solid #1596d1;

    border-radius: 14px;

    padding: 18px 24px;

    margin: 0 0 25px;

    box-shadow: 0 8px 25px rgba(23, 61, 104, 0.06);

    font-size: 16px;

    line-height: 1.9;

}


/* رقم الطلب داخل الرسالة */

body.woocommerce-view-order
.woocommerce-MyAccount-content > p:first-child strong {

    color: #173d68;

    font-weight: 800;

}


/* حالة الطلب */

body.woocommerce-view-order
.woocommerce-MyAccount-content > p:first-child mark {

    background: transparent;

    color: #1596d1;

    font-weight: 800;

}


/* ---------------------------------------------------------
   كارت تفاصيل الطلب
   --------------------------------------------------------- */

body.woocommerce-view-order
.woocommerce-order-details {

    background: #ffffff;

    border: 1px solid #e3eaf1;

    border-radius: 18px;

    padding: 28px;

    margin: 0 0 28px;

    box-shadow: 0 10px 30px rgba(23, 61, 104, 0.07);

    box-sizing: border-box;

}


/* عنوان تفاصيل الطلب */

body.woocommerce-view-order
.woocommerce-order-details__title {

    color: #173d68;

    font-size: 27px;

    font-weight: 800;

    margin: 0 0 22px;

    padding: 0 0 16px;

    border-bottom: 1px solid #e7edf3;

    position: relative;

}


/* الخط البرتقالي أسفل العنوان */

body.woocommerce-view-order
.woocommerce-order-details__title::after {

    content: "";

    display: block;

    width: 55px;

    height: 4px;

    background: #f5a000;

    border-radius: 10px;

    margin-top: 12px;

}


/* ---------------------------------------------------------
   جدول المنتجات
   --------------------------------------------------------- */

body.woocommerce-view-order
.woocommerce-table--order-details {

    width: 100%;

    border-collapse: separate;

    border-spacing: 0;

    border: 1px solid #e0e7ee;

    border-radius: 12px;

    overflow: hidden;

    margin: 0;

}


/* خلايا الجدول */

body.woocommerce-view-order
.woocommerce-table--order-details th,

body.woocommerce-view-order
.woocommerce-table--order-details td {

    padding: 16px 18px;

    border: 0;

    border-bottom: 1px solid #e8edf2;

    vertical-align: middle;

}


/* رأس الجدول */

body.woocommerce-view-order
.woocommerce-table--order-details thead th {

    background: #f4f8fb;

    color: #173d68;

    font-size: 16px;

    font-weight: 800;

}


/* صفوف المنتجات */

body.woocommerce-view-order
.woocommerce-table--order-details tbody tr {

    transition: background 0.2s ease;

}


body.woocommerce-view-order
.woocommerce-table--order-details tbody tr:hover {

    background: #f9fbfd;

}


/* أسماء المنتجات */

body.woocommerce-view-order
.woocommerce-table--order-details .woocommerce-table__product-name {

    color: #173d68;

    font-weight: 700;

}


/* روابط المنتجات */

body.woocommerce-view-order
.woocommerce-table--order-details
.woocommerce-table__product-name a {

    color: #173d68;

    font-weight: 700;

    text-decoration: none;

}


body.woocommerce-view-order
.woocommerce-table--order-details
.woocommerce-table__product-name a:hover {

    color: #1596d1;

}


/* الكمية */

body.woocommerce-view-order
.woocommerce-table--order-details
.product-quantity {

    color: #1596d1;

    font-weight: 700;

}


/* ---------------------------------------------------------
   صفوف الإجمالي
   --------------------------------------------------------- */

body.woocommerce-view-order
.woocommerce-table--order-details tfoot th,

body.woocommerce-view-order
.woocommerce-table--order-details tfoot td {

    background: #f8fafc;

    font-weight: 700;

    color: #173d68;

}


/* المجموع */

body.woocommerce-view-order
.woocommerce-table--order-details
tr.order-total th,

body.woocommerce-view-order
.woocommerce-table--order-details
tr.order-total td {

    background: #eef8fd;

    color: #173d68;

    font-size: 18px;

    font-weight: 800;

}


/* آخر صف بدون خط */

body.woocommerce-view-order
.woocommerce-table--order-details tr:last-child th,

body.woocommerce-view-order
.woocommerce-table--order-details tr:last-child td {

    border-bottom: 0;

}


/* ---------------------------------------------------------
   وسيلة الدفع
   --------------------------------------------------------- */

body.woocommerce-view-order
.woocommerce-order-details
.payment-method {

    color: #1596d1;

    font-weight: 700;

}


/* ---------------------------------------------------------
   الملاحظة
   --------------------------------------------------------- */

body.woocommerce-view-order
.woocommerce-order-details
.woocommerce-table__product-name.product-name {

    line-height: 1.8;

}


/* ---------------------------------------------------------
   كارت بيانات العميل / عنوان الفاتورة
   --------------------------------------------------------- */

body.woocommerce-view-order
.woocommerce-customer-details {

    background: #ffffff;

    border: 1px solid #e3eaf1;

    border-radius: 18px;

    padding: 28px;

    margin-top: 28px;

    box-shadow: 0 10px 30px rgba(23, 61, 104, 0.07);

}


/* عنوان بيانات العميل */

body.woocommerce-view-order
.woocommerce-customer-details
.woocommerce-column__title {

    color: #173d68;

    font-size: 27px;

    font-weight: 800;

    margin: 0 0 20px;

    padding-bottom: 16px;

    border-bottom: 1px solid #e7edf3;

}


/* الخط البرتقالي */

body.woocommerce-view-order
.woocommerce-customer-details
.woocommerce-column__title::after {

    content: "";

    display: block;

    width: 55px;

    height: 4px;

    background: #f5a000;

    border-radius: 10px;

    margin-top: 12px;

}


/* بيانات العميل */

body.woocommerce-view-order
.woocommerce-customer-details address {

    background: #f8fafc;

    border: 1px solid #e5ebf1;

    border-radius: 12px;

    padding: 20px;

    color: #173d68;

    font-style: normal;

    line-height: 2;

}


/* ---------------------------------------------------------
   أيقونة البريد داخل العنوان
   --------------------------------------------------------- */

body.woocommerce-view-order
.woocommerce-customer-details
address .woocommerce-customer-details--email {

    color: #1596d1;

    font-weight: 600;

}


/* ---------------------------------------------------------
   الروابط داخل صفحة الطلب
   --------------------------------------------------------- */

body.woocommerce-view-order
.woocommerce-MyAccount-content a {

    transition: all 0.2s ease;

}


/* ---------------------------------------------------------
   الأجهزة اللوحية
   --------------------------------------------------------- */

@media (max-width: 900px) {

    body.woocommerce-view-order
    .woocommerce-order-details {

        padding: 22px;

    }


    body.woocommerce-view-order
    .woocommerce-customer-details {

        padding: 22px;

    }


    body.woocommerce-view-order
    .woocommerce-order-details__title,

    body.woocommerce-view-order
    .woocommerce-customer-details
    .woocommerce-column__title {

        font-size: 24px;

    }

}


/* ---------------------------------------------------------
   الموبايل
   --------------------------------------------------------- */

@media (max-width: 600px) {

    body.woocommerce-view-order
    .woocommerce-MyAccount-content > p:first-child {

        padding: 15px 16px;

        font-size: 14px;

        line-height: 1.8;

    }


    body.woocommerce-view-order
    .woocommerce-order-details {

        padding: 15px;

        border-radius: 14px;

    }


    body.woocommerce-view-order
    .woocommerce-order-details__title {

        font-size: 21px;

        margin-bottom: 16px;

    }


    body.woocommerce-view-order
    .woocommerce-table--order-details {

        font-size: 13px;

    }


    body.woocommerce-view-order
    .woocommerce-table--order-details th,

    body.woocommerce-view-order
    .woocommerce-table--order-details td {

        padding: 12px 9px;

    }


    body.woocommerce-view-order
    .woocommerce-table--order-details thead th {

        font-size: 13px;

    }


    body.woocommerce-view-order
    .woocommerce-table--order-details
    tr.order-total th,

    body.woocommerce-view-order
    .woocommerce-table--order-details
    tr.order-total td {

        font-size: 15px;

    }


    body.woocommerce-view-order
    .woocommerce-customer-details {

        padding: 15px;

        border-radius: 14px;

    }


    body.woocommerce-view-order
    .woocommerce-customer-details
    .woocommerce-column__title {

        font-size: 21px;

    }


    body.woocommerce-view-order
    .woocommerce-customer-details address {

        padding: 15px;

        font-size: 14px;

    }

}

/* =========================================================
   HOSTY STORE
   VIEW ORDER - FINAL DESIGN
   تفاصيل الطلب بشكل احترافي
   ========================================================= */


/* =========================================================
   1. الكارت الرئيسي لتفاصيل الطلب
   ========================================================= */

body.woocommerce-view-order
.woocommerce-order-details {

    background: #ffffff !important;

    border: 1px solid #e2e9f0 !important;

    border-radius: 18px !important;

    padding: 30px !important;

    margin: 0 0 30px !important;

    box-shadow: 0 10px 30px rgba(23, 61, 104, 0.07) !important;

    box-sizing: border-box;

}


/* =========================================================
   2. عنوان تفاصيل الطلب
   ========================================================= */

body.woocommerce-view-order
.woocommerce-order-details__title {

    color: #173d68 !important;

    font-size: 28px !important;

    font-weight: 800 !important;

    margin: 0 0 25px !important;

    padding: 0 0 17px !important;

    border-bottom: 1px solid #e5ebf1 !important;

    position: relative;

}


/* الخط البرتقالي */

body.woocommerce-view-order
.woocommerce-order-details__title::after {

    content: "";

    display: block;

    width: 58px;

    height: 4px;

    background: #f5a000;

    border-radius: 10px;

    position: absolute;

    right: 0;

    bottom: -2px;

}


/* =========================================================
   3. جدول تفاصيل الطلب
   ========================================================= */

body.woocommerce-view-order
.woocommerce-table--order-details {

    width: 100% !important;

    max-width: 100% !important;

    table-layout: fixed !important;

    border-collapse: separate !important;

    border-spacing: 0 !important;

    border: 1px solid #dfe7ee !important;

    border-radius: 14px !important;

    overflow: hidden;

    margin: 0 !important;

    background: #ffffff !important;

}


/* =========================================================
   4. عرض الأعمدة
   ========================================================= */

/* المنتج */

body.woocommerce-view-order
.woocommerce-table--order-details
th:first-child,

body.woocommerce-view-order
.woocommerce-table--order-details
td:first-child {

    width: 70% !important;

}


/* الإجمالي */

body.woocommerce-view-order
.woocommerce-table--order-details
th:last-child,

body.woocommerce-view-order
.woocommerce-table--order-details
td:last-child {

    width: 30% !important;

}


/* =========================================================
   5. جميع خلايا الجدول
   ========================================================= */

body.woocommerce-view-order
.woocommerce-table--order-details
th,

body.woocommerce-view-order
.woocommerce-table--order-details
td {

    padding: 17px 20px !important;

    border: 0 !important;

    border-bottom: 1px solid #e7edf2 !important;

    vertical-align: middle !important;

    box-sizing: border-box;

}


/* =========================================================
   6. رأس الجدول
   ========================================================= */

body.woocommerce-view-order
.woocommerce-table--order-details
thead th {

    background: #f3f8fb !important;

    color: #173d68 !important;

    font-size: 16px !important;

    font-weight: 800 !important;

}


/* =========================================================
   7. اسم المنتج
   ========================================================= */

body.woocommerce-view-order
.woocommerce-table--order-details
.woocommerce-table__product-name {

    color: #173d68 !important;

    font-size: 16px !important;

    font-weight: 700 !important;

    text-align: right !important;

}


/* رابط المنتج */

body.woocommerce-view-order
.woocommerce-table--order-details
.woocommerce-table__product-name a {

    color: #173d68 !important;

    text-decoration: none !important;

    font-weight: 700 !important;

}


body.woocommerce-view-order
.woocommerce-table--order-details
.woocommerce-table__product-name a:hover {

    color: #1596d1 !important;

}


/* =========================================================
   8. الكمية
   ========================================================= */

body.woocommerce-view-order
.woocommerce-table--order-details
.product-quantity {

    color: #1596d1 !important;

    font-weight: 800 !important;

}


/* =========================================================
   9. سعر المنتج
   ========================================================= */

body.woocommerce-view-order
.woocommerce-table--order-details
.woocommerce-table__product-total {

    color: #173d68 !important;

    font-weight: 700 !important;

    text-align: left !important;

    white-space: nowrap;

}


/* =========================================================
   10. صفوف المنتجات
   ========================================================= */

body.woocommerce-view-order
.woocommerce-table--order-details
tbody tr {

    background: #ffffff;

    transition: background 0.2s ease;

}


body.woocommerce-view-order
.woocommerce-table--order-details
tbody tr:hover {

    background: #f9fbfd;

}


/* =========================================================
   11. صفوف المجموع
   ========================================================= */

body.woocommerce-view-order
.woocommerce-table--order-details
tfoot th,

body.woocommerce-view-order
.woocommerce-table--order-details
tfoot td {

    padding: 15px 20px !important;

    background: #f8fafc !important;

    color: #173d68 !important;

    font-weight: 700 !important;

    border-bottom: 1px solid #e1e8ef !important;

}


/* اسم البند */

body.woocommerce-view-order
.woocommerce-table--order-details
tfoot th {

    text-align: right !important;

}


/* القيمة */

body.woocommerce-view-order
.woocommerce-table--order-details
tfoot td {

    text-align: left !important;

}


/* =========================================================
   12. الإجمالي النهائي
   ========================================================= */

body.woocommerce-view-order
.woocommerce-table--order-details
tfoot tr.order-total th,

body.woocommerce-view-order
.woocommerce-table--order-details
tfoot tr.order-total td {

    background: #eef8fd !important;

    color: #173d68 !important;

    font-size: 18px !important;

    font-weight: 800 !important;

    border-bottom: 0 !important;

}


/* =========================================================
   13. وسيلة الدفع
   ========================================================= */

body.woocommerce-view-order
.woocommerce-table--order-details
tfoot tr:nth-last-child(1) th,

body.woocommerce-view-order
.woocommerce-table--order-details
tfoot tr:nth-last-child(1) td {

    background: #ffffff !important;

}


/* =========================================================
   14. إزالة آخر خط
   ========================================================= */

body.woocommerce-view-order
.woocommerce-table--order-details
tr:last-child th,

body.woocommerce-view-order
.woocommerce-table--order-details
tr:last-child td {

    border-bottom: 0 !important;

}


/* =========================================================
   15. كارت عنوان الفاتورة
   ========================================================= */

body.woocommerce-view-order
.woocommerce-customer-details {

    background: #ffffff !important;

    border: 1px solid #e2e9f0 !important;

    border-radius: 18px !important;

    padding: 30px !important;

    margin-top: 30px !important;

    box-shadow: 0 10px 30px rgba(23, 61, 104, 0.07) !important;

}


/* عنوان الفاتورة */

body.woocommerce-view-order
.woocommerce-customer-details
.woocommerce-column__title {

    color: #173d68 !important;

    font-size: 27px !important;

    font-weight: 800 !important;

    margin: 0 0 22px !important;

    padding: 0 0 17px !important;

    border-bottom: 1px solid #e5ebf1 !important;

    position: relative;

}


/* الخط البرتقالي */

body.woocommerce-view-order
.woocommerce-customer-details
.woocommerce-column__title::after {

    content: "";

    display: block;

    width: 58px;

    height: 4px;

    background: #f5a000;

    border-radius: 10px;

    position: absolute;

    right: 0;

    bottom: -2px;

}


/* =========================================================
   16. بيانات العنوان
   ========================================================= */

body.woocommerce-view-order
.woocommerce-customer-details
address {

    background: #f7fafc !important;

    border: 1px solid #e3eaf0 !important;

    border-radius: 13px !important;

    padding: 20px 22px !important;

    margin: 0 !important;

    color: #173d68 !important;

    font-style: normal !important;

    line-height: 2 !important;

}


/* البريد */

body.woocommerce-view-order
.woocommerce-customer-details
address .woocommerce-customer-details--email {

    color: #1596d1 !important;

    font-weight: 600;

}


/* =========================================================
   17. رسالة حالة الطلب
   ========================================================= */

body.woocommerce-view-order
.woocommerce-MyAccount-content > p:first-child {

    background: #ffffff !important;

    border: 1px solid #e2e9f0 !important;

    border-top: 3px solid #1596d1 !important;

    border-radius: 14px !important;

    padding: 16px 22px !important;

    margin: 0 0 25px !important;

    color: #173d68 !important;

    line-height: 1.9 !important;

    box-shadow: 0 8px 25px rgba(23, 61, 104, 0.05);

}


/* حالة الطلب */

body.woocommerce-view-order
.woocommerce-MyAccount-content > p:first-child mark {

    background: transparent !important;

    color: #1596d1 !important;

    font-weight: 800;

}


/* =========================================================
   18. الموبايل
   ========================================================= */

@media (max-width: 600px) {

    body.woocommerce-view-order
    .woocommerce-order-details {

        padding: 15px !important;

        border-radius: 14px !important;

    }


    body.woocommerce-view-order
    .woocommerce-order-details__title {

        font-size: 22px !important;

        margin-bottom: 18px !important;

    }


    body.woocommerce-view-order
    .woocommerce-table--order-details {

        font-size: 13px !important;

    }


    body.woocommerce-view-order
    .woocommerce-table--order-details
    th,

    body.woocommerce-view-order
    .woocommerce-table--order-details
    td {

        padding: 13px 10px !important;

    }


    body.woocommerce-view-order
    .woocommerce-table--order-details
    th:first-child,

    body.woocommerce-view-order
    .woocommerce-table--order-details
    td:first-child {

        width: 65% !important;

    }


    body.woocommerce-view-order
    .woocommerce-table--order-details
    th:last-child,

    body.woocommerce-view-order
    .woocommerce-table--order-details
    td:last-child {

        width: 35% !important;

    }


    body.woocommerce-view-order
    .woocommerce-table--order-details
    thead th {

        font-size: 13px !important;

    }


    body.woocommerce-view-order
    .woocommerce-table--order-details
    tfoot th,

    body.woocommerce-view-order
    .woocommerce-table--order-details
    tfoot td {

        padding: 13px 10px !important;

    }


    body.woocommerce-view-order
    .woocommerce-table--order-details
    tfoot tr.order-total th,

    body.woocommerce-view-order
    .woocommerce-table--order-details
    tfoot tr.order-total td {

        font-size: 15px !important;

    }


    body.woocommerce-view-order
    .woocommerce-customer-details {

        padding: 15px !important;

        border-radius: 14px !important;

    }


    body.woocommerce-view-order
    .woocommerce-customer-details
    .woocommerce-column__title {

        font-size: 22px !important;

    }


    body.woocommerce-view-order
    .woocommerce-customer-details
    address {

        padding: 15px !important;

        font-size: 14px !important;

    }

}

/* =========================================================
   HOSTY STORE
   تنسيق صورة المنتج داخل تفاصيل الطلب
   ========================================================= */


/* حاوية المنتج */

body.woocommerce-view-order
.hosty-order-product {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 16px;

    direction: rtl;

}


/* صورة المنتج */

body.woocommerce-view-order
.hosty-order-product-image {

    width: 72px !important;

    height: 72px !important;

    min-width: 72px;

    object-fit: cover;

    border-radius: 12px;

    border: 1px solid #e1e8ee;

    background: #ffffff;

    padding: 4px;

    box-sizing: border-box;

}


/* اسم المنتج */

body.woocommerce-view-order
.hosty-order-product-name {

    display: inline-block;

    color: #173d68;

    font-size: 16px;

    font-weight: 700;

    line-height: 1.7;

}


/* عند المرور على المنتج */

body.woocommerce-view-order
.woocommerce-table--order-details
tbody tr:hover
.hosty-order-product-image {

    border-color: #1596d1;

}


/* =========================================================
   الموبايل
   ========================================================= */

@media (max-width: 600px) {

    body.woocommerce-view-order
    .hosty-order-product {

        gap: 10px;

    }

    body.woocommerce-view-order
    .hosty-order-product-image {

        width: 55px !important;

        height: 55px !important;

        min-width: 55px;

        border-radius: 9px;

        padding: 3px;

    }

    body.woocommerce-view-order
    .hosty-order-product-name {

        font-size: 13px;

    }

}

/* =========================================================
   HOSTY STORE
   تفاصيل الطلب - المنتج والصورة والكمية في صف واحد
   ========================================================= */

/* خلية المنتج بالكامل */
body.woocommerce-view-order
.woocommerce-table--order-details
.woocommerce-table__product-name {

    display: flex !important;

    align-items: center !important;

    flex-direction: row !important;

    gap: 16px !important;

    min-width: 0;

    white-space: nowrap;

    vertical-align: middle;

}


/* حاوية الصورة + اسم المنتج */
body.woocommerce-view-order
.hosty-order-product {

    display: inline-flex !important;

    align-items: center !important;

    flex-direction: row !important;

    gap: 14px !important;

    flex: 0 0 auto;

    margin: 0 !important;

    padding: 0 !important;

}


/* صورة المنتج */
body.woocommerce-view-order
.hosty-order-product-image {

    width: 72px !important;

    height: 72px !important;

    min-width: 72px !important;

    max-width: 72px !important;

    object-fit: cover;

    display: block !important;

    border-radius: 12px;

    border: 1px solid #e1e8ee;

    background: #fff;

    padding: 4px;

    box-sizing: border-box;

    margin: 0 !important;

}


/* اسم المنتج */
body.woocommerce-view-order
.hosty-order-product-name {

    display: inline-block !important;

    flex: 0 0 auto;

    color: #173d68;

    font-size: 16px;

    font-weight: 700;

    line-height: 1.5;

    margin: 0 !important;

    padding: 0 !important;

}


/* الكمية × 1 */
body.woocommerce-view-order
.woocommerce-table--order-details
.product-quantity {

    display: inline-block !important;

    flex: 0 0 auto;

    margin: 0 !important;

    padding: 0 !important;

    color: #1596d1;

    font-size: 15px;

    font-weight: 700;

    line-height: 1;

    white-space: nowrap;

}


/* منع أي نزول للكمية لسطر جديد */
body.woocommerce-view-order
.woocommerce-table--order-details
.product-quantity strong {

    display: inline !important;

}


/* =========================================================
   تحسين شكل صف المنتج
   ========================================================= */

body.woocommerce-view-order
.woocommerce-table--order-details
tbody tr:first-child td {

    vertical-align: middle !important;

}


body.woocommerce-view-order
.woocommerce-table--order-details
tbody tr td {

    vertical-align: middle !important;

}


/* =========================================================
   الموبايل
   ========================================================= */

@media (max-width: 600px) {

    body.woocommerce-view-order
    .woocommerce-table--order-details
    .woocommerce-table__product-name {

        gap: 9px !important;

        white-space: normal;

    }


    body.woocommerce-view-order
    .hosty-order-product {

        gap: 9px !important;

    }


    body.woocommerce-view-order
    .hosty-order-product-image {

        width: 55px !important;

        height: 55px !important;

        min-width: 55px !important;

        max-width: 55px !important;

        border-radius: 9px;

        padding: 3px;

    }


    body.woocommerce-view-order
    .hosty-order-product-name {

        font-size: 14px;

    }


    body.woocommerce-view-order
    .woocommerce-table--order-details
    .product-quantity {

        font-size: 13px;

    }

}

/* =========================================================
   HOSTY FIX - CATEGORY PRODUCTS AJAX GRID
   Keep AJAX-loaded products inside the same grid as the
   server-rendered first category.
========================================================= */

.shop-categories-products .category-products-panel {
    width: 100%;
}

.shop-categories-products .category-products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100%;
    box-sizing: border-box;
}

.shop-categories-products .category-products .product-card,
.shop-categories-products .category-products .hosty-product-card {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

@media (max-width: 991px) {
    .shop-categories-products .category-products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 15px !important;
    }
}

@media (max-width: 576px) {
    .shop-categories-products .category-products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
}


/* =========================================================
   HOSTY HEADER CART
========================================================= */

.hosty-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}


/* أيقونة السلة */

.hosty-header-cart {
    position: relative;

    width: 42px;
    height: 42px;

    border: 2px solid #e5e7eb;
    border-radius: 25%;

    background: #fff;
    color: var(--primary-color);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 19px;

    text-decoration: none !important;

    transition: .25s ease;
        margin:5px;

}


/* Hover */

.hosty-header-cart:hover {
    background: var(--primary-color);
    color: #fff;
}


/* عدد المنتجات */

.hosty-cart-count {
    position: absolute;

    top: -7px;
    left: -7px;

    min-width: 19px;
    height: 19px;

    padding: 0 5px;

    border-radius: 999px;

    background: #f4a100;
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;

    line-height: 1;

    box-sizing: border-box;

    border: 2px solid #fff;

    transition:
        opacity .2s ease,
        transform .2s ease;
}


/* إخفاء الرقم عندما تكون السلة فارغة */

.hosty-cart-count.is-empty {
    opacity: 0;
    transform: scale(.7);

    pointer-events: none;
}


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

@media (max-width: 768px) {

    .hosty-header-actions {
        margin-right: auto;
        margin-left: 12px;

        gap: 8px;
    }

    .hosty-header-cart {
        width: 40px;
        height: 40px;

        font-size: 17px;
    }

}


/* شاشات الموبايل الصغيرة */

@media (max-width: 400px) {

    .hosty-header-actions {
        margin-left: 8px;
        gap: 6px;
    }

    .hosty-header-cart {
        width: 38px;
        height: 38px;
    }

}

/* =========================================================
   HOSTY HEADER ACCOUNT
========================================================= */

.hosty-header-account {
    position: relative;

    width: 42px;
    height: 42px;

    border: 2px solid #e5e7eb;
    border-radius: 25%;

    background: #fff;
    color: var(--primary-color);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 19px;

    text-decoration: none !important;

    transition: .25s ease;
        margin:5px;

}


/* Hover */

.hosty-header-account:hover {
    background: var(--primary-color);
    color: #fff;
}


/* =========================================================
   HEADER ACTIONS
========================================================= */

.hosty-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}


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

@media (max-width: 768px) {

    .hosty-header-actions {
        margin-right: auto;
        margin-left: 15px;

        gap: 8px;
    }

    .hosty-header-account {
        width: 40px;
        height: 40px;

        font-size: 17px;
    }

}


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

@media (max-width: 400px) {

    .hosty-header-actions {
        margin-left: 12px;
        gap: 6px;
    }

    .hosty-header-account {
        width: 38px;
        height: 38px;
    }

}

/* =========================================================
   HOSTY PRODUCT VARIATIONS
   اختيار المقاس بشكل احترافي
========================================================= */

.hosty-product-info .variations_form {
    width: 100%;
}

.hosty-product-info .variations {
    width: 100%;
    margin: 20px 0 10px;
    border: 0 !important;
}

.hosty-product-info .variations tbody,
.hosty-product-info .variations tr,
.hosty-product-info .variations td {
    display: block;
    width: 100%;
    padding: 0 !important;
    border: 0 !important;
}

.hosty-product-info .variations .label {
    margin-bottom: 12px;
}

.hosty-product-info .variations .label label {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 12px;
}


/* إخفاء القائمة الأصلية بصريًا */

.hosty-product-info .variations .value select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* حاوية الاختيارات */

.hosty-variation-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    margin-bottom: 18px;
}


/* زر المقاس */

.hosty-variation-button {
    position: relative;

    flex: 1 1 0;
    min-width: 130px;

    padding: 15px 18px;

    background: #fff;
    border: 2px solid #dfe5eb;
    border-radius: 12px;

    color: #17324d;

    font-family: inherit;
    font-size: 17px;
    font-weight: 700;

    cursor: pointer;

    text-align: center;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


/* السعر داخل الزر */

.hosty-variation-button-price {
    display: block;
    margin-top: 5px;

    color: #0d4f8b;

    font-size: 15px;
    font-weight: 700;
}


/* Hover */

.hosty-variation-button:hover {
    border-color: #0d4f8b;
    transform: translateY(-2px);
}


/* الاختيار النشط */

.hosty-variation-button.active {
    background: #0d4f8b;
    border-color: #0d4f8b;
    color: #fff;

    box-shadow: 0 5px 15px rgba(13, 79, 139, .18);
}

.hosty-variation-button.active .hosty-variation-button-price {
    color: #fff;
}


/* حالة عدم التوفر */

.hosty-variation-button.disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}


/* إخفاء رابط إلغاء الاختيار */

.hosty-product-info .reset_variations {
    display: none !important;
}


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

@media (max-width: 576px) {

    .hosty-variation-buttons {
        gap: 10px;
    }

    .hosty-variation-button {
        min-width: 0;
        padding: 13px 10px;
        font-size: 16px;
    }

    .hosty-variation-button-price {
        font-size: 14px;
    }

}

/* =========================================================
   HOSTY - VARIATION FINAL POLISH
========================================================= */

/* إخفاء السعر المكرر الذي يظهر داخل نموذج الـ Variation */
.single-product .hosty-product-info .single_variation .price {
    display: none !important;
}

/* تنسيق منطقة اختيار المقاس */
.single-product .hosty-product-info .hosty-variation-buttons {
    margin-top: 10px;
    margin-bottom: 20px;
}

/* توحيد شكل أزرار المقاسات */
.single-product .hosty-product-info .hosty-variation-button {
    min-height: 92px;
}

/* السعر الرئيسي */
.single-product .hosty-product-info > .hosty-product-price {
    min-height: 55px;
    display: flex;
    align-items: center;
}

/* إخفاء السعر القديم/المكرر داخل نطاق السعر عند اختيار Variation */
.single-product .hosty-product-info > .hosty-product-price .price del {
    display: none !important;
}

/* =========================================================
   HOSTY - ترتيب اختيارات المقاس بجوار بعضها
========================================================= */

.single-product .hosty-product-info .hosty-variation-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
}

.single-product .hosty-product-info .hosty-variation-button {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
}


/* على الشاشات الصغيرة أيضًا */
@media (max-width: 576px) {
    .single-product .hosty-product-info .hosty-variation-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* =========================================================
   HOSTY - SMART VARIATION BUTTONS
========================================================= */

/* حاوية الاختيارات */
.single-product .hosty-product-info .hosty-variation-buttons {
    display: grid !important;

    /* 3 اختيارات في الصف */
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 10px !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 10px 0 20px !important;

    box-sizing: border-box !important;
}


/* أزرار المقاسات */
.single-product .hosty-product-info .hosty-variation-button {
    width: 100% !important;
    min-width: 0 !important;

    min-height: 90px !important;

    padding: 14px 8px !important;

    box-sizing: border-box !important;

    font-size: 17px !important;
}


/* اسم المقاس */
.single-product .hosty-product-info .hosty-variation-button-name {
    display: block;
    line-height: 1.4;
}


/* السعر داخل الزر */
.single-product .hosty-product-info .hosty-variation-button-price {
    display: block;
    margin-top: 6px;

    font-size: 14px !important;
    line-height: 1.3;
}


/* =========================================================
   موبايل
========================================================= */

@media (max-width: 576px) {

    .single-product .hosty-product-info .hosty-variation-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 8px !important;
    }

    .single-product .hosty-product-info .hosty-variation-button {
        min-height: 82px !important;

        padding: 11px 6px !important;

        font-size: 15px !important;
    }

    .single-product .hosty-product-info .hosty-variation-button-price {
        font-size: 13px !important;
    }

}

/* =========================================================
   HOSTY - VARIABLE PRODUCT FINAL LAYOUT
========================================================= */

/* نموذج المنتج المتغير */
.single-product .hosty-product-info form.variations_form.cart {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 20px !important;
}


/* عنوان المقاس */
.single-product .hosty-product-info
form.variations_form.cart .variations .label {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin-bottom: 12px !important;
}


/* منطقة القيمة */
.single-product .hosty-product-info
form.variations_form.cart .variations .value {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}


/* حاوية المقاسات */
.single-product .hosty-product-info
form.variations_form.cart
.hosty-variation-buttons {
    display: grid !important;

    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 10px !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 10px 0 25px !important;

    box-sizing: border-box !important;
}


/* أزرار المقاسات */
.single-product .hosty-product-info
form.variations_form.cart
.hosty-variation-button {
    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-width: 0 !important;

    min-height: 90px !important;

    padding: 12px 8px !important;

    box-sizing: border-box !important;
}


/* اسم المقاس */
.single-product .hosty-product-info
.hosty-variation-button-name {
    display: block !important;

    font-size: 17px !important;
    font-weight: 700 !important;

    line-height: 1.4 !important;
}


/* السعر داخل المقاس */
.single-product .hosty-product-info
.hosty-variation-button-price {
    display: block !important;

    margin-top: 6px !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    line-height: 1.3 !important;
}


/* =========================================================
   الكمية + زر السلة
========================================================= */

.single-product .hosty-product-info
form.variations_form.cart
.woocommerce-variation-add-to-cart {
    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    gap: 10px !important;

    width: 100% !important;

    margin-top: 10px !important;
}


/* الكمية */
.single-product .hosty-product-info
form.variations_form.cart
.woocommerce-variation-add-to-cart .quantity {
    flex: 0 0 100px !important;

    width: 100px !important;

    margin: 0 !important;
}


/* حقل الكمية */
.single-product .hosty-product-info
form.variations_form.cart
.woocommerce-variation-add-to-cart
.quantity input {
    width: 100% !important;

    height: 52px !important;

    text-align: center !important;

    box-sizing: border-box !important;
}


/* زر إضافة إلى السلة */
.single-product .hosty-product-info
form.variations_form.cart
.woocommerce-variation-add-to-cart
.single_add_to_cart_button {
    flex: 1 1 auto !important;

    width: auto !important;

    height: 52px !important;

    margin: 0 !important;

    white-space: nowrap !important;
}


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

@media (max-width: 576px) {

    .single-product .hosty-product-info
    form.variations_form.cart
    .hosty-variation-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 8px !important;
    }


    .single-product .hosty-product-info
    form.variations_form.cart
    .hosty-variation-button {
        min-height: 82px !important;

        padding: 10px 6px !important;
    }


    .single-product .hosty-product-info
    form.variations_form.cart
    .woocommerce-variation-add-to-cart {
        gap: 8px !important;
    }


    .single-product .hosty-product-info
    form.variations_form.cart
    .woocommerce-variation-add-to-cart
    .quantity {
        flex: 0 0 85px !important;

        width: 85px !important;
    }

}


/* ==========================================
   توسيط عنوان وسعر المنتج داخل كارت المتجر
   ========================================== */

.hosty-product-card .hosty-product-body {
    text-align: center;
}

.hosty-product-card .hosty-product-title {
    text-align: center;
}

.hosty-product-card .hosty-product-price {
    text-align: center;
}