/* Block ATC CSS — migrated from Code Snippets #40 */
/* ===== BRAND · CTA Row (scoped, optimized; ± theo font) ===== */

/* Layout & uniform height */
.jrs-cta-row{
  --jrs-cta-h: 80px;
  --jrs-cta-br: 12px;
  display:grid;
  grid-template-columns:minmax(96px,128px) 1fr;
  gap:12px;
  align-items:stretch;
}
.jrs-cta-row .quantity,
.jrs-cta-row .single_add_to_cart_button{
  height:var(--jrs-cta-h);
  border-radius:var(--brand-radius) !important;
  box-sizing:border-box;
}

/* Quantity box (Flatsome override) */
.jrs-cta-row .quantity,
.jrs-cta-row .quantity.buttons_added{
  /* tokens */
  --jrs-qty-border-w: 1px;
  --jrs-qty-border-color: #221F1F4C;
  --jrs-qty-sep: #221F1F4C;

  float:none !important;
  width:auto !important;
  min-width:96px;
  margin:0 !important;
  padding:0 !important;
  position:relative !important;

  display:grid !important;
  grid-template-columns:1fr 44px !important;
  grid-template-rows:1fr 1fr !important;
  overflow:hidden !important;

  background:#fff;
  border:var(--jrs-qty-border-w) solid var(--jrs-qty-border-color) !important; /* FIX border var */
  border-radius:var(--brand-radius) !important;
  box-shadow:0 1px 2px rgba(0,0,0,.05) !important;
  height:var(--jrs-cta-h) !important;
}

/* FINAL FIX: Input quantity chiếm toàn bộ ô trái + số nằm chính giữa */
.single-product .jrs-cta-row .ux-quantity.quantity.buttons_added input.input-text.qty.text {
  /* chiếm trọn cột trái (2 hàng) */
  grid-column: 1 / 2 !important;
  grid-row: 1 / 3 !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  height: var(--jrs-cta-h) !important;      /* cùng chiều cao với khối quantity */
  line-height: var(--jrs-cta-h) !important; /* canh GIỮA theo chiều dọc */
  box-sizing: border-box;

  margin: 0 !important;
  padding: 0 !important;                    /* bỏ padding 30px ở trên */

  border: 0 !important;                     /* dùng border của .quantity */
  background: #ffffff !important;

  text-align: center !important;            /* giữa ngang */
  text-indent: 0 !important;
}

/* Ẩn spinner mặc định của Chrome */
.single-product .jrs-cta-row .ux-quantity.quantity.buttons_added input.input-text.qty.text::-webkit-outer-spin-button,
.single-product .jrs-cta-row .ux-quantity.quantity.buttons_added input.input-text.qty.text::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.jrs-cta-row .quantity .qty::-webkit-outer-spin-button,
.jrs-cta-row .quantity .qty::-webkit-inner-spin-button{ -webkit-appearance:none; }

/* Nút +/−: dùng glyph theo font, căn giữa tuyệt đối */
.jrs-cta-row .quantity .plus,
.jrs-cta-row .quantity .minus,
.jrs-cta-row .quantity input.plus,
.jrs-cta-row .quantity input.minus,
.jrs-cta-row .quantity .button.is-form.plus,
.jrs-cta-row .quantity .button.is-form.minus{
  all:unset;
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important; height:100% !important;
  cursor:pointer !important; user-select:none !important;
  background:#f7f7f7 !important;
  box-shadow:none !important;
	  border:0.001px solid var(--jrs-qty-border-color) !important; /* FIX border var */
  border-radius:0 !important;
  transition:transform .06s ease, background .15s ease, box-shadow .15s ease, filter .15s ease !important;

  /* glyph theo font website */
  font-family:inherit !important;
  font-weight:500 !important;
  font-size:18px !important;
  line-height:1 !important;
  color:var(--brand-primary, #1b1717) !important;
  text-align:center !important;
}
/* Tắt icon pseudo (nếu theme thêm) */
.jrs-cta-row .quantity .plus::before,
.jrs-cta-row .quantity .minus::before{ content:none !important; }

/* Vị trí lưới cho + ở trên, − ở dưới */
.jrs-cta-row .quantity .plus,
.jrs-cta-row .quantity input.plus,
.jrs-cta-row .quantity .button.is-form.plus{ grid-area:1 / 2 / 2 / 3 !important; }
.jrs-cta-row .quantity .minus,
.jrs-cta-row .quantity input.minus,
.jrs-cta-row .quantity .button.is-form.minus{ grid-area:2 / 2 / 3 / 3 !important; }

/* Hover / Press & Hold / Focus */
.jrs-cta-row .quantity{ transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease, transform .06s ease; }
.jrs-cta-row .quantity:hover,
.jrs-cta-row .quantity:focus-within{
  border-color:var(--jrs-secondary, var(--brand-secondary)) !important;
  box-shadow:0 0 0 3px var(--jrs-secondary-12, #221F1F4C), 0 1px 2px #221F1F4C !important;
}
.jrs-cta-row .quantity .plus:hover,
.jrs-cta-row .quantity .minus:hover{
  background:#221F1F4C !important; /* giữ bản ở CUỐI */
  filter:brightness(1.01);
}
.jrs-cta-row .quantity:hover .plus,
.jrs-cta-row .quantity:hover .minus{
  background:#221F1F4C !important; /* sáng nhẹ cả 2 nút khi hover khối */
}
.jrs-cta-row .quantity.is-holding{
  border-color:var(--jrs-secondary, var(--brand-secondary)) !important;
  box-shadow:0 0 0 4px var(--jrs-secondary-12, #221F1F4C), 0 1px 2px #654F1B28 !important;
}
.jrs-cta-row .quantity .plus.is-pressed,
.jrs-cta-row .quantity .minus.is-pressed,
.jrs-cta-row .quantity .plus:active,
.jrs-cta-row .quantity .minus:active{
  transform:scale(.985) !important;
  box-shadow:inset 0 0 0 6px var(--jrs-secondary-18, #221F1F4C) !important;
  filter:brightness(.97) !important;
}
.jrs-cta-row .quantity .plus:focus-visible,
.jrs-cta-row .quantity .minus:focus-visible{
  outline:2px solid var(--jrs-secondary, var(--brand-secondary));
  outline-offset:-2px;
}

/* Add to cart button */
.jrs-cta-row .single_add_to_cart_button{
  width:100%; padding:0;
  display:grid; place-items:center;
  font-family:inherit !important;
  font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  box-shadow:0 6px 12px -3px #221F1F4C;
  transition:transform .06s ease, box-shadow .2s ease, filter .2s ease;
}
.jrs-cta-row .single_add_to_cart_button:hover{
  transform:translateY(-1px);
  filter:brightness(1.02);
  box-shadow:0 10px 20px -5px #221F1F4C;
}
.jrs-cta-row .single_add_to_cart_button:active{
  transform:translateY(1px);
  box-shadow:0 8px 18px -4px #221F1F4C;
}
.jrs-cta-row .single_add_to_cart_button.disabled,
.jrs-cta-row .single_add_to_cart_button[disabled]{
  filter:grayscale(.25) opacity(.7);
  cursor:not-allowed;
}

/* Mobile */
@media (max-width:420px){
  .jrs-cta-row{
    --jrs-cta-h:56px;
    grid-template-columns:minmax(84px,96px) 1fr !important;
    gap:8px !important;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion:reduce){
  .jrs-cta-row .quantity .plus,
  .jrs-cta-row .quantity .minus{ transition:none !important; }
  .jrs-cta-row .quantity:hover,
  .jrs-cta-row .single_add_to_cart_button:hover{ transform:none; }
}

/* 2) Hiệu ứng CLICK cho nút ±: ripple + nhún */
.jrs-cta-row .quantity .plus,
.jrs-cta-row .quantity .minus{
  /* đã có transform/transition ở block trước */
  position:relative !important;
  overflow:hidden; /* để ripple không tràn ra ngoài */
}

/* Hạt ripple (ẩn mặc định) */
.jrs-cta-row .quantity .plus::after,
.jrs-cta-row .quantity .minus::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:42px; height:42px;        /* vừa trong cột 44px */
  border-radius:50%;
  background:var(--jrs-secondary-18, #221F1F4C);
  transform:translate(-50%,-50%) scale(0);
  opacity:0;
  pointer-events:none;
}

/* Kích hoạt ripple khi click: dùng class .is-tapped (JS) + fallback :active */
@keyframes jrsRipple {
  0%   { transform:translate(-50%,-50%) scale(.2); opacity:.45; }
  60%  { transform:translate(-50%,-50%) scale(1.0); opacity:.25; }
  100% { transform:translate(-50%,-50%) scale(1.8); opacity:0; }
}

@media (prefers-reduced-motion: no-preference){
  .jrs-cta-row .quantity .plus.is-tapped::after,
  .jrs-cta-row .quantity .minus.is-tapped::after{
    animation:jrsRipple .45s ease-out forwards;
  }
  /* fallback nếu không kịp gắn class */
  .jrs-cta-row .quantity .plus:active::after,
  .jrs-cta-row .quantity .minus:active::after{
    animation:jrsRipple .45s ease-out forwards;
  }
}

/* Nhấn nhẹ khi click (đồng bộ với is-pressed cũ) */
.jrs-cta-row .quantity .plus:active,
.jrs-cta-row .quantity .minus:active{
  transform:scale(.985);
  filter:brightness(.98);
}

/* Space giữa input và CTA row */
.single-product .summary .jrs-cta-row{
  margin-top: var(--jrs-cta-gap, 24px) !important;  /* đổi 24px tùy ý */
}

/* Mobile có thể ít hơn chút */
@media (max-width: 480px){
  .single-product .summary .jrs-cta-row{
    --jrs-cta-gap: 18px;
  }
}

/* === BRAND · Add-to-cart press/hold + ripple + loading === */
.jrs-cta-row .single_add_to_cart_button{
  position: relative;
  overflow: hidden;                 /* để ripple không tràn ngoài */
  transition: transform .08s ease, box-shadow .22s ease, filter .22s ease;
}

/* Press/Hold states (JS sẽ thêm class) */
.jrs-cta-row .single_add_to_cart_button.is-pressed{
  transform: translateY(1px) scale(.996);
  box-shadow: 0 6px 12px -4px #221F1F4C;
}
.jrs-cta-row .single_add_to_cart_button.is-holding{
  box-shadow: 0 0 0 6px var(--jrs-secondary-12), 0 8px 20px -6px #221F1F4C;
  filter: brightness(1.02);
}

/* Ripple */
.jrs-cta-row .single_add_to_cart_button .jrs-ripple{
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: var(--jrs-secondary-26);  /* gợn theo màu secondary */
  opacity: .55;
  pointer-events: none;
  animation: jrs-ripple .55s ease-out forwards;
}
@keyframes jrs-ripple{
  to { transform: scale(4); opacity: 0; }
}

/* Loading spinner (khi AJAX add to cart) */
.jrs-cta-row .single_add_to_cart_button.is-loading{
  pointer-events: none;
}
.jrs-cta-row .single_add_to_cart_button.is-loading > *{
  opacity: .0;                       /* ẩn chữ khi đang loading */
}
.jrs-cta-row .single_add_to_cart_button.is-loading::after{
  content: "";
  position: absolute; inset: 0;      /* canh giữa */
  margin: auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.75);
  border-top-color: rgba(255,255,255,.25);
  animation: jrs-spin .8s linear infinite;
}
@keyframes jrs-spin{ to { transform: rotate(360deg); } }

/* Ẩn thanh trái tim YITH dưới nút Add to cart */
.single-product .yith-wcwl-add-button,
.single-product .yith-wcwl-add-to-wishlist {
    display: none !important;
}


/* Buy Now — outline style, distinct from primary ADD TO CART */
.single-product .jrs-cta-row button.ux-buy-now-button.button {
	  grid-column: 1 / -1 !important;
	  width: 100% !important;
	  max-width: 100% !important;
	  height: var(--jrs-cta-h, 64px) !important;
	  line-height: 1 !important;
	  display: grid !important;
	  place-items: center !important;
	  padding: 0 !important;
	  margin: 10px 0 0 0 !important;
	  border-radius: var(--brand-radius, 5px) !important;
	  font-size: 1.1em;
	  font-weight: 700;
	  letter-spacing: 2px;
	  text-transform: uppercase;
	  box-sizing: border-box !important;
	  background: transparent !important;
	  color: var(--brand-primary, #1b1717) !important;
	  border: 2px solid var(--brand-primary, #1b1717) !important;
}
.single-product .jrs-cta-row button.ux-buy-now-button.button:hover {
	  background: var(--brand-primary, #1b1717) !important;
	  color: #fff !important;
}
.single-product .jrs-cta-row button.ux-buy-now-button.button.disabled {
	  border-color: #aaa !important;
	  color: #aaa !important;
	  background: transparent !important;
}

/* Trust signals row */
.loluis-trust-signals {
	  display: flex;
	  justify-content: center;
	  gap: 20px;
	  margin: 14px 0 0;
	  font-size: 12px;
	  color: #666;
	  line-height: 1.3;
}
.loluis-trust-signals span {
	  display: inline-flex;
	  align-items: center;
	  gap: 5px;
}
.loluis-trust-signals svg {
	  width: 16px;
	  height: 16px;
	  flex-shrink: 0;
	  fill: currentColor;
}