/**
 * AI Bought Together - Clean Rebuild (v2.5, Theme Compatibility Fix)
 * Mobile-first / BEM / Theme modifiers / Overflow-safe / Snap scrolling
 * Flatsome / WoodMart / Ecomus 호환 + Android Chrome 안정화
 */

/* =========================
   0) Design tokens & reset
   ========================= */
:root {
  --aibt-primary: #1f2937;
  --aibt-primary-2: #111827;
  --aibt-primary-bg: #f3f4f6;
  --aibt-accent: #000;
  --aibt-border: #d1d5db;
  --aibt-text: #374151;
  --aibt-success: #16a34a;
  --aibt-error: #ef4444;
  --aibt-radius: 8px;
  --aibt-shadow: 0 2px 8px rgba(0,0,0,.08);

  --aibt-card-w: 115px;      /* mobile card width */
  --aibt-card-w-var: 115px;  /* mobile variable-product width */
  --aibt-gap: 6px;           /* mobile row gap */
}

/* Scope all box-sizing to plugin */
.aibt-container, .aibt-container * { box-sizing: border-box; }

/* 터치 기본값 보정(모바일 크롬 텍스트 확대 방지) */
.aibt-container {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* =========================
   1) Contextual Hiding (safe)
   ========================= */
.sticky-add-to-cart .aibt-container,
.sticky-add-to-cart--active .aibt-container,
.sticky-add-to-cart-wrapper .aibt-container,
.sticky-atc .aibt-container,
.floating-add-to-cart .aibt-container,
.fixed-add-to-cart .aibt-container,
.sticky-cart .aibt-container,
.wd-sticky-btn .aibt-container,
.wd-sticky-btn-container .aibt-container,
.ecomus-sticky-add-to-cart .aibt-container,
.ecomus-sticky-atc__content .aibt-container,
.product-quickadd .aibt-container,
.quick-view .aibt-container,
.quickview .aibt-container,
.quick-add .aibt-container,
.product-quick-view .aibt-container,
.wd-popup .aibt-container,
.popup-quick-view .aibt-container,
.product-lightbox .aibt-container,
.product-lightbox-inner .aibt-container,
.mfp-content .aibt-container,
.lightbox-content .aibt-container {
  display: none !important;
}

/* =========================
   2) Container
   ========================= */
.aibt-container{
  position: relative;
  width: calc(100% - 16px);
  max-width: 100%;
  margin: 8px auto;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--aibt-border);
  border-radius: var(--aibt-radius);
  box-shadow: var(--aibt-shadow);
  overflow: visible;              /* allow page scrolling */
}

.aibt-title{
  margin: 0 0 6px 0;
  padding-bottom: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--aibt-primary);
  border-bottom: 1px solid var(--aibt-border);
}

/* =========================
   3) Product row (horizontal)
   ========================= */
.aibt-products-wrapper{
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;          /* center align cards */
  gap: var(--aibt-gap);
  width: 100%;
  max-width: 100%;
  padding: 4px 0;
  margin: 0;
  overflow-x: auto;
  overflow-y: visible;              /* don't block vertical scroll */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* Firefox */
  touch-action: pan-x pan-y;        /* allow both directions */
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;      /* allow page scroll */
  scroll-snap-type: x proximity;    /* softer snap */
}
.aibt-products-wrapper::-webkit-scrollbar{ display:none; }

/* =========================
   4) Product card
   ========================= */
.aibt-product{
  flex: 0 0 auto;
  width: var(--aibt-card-w);
  min-width: var(--aibt-card-w);
  max-width: var(--aibt-card-w);
  padding: 8px 4px;
  border: 1px solid var(--aibt-border);
  border-radius: 6px;
  background: #f9fafb;
  transition: box-shadow .2s ease, border-color .2s ease, transform .08s ease;
  scroll-snap-align: start;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.aibt-product[data-product-type="variable"]{
  width: var(--aibt-card-w-var);
  min-width: var(--aibt-card-w-var);
  max-width: var(--aibt-card-w-var);
}
.aibt-product:hover{ border-color: var(--aibt-primary); box-shadow: 0 2px 6px rgba(31,41,55,.2); }
.aibt-recommended-product{ cursor: pointer; }
.aibt-recommended-product:active{ transform: scale(.985); }
.aibt-main-product{ border-color: var(--aibt-primary); background: var(--aibt-primary-bg); }

/* Checkbox */
.aibt-product-checkbox{ text-align:center; position:relative; z-index:1; }
.aibt-checkbox{
  width:18px; height:18px; cursor:pointer; accent-color: var(--aibt-primary);
}
.aibt-checkbox:disabled{ opacity:.6; cursor:not-allowed; }
.aibt-product-checkbox label{ display:none; }

/* Image */
.aibt-product-image{ width:100%; text-align:center; pointer-events:none; }
.aibt-product-image a{ display:block; pointer-events:none; }
.aibt-product-image img{
  width:100%; height:auto; display:block; border-radius:4px; pointer-events:none;
}

/* Info */
.aibt-product-info{ width:100%; text-align:center; }
.aibt-product-title{
  font-size: 11px;               /* mobile: requested 10~12px */
  line-height: 1.25;
  min-height: 28px;              /* 2 lines guarantee (~14px*2) */
  margin: 4px 0 4px 0;
  color: var(--aibt-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.aibt-product-title a{ color: var(--aibt-text); text-decoration:none; }
.aibt-product-title a:hover{ color: var(--aibt-primary); }
.aibt-product-price{ font-size: 12.5px; font-weight: 700; color: var(--aibt-primary); }

/* Badges */
.aibt-variation-badge{
  display:inline-flex; gap:4px; align-items:center;
  padding: 3px 6px;
  font-size: 9.5px; font-weight:500;
  background:#dbeafe; color:#1e40af; border-radius:4px; margin-top:4px;
}
.aibt-main-variation-badge{ background:#fef3c7; color:#92400e; font-weight:600; animation: aibtPulse 2s ease-in-out infinite;}
@keyframes aibtPulse{ 0%,100%{opacity:1;} 50%{opacity:.72;} }

/* Hide selects in card (modal will handle) */
.aibt-product-variations,
.aibt-variations-data{ display:none !important; }

/* Plus separator */
.aibt-separator{ flex:0 0 8px; width:8px; }

/* =========================
   5) Summary bar
   ========================= */
.aibt-summary{
  display:flex; flex-direction:column; gap:6px;
  width:100%; padding:6px;
  background: var(--aibt-primary-bg);
  border: 1px solid var(--aibt-border);
  border-radius:6px;
}
.aibt-summary-content{ display:flex; flex-direction:column; gap:3px; }
.aibt-total-price, .aibt-savings{ display:flex; align-items:center; gap:6px; }
.aibt-total-label, .aibt-savings-label{ font-size:12px; color:#374151; font-weight:500; }
.aibt-total-amount{ font-size:14px; font-weight:800; color: var(--aibt-primary); }
.aibt-savings-amount{ font-size:12.5px; font-weight:800; color: var(--aibt-success); }

/* CTA */
.aibt-add-to-cart-btn{
  width:100%;
  padding:6px 12px;
  font-size:12px; font-weight:700;
  color:#fff !important;
  background: var(--aibt-accent) !important;
  border:2px solid var(--aibt-accent) !important;
  border-radius:6px; cursor:pointer; transition:.2s;
  white-space:nowrap;
}
.aibt-add-to-cart-btn:hover{ background:#1a1a1a !important; border-color:#1a1a1a !important; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,.35); }
.aibt-add-to-cart-btn:active{ transform: translateY(0); }
.aibt-add-to-cart-btn:disabled{ background:#9ca3af !important; border-color:#9ca3af !important; opacity:.6; cursor:not-allowed; }

/* Loading state (Simplified - No Spinner) */
.aibt-add-to-cart-btn.loading{
  opacity: 0.7;
  pointer-events: none;
  cursor: not-allowed;
}
.aibt-add-to-cart-btn.loading::after{
  display: none;
}
@keyframes aibtSpin{ to{ transform: rotate(360deg);} }

/* Messages */
.aibt-message{ padding:10px 12px; margin:10px 0; border-radius:4px; font-size:13px; text-align:center; }
.aibt-message.success{ background:#d1fae5; color:#065f46; border:1px solid #10b981; }
.aibt-message.error{ background:#fee2e2; color:#991b1b; border:1px solid var(--aibt-error); }

/* =========================
   6) Modal (variations choose)
   ========================= */
.aibt-modal-overlay{
  position:fixed; inset:0; z-index:999999;
  display:flex; align-items:center; justify-content:center;
  padding:20px; background: rgba(0,0,0,.6);
}
.aibt-modal{
  width:100%; max-width: 520px; background:#fff; border-radius:8px;
  box-shadow: 0 10px 40px rgba(0,0,0,.3); animation: aibtModalIn .24s ease;
}
@keyframes aibtModalIn{ from{ opacity:0; transform: translateY(-18px);} to{ opacity:1; transform:none; } }
.aibt-modal-header{
  padding:16px; border-bottom:1px solid var(--aibt-border);
  display:flex; align-items:center; justify-content:space-between;
}
.aibt-modal-header h3{ margin:0; font-size:16px; font-weight:700; color:var(--aibt-primary); }
.aibt-modal-close{
  background:none; border:none; width:32px; height:32px; border-radius:4px; font-size:24px; line-height:1; color:#6b7280; cursor:pointer; transition:.2s;
}
.aibt-modal-close:hover{ background:#f3f4f6; color:#1f2937; }
.aibt-modal-body{ padding:16px; }
.aibt-modal-product-name{ margin:0 0 12px 0; font-size:14px; font-weight:700; color:#1f2937; }
.aibt-modal-variations{ display:flex; flex-direction:column; gap:10px; }
.aibt-variation-select{
  width:100%; min-height:38px;
  padding:8px 10px; font-size:14px; color:#1f2937;
  background:#fff; border:1px solid var(--aibt-border); border-radius:6px;
  appearance: auto; cursor:pointer; transition: border-color .15s;
}
.aibt-variation-select:focus{ outline:none; border-color: var(--aibt-primary); box-shadow: 0 0 0 3px rgba(31,41,55,.1); }
.aibt-modal-footer{
  padding:12px 16px; border-top:1px solid var(--aibt-border);
  display:flex; gap:10px; justify-content:flex-end;
}
.aibt-modal-cancel, .aibt-modal-confirm{
  padding:8px 16px; border:none; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; transition:.15s;
}
.aibt-modal-cancel{ background:#f3f4f6; color:#6b7280; }
.aibt-modal-cancel:hover{ background:#e5e7eb; color:#374151; }
.aibt-modal-confirm{ background: var(--aibt-primary); color:#fff; }
.aibt-modal-confirm:hover:not(:disabled){ background: var(--aibt-primary-2); }
.aibt-modal-confirm:disabled{ background:#d1d5db; color:#9ca3af; cursor:not-allowed; }

/* =========================
   7) Theme Modifiers
   ========================= */

/* Flatsome */
.aibt-theme-flatsome .aibt-add-to-cart-btn{
  text-transform: uppercase; letter-spacing:.5px;
}

/* WoodMart */
.aibt-theme-woodmart .aibt-container{ border-radius:0; }
.aibt-theme-woodmart .aibt-product{ border-radius:0; }
.aibt-theme-woodmart .aibt-add-to-cart-btn{ border-radius:0; text-transform:uppercase; }

/* Ecomus (mobile overflow fix: padding layout) */
.aibt-theme-ecomus.aibt-container,              /* when modifier on container */
.aibt-theme-ecomus .aibt-container {            /* or on parent */
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  box-sizing: border-box !important;
}

/* =========================
   8) Responsive
   ========================= */

/* ≥ 481px (small tablets) */
@media (min-width: 481px){
  :root{
    --aibt-card-w: 105px;
    --aibt-card-w-var: 105px;
    --aibt-gap: 8px;
  }
  .aibt-container{
    width: calc(100% - 20px);
    padding: 8px;
    margin: 10px auto;
  }
  .aibt-title{ font-size: 12.5px; }
  .aibt-product-title{ font-size: 11.5px; min-height: 28px; }
  .aibt-product-price{ font-size: 12.5px; }
  .aibt-summary{ padding: 6px 8px; }
  .aibt-total-amount{ font-size: 15px; }
}

/* ≥ 769px (desktop) */
@media (min-width: 769px){
  :root{
    --aibt-card-w: 100px;
    --aibt-card-w-var: 115px;
    --aibt-gap: 10px;
  }

  .aibt-container{
    width: fit-content;
    max-width: 100%;
    margin: 24px auto;
    padding: 20px;
    border-width: 1px;
  }

  .aibt-title{
    font-size: 16px;
    margin-bottom: 12px;
    padding-bottom: 8px;
  }

  .aibt-products-wrapper{
    padding: 10px 0;
    scrollbar-width: thin;
  }
  .aibt-products-wrapper::-webkit-scrollbar{ height: 6px; }
  .aibt-products-wrapper::-webkit-scrollbar-track{ background:#f1f1f1; border-radius:3px; }
  .aibt-products-wrapper::-webkit-scrollbar-thumb{ background: var(--aibt-primary); border-radius:3px; }
  .aibt-products-wrapper::-webkit-scrollbar-thumb:hover{ background: #000000; }

  .aibt-product{ padding: 10px; }
  .aibt-product-title{ font-size: 11.5px; min-height: 32px; }
  .aibt-product-price{ font-size: 12.5px; }
  .aibt-summary{
    flex-direction: row; align-items: center; justify-content: space-between;
    padding: 8px 12px;
  }
  .aibt-total-label, .aibt-savings-label{ font-size: 14px; }
  .aibt-total-amount{ font-size: 18px; }
  .aibt-savings-amount{ font-size: 16px; }

  .aibt-add-to-cart-btn{
    width: auto; padding: 8px 18px; font-size: 14px;
  }
}

/* ≥ 1200px (large desktop) */
@media (min-width: 1200px){
  :root{
    --aibt-card-w: 110px;
    --aibt-card-w-var: 125px;
  }
}

/* =========================
   9) Woo locations (compact)
   ========================= */
.woocommerce-variation-add-to-cart .aibt-container,
form.cart .aibt-container,
form.cart + .aibt-container,
.cart + .aibt-container{
  margin: 12px 0;
  padding: 10px;
  width: 100% !important;
  max-width: 100% !important;
}

/* Flatsome theme specific - prevent layout breaking */
.product-info .aibt-container,
.summary .aibt-container,
.product-summary .aibt-container {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* =========================================
   10) Mobile Chrome stability patch (핵심)
   ========================================= */

/* 1) flex 오버플로우 방지: 크롬은 flex item의 min-width 기본값(auto)이 넘침 유발 */
.aibt-products-wrapper,
.aibt-product {
  min-width: 0;
}

/* 2) Container: 페이지 스크롤 허용, 내부만 제어 */
.aibt-container {
  max-width: 100%;
  box-sizing: border-box;
}

/* 3) products-wrapper만 가로 스크롤 관리 */
.aibt-products-wrapper {
  position: relative;
  isolation: isolate;              /* 스택 컨텍스트 생성 */
}

/* 4) WebKit/Blink에서 스크롤바 완전 숨김 */
@supports selector(::-webkit-scrollbar) {
  .aibt-products-wrapper::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }
}

/* 5) 카드 GPU 가속 (깜빡임 방지) */
.aibt-product {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 6) Ecomus 모바일: 안전 폭 + padding 레이아웃 고정 */
@media (max-width: 768px) {
  .aibt-theme-ecomus.aibt-container,
  .aibt-theme-ecomus .aibt-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .aibt-theme-ecomus .aibt-products-wrapper,
  .aibt-theme-ecomus.aibt-container .aibt-products-wrapper {
    max-width: calc(100% - 20px);  /* 좌우 패딩 고려 */
  }
}

/* =========================================
   11) Click Animations (클릭 반응 애니메이션)
   ========================================= */

/* Keyframe Definitions */
@keyframes aibt-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes aibt-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes aibt-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

@keyframes aibt-scale-in {
  0% { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes aibt-checkmark {
  0% { transform: scale(0) rotate(-45deg); }
  50% { transform: scale(1.2) rotate(-45deg); }
  100% { transform: scale(1) rotate(-45deg); }
}

@keyframes aibt-ripple {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes aibt-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes aibt-fly-to-cart {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(50%, -50%) scale(0.5);
    opacity: 0.8;
  }
  100% {
    transform: translate(100%, -100%) scale(0);
    opacity: 0;
  }
}

/* Checkbox Click Animation */
.aibt-checkbox:active {
  animation: aibt-pulse 0.3s ease;
}

.aibt-checkbox:checked + .aibt-checkbox-label::before {
  animation: aibt-scale-in 0.2s ease;
}

/* Checkbox checkmark animation */
.aibt-checkbox:checked + .aibt-checkbox-label::after {
  animation: aibt-checkmark 0.3s ease forwards;
}

/* Product Card Click Animation */
.aibt-product.aibt-clicked {
  animation: aibt-pulse 0.4s ease;
}

.aibt-product:active {
  transform: scale(0.98);
  transition: transform 0.1s ease;
}

/* Add to Cart Button Animations */
.aibt-add-to-cart-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.aibt-add-to-cart-btn:active {
  transform: scale(0.97);
}

.aibt-add-to-cart-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Loading State (Removed - No Spinner) */
.aibt-add-to-cart-btn.loading {
  opacity: 0.7;
  pointer-events: none;
  cursor: not-allowed;
}

.aibt-add-to-cart-btn.loading::before {
  display: none;
}

/* Success State */
.aibt-add-to-cart-btn.success {
  background: var(--aibt-success) !important;
  border-color: var(--aibt-success) !important;
  animation: aibt-bounce 0.5s ease;
}

.aibt-add-to-cart-btn.success::before {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  color: #ffffff;
  animation: aibt-scale-in 0.3s ease;
}

/* Ripple Effect on Button Click */
.aibt-add-to-cart-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: none;
}

.aibt-add-to-cart-btn:active::after {
  width: 100px;
  height: 100px;
  animation: aibt-ripple 0.6s ease;
}

/* Product Image Fly Animation (optional - triggered by JS) */
.aibt-flying-image {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  animation: aibt-fly-to-cart 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Message Animations */
.aibt-message {
  animation: aibt-scale-in 0.3s ease;
}

.aibt-message.success {
  animation: aibt-bounce 0.5s ease;
}

.aibt-message.error {
  animation: aibt-shake 0.5s ease;
}

/* Hover Effects for Interactive Elements */
.aibt-product-image {
  transition: transform 0.3s ease;
}

.aibt-product:hover .aibt-product-image {
  transform: scale(1.05);
}

.aibt-product-title a {
  transition: color 0.2s ease;
}

.aibt-product-title a:hover {
  color: var(--aibt-primary-2);
}

/* Checkbox Label Hover */
.aibt-checkbox-label {
  transition: transform 0.2s ease;
}

.aibt-checkbox:not(:disabled) + .aibt-checkbox-label:hover {
  transform: scale(1.05);
}

/* Price Pulse on Update */
.aibt-total-amount.updated {
  animation: aibt-pulse 0.5s ease;
}

.aibt-savings.updated {
  animation: aibt-bounce 0.5s ease;
}

/* Variation Select Focus Animation */
.aibt-variation-select:focus {
  animation: aibt-pulse 0.3s ease;
  box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.1);
}

/* Modal Entrance Animation */
.aibt-modal-overlay {
  animation: aibt-fade-in 0.2s ease;
}

@keyframes aibt-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.aibt-modal {
  animation: aibt-slide-up 0.3s ease;
}

@keyframes aibt-slide-up {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* =========================
   Lazy Loading Styles (Simplified - No Spinner)
   ========================= */
.aibt-lazy-loading {
  min-height: 0;
  opacity: 0.6;
}

.aibt-loading {
  display: none;
}

.aibt-spinner {
  display: none;
}

.aibt-loading p {
  display: none;
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}