/* Styles for resources/views/resources/views/frontend/index.blade.php — moved out of the view's inline <style> blocks. */

/* قاعدة عامة تمنع أي تمدد أفقي غير مقصود */
html, body { overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }

/* عناوين الأقسام */
.section-title{
  position: relative; margin-bottom: 30px; padding-bottom: 15px;
}
.section-title::after{
  content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:60px; height:3px; background: var(--bs-accent);
}
.rtl .section-title::after{ right:50%; left:auto; transform:translateX(50%); }

@keyframes featuredPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(204, 0, 0, 0.2);
    }
    50% {
        transform: scale(1.08);
        box-shadow: 0 6px 18px rgba(204, 0, 0, 0.3);
    }
}

/* زر عرض جميع المنتجات - حديث ومميز */
.btn-view-all-products {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 48px;
    background: linear-gradient(135deg, #103a67 0%, #0056b3 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 8px 24px rgba(204, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
}

.btn-view-all-products::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
    z-index: 0;
}

.btn-view-all-products:active::before {
    width: 400px;
    height: 400px;
}

.btn-text {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-view-all-products:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 32px rgba(204, 0, 0, 0.4);
    background: linear-gradient(135deg, #0056b3 0%, #103a67 100%);
}

.btn-view-all-products:active {
    transform: translateY(-1px) scale(0.99);
}

/* == News == */
.news-card{
  border:1px solid #ddd; border-radius:8px; overflow:hidden; margin-bottom:20px; height:100%;
  transition: transform .25s ease, box-shadow .25s ease;
}

.news-card:hover{ transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,.1); }
.news-img{
  width:100%; height: 220px; object-fit: contain; object-position:center; background:#f8f9fa; padding:10px;
}
.news-content{ padding:15px; }
.news-date{ color:#777; font-size:.85rem; }

.certificates-slider{
  display:flex; gap:20px; padding:10px 0; overflow-x:auto; scroll-behavior:smooth; justify-content:center; align-items:center; flex-wrap:nowrap;
}
.certificate-item{ min-width:120px; max-width:150px; margin:0 10px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; }
.certificate-item img{
  width:90px; height:90px; object-fit: contain; background:#fff; padding:8px; border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,.1); filter: grayscale(.3); transition: transform .25s ease, filter .25s ease;
}
.certificate-item:hover img{ filter: grayscale(0); transform: scale(1.08); }

.img-container{ background:#f8f9fa; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.img-error{
  background:#f8f9fa url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23dee2e6"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>') center/50px no-repeat;
  display:flex; align-items:center; justify-content:center; color:#6c757d; font-size:12px;
}

/* Responsive tweaks */
@media (max-width: 576px){
  .news-img{ height:160px; padding:8px; }

}

/* Certificate logos on the home page: a strip with no cards behind the logos.
   See the note above .cert-marquee in frontend/index.blade.php.

   Static by default (and when every logo fits, or motion is reduced): one
   centred row that wraps. The home page script adds .is-moving when the row
   is wider than the strip; the set is drawn twice, so sliding the track by
   exactly one set (50%) loops without a seam. A transform animation, not a
   scroll position, so it runs on the compositor and stays smooth. */
.cert-marquee {
    overflow: hidden;
    padding-block: 1rem;
}

.cert-marquee-track {
    display: flex;
    justify-content: center;
}

.cert-marquee-set {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem 3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cert-marquee-item {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 11rem;
}

.cert-marquee-logo {
    display: block;
    width: 100%;
    height: 6rem;
    object-fit: contain;
}

.cert-marquee [data-cert-copy] {
    display: none;
}

.cert-marquee.is-moving {
    /* Logos fade in and out at the edges instead of being cut off. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.cert-marquee.is-moving .cert-marquee-track {
    justify-content: flex-start;
    width: max-content;
    animation: cert-marquee var(--cert-marquee-duration, 30s) linear infinite;
    will-change: transform;
}

.cert-marquee.is-moving .cert-marquee-set {
    flex-wrap: nowrap;
    /* The space after the last logo, so the copy follows at the same gap and
       one set plus its gap is exactly half the track. */
    padding-inline-end: 3rem;
}

.cert-marquee.is-moving [data-cert-copy] {
    display: flex;
}

/* In Arabic the row runs from the right, so the strip drifts the other way. */
[dir="rtl"] .cert-marquee.is-moving .cert-marquee-track {
    animation-name: cert-marquee-rtl;
}

/* Paused while held on a touch screen, under a mouse, or with keyboard focus. */
.cert-marquee.is-moving.is-held .cert-marquee-track,
.cert-marquee.is-moving:focus-within .cert-marquee-track {
    animation-play-state: paused;
}

@media (hover: hover) {
    .cert-marquee.is-moving:hover .cert-marquee-track {
        animation-play-state: paused;
    }
}

@keyframes cert-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes cert-marquee-rtl {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .cert-marquee.is-moving .cert-marquee-track {
        animation: none;
    }
}

@media (max-width: 640px) {
    .cert-marquee-set {
        gap: 1.5rem 2rem;
    }

    .cert-marquee.is-moving .cert-marquee-set {
        padding-inline-end: 2rem;
    }

    .cert-marquee-item {
        width: 8.5rem;
    }

    .cert-marquee-logo {
        height: 4.5rem;
    }
}