.bpqr-v2-wrap{max-width:980px;margin:40px auto;padding:0 0px}
.bpqr-v2-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:22px;box-shadow:0 1px 0 rgba(0,0,0,0.02)}
.bpqr-v2-title{margin:0 0 6px;font-size:28px;letter-spacing:-0.02em}
.bpqr-v2-sub{margin:0 0 18px;color:#6b7280}

.bpqr-v2-step{
  border:1px solid #e5e7eb;
  border-radius:14px;
  margin:12px 0;
  overflow:hidden;
  transition: margin 300ms ease;
}

.bpqr-v2-step.is-open{
  margin-bottom:24px;
}

/* ===============================
   Step Header
   =============================== */
.bpqr-v2-step-head{
  width:100%;
  text-align:left;
  background:#fafafa;
  border:0;
  padding:14px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
  position:relative;
  z-index:5;
  pointer-events:auto;
  transition: background-color 200ms ease;
}

.bpqr-v2-step.is-open .bpqr-v2-step-head{
  background:#f9fafb;
}

/* ===============================
   Animated Accordion Body
   =============================== */
.bpqr-v2-step-body{
  display:block;
  padding:0 16px;
  overflow:hidden;
  max-height:0;
  opacity:0;
  transform:translateY(-8px);
  position:relative;
  z-index:1;
  transition:
    max-height 450ms cubic-bezier(.4,0,.2,1),
    opacity 220ms ease,
    transform 220ms ease;
}

.bpqr-v2-step.is-open .bpqr-v2-step-body{
  padding:16px;
  max-height:1500px;
  opacity:1;
  transform:translateY(0);
}

/* ===============================
   Status / Inputs
   =============================== */
.bpqr-v2-step-status{font-size:12px;color:#6b7280}
.bpqr-v2-step-status.good{color:#067647}

.bpqr-v2-label{display:block;margin:10px 0 6px;font-weight:600}
.bpqr-v2-input{width:100%;padding:12px;border:1px solid #e5e7eb;border-radius:12px;outline:none}
.bpqr-v2-input.good{border-color:#12b76a}
.bpqr-v2-input.bad{border-color:#f04438}

.bpqr-v2-hint{font-size:13px;color:#6b7280}
.bpqr-v2-hint.good{color:#067647}
.bpqr-v2-hint.bad{color:#b42318}

/* ===============================
   Buttons & Options
   =============================== */
/* ✅ FIX 1: Removed margin-top so it aligns with Back button */
.bpqr-v2-next{
  margin-top:0; 
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #111827;
  background:#111827;
  color:#fff;
  cursor:pointer;
  font-size: 14px; /* Ensure font size matches */
  line-height: 1.5; /* Ensure line height matches */
}
.bpqr-v2-next[disabled]{opacity:.5;cursor:not-allowed}

.bpqr-v2-btn{
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #111827;
  background:#fff;
  color:#111827;
  cursor:pointer;
  font-size: 14px;
  line-height: 1.5;
}
.bpqr-v2-btn.primary{background:#111827;color:#fff}

.bpqr-v2-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ===============================
   Radio / Layouts
   =============================== */
.bpqr-v2-radio{display:flex;flex-direction:column;gap:10px}

.bpqr-v2-radio-item{
  display:flex;
  gap:12px;
  align-items:center;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:12px;
  cursor:pointer
}

.bpqr-v2-radio-item.layout{padding:14px}
.bpqr-v2-radio-item input{margin:0}

.bpqr-v2-choice-main{flex:1}
.bpqr-v2-muted{color:#6b7280;font-size:13px;margin-top:2px}
.bpqr-v2-price{font-weight:700;white-space:nowrap}

.bpqr-v2-thumb{
  width:64px;
  height:64px;
  border-radius:12px;
  object-fit:cover;
  border:1px solid #e5e7eb
}
.bpqr-v2-thumb.ph{background:#f3f4f6}

/* ===============================
   Result
   =============================== */
.bpqr-v2-result{
  border:1px dashed #e5e7eb;
  border-radius:14px;
  padding:12px;
  margin-bottom:12px
}

/* ===============================
   Live QR Preview
   =============================== */
.bpqr-live-preview{margin-top:12px;text-align:center;}
.bpqr-live-preview-box{display:inline-flex;padding:10px;border-radius:14px;border:1px dashed #e5e7eb;background:#fafafa;}
.bpqr-live-preview img{width:110px;height:110px;opacity:0.9;filter: blur(0.3px);}
.bpqr-live-preview-label{margin-top:6px;font-size:12px;color:#6b7280;}

/* ===============================
   Step 1 – Service Image Card
   =============================== */
.bpqr-v2-service-card{
  display:block;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:14px;
  cursor:pointer;
  background:#fff;
  transition:border-color 200ms ease,box-shadow 200ms ease,transform 200ms ease;
}
.bpqr-v2-service-card:hover{border-color:#111827;transform:translateY(-2px);}
.bpqr-v2-service-card.is-selected{border-color:#111827;box-shadow:0 10px 20px rgba(0,0,0,0.08);}
.bpqr-v2-service-image{display:flex;justify-content:center;margin-bottom:12px;}
.bpqr-v2-service-image img{max-width:220px;height:auto;}
.bpqr-v2-service-info{text-align:center;}

/* ===============================
   Mobile Enhancements
   =============================== */
@media (max-width: 640px) {

  .bpqr-v2-step-body { padding: 14px; }
  .bpqr-v2-radio-item { flex-direction: row; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; }
  .bpqr-v2-radio-item input { transform: scale(1.2); }
  .bpqr-v2-radio-item:not(.layout) { background: #f9fafb; border-color: #d1d5db; }
  .bpqr-v2-radio-item.layout { background: #ffffff; border-width: 2px; }
  .bpqr-v2-thumb { width: 56px; height: 56px; flex-shrink: 0; }
  .bpqr-v2-choice-main strong { font-size: 15px; display: block; margin-bottom: 4px; }
  .bpqr-v2-muted { font-size: 13px; line-height: 1.4; }
  .bpqr-v2-price { font-size: 16px; font-weight: 800; color: #111827; }
  
  .bpqr-v2-radio-item:has(input:checked) { border-color: #111827; box-shadow: 0 6px 14px rgba(0,0,0,0.08); }

  /* Buttons row */
  .bpqr-v2-step-body > div[style*="display:flex"] {
    flex-direction: row;
    gap: 12px;
  }

  /* ✅ FIX 2: Apply same sizing/padding to BOTH buttons on mobile */
  .bpqr-v2-btn.secondary,
  .bpqr-v2-next {
    flex: 1; /* Make them equal width */
    font-size: 15px;
    padding: 14px;
    height: auto;
    display: flex; /* Helps center text vertically */
    align-items: center;
    justify-content: center;
  }
}

/* ===============================
   Mobile Card Re-layout
   =============================== */
@media (max-width: 640px) {
  .bpqr-v2-radio-item.layout {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "radio image" "radio content" "radio price";
    align-items: start; gap: 12px 14px; padding: 16px;
  }
  .bpqr-v2-radio-item.layout input { grid-area: radio; margin-top: 6px; }
  .bpqr-v2-radio-item.layout .bpqr-v2-thumb { grid-area: image; width: 80px; height: 80px; margin-bottom: 6px; }
  .bpqr-v2-radio-item.layout .bpqr-v2-choice-main { grid-area: content; }
  .bpqr-v2-radio-item.layout .bpqr-v2-choice-main strong { display: block; font-size: 16px; margin-bottom: 4px; }
  .bpqr-v2-radio-item.layout .bpqr-v2-muted { font-size: 13px; line-height: 1.4; }
  .bpqr-v2-radio-item.layout .bpqr-v2-price { grid-area: price; justify-self: end; font-size: 17px; font-weight: 800; margin-top: 6px; }
}

/* ===== Gallery Modal ===== */
.bpqr-v2-modal { position: fixed; inset: 0; z-index: 99999; }
.bpqr-v2-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.bpqr-v2-modal-box { position: relative; max-width: 920px; max-height: 90vh; margin: 5vh auto; background: #fff; border-radius: 14px; padding: 20px; overflow: auto; z-index: 100000; }
.bpqr-v2-modal-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.bpqr-v2-modal-images img { width: 100%; height: auto; border-radius: 10px; cursor: zoom-in; }
.bpqr-v2-modal-close { position: absolute; top: 10px; right: 14px; font-size: 24px; border: none; background: transparent; cursor: pointer; }

@media (max-width: 640px) {
  .bpqr-v2-card { border-radius: 10px; }
  .bpqr-v2-step { border-radius: 12px; }
  .bpqr-v2-radio-item, .bpqr-v2-service-card { border-radius: 12px; }
  .bpqr-v2-thumb { border-radius: 10px; }
  .bpqr-v2-modal-box { border-radius: 10px; margin: 4vh 12px; max-width: calc(100% - 24px); padding: 16px; }
  .bpqr-v2-modal-images img { border-radius: 10px; }
  .bpqr-v2-modal-images { grid-template-columns: 1fr; }
}

.bpqr-canvas-wrap { max-width: 420px; }
#bpqr-canvas { position: relative; width: 100%; background: #eee; overflow: hidden; }
.bpqr-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
#bpqr-qr { position: absolute; width: 35%; aspect-ratio: 1; background: white; border: 2px solid #000; z-index: 10; cursor: move; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold;}
#bpqr-business-name { position: absolute; width: auto !important; display: inline-block !important; text-align: center; font-weight: 700; cursor: move; user-select: none; z-index: 20; pointer-events: auto; }

.bpqr-v2-summary-price { margin-bottom: 18px; padding: 12px 16px; border-radius: 10px; background: #f8fafc; border: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; font-size: 16px; }
.bpqr-v2-summary-price strong { font-size: 18px; font-weight: 700; }

.bpqr-lang-btn { display:inline-block; padding:6px 14px; border:1px solid #ddd; border-radius:999px; font-size:14px; text-decoration:none; color:#111; background:#fff; }
.bpqr-lang-btn:hover { background:#f3f4f6; }






/* ===============================
   Gallery Modal (Fixed & Centered)
   =============================== */
.bpqr-v2-modal { 
    position: fixed; 
    inset: 0;           /* Full viewport coverage */
    z-index: 99999; 
    display: none;      /* Hidden by default */
    
    /* Flexbox for Perfect Centering */
    display: flex; 
    align-items: center; 
    justify-content: center;
    
    /* Ensure it sits on top of WP Admin bar if present */
    top: 0 !important; 
}

/* Full Screen Dark Overlay */
.bpqr-v2-modal-overlay { 
    position: absolute; 
    inset: 0; 
    background: rgba(0, 0, 0, 0.7); 
    backdrop-filter: blur(2px); /* Optional: Adds a nice blur effect */
    z-index: 1;
}

/* The White Box */
.bpqr-v2-modal-box { 
    position: relative; 
    z-index: 10;        /* Above overlay */
    background: #fff; 
    width: 90%; 
    max-width: 920px; 
    max-height: 85vh;   /* Prevent it from being taller than screen */
    
    border-radius: 12px; 
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Internal Scrolling for Images */
    display: flex; 
    flex-direction: column;
    overflow: hidden; 
}

/* Scrollable Image Area */
.bpqr-v2-modal-images { 
    overflow-y: auto; 
    padding: 20px; 
    
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); 
    gap: 15px;
}

.bpqr-v2-modal-images img { 
    width: 100%; 
    height: auto; 
    border-radius: 8px; 
    display: block; 
    border: 1px solid #eee;
}

/* Close Button */
.bpqr-v2-modal-close { 
    position: absolute; 
    top: 10px; 
    right: 10px; 
    z-index: 20; 
    
    width: 32px; 
    height: 32px; 
    border-radius: 50%; 
    background: #f3f4f6; 
    color: #374151; 
    border: 1px solid #e5e7eb; 
    
    font-size: 20px; 
    line-height: 1; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    transition: all 0.2s;
}

.bpqr-v2-modal-close:hover { 
    background: #e5e7eb; 
    color: #000; 
}

/* RTL Support for Close Button */
[dir="rtl"] .bpqr-v2-modal-close { 
    right: auto; 
    left: 10px; 
}

/* Mobile Tweaks */
@media (max-width: 640px) {
    .bpqr-v2-modal-box { 
        width: 95%; 
        max-height: 80vh; 
    }
    
    .bpqr-v2-modal-images { 
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); 
        padding: 15px; 
    }
}


/* Make 'View real photos' link look like a button */
.bpqr-v2-gallery-link {
    display: inline-block;
    margin-top: 8px;
    padding: 6px 12px;
    background-color: #f3f4f6; /* Light gray background */
    color: #1f2937; /* Dark text */
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.bpqr-v2-gallery-link:hover {
    background-color: #e5e7eb;
    border-color: #9ca3af;
    color: #000;
}

/* Add a camera icon via CSS before the text */
.bpqr-v2-gallery-link::before {
    content: "📷 ";
    margin-right: 4px;
}