/* ===== EVS Bundle Popup (single product) — JNR Puff (blue/clean) ===== */

:root{
  --evs-bg: #ffffff;
  --evs-card: #ffffff;

  --evs-border: rgba(22, 49, 90, .14);         /* cool blue-gray border */
  --evs-border-strong: rgba(22, 49, 90, .22);

  --evs-text: #0b1b34;
  --evs-muted: rgba(11, 27, 52, .58);

  --evs-shadow: 0 10px 30px rgba(14, 38, 77, .10);
  --evs-shadow-hover: 0 14px 36px rgba(14, 38, 77, .14);

  /* Brand blue (close to header) */
  --evs-accent: #1e5ed8;                        /* main blue */
  --evs-accent-soft: rgba(30, 94, 216, .12);    /* soft fill */
  --evs-accent-ring: rgba(30, 94, 216, .18);    /* focus ring */
}

/* Always open block */
.evs_always_open .evs_panel{
  width: 100%;
  margin: 0;
  max-height: none;
  overflow: visible;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

/* Wrapper spacing */
.evs_wrap{
  margin: 18px 0;
}

/* Trigger button (if used) */
.evs_trigger{
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--evs-border);
  border-radius: 14px;
  background: #fff;
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
  color: var(--evs-text);
  box-shadow: 0 10px 24px rgba(14, 38, 77, .08);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.evs_trigger:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(14, 38, 77, .12);
  border-color: var(--evs-border-strong);
  background: rgba(30, 94, 216, .03);
}

/* Modal (if ever used) */
.evs_modal{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
}
.evs_modal.is-open{ display:block; }

.evs_backdrop{
  position: absolute;
  inset: 0;
  background: rgba(9, 20, 40, .45);
}

/* Main panel */
.evs_panel{
  position: relative;
  width: min(760px, 92vw);
  margin: 6vh auto;
  background: var(--evs-bg);
  border-radius: 18px;
  padding: 16px;
  max-height: 88vh;
  overflow: auto;
  box-shadow: var(--evs-shadow);
  color: var(--evs-text);
  /* border: 1px solid var(--evs-border); */
}

/* Header */
.evs_head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.evs_title{
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(11, 27, 52, .70);
}

.evs_close{
  border: 1px solid var(--evs-border);
  background: #fff;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(11, 27, 52, .55);
  transition: background .2s ease, border-color .2s ease, transform .12s ease;
}
.evs_close:hover{
  background: rgba(30, 94, 216, .06);
  border-color: rgba(30, 94, 216, .32);
  transform: translateY(-1px);
}

/* Offer cards */
.evs_offer{
  border: 1px solid var(--evs-border);
  border-radius: 16px;
  padding: 14px;
  margin: 12px 0;
  background: var(--evs-card);
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .12s ease, background .2s ease;
}

.evs_offer:hover{
  border-color: var(--evs-border-strong);
  box-shadow: 0 12px 26px rgba(14, 38, 77, .10);
  transform: translateY(-1px);
}

.evs_offer.is-active{
  border-color: rgba(30, 94, 216, .48);
  background: linear-gradient(0deg, var(--evs-accent-soft), #fff);
  box-shadow: 0 14px 30px rgba(14, 38, 77, .12);
}

/* Offer head */
.evs_offer_head{
  display:flex;
  align-items:center;
  gap: 12px;
}

/* Radio */
.evs_radio{
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid rgba(11, 27, 52, .22);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 20px;
  background: #fff;
}

.evs_dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: transparent;
  display:none;
}

.evs_offer.is-active .evs_dot{
  display:block;
  background: var(--evs-accent);
  box-shadow: 0 0 0 4px var(--evs-accent-ring);
}

/* Offer text */
.evs_offer_text{
  font-size: 15px;
  font-weight: 900;
  color: var(--evs-text);
}

/* Variants */
.evs_variants{
  margin-top: 12px;
  display:none;
}
.evs_offer.is-active .evs_variants{ display:block; }

.evs_row{
  display:flex;
  align-items:center;
  gap: 10px;
  margin: 10px 0;
}

.evs_num{
  min-width: 28px;
  font-weight: 900;
  color: var(--evs-muted);
}

/* Select */
.evs_select{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--evs-border);
  border-radius: 14px;
  background: #fff;
  font-size: 14px;
  color: var(--evs-text);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.evs_select:focus{
  border-color: rgba(30, 94, 216, .58);
  box-shadow: 0 0 0 4px var(--evs-accent-ring);
}

.evs_select:disabled{
  opacity: .55;
  cursor: not-allowed;
  background: rgba(11, 27, 52, .03);
}

/* Add row (+) */
.evs_row.evs_row_add{
  justify-content:flex-start;
  margin-top: 8px;
}

.evs_row.evs_row_add .evs_num{
  color: rgba(11, 27, 52, .35);
}

.evs_add{
  width: 52px !important;
  height: 36px !important;
  border-radius: 999px !important;
  border: 1px solid var(--evs-border) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  color: #fff !important;
  background: var(--evs-accent) !important;
  box-shadow: 0 12px 26px rgba(30, 94, 216, .22) !important;
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease !important; 
}
.evs_add:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(30, 94, 216, .26);
  filter: brightness(1.05);
}
.evs_add:active{
  transform: translateY(0);
  box-shadow: 0 10px 22px rgba(30, 94, 216, .22);
}

/* Action button */
.evs_btn{
  width: 100%;
  margin-top: 14px;
  padding: 16px 16px;
  border: 1px solid rgba(30, 94, 216, .45);
  border-radius: 16px;
  background: var(--evs-accent);
  color: #fff;
  font-weight: 900;
  letter-spacing: .06em;
  font-size: 14px;
  cursor: pointer;
  text-transform: uppercase;
  box-shadow: 0 16px 34px rgba(30, 94, 216, .22);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.evs_btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 20px 42px rgba(30, 94, 216, .26);
  filter: brightness(1.03);
}
.evs_btn:active{
  transform: translateY(0);
  box-shadow: 0 14px 30px rgba(30, 94, 216, .22);
}
.evs_btn:disabled{
  opacity: .55;
  cursor: not-allowed;
}

/* Message area */
.evs_msg{
  margin-top: 10px;
  font-weight: 800;
  color: rgba(11, 27, 52, .65);
}

/* Mobile */
@media (max-width: 420px){
  .evs_panel{ padding: 14px; border-radius: 16px; }
  .evs_offer{ padding: 12px; }
  .evs_offer_text{ font-size: 14px; }
  .evs_btn{ padding: 14px 14px; font-size: 13px; }
}