/* Frontend Carousel Styles – Custom Responsive Carousel v1.1 */
/* Typography (font-family, font-size, font-weight, line-height, letter-spacing,
   text-transform, color) is intentionally NOT set here so that Elementor /
   Astra / the active theme governs all text styling.  The only exceptions are:
     - UI-chrome elements fully owned by this plugin (nav arrows, swipe hint,
       lightbox controls, error notices) where the theme has no say.
     - `text-decoration:none` on links to suppress browser underlines on cards.
     - `color:#fff` inside arrow/overlay elements that sit on dark backgrounds.  */

:root{
    --crc-pub-radius:8px;
    --crc-pub-transition:all 0.25s ease;
    --crc-pub-border:#e5e7eb;
}

/* ── WRAPPER ─────────────────────────────────────────────────────── */
.crc-carousel-wrapper{position:relative;width:100%;overflow:hidden;padding-bottom:40px}
.crc-swiper-container{width:100%;overflow:hidden}

/* ── SLIDES ──────────────────────────────────────────────────────── */
.crc-slide{height:auto}
.crc-item{display:flex;flex-direction:column;height:100%;overflow:hidden;
          transition:var(--crc-pub-transition);background:#fff;position:relative}
.crc-item:hover{transform:translateY(-3px)}

/* ── IMAGE ───────────────────────────────────────────────────────── */
.crc-item-image{position:relative;overflow:hidden;width:100%}
.crc-item-image img{
    display:block;width:100%;
    object-fit:cover;
    transition:transform 0.4s ease;
}
.crc-item:hover .crc-item-image img{transform:scale(1.04)}

/* ── CONTENT AREA ────────────────────────────────────────────────── */
.crc-item-content{padding:14px 16px 16px;flex:1;display:flex;flex-direction:column;gap:8px}

/* Title: no font-size, font-weight, line-height, color — theme controls those */
.crc-item-title{margin:0}

/* Excerpt: no font-size, color — theme controls those */
.crc-item-excerpt{margin:0}

/* Button: structural only; color/size set per-carousel via inline PHP styles */
.crc-read-more{
    display:inline-block;
    margin-top:auto;
    text-decoration:none;
    transition:var(--crc-pub-transition);
}

/* Legacy WooCommerce class — keep for backwards compat, structural only */
.crc-buy-now{
    display:inline-block;
    margin-top:auto;
    text-decoration:none;
    padding:8px 18px;
    border-radius:4px;
    text-align:center;
    transition:var(--crc-pub-transition);
}

/* ── SHADOWS ─────────────────────────────────────────────────────── */
.crc-shadow-light .crc-item{box-shadow:0 2px 12px rgba(0,0,0,.08)}
.crc-shadow-heavy .crc-item{box-shadow:0 8px 32px rgba(0,0,0,.18)}

/* ── BADGE / LABEL SYSTEM ────────────────────────────────────────── */
/* Badges are plugin-chrome (not content), so font-size/weight stay */
.crc-badge-label{
    position:absolute;z-index:5;line-height:1;
    pointer-events:none;white-space:nowrap;
}
/* Positions */
.crc-badge-pos-top-left    {top:10px;left:10px}
.crc-badge-pos-top-right   {top:10px;right:10px}
.crc-badge-pos-bottom-left {bottom:10px;left:10px}
.crc-badge-pos-bottom-right{bottom:10px;right:10px}
/* Shapes */
.crc-badge-shape-pill  {padding:4px 10px;border-radius:20px}
.crc-badge-shape-square{padding:4px 8px;border-radius:3px}
.crc-badge-shape-ribbon{
    padding:4px 12px 4px 8px;border-radius:0 3px 3px 0;
    clip-path:polygon(0 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,0 100%);
}

/* ── NAVIGATION ARROWS ───────────────────────────────────────────── */
/* Arrows are plugin-chrome; font-size here controls the icon glyph size only */
.crc-nav-prev,.crc-nav-next{
    --crc-ctrl-color:#2b7a8b;
    position:absolute;top:50%;transform:translateY(-50%);
    z-index:10;cursor:pointer;border:none;background:transparent;
    padding:0;line-height:1;margin-top:-20px
}
.crc-nav-prev{left:0}.crc-nav-next{right:0}
.crc-arrow-classic{
    width:38px;height:38px;font-size:20px;color:var(--crc-ctrl-color);
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.92);border-radius:50%;
    box-shadow:0 2px 8px rgba(0,0,0,.15);transition:var(--crc-pub-transition);
    border:1px solid var(--crc-pub-border)!important}
.crc-arrow-classic:hover{background:var(--crc-ctrl-color);color:#fff}
.crc-arrow-chevron{
    width:32px;height:32px;font-size:36px;color:var(--crc-ctrl-color);
    display:flex;align-items:center;justify-content:center;
    transition:var(--crc-pub-transition);opacity:.8}
.crc-arrow-chevron:hover{opacity:1}
.crc-arrow-rounded{
    width:44px;height:44px;font-size:18px;color:#fff;
    display:flex;align-items:center;justify-content:center;
    background:var(--crc-ctrl-color);border-radius:50%;
    box-shadow:0 4px 16px rgba(0,0,0,.2);transition:var(--crc-pub-transition)}
.crc-arrow-rounded:hover{opacity:.9;transform:translateY(-50%) scale(1.08)}

/* ── SWIPE HINT ──────────────────────────────────────────────────── */
/* Plugin-chrome UI; font-size/weight/color stay */
.crc-swipe-hint{
    display:none;
    align-items:center;justify-content:center;gap:8px;
    position:absolute;bottom:46px;left:50%;transform:translateX(-50%);
    background:rgba(0,0,0,.52);color:#fff;
    padding:5px 16px;border-radius:20px;
    font-size:12px;font-weight:600;
    pointer-events:none;z-index:20;
    transition:opacity .5s ease;
}
.crc-swipe-hint.crc-hint-visible{display:flex}
.crc-swipe-hint.crc-hint-fade{opacity:0}
.crc-swipe-hint-arrow{font-size:14px}
@keyframes crcPulseLeft {0%,100%{transform:translateX(0)}50%{transform:translateX(-5px)}}
@keyframes crcPulseRight{0%,100%{transform:translateX(0)}50%{transform:translateX( 5px)}}
.crc-swipe-hint-left {animation:crcPulseLeft  1.5s ease-in-out infinite}
.crc-swipe-hint-right{animation:crcPulseRight 1.5s ease-in-out infinite}

/* ── PAGINATION ──────────────────────────────────────────────────── */
/* fraction label — plugin-chrome so font-size/weight stay */
.crc-pagination.swiper-pagination{bottom:6px!important}
.crc-carousel-wrapper .swiper-pagination-bullet{width:8px;height:8px;background:#d1d5db;opacity:1;transition:var(--crc-pub-transition)}
.crc-carousel-wrapper .swiper-pagination-bullet-active{width:20px;border-radius:4px;background:#2b7a8b}
.crc-carousel-wrapper .swiper-pagination-fraction{font-size:14px;font-weight:700;color:#6b7280}

/* ── LIGHTBOX ────────────────────────────────────────────────────── */
/* All lightbox elements are plugin-chrome overlays on a dark background;
   color:#fff and font-size are safe here */
.crc-lightbox{display:none;position:fixed;inset:0;z-index:99999;align-items:center;justify-content:center}
.crc-lightbox[aria-hidden="false"]{display:flex}
.crc-lightbox-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.9);cursor:zoom-out}
.crc-lightbox-inner{position:relative;z-index:1;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;align-items:center;gap:12px}
.crc-lightbox-img{max-width:100%;max-height:80vh;object-fit:contain;border-radius:4px;
    box-shadow:0 20px 60px rgba(0,0,0,.5);animation:crcLightboxIn .3s ease}
@keyframes crcLightboxIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.crc-lightbox-caption{color:#d1d5db;font-size:14px;margin:0;text-align:center}
.crc-lightbox-close{
    position:absolute;top:-48px;right:0;width:36px;height:36px;
    background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;
    border-radius:50%;font-size:16px;cursor:pointer;display:flex;align-items:center;
    justify-content:center;transition:var(--crc-pub-transition)}
.crc-lightbox-close:hover{background:rgba(255,255,255,.25)}

/* ── ERROR / EMPTY NOTICES ───────────────────────────────────────── */
/* Plugin-chrome notices; font-size stays */
.crc-error,.crc-no-items{padding:16px;background:#fef2f2;border:1px solid #fecaca;border-radius:6px;color:#dc2626;font-size:14px}

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@media(max-width:768px){
    .crc-nav-prev{left:-4px}.crc-nav-next{right:-4px}
    .crc-arrow-classic,.crc-arrow-rounded{width:30px;height:30px;font-size:15px}
    .crc-nav-prev,.crc-nav-next{opacity:.5}
}
@media(max-width:480px){
    .crc-item-image img{min-height:120px}
}

/* ── WOOCOMMERCE FULL-WIDTH BREAKOUT ─────────────────────────────── */
.crc-woo-fullwidth-wrap{
    position:relative;
    left:50%;right:50%;
    margin-left:-50vw;margin-right:-50vw;
    width:100vw;
    padding:0 20px;
    box-sizing:border-box;
}