﻿/* Confirm Payment customer form — modern UI (Aurogroup) */
.wcqr--cp-form,form.wcqr--cp-form{
  max-width:420px!important;width:100%!important;
  margin:0 auto 16px!important;
  box-sizing:border-box;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:14px;
  box-shadow:0 1px 3px rgba(15,23,42,.04);
}

/* Page heading above the form — single line on desktop, wrap on mobile */
h2.wcqr--cp-heading,.wcqr--cp-heading{
  display:block!important;
  max-width:none!important;width:auto!important;
  margin:14px auto 10px!important;
  padding:0 12px!important;
  text-align:center!important;
  font-size:16px!important;font-weight:600!important;color:#0f172a!important;
  line-height:1.4!important;
  white-space:nowrap!important;
  box-sizing:border-box;
}
@media (max-width:540px){
  h2.wcqr--cp-heading,.wcqr--cp-heading{
    white-space:normal!important;font-size:15px!important;
  }
}

/* Customer intro message (above OPTION 1) */
.wcqr--cp-thankyou-intro{
  max-width:420px;margin:20px auto 12px;padding:0 8px;
  text-align:center;font-size:14px;line-height:1.5;color:#475569;
}

/* OPTION 1 / OPTION 2 cards (bank, QR) */
.wcqr--cp-option{
  max-width:420px!important;width:100%!important;
  margin:0 auto 10px!important;padding:12px 14px;
  box-sizing:border-box;
  background:#fff;border:1px solid #e2e8f0;border-radius:12px;
  box-shadow:0 1px 3px rgba(15,23,42,.04);
}
.wcqr--cp-option:first-of-type{margin-top:0}
.wcqr--cp-option-label{display:none}
.wcqr--cp-option-bank .wcqr--cp-bank-list{margin-bottom:0}
.wcqr--cp-option-bank .wcqr--cp-bank-list.grid{border:none;background:transparent;padding:0}

/* OPTION 2 (PromptPay QR) — force a tight, centered card and tame the
   stock header banner + logo + QR image regardless of which CSS files load
   first or whether the merchant has set style 1 vs style 2. */
.wcqr--cp-option-qr .wcqr--qrcode{
  margin:0 auto;max-width:280px;width:100%;
  border:none;box-shadow:none;background:transparent;
}
.wcqr--cp-option-qr .wcqr--qrcode-header{display:none!important}
.wcqr--cp-option-qr .wcqr--qrcode{margin:0 auto!important;max-width:220px}
.wcqr--cp-option-qr .wcqr--qrcode-body{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:0;background:transparent;border:none;
}
.wcqr--cp-option-qr .wcqr--qrcode-img{
  display:block;width:180px!important;max-width:100%!important;height:auto!important;
  border-radius:6px;margin:0;
}
.wcqr--cp-option-qr .wcqr--qrcode-meta{margin-top:4px!important}
.wcqr--cp-option-qr .wcqr--qrcodename{display:none!important}
.wcqr--cp-option-qr .wcqr--qrcodeprice{margin-top:2px!important}
.wcqr--cp-option-qr .wcqr--qrcode-logo{display:none!important}
.wcqr--cp-option-qr .wcqr--qrcode-img{
  display:block;width:200px!important;max-width:100%!important;height:auto!important;
  border-radius:6px;
}
.wcqr--cp-option-qr .wcqr--qrcode-meta{
  text-align:center;margin-top:8px;font-size:14px;line-height:1.6;color:#334155;
}
.wcqr--cp-option-qr .wcqr--qrcodeid{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;color:#64748b;
}
.wcqr--cp-option-qr .wcqr--qrcodename{font-weight:600;color:#0f172a;font-size:15px}
.wcqr--cp-option-qr .wcqr--qrcodeprice{font-weight:700;color:#2563eb;font-size:18px;margin-top:4px}

/* Order summary chip (replaces 7 readonly fields) */
.wcqr--cp-summary{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;
  padding:12px 16px;margin:0 0 20px;
  background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;
  font-size:14px;color:#475569;
}
.wcqr--cp-summary-item{display:inline-flex;align-items:baseline;gap:6px}
.wcqr--cp-summary-lbl{color:#94a3b8;text-transform:uppercase;font-size:11px;letter-spacing:.06em;font-weight:500}
.wcqr--cp-summary strong{color:#0f172a;font-weight:600}
.wcqr--cp-summary-sep{color:#cbd5e1}

/* Field row (used only for the rare "choose your order" dropdown) */
.wcqr--cp-field-row{margin-bottom:16px}
.wcqr--cp-field-row label{display:block;font-size:13px;font-weight:500;color:#64748b;margin-bottom:6px}
form.wcqr--cp-form label{font-size:14px;font-weight:500;display:block;margin-bottom:6px;color:#334155}

.wcqr--cp-input[type=text],.wcqr--cp-input[type=date],.wcqr--cp-input[type=time],.wcqr--cp-input[type=email]{
  font-family:inherit;font-size:15px;width:100%;height:42px;line-height:42px;
  padding:0 14px;box-sizing:border-box;
  border-radius:8px;border:1px solid #cbd5e1;background:#fff;color:#0f172a;
  transition:all .15s ease;box-shadow:none;
}
.wcqr--cp-input[type=text]:focus,.wcqr--cp-input[type=date]:focus,.wcqr--cp-input[type=time]:focus,.wcqr--cp-input[type=email]:focus{
  border-color:#2563eb;outline:none;box-shadow:0 0 0 3px #eff6ff;
}
.wcqr--cp-input.error{border-color:#ef4444!important}

/* Readonly = pulled from WooCommerce order (visual hint) */
.wcqr--cp-input[readonly]{
  background:#f8fafc;color:#475569;cursor:not-allowed;border-color:#e2e8f0;
}
.wcqr--cp-input[readonly]:focus{box-shadow:none;border-color:#e2e8f0}

/* "Fields below come from your order" notice */
.wcqr--cp-from-order-note{
  margin:0 0 16px;padding:10px 14px;
  background:#eff6ff;border-left:3px solid #2563eb;border-radius:6px;
  font-size:13px;line-height:1.5;color:#1e40af;
}

select.wcqr--cp-input{
  font-family:inherit;font-size:15px;width:100%;height:42px;line-height:42px;
  padding:0 36px 0 14px;box-sizing:border-box;
  background:#fff url("data:image/svg+xml,%3Csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4l3 3 3-3 1 1-4 4-4-4z' fill='%2364748b'/%3E%3C/svg%3E") no-repeat right 14px center;
  border-radius:8px;border:1px solid #cbd5e1;color:#0f172a;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  transition:all .15s ease;
}
select.wcqr--cp-input:focus{border-color:#2563eb;outline:none;box-shadow:0 0 0 3px #eff6ff}
select.wcqr--cp-input.error{border-color:#ef4444}

.wcqr--cp-row{display:flex;gap:16px;width:100%;margin-bottom:16px}
@media (max-width:768px){.wcqr--cp-row{flex-direction:column}}
.wcqr--cp-col{width:100%}
.wcqr_cp_error{color:#ef4444;font-size:13px;margin-top:6px;font-weight:500}

/* Bank list (compact horizontal) */
.wcqr--cp-bank{display:flex;gap:14px;align-items:center}
.wcqr--cp-bank-list{display:flex;flex-direction:column;gap:12px;margin-bottom:32px}
.wcqr--cp-bank-list.grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px;
  border:1px solid #e2e8f0;padding:16px;border-radius:12px;background:#f8fafc;
}
@media (max-width:1280px){.wcqr--cp-bank-list.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:768px){.wcqr--cp-bank-list.grid{grid-template-columns:1fr}}
.wcqr--cp-bank img{display:block;width:60px;border-radius:8px;background:#fff;padding:4px;border:1px solid #e2e8f0}
.wcqr--cp-bank h3,.wcqr--cp-bank h4,.wcqr--cp-bank h5{margin:0;padding:0;white-space:nowrap;color:#0f172a}
.wcqr--cp-bank h4{font-size:13px;margin-bottom:2px;font-weight:400;color:#64748b}
.wcqr--cp-bank h3{font-size:18px;font-weight:600}
.wcqr--cp-bank h5{font-size:14px;font-weight:500;color:#334155}

/* Slip drop area (file upload) */
#wcqr--cp-drop-area{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-sizing:border-box;width:100%;margin:0 auto 12px;min-height:84px;
  border-radius:10px;border:2px dashed #cbd5e1;background:#f8fafc;
  text-align:center;padding:14px;font-size:14px;color:#64748b;cursor:pointer;
  transition:all .2s ease;
}
#wcqr--cp-drop-area:hover{border-color:#2563eb;background:#eff6ff;color:#2563eb}
#wcqr--cp-drop-area.dragover{background:#dbeafe;border-color:#2563eb;color:#1d4ed8}
#wcqr--cp-drop-area.error{border-color:#ef4444;background:#fef2f2;color:#ef4444}
#wcqr--cp-drag-drop-text{display:flex;align-items:center;margin:0;gap:10px;font-weight:500}
#wcqr--cp-file-input-container{display:none}
#wcqr--cp-image-preview{width:100%;display:none;margin-top:10px;justify-content:center}
#wcqr--cp-image-preview:not(:empty){display:flex}
#wcqr--cp-image-preview img{
  display:block;width:auto;
  max-width:180px;max-height:180px;
  border-radius:8px;border:1px solid #e2e8f0;object-fit:cover;
  box-shadow:0 4px 6px -1px rgba(15,23,42,.07);
}
#wcqr--cp-error-message{display:none;font-size:14px;color:#ef4444;margin-top:10px;font-weight:500}
#wcqr--cp-error-message.show{display:block}

/* Submit button */
button[type=submit].wcqr--cp-button{
  cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;
  padding:0!important;height:44px;line-height:44px;width:100%;
  border-radius:8px;font-weight:600;
  background:#2563eb;color:#fff;border:none;
  margin-top:8px;box-sizing:border-box;
  transition:all .15s ease;
  box-shadow:0 1px 2px rgba(37,99,235,.15);
}
button[type=submit].wcqr--cp-button:hover{background:#1d4ed8;box-shadow:0 4px 6px -1px rgba(37,99,235,.25)}
button[type=submit].wcqr--cp-button:active{transform:translateY(1px)}
form.stylish .wcqr--cp-button{display:flex;align-items:center;justify-content:center;padding:0;margin:0;width:100%;height:48px;line-height:48px}

/* Bank radio cards (full bank details with logo) */
.wcqr--cp-fbanks{margin-bottom:16px}
form.wcqr--cp-form .wcqr--cp-fbank{display:flex;gap:12px;align-content:center}
form.wcqr--cp-form .wcqr--cp-fbank img{display:block;width:48px;border-radius:6px;background:#fff;padding:2px;border:1px solid #e2e8f0}
@media (max-width:768px){form.wcqr--cp-form .wcqr--cp-fbank img{width:60px}}
form.wcqr--cp-form .wcqr--cp-fbank-detail{display:flex;gap:14px;width:100%;align-items:center}
form.wcqr--cp-form .wcqr--cp-fbank-bname{width:30%;font-weight:500;color:#0f172a}
form.wcqr--cp-form .wcqr--cp-fbank-name{width:35%;color:#64748b;font-size:14px}
form.wcqr--cp-form .wcqr--cp-fbank-radio{position:relative;min-width:24px}
form.wcqr--cp-form .wcqr--cp-fbank-radio:before{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:block;content:"";width:18px;height:18px;
  border-radius:100%;border:2px solid #cbd5e1;background:#fff;transition:all .15s ease;
}
form.wcqr--cp-form .wcqr--cp-fbank-radio:after{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:none;content:"";width:8px;height:8px;
  border-radius:100%;background:#fff;
}
form.wcqr--cp-form .wcqr--cp-fbank label{
  display:flex;align-items:center;width:100%;gap:14px;box-sizing:border-box;
  padding:14px 16px;border-radius:10px;border:1px solid #e2e8f0;cursor:pointer;
  transition:all .15s ease;background:#fff;
}
form.wcqr--cp-form .wcqr--cp-fbank label:hover{border-color:#cbd5e1;background:#f8fafc}
form.wcqr--cp-form .wcqr--cp-fbank input[type=radio]{display:none}
form.wcqr--cp-form .wcqr--cp-fbank input[type=radio]:checked+label{border:2px solid #2563eb;background:#eff6ff;padding:13px 15px}
form.wcqr--cp-form .wcqr--cp-fbank input[type=radio]:checked+label .wcqr--cp-fbank-detail{color:#0f172a}
form.wcqr--cp-form .wcqr--cp-fbank input[type=radio]:checked+label .wcqr--cp-fbank-radio:before{border-color:#2563eb;background:#2563eb}
form.wcqr--cp-form .wcqr--cp-fbank input[type=radio]:checked+label .wcqr--cp-fbank-radio:after{display:block}
@media (max-width:768px){
  form.wcqr--cp-form .wcqr--cp-fbank-detail{flex-direction:column;align-items:flex-start;gap:2px}
  form.wcqr--cp-form .wcqr--cp-fbank-bname,form.wcqr--cp-form .wcqr--cp-fbank-name,form.wcqr--cp-form .wcqr--cp-fbank-number{width:100%}
}

/* Notice box (success/error) */
.wcqr--notice-box{
  background:#dcfce7;border:1px solid #86efac;color:#166534;
  display:block;border-radius:8px;padding:12px 16px;margin-bottom:16px;clear:both;
  font-size:14px;font-weight:500;
}
.wcqr--notice-box.error{background:#fee2e2;border-color:#fca5a5;color:#991b1b}

/* === Tindoro brand accents ===
   The plugin shipped a dark-mode block (@media prefers-color-scheme:dark) that
   painted the whole payment area navy with blue accents. The Tindoro site has
   no dark theme anywhere else, so that block made ONLY these cards flip dark —
   an off-brand, low-contrast mismatch. It has been removed so the payment area
   always uses the clean light theme. Below: recolor the plugin's blue accents
   to the Tindoro brand green (#475141, matching the header + Confirm button). */
.wcqr--cp-option-qr .wcqr--qrcodeprice{color:#475141}
.wcqr--cp-input[type=text]:focus,.wcqr--cp-input[type=date]:focus,.wcqr--cp-input[type=time]:focus,.wcqr--cp-input[type=email]:focus,select.wcqr--cp-input:focus{border-color:#475141;box-shadow:0 0 0 3px #eef1ea}
#wcqr--cp-drop-area:hover{border-color:#475141;background:#eef1ea;color:#475141}
#wcqr--cp-drop-area.dragover{background:#dde3d5;border-color:#475141;color:#3a4234}
.wcqr--cp-from-order-note{background:#eef1ea;border-left-color:#475141;color:#33402a}
form.wcqr--cp-form .wcqr--cp-fbank input[type=radio]:checked+label{border-color:#475141;background:#eef1ea}
form.wcqr--cp-form .wcqr--cp-fbank input[type=radio]:checked+label .wcqr--cp-fbank-radio:before{border-color:#475141;background:#475141}
button[type=submit].wcqr--cp-button{background:#475141;box-shadow:0 1px 2px rgba(71,81,65,.18)}
button[type=submit].wcqr--cp-button:hover{background:#3a4234;box-shadow:0 4px 6px -1px rgba(71,81,65,.28)}

/* ============================================================
   TINDORO — clean payment layout (approved design)
   Section labels shown ABOVE each card; bank card with a copy
   button; prominent "Amount to pay" card; QR as a matching card;
   uppercase confirm button. Warm cream/white on brand green #475141.
   ============================================================ */
.wcqr--cp-option,.wcqr--cp-option-bank,.wcqr--cp-option-qr{
  background:transparent!important;border:0!important;box-shadow:none!important;
  padding:0!important;max-width:460px!important;margin:0 auto 18px!important;
}
.wcqr--cp-option-label{
  display:block!important;font-size:11px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:#9a978d;margin:0 0 8px 2px;
}
.wcqr--cp-option-bank .wcqr--cp-bank-list,.wcqr--cp-option-bank .wcqr--cp-bank-list.grid{
  display:flex;flex-direction:column;gap:12px;margin:0;border:0;background:transparent;padding:0;
}
.wcqr--cp-option-bank .wcqr--cp-bank{
  background:#fff;border:1px solid #e7e5de;border-radius:12px;
  padding:12px 18px;display:flex;align-items:center;gap:14px;margin:0;
}
.wcqr--cp-option-bank .wcqr--cp-bank img{
  width:46px;height:46px;border-radius:50%;object-fit:cover;
  background:#f1f0ea;border:1px solid #e7e5de;padding:0;flex-shrink:0;
}
.wcqr--cp-option-bank .wcqr--cp-bank-detail{flex:1;min-width:0}
.wcqr--cp-option-bank .wcqr--cp-bank h4{
  font-size:11px!important;font-weight:600!important;color:#9a978d!important;text-transform:uppercase!important;
  letter-spacing:.5px!important;margin:0 0 2px!important;line-height:1.2!important;
}
.wcqr--cp-bank-numrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.wcqr--cp-option-bank .wcqr--cp-bank h3{
  font-size:18px!important;font-weight:700!important;color:#2c2c2a!important;letter-spacing:.5px!important;margin:0!important;line-height:1.2!important;
}
.wcqr--cp-option-bank .wcqr--cp-bank h5{font-size:14px;font-weight:400;color:#475141;margin:4px 0 0}
.wcqr--cp-copy-btn{
  display:inline-flex;align-items:center;cursor:pointer;background:#475141;color:#fff;
  border:0;border-radius:6px;padding:8px 14px;font-size:11px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;white-space:nowrap;transition:background .15s ease;
}
.wcqr--cp-copy-btn:hover{background:#3a4234}
.wcqr--cp-option-qr .wcqr--qrcode{
  background:#fff!important;border:1px solid #e7e5de!important;border-radius:12px!important;
  padding:18px!important;max-width:none!important;margin:0!important;box-shadow:none!important;
}
.wcqr--cp-option-qr .wcqr--qrcodeprice,.wcqr--cp-option-qr .wcqr--qrcodeprice .woocommerce-Price-amount{
  color:#475141!important;font-weight:700;
}
.wcqr--cp-amount{
  max-width:460px;margin:0 auto 14px;padding:20px 24px;text-align:center;
  background:#faf9f6;border:1px solid #ece9e1;border-radius:12px;
}
.wcqr--cp-amount-label{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#9a978d}
.wcqr--cp-amount-value,.wcqr--cp-amount-value .woocommerce-Price-amount{
  font-size:30px;font-weight:700;color:#2c2c2a;line-height:1.2;
}
.wcqr--cp-amount-value{margin:6px 0 4px}
.wcqr--cp-amount-order{font-size:13px;color:#9a978d}
h2.wcqr--cp-heading,.wcqr--cp-heading{
  max-width:none!important;color:#2c2c2a!important;font-size:18px!important;font-weight:700!important;
  margin:14px auto 14px!important;white-space:nowrap!important;text-transform:none!important;
}
@media (max-width:600px){
  h2.wcqr--cp-heading,.wcqr--cp-heading{white-space:normal!important;font-size:16px!important;padding:0 12px!important}
}
/* IT/RU: il titolo è piu' lungo dell'EN e con nowrap usciva dal riquadro — riduci leggermente solo per queste lingue */
html[lang^="it"] h2.wcqr--cp-heading,html[lang^="it"] .wcqr--cp-heading{font-size:15px!important}
html[lang^="ru"] h2.wcqr--cp-heading,html[lang^="ru"] .wcqr--cp-heading{font-size:16px!important}
.wcqr--cp-form,form.wcqr--cp-form{max-width:460px!important;border:1px solid #e7e5de!important;border-radius:12px!important}
/* CONFIRM PAYMENT = full-width footer of the form card, so its edges line up
   with the bank / QR / amount cards above (instead of being inset 14px). The
   negative margins cancel the form's 14px padding on left/right/bottom. */
button[type=submit].wcqr--cp-button{
  display:block!important;float:none!important;width:calc(100% + 28px)!important;box-sizing:border-box!important;
  margin:18px -14px -14px!important;
  border-radius:0 0 12px 12px!important;
  height:52px!important;line-height:52px!important;
  text-transform:uppercase;letter-spacing:2px;font-weight:700;
}
/* Hide the BACS gateway "Instructions" paragraph on the confirm page — the
   OPTION 1 / OPTION 2 labels are self-explanatory (matches approved design).
   Only affects the frontend page; emails don't load this stylesheet. */
.wcqr--cp-instructions{display:none!important}
/* Hide the raw PromptPay "ID: …" line under the QR — the QR already encodes it. */
.wcqr--cp-option-qr .wcqr--qrcodeid{display:none!important}
/* Hide only the small "OPTION 2 · THAI QR / PROMPTPAY" label above the QR
   (the QR card itself stays). Recovers the little space the label took. */
.wcqr--cp-option-qr .wcqr--cp-option-label{display:none!important}
/* Raise the amount closer under the QR — drop the extra gap/margins so the
   card is shorter and recovers vertical space. */
.wcqr--cp-option-qr .wcqr--qrcode-body{gap:0!important}
.wcqr--cp-option-qr .wcqr--qrcode-meta{margin-top:0!important}
.wcqr--cp-option-qr .wcqr--qrcodeprice{margin-top:2px!important}
.wcqr--cp-option-qr .wcqr--qrcode{padding:16px 18px!important}
