@charset "utf-8";
/* CSS Document */
body.story-open {
  overflow: hidden;
}

.webstories-banner{
    background: url("../images/banner/webstories-banner.jpg");
    background-position: 50% center !important;
    background-size: cover;
}


/*------------custom css for main page---------------*/

.webstories-item{ margin:0 auto 60px; max-width: 290px; cursor: pointer; overflow: hidden;
        border-radius: 10px;}

.ws-item-img{position: relative; overflow: hidden; 
	border-radius: 10px;
	width: 100%;
    height: auto;
	object-fit: cover;
	filter: brightness(.9) saturate(1.03) contrast(1.03);
}

.ws-item-img::before{
	border-radius: 10px;
	content: ''; 
	position: absolute; 
	top:0; 
	left:0; 
	width: 100%; 
	height: 70px; 	
	background: linear-gradient(180deg, rgba(0, 0, 0, .4) 10%, rgba(0, 0, 0, 0) 100%);
	z-index: 1;}

.ws-item-img .wimg img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.ws-item-img:hover .wimg img {
	-webkit-transform: scale(1.15);
	transform: scale(1.15);
}


.webstories-item .line {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    height: 2px;
    display: flex;
    gap: 4px;
    z-index: 2;
}
.webstories-item .line span {
    flex: 1;
    height: 100%;
    background: rgba(255,255,255,0.7);
    border-radius: 2px;
}

.webstories-item .wicon{
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 40px;
  height: 40px;}

.wcontent .title{color: var(--secondary_color); font-size: 17px;}

.wcontent{ margin-top: 5px;}

.share-i{width:16px; position: absolute; top:17px; right: 10px; z-index: 2;}


/*-------------------overlay----------------------------*/

.story-overlay {
  position: fixed;
  inset: 0;
	width: 100vw;
  height: 100svh;   /* ✅ ADD */
  /*  height: 100%;
    width: 100%;*/	
	
  background: rgba(0,0,0,0.85);
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.story-overlay.show {
  opacity: 1;
  pointer-events: auto;
	z-index: 99999;
}

/* Overlay hidden: ignore all clicks */
.story-overlay:not(.show) {
    pointer-events: none;
}

/* Overlay visible: slides + progress bar click-able */
.story-overlay.show {
    pointer-events: auto;
}

.story-overlay.show .slide,
.story-overlay.show .progress-bar {
    pointer-events: auto;
}

.close-story {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 9099;
    width: 50px;          /* bigger button */
    height: 50px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.9);
    
    display: flex;        /* important */
    align-items: center;  /* vertical center */
    justify-content: center; /* horizontal center */

    cursor: pointer;
    padding: 0;
}

.close-story svg {
    width: 22px;   /* icon size control */
    height: 22px;
}



/*-----------webstroies--------------*/

:root{
    --card-w: 360px;
    --card-h: 640px;
    --btn-offset: 18px; /* horizontal offset from card edge */
  }


  /* page center */
  .page {
 height:100dvh;
  /*min-height:100vh;*/
    display:flex;
    align-items:center;
    justify-content:center;
    background: #fff;
  }

  /* BLURRED BACKGROUND (full-screen) */
  .bg-blur {
    position:fixed; inset:0;
    background-size:cover;
    background-position:left;
    filter:blur(30px);
    transform:scale(1.5);
    opacity:0;
    transition:opacity .45s ease;
    z-index:1;
  }
/* darker overlay for blur background */
.bg-overlay { 
  position:fixed; 
  inset:0; 
  background: rgba(0,0,0,0.15); /* ★ BLACK overlay instead of white */
  z-index:1; 
}


/* 🔥 IMPORTANT: background blur NEVER block clicks */
.bg-blur,
.bg-overlay,
.slide::before {
    pointer-events: none;

}

  /* center-wrap keeps card centered & provides reference for buttons */
  .center-wrap {
    position:relative;
    z-index:10;
  width: 100%;
  height: 100svh;   /* ✅ ADD */
    display:flex;
    align-items:center;
    justify-content:center;
  }

  /* the actual card */
.card {
    width:var(--card-w);
    height:var(--card-h);
    background:#000;
    border-radius: 10px;
    box-shadow:0 30px 60px rgba(10,10,10,0.18);
    overflow:hidden;
    position:relative;
}
  /* top overlay inside card for progress visibility */
  .card .top-overlay {
    position:absolute; 
	  left:0; 
	  right:0; 
	  top:0; 
	  height:100px;
    background:linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,0));
    pointer-events:none;
    z-index:40;
  }

  /* progress bar inside card (top) */
  .progress-bar {
    position:absolute;
    top:14px;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    display:flex;
    gap:10px;
    z-index:50;
    padding:0 6px;
  }
  .progress-seg {
    flex:1; height:2px; background: rgba(255,255,255,0.35); border-radius:999px; overflow:hidden;
  }
  .progress-fill { height:100%; width:0%; background:#fff; transition:width .35s linear; }

  /* container for slides inside card */
  .slides {
    width:100%; height:100%;
    display:block;
    position:relative;
  }

  .slide {
    position:absolute; 
    inset:0;
    display:flex; 
	align-items:center;
	justify-content:center;
    opacity:0;
	pointer-events:none;
    /*transition: opacity .35s ease, transform .35s ease;*/
	  
  transition: none;
  background-size: cover;      /* ✅ ADD */
  background-position: center; /* ✅ ADD */

  }


.slide.active { opacity:1; /*pointer-events:auto;*/ transform: none; z-index: 10;}

/* ✅ make progress bar always clickable */
.slide .progress-bar,
.progress-bar {
  pointer-events: auto !important;
  z-index: 50; /* ensure above slide layer */
}


.bg-blur {
    transform: scale(1.5) translateZ(0);
    backface-visibility: hidden;
}

.slide {
    transform: translateZ(0);
    backface-visibility: hidden;
}



  /* avoid cropping: contain */
/* FULL card coverage — behaves like Instagram/Shorts */
.slide img {
  width: 100%;
  height: 100%;
    object-fit: contain; /* ★ fill entire card */
    object-position: center;
    display:block;
    background:none; /* remove gradient so it doesn’t show */
  position: relative;
  z-index: 2;
}

.slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  filter: blur(25px);
  transform: scale(1.1);
  z-index: 1;
}


  /* nav buttons positioned relative to center-wrap and card */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;       /* bigger button */
    height: 56px;
    border-radius: 50%;
    background: #fff;
    border: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);

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

    cursor: pointer;
    z-index: 60;

}

.nav-btn svg {
    width:22px;   /* arrow size control */
    height:22px;
}



/* LEFT */
.nav-prev {
  left: calc(50% - (min(100vw, calc(100dvh * 9 / 16)) / 2) - 50px);
}

/* RIGHT */
.nav-next,
.reload-btn {
  left: calc(50% + (min(100vw, calc(100dvh * 9 / 16)) / 2) + -5px);
}


  .nav-btn:disabled { opacity:.28; pointer-events:none }

  /* reload button same place as next but styled like your screenshot */
  .reload-btn {
    position:absolute;
    left: calc(50% + var(--card-w)/2 + var(--btn-offset));
    top:50%;
    transform:translateY(-50%);
    width:56px;
	height:56px;
	border-radius:50%;
    background:#fff;
	border:none;
	display:flex;
    align-items:center;
	justify-content:center;
    box-shadow:0 8px 20px rgba(0,0,0,0.12);
    z-index:70;
	cursor:pointer;
	opacity:0;
	pointer-events:none;
  }
  .reload-btn.show { opacity:1; pointer-events:auto; }

/* DEFAULT (desktop + landscape) → SHOW */
.nav-prev,
.nav-next {
  display: flex;
}

/*---------------responsive--------------------*/ 
@media screen and (min-width:1601px) { :root{--card-w: 450px;--card-h: 800px;} }
@media (max-width: 1368px) and (min-height: 800px) and (pointer: coarse) {:root{--card-w: 450px;--card-h: 800px;} }

/*@media screen and (max-width:640px){.nav-next, .nav-prev {display:none !important;}}*/

@media screen and (max-width: 768px) { .wcontent .title{font-size: 15px; line-height: 24px; } }
@media screen and (max-width: 767px) {.webstories-item{margin-bottom:30px;}}
/*@media screen and (max-width:574px) {.webstories-item{max-width: 250px;}}*/

/* MOBILE DEVICES ≤ 768px */

/* Container full screen */
@media (max-width: 767px) {
  .center-wrap {
    width: 100vw !important;
    height: 100svh !important;
    padding: 0 !important;
  }
	
.nav-btn, .close-story, .reload-btn {width:44px; height:44px;}	
	
	
}

/* MOBILE PORTRAIT FULL FIT WITHOUT CROP */
@media (max-width: 767px) and (orientation: portrait) {
  .card {
    width: 100vw !important;    /* full viewport width */
    height: 100svh !important;  /* full viewport height */
    overflow: hidden;
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* image inside card */
  .card .slide img {
    width: 100%;       /* scale width to container */
    height: 100%;      /* scale height to container */
    object-fit: contain;  /* no crop, full image visible */
    object-position: center; /* center image */
    max-width: 1080px;     /* your image width */
    max-height: 1920px;    /* your image height */
  }
	
  .nav-prev,.nav-next {display: none !important;}	
.close-story{top:25px; right:12px;}
	
}

@media (orientation: landscape) and (max-height: 640px) and (pointer: coarse) {
	

.nav-btn, .close-story, .reload-btn {width:44px; height:44px;}	
	
  .center-wrap {
    position: relative;
	width:auto !important;
    height: 100dvh !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .card {
    position: relative;

    width: min(100vw, calc(100dvh * 9 / 16));
    height: min(100dvh, calc(100vw * 16 / 9));

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

  .card .slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* arrows */
  .nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .nav-prev,.nav-next {display: block;}
}

/* TABLET (portrait + landscape both) */
@media (min-width: 768px) and (max-width: 1366px) and (min-height: 601px) and (max-height: 1368px){

  .nav-prev {
    left: calc(50% - var(--card-w)/2 - 70px) !important;
  }

  .nav-next,
  .reload-btn {
    left: calc(50% + var(--card-w)/2 + 10px) !important;
  }

}


/* TABLET (portrait + landscape both)
@media (min-width: 768px) and (max-width: 1366px) {
  .nav-prev {left: calc(50% - (min(100vw, calc(100dvh * 9 / 16)) / 2) - 60px) !important;}
  .nav-next,.reload-btn {left: calc(50% + (min(100vw, calc(100dvh * 9 / 16)) / 2) + 5px) !important;}
} */


@media (orientation: landscape) and (pointer: coarse) {

  .nav-prev {
    left: calc(50% - (min(100vw, calc(100dvh * 9 / 16)) / 2) - 55px);
  }

  .nav-next,
  .reload-btn {
    left: calc(50% + (min(100vw, calc(100dvh * 9 / 16)) / 2) + 10px);
  }

}