/* NEW JUNE 2025 STYLING */
@media only screen and (min-width: 1px) {
.mobile-break{display:block;}
.mobile-break-sim{display:block;}		
}


@media only screen and (min-width: 428px) {
.mobile-break{display:none;}	
}

/* --- long term --- */
.full-width {
  width: 100%!important;
}
#esim-only-blurb.fade,
#sim-only-blurb.fade { transition: opacity .3s ease; }
#product-title.fade { transition: opacity .3s ease; }
#price-title.fade { transition: opacity .3s ease; }
#order-now-cta.fade,
#order-now-cta-sim.fade,
#full-details-esim.fade,
#full-details-sim.fade { transition: opacity .3s ease; }

/* Fade animation for your swap blocks */
#esim-only-blurb.fade,
#sim-only-blurb.fade,
#order-now-cta.fade,
#order-now-cta-sim.fade,
#product-title.fade,
#price-title.fade { transition: opacity .3s ease; }

/* Height animation for the tab content container */
.tab-content.height-animate { transition: height .3s ease; }
@media (prefers-reduced-motion: reduce) {
  .tab-content.height-animate { transition: none; }
}


/* --- Product tabs layout --- */
#product-tabs.nav-tabs{
  border-bottom: 0;
  width: 100%;
  display: flex;
  gap: 6px;             /* spacing between cards */
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Each tab (li) should flex evenly */
#product-tabs > li{
  flex: 1 1 0;
  display: flex;        /* lets the button stretch */
}

/* Inactive tab card */
.nav-item-1 .nav-link{
  background-color: #fff;
  color: #979797;
  border: 3px solid #979797;
  border-radius: 15px;
  font-weight: bold;
  padding: 15px 20px;
  position: relative;
  text-align: center;
  box-shadow: none;
  margin: 0;            /* gap handles spacing */
  width: 100%;          /* fill the li */
  height: 100%;
  font-family: 'Montserrat', sans-serif !important;
  cursor: pointer;
}

/* Active tab card (blue) */
.nav-item-1 .nav-link.active{
  background-color: #ffffff;
  border: 3px solid #003473;
  color: #003473;
  box-shadow: none;
  border-radius: 15px;
  text-align: center;
  font-family: 'Montserrat', sans-serif !important;
}

/* Blue check on active */
.nav-item-1 .nav-link.active::after{
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-image: url("/img/bluetick2025.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}

/* Optional: tidy the text inside */
#product-tabs .tab-title {
  display: block;
  font-size: 27px;
  line-height: 0.75;
}
#product-tabs .tab-subtitle {
  display: block;
  font-size: 15px;
  line-height: 1.25;
}

@media only screen and (min-width: 768px) {
.wifi-skag-photo {
    background-image: url("/img/long-skag-photo.png");
    background-repeat: no-repeat;
    background-position: center left;
    background-size: 500px;
  }
}
@media only screen and (min-width: 992px) {
.wifi-skag-desktop {
  background-image: url("/img/long-skag.jpg");
  background-repeat: no-repeat;
  background-size: 600px;
  background-position: top right;
}
.wifi-skag-photo {
    background-image: url("/img/long-skag-photo.png");
    background-repeat: no-repeat;
    background-position: center left;
    background-size: 700px;
  }
}
@media only screen and (min-width: 1200px) {
.wifi-skag-desktop {
  background-image: url("/img/long-skag.jpg");
  background-repeat: no-repeat;
  background-size: 830px;
  background-position: center right;
}
 .wifi-skag-photo {
    background-image: url("/img/long-skag-photo.png");
    background-repeat: no-repeat;
    background-position: center left;
    background-size: 700px;
  }
}
@media (max-width: 575.98px) {
  #product-tabs.nav-tabs {
    flex-direction: column;  /* stack */
    gap: 10px;               /* vertical spacing between cards */
  }
  #product-tabs > li {
    flex: 1 1 auto;          /* let each card take full width */
    width: 100%;
  }
  #product-tabs .nav-link {
    width: 100%;             /* button fills the li */
    height: 100%;
  }
}
/* --- long term --- */

/* NEW SHORT TERM 2025 STYLING */
/* Hide the built-in month & year <select> menus */
.flatpickr-calendar .flatpickr-months .flatpickr-monthDropdown-months,
.flatpickr-calendar .flatpickr-months .flatpickr-yearDropdown-months {
  display: none !important;
}

.plan-card {
    background-color: #edf8fc;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  }



@media only screen and (min-width: 1px) {
.plan-icon{width:70px;height:93px;}
 .plan-icon-card {
    width: 70px;
    height: 46px;
  }	
.jpy{font-weight:600;font-size:15px;}
}

@media only screen and (min-width: 768px) {
.plan-icon{width:70px;height:93px;}
  .plan-icon-card {
    width: 110px;
    height: 73px;
  }	
.mobile-break-sim{display:none;}		
.jpy{font-weight:600;font-size:15px;}	
}
.plan-box-footer{
background-color:#fff;	
border: 2px solid;
 border-image: linear-gradient(to right, #c2e8f5, #f4d3ed) 1;
}
 /* Custom tweaks */
  .pricing-card {
    border: 2px solid #1e3a8a; /* dark blue border */
    border-radius: .5rem;
    position: relative;
    overflow: hidden;
  }
  .pricing-card .badge-best {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #1e3a8a;
    color: #fff;
    border-bottom-right-radius: .5rem;
    padding: .5rem 1rem;
    font-size: .875rem;
  }
  .pricing-card .plan-icon {
    width: 80px;
    height: auto;
  }
  .pricing-card .list-group-item.active {
    background-color: #e0f2fe;
    border-color: #bae6fd;
    color: #1e3a8a;
  }
  .pricing-card .most-popular {
    font-size: .75rem;
    background-color: #f43f5e;
  }/* NEW SHORT TERM 2025 STYLING */



.charlie{
width:75px;
float:right;
}

/* NEW JUNE 2025 STYLING */
.small-p{font-size:15px!important;}
.mont{font-family: 'Montserrat', sans-serif !important;}
.hotpink {color:#FF3CAC;}
.lightblue{color:#009DD6;}
.hotpink-bg {background-color:#FF3CAC;} 
.lightblue-bg{background-color:#009dd6;}
.lightblue-plan-bar{background-color:#d1e8ff;}
.darkblue-bg{background-color:#003473;}
.transparent{background-color:transparent!important;}
.modal-dialog {
  width: 92%;
  margin: .5rem auto;
  max-width: 900px;
}
.collect-box {
  border: solid 2px #009DD6;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 25px;
  background-color: #f1fbff;
}
.accordion-wrap {
	border: solid 0px #848181!important;
}

.green {
  color: #02A75A;
}
.card-award {
      position: relative;
      overflow: visible;
    }

   .ribbon {
      width: 150px;
      height: 150px;
     
      position: absolute;
      top: 0px;
      left: 0px;
    }
    .ribbon span {
    position: relative;
    display: block;
    width: 175px;
    padding: 5px 0;
    background-color: #efbf04;
    color: #fff;
    font-weight: bold;
    text-align: center;
    top: -15px;
    margin: 0 auto;
	border-radius: 10px 0px 10px 0px;

  }
@media (min-width: 1px) {
  .fixed-lg-only {
    background-attachment: scroll !important;   
	}
}
	

@media (min-width: 1200px) {
  .fixed-lg-only {
    background-attachment: fixed !important;
  }
}

 @media (min-width: 1px) {
    .accordion-body {
      background-color: white;
      border-radius: 0.75rem;
      padding: 1.5rem 1rem;
      margin-top: -1rem;
    }	 
	 .card-award .ribbon {
    /* move the whole ribbon container to the middle */
    left: 50%;
    transform: translateX(-50%);
    top: 0;        /* keep it at the very top */
    width: 100%;   /* let it fill the card’s width if you like */
  }
   
  .hotpink-plan-text {font-size:10px;}
  .card-award .card-body.text-center {
        padding-top: 2.5rem; /* ensure ribbon doesn't cover content */
      }
.card-banner-strip{
text-align: center;
color:#fff;
padding:10px 5px;
font-weight:700;
font-family:'Montserrat',sans-serif!important;	
	 }	 
  .kings{max-width:300px;padding-top:100px;}	 
	 
 }

 @media (min-width: 360px) {
  .hotpink-plan-text {font-size:12px;}	
	 
 }
 @media (min-width: 418px) {
  .hotpink-plan-text {font-size:14px;}	 
 }

@media (min-width: 768px) {

	
	.kings{max-width:330px;padding-top:20px;}	
}
    .card-award .card-body.primary {
      background-color: #f5c4ca; /* pink quote background */
    }
    .card-award .card-body.secondary {
      background-color: #d1e8ff; /* green quote background */
    }
    .award-logo {
      max-width: 190px;
      margin-bottom: 0rem;
    }
   
    

.delivery-id-select {
  width: 100%;
  border: solid 3px #848181;
  border-radius: 15px!important;
  color: #848181;
  padding: 15px 5px 15px 20px!important;
  font-weight: bold;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 19px !important;
}

 .fixed-bar {
      position: fixed;
      top: 0;
      width: 100%;
      background: #003473;
      z-index: 9999;
      transition: top 0.3s ease-in-out;
    }
 .fixed-bar-voice {
      position: fixed;
      top: 0;
      width: 100%;
      background: #003473;
      z-index: 9999;
      transition: top 0.3s ease-in-out;
    }

.custom-icon {
      display: inline-block;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      line-height: 24px;
      text-align: center;
      font-size: 14px;
      font-weight: bold;
    }
    .custom-check {
      background-color: #02A75A; /* Light green background */
      color: #fff; /* Dark green text */
    }
    .custom-x {
      background-color: red; /* Light red background */
      color: #fff; /* Dark red text */
    }
    /* Common card styling for reasons 1–5 */
    .reason-card {
      position: relative; /* For absolutely positioning the pink circle */
      background: #ffffff;
      border: 2px solid #fff;
      border-radius: 1rem;
      padding: 1.5rem; /* top padding so text doesn't collide with the circle */
      margin-bottom: 0; /* or your preference */
      height: 100%;
    }
    .reason-card h6 {
      color: #003473; /* Navy heading color */
    }

    /* Pink circle for the numbers,
       half above the card via negative top offset. */
    .number-circle {
      position: absolute;
      top: 0;
      left: 1.25rem; 
      transform: translateY(-50%); /* shift upward so half is above card */
      background-color: #FF3CAC;
      color: #ffffff;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* “Buy Voice Lite” button styling (green) */
    .btn-voice-lite {
      background-color: #00b168;
      color: #ffffff;
      font-weight: 600;
      border-radius: 0.5rem;
      padding: 0.6rem 1.5rem;
      border: none;
    }
    .btn-voice-lite:hover {
      background-color: #009a5a;
    }

    /* Promo Box: Pink top + Navy bottom */
    .promo-container {
      border-radius: 1rem;
      overflow: hidden; /* so top-right diagonal is cleanly clipped */
      position: relative;
    }

    /* Pink top header with diagonal top-right corner */
    .promo-header {
      background-color: #FF3CAC;
      color: #fff;
      padding: 1rem;
      font-weight: 500;
      position: relative;
    }
    /* Diagonal “cut” in the top-right corner */
    .promo-header::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 50px;
      height: 50px;
      background-color: #FF3CAC;
      clip-path: polygon(100% 0, 100% 100%, 0 100%);
    }

    /* Navy bottom for details */
    .promo-body {
      background-color: #003473;
      color: #ffffff;
      padding: 1.5rem;
      position: relative;
    }
    .promo-body h5 {
      margin-bottom: 0.5rem;
    }

    /* “More Details” button as white with green border/text */
    .btn-more-details {
      color: #00b168;
      border: 2px solid #00b168;
      background: #ffffff;
      font-weight: 600;
      border-radius: 0.5rem;
      padding: 0.5rem 1.25rem;
    }
    .btn-more-details:hover {
      background: #00b168;
      color: #ffffff;
    }

    /* Small footnote text */
    .promo-body p.small {
      font-size: 0.8rem;
      margin-top: 0.75rem;
    }

    /* SIM card image in the promo box (angled) */
    .sim-img {
      position: absolute;
      top: -30px;
      right: 1rem;
      width: 90px; /* Adjust as needed */
      transform: rotate(10deg);
    }

.alert{
	background:#f5eeee!important;
	border-radius:5px;
	border:none!important;
}
.orange-alert{
	background:#fff!important;
	border-radius:5px;
	border:solid 3px #ed8200!important;
	margin-bottom: -55px;
}
.orange-tab {
  background: #ed8200 !important;
  border-radius: 5px;
  max-width: 130px;
  text-align: center;
  margin: 0px 0px -20px 15px;
  position: relative;
}
/* accordion section */
.accordion-button-blue::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;

}
.accordion-item {
  border-radius: 10px !important;
}
.accordion-button:not(.collapsed) {
  box-shadow: inset 0 0px 0 rgb(0, 0, 0)!important;
  background-color: transparent!important;	
}
 .accordion-button {
      font-weight: bold;
      background-color: white;
      color: #003366;
      border-radius: 0.75rem !important;
      margin-bottom: 0rem;
	 border: none!important;
    }
    .accordion-item {
      border: none;
    }

 
.accordion-button:focus {
  z-index: 3;
  border: solid 0px #848181!important;
  outline: 0;
  box-shadow: 0 0 0 .0rem rgba(13,110,253,.0)!important;
}


/* accordion section */
.circle-letter {
display: inline-block;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: #003473;
text-align: center;
line-height: 25px;
color: #fff;
font-weight: bold;
font-family: sans-serif;
font-size: 14px;}

.circle-letter-white {
  display: inline-block;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background-color: #fff;
  text-align: center;
  line-height: 20px;
  color: #003473;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 14px;
}

.modal-content {
  margin-top:100px;
}


.free-tab {
  background: #003473;
  color: #fff;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: bold !important;
  width: 60px;
  margin: 0 auto;
}

.button-bigger {
width:100%;	
}

@media only screen and (min-width: 1px) {
 .center-mobile-left-desktop {
    text-align: center;
  }	
.p-large {
  font-size: 17px !important;
  line-height: 1.4 !important;
}	
.pink-line-s {
  max-width: 65px;
}
.pink-line-m {
  max-width: 160px;
}
.pink-line-l {
  max-width: 205px;
}
.pink-line-ml {
  max-width: 225px;
}	 
.pink-line-xl {
  max-width: 265px;
}
.pink-line-xxl {
  max-width: 295px;
}
	
.pink-line-xxxl {
  max-width: 310px;
}	
.more-details{
  width: 100%;
  display: block;
  text-align: center;
}	
.tab-subtitle {
  font-weight: 400;
  font-size: 14px;
}
.tab-title {
  font-size: 16px;
}
.no-min {
  font-size: 15px !important;
}	
.fixed-button-override{font-size: 0.9em!important;padding: 5px 5px!important;}	

.charity-background {
  background-image: url(/img/common/home2023-7.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}
.charity-background-png {
  background-image: url(/img/charity.png);
  background-size: contain;
  background-repeat: no-repeat;
}		
.tony{
position: absolute;
    max-width: 85px;
    margin-top: -70px;		
	}
.mobile-charity{
margin-top:110px	
	}	
}

@media only screen and (min-width: 375px) {
.tab-subtitle {
  font-weight: 400;
  font-size: 16px;
}
.tab-title {
  font-size: 18px;
}
	.nav-width-override {
	  min-width:345px!important;
    }
/* Default nav-link styling */
 	 
}

@media only screen and (min-width: 428px) {
 .tab-title {
  font-size: 16px;
}
 
}

@media only screen and (min-width: 576px) {
 .tab-title {
  font-size: 18px;
}
	 
}



 @media only screen and (min-width: 768px) {
.p-large{font-size:19px!important;line-height: 1.4 !important;}	 
.tab-subtitle {
  font-weight: 400;
  font-size: 17px;
}
    .accordion-body {
      background-color: white;
      border-radius: 0.75rem;
      padding: 1.5rem;
      margin-top: -1rem;
    }	 
.tablet-left-nudge {margin-left:0.75em;}
.esim-resize {max-width:65px;}
.mobile-neg-top {
    margin-top: 0px;
  }	 
.more-details{
  width: 200px;
  display: block;
  text-align: center;
}
.pink-line-s {
  max-width: 110px;
}
.pink-line-m {
  max-width: 210px;
}
.pink-line-l {
  max-width: 270px;
}
.pink-line-ml {
  max-width: 300px;
}	 
.pink-line-xl {
  max-width: 340px;
}
.pink-line-xxl {
  max-width: 400px;
}
	 
.pink-line-xxxl {
  max-width: 420px;
}		 
.tab-title {
  font-size: 20px;
}	 
/* Default nav-link styling */


.charity-background {
  background-image: url(/img/common/home2023-7.jpg);
  background-size: 600px;
  background-repeat: no-repeat;
}
.charity-background-png {
  background-image: url(/img/charity.png);
  background-size: 600px;
  background-repeat: no-repeat;
}	 
.mobile-charity{
margin-top:0px	
	}	 
.tony{
position: absolute;
  max-width: 125px;
  margin-top: -33px;		
	}		 
}
@media only screen and (min-width: 992px) {
.nav-width-override {
	  min-width:430px!important;
    }
.no-min {
  font-size: 25px !important;
}	
}

@media only screen and (min-width: 1200px) {
	
.tabs-wrapper-desktop{
max-width:1200px;
margin-left:auto;
margin-right:auto;
border-radius:10px;
	}
	
.charity-background {
  background-image: url(/img/common/home2023-7.jpg);
  background-size: 765px;
  background-repeat: no-repeat;
}
.charity-background-png {
  background-image: url(/img/charity.png);
  background-size: 765px;
  background-repeat: no-repeat;
}		
}



    /* Remove default bottom border on nav-tabs */
    .nav-tabs {
      border-bottom: none;
    }

    



.tabs-wrapper {
  position: relative;            /* Important to position the pseudo-element */
  background-color: #009DD6;   
  padding: 20px 5px 35px 5px;  
  margin-bottom: 40px;          /* Extra bottom space so the triangle is fully visible */
}

.tabs-wrapper::after {
  content: "";
  position: absolute;
  left: 49.8%;
  bottom: -30px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-top: 40px solid #009DD6;
  z-index: 1;	
}


.tabs-wrapper::before {
  content: "";
  position: absolute;
  left: 49.8%;
  top: -10px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-top: 40px solid #fff;
}


@media only screen and (min-width: 1px) {
  .mobile-neg-top {
    margin-top: -55px;
  }
}

@media only screen and (min-width: 350px) {
  .mobile-neg-top {
    margin-top: -65px;
  }
}

@media only screen and (min-width: 768px) {
  .mobile-neg-top {
    margin-top: 0px;
  }
}