/**
 * Sabeon Stories - front-end story bar styles.
 *
 * Extracted verbatim from the pre-2.0 inline <style> block so visual
 * output is byte-for-byte identical after the upgrade. Loaded only when
 * a [storybar] shortcode actually renders on the page (see
 * WPSB\Core\Assets::maybe_enqueue_frontend()).
 */

.containter-story{display:flex;overflow-x:auto;overflow-y:hidden;gap:14px;margin:0;padding:0;background:transparent;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
.containter-story .aside-story{margin:0;padding:0;}
.story p{margin-bottom:0;}
.aside-story{display:flex;gap:5px;width:100%;align-items:flex-start;}
.story{flex:0 0 auto;text-align:center;scroll-snap-align:start;cursor:pointer;display:flex;flex-direction:column;align-items:center;}
.story-svg-img-wrapper{position:relative;display:inline-block;}
.story-svg-img-wrapper picture{display:block;}
.story-svg-img-wrapper img{object-fit:cover;box-sizing:border-box;border:2px solid transparent;transition:transform .3s ease,border-color .3s ease;}
@media (prefers-reduced-motion: reduce){
	.story-svg-img-wrapper img{transition:none;}
	.story:hover img{transform:none !important;}
}
.story-badge{position:absolute;background:var(--wpsb-ring-color,#d2691e);color:#fff;font-size:10px;font-weight:700;line-height:1;padding:4px 7px;border-radius:999px;box-shadow:0 1px 3px rgba(0,0,0,.3);white-space:nowrap;pointer-events:none;}
.story-badge-top-right{top:-6px;right:-6px;}
.story-badge-top-left{top:-6px;left:-6px;}
.story-badge-bottom-right{bottom:-6px;right:-6px;}
.story-badge-bottom-left{bottom:-6px;left:-6px;}
.story p{margin-top:5px;font-weight:500;color:#444;line-height:1.25;}
.story p.gold{color:#d2691e;}
.story .story-heading{font-weight:600;color:#222;margin-bottom:0;}
.story .story-description{font-weight:400;color:#777;margin-top:2px;}

/* Hover zoom effect - can be turned on/off */
.wpsb-zoom-yes .story:hover img{transform:scale(1.05);}
.wpsb-zoom-no .story:hover img{transform:none;}

/* Ring border around the image - configurable: disabled / hover only / always */
.wpsb-ring-hover .story-svg-img-wrapper img{border-color:#d4c8bb;}
.wpsb-ring-hover .story:hover img{border-color:var(--wpsb-ring-color,#d2691e);}
.wpsb-ring-always .story-svg-img-wrapper img{border-color:var(--wpsb-ring-color,#d2691e);}
.wpsb-ring-none .story-svg-img-wrapper img{border-color:transparent;}

/* Trigger button for full-screen story items (Pro). No visual change to default button styling. */
button.wpsb-story-trigger{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;display:block;cursor:pointer;text-align:center;-webkit-tap-highlight-color:transparent;}
/* Gradient "unseen" ring (Instagram-style) for full-screen story items only (Pro). */
.wpsb-story-unseen .story-svg-img-wrapper img{border-width:2px;border-style:solid;border-image:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888) 1;}
.wpsb-story-seen .story-svg-img-wrapper img{border-color:#cfcfcf !important;border-image:none;opacity:.85;}

/* ==== Item shapes ==== */
.containter-story.circle-story .story{width:80px;}
.containter-story.circle-story .story-svg-img-wrapper img{width:80px;height:80px;border-radius:50%;}

.containter-story.circle-lg-story .story{width:100px;}
.containter-story.circle-lg-story .story-svg-img-wrapper img{width:100px;height:100px;border-radius:50%;}

.containter-story.circle-sm-story .story{width:60px;}
.containter-story.circle-sm-story .story-svg-img-wrapper img{width:60px;height:60px;border-radius:50%;}

.containter-story.square-story .story{width:90px;}
.containter-story.square-story .story-svg-img-wrapper img{width:90px;height:90px;border-radius:8px;}

.containter-story.square1-story .story{width:80px;}
.containter-story.square1-story .story-svg-img-wrapper img{width:80px;height:80px;border-radius:8px;}

.containter-story.square-lg-story .story{width:110px;}
.containter-story.square-lg-story .story-svg-img-wrapper img{width:110px;height:110px;border-radius:16px;}

.containter-story.square-soft-story .story{width:90px;}
.containter-story.square-soft-story .story-svg-img-wrapper img{width:90px;height:90px;border-radius:28px;}

.containter-story.rect-story .story{width:175px;}
.containter-story.rect-story .story-svg-img-wrapper img{width:175px;height:104px;border-radius:8px;}

.containter-story.rect1-story .story{width:160px;}
.containter-story.rect1-story .story-svg-img-wrapper img{width:160px;height:74px;border-radius:8px;}

.containter-story.portrait-story .story{width:110px;}
.containter-story.portrait-story .story-svg-img-wrapper img{width:110px;height:170px;border-radius:14px;}

.containter-story.portrait-lg-story .story{width:140px;}
.containter-story.portrait-lg-story .story-svg-img-wrapper img{width:140px;height:210px;border-radius:16px;}

.containter-story.pill-story .story{width:190px;}
.containter-story.pill-story .story-svg-img-wrapper img{width:190px;height:70px;border-radius:999px;}

.containter-story.portrait-xl-story .story{width:115px;}
.containter-story.portrait-xl-story .story-svg-img-wrapper img{width:115px;height:400px;border-radius:16px;}

@media (max-width:768px){
	.containter-story.rect-story .story,.containter-story.rect1-story .story{width:130px;}
	.containter-story.rect-story .story-svg-img-wrapper img{width:130px;height:78px;}
	.containter-story.rect1-story .story-svg-img-wrapper img{width:130px;height:60px;}
	.containter-story.portrait-xl-story .story{width:95px;}
	.containter-story.portrait-xl-story .story-svg-img-wrapper img{width:95px;height:330px;}
}