/* ===============================
   GLOBAL
================================ */
*{
  box-sizing:border-box;
}

body{
  background:#f4f6f9;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  margin:0;
}

/* ===============================
   MAIN CONTAINER
================================ */
.payment-container{
  position:relative;
  max-width:1000px;
  margin:40px auto;
  background:#fff;
  border-radius:16px;
  box-shadow:0 20px 50px rgba(0,0,0,.08);
  padding:30px;
}

/* ===============================
   HEADER
================================ */
.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #e5e7eb;
  padding-bottom:18px;
  margin-bottom:25px;
}

.logo{ height:60px; }

.title{
  font-size:20px;
  font-weight:700;
  color:#0f172a;
}
.subtitle{
  font-size:13px;
  color:#64748b;
}

/* ===============================
   CARDS
================================ */
.soft-card{
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding:22px;
}

.label{
  font-size:12px;
  color:#64748b;
}
.value{
  font-weight:600;
  color:#0f172a;
}

/* ===============================
   STEP LOCK
================================ */
.step-locked{
  opacity:.55;
}

.step-locked input,
.step-locked textarea,
.step-locked button{
  pointer-events:none;
}


/* ===============================
   CREDIT CARD
================================ */
.cc-card{
  width:100%;
  height:230px;
  position:relative;
  perspective:1200px;
}

.cc-front,
.cc-back{
  position:absolute;
  inset:0;
  border-radius:18px;
  padding:22px 24px;
  color:#fff;
  backface-visibility:hidden;
  transition:transform .6s ease;
  background:
  radial-gradient(900px 500px at 15% 15%, rgba(255,255,255,.65), transparent 45%),
  radial-gradient(700px 400px at 85% 80%, rgba(255,255,255,.35), transparent 50%),
  linear-gradient(135deg, #e5e7eb, #cbd5e1 55%, #94a3b8);
  box-shadow:
    0 25px 60px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.08);
  overflow:hidden;
}

.cc-front::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  background:
    linear-gradient(120deg,
      rgba(255,255,255,.18),
      rgba(255,255,255,.04) 35%,
      rgba(0,0,0,.25) 70%);
  pointer-events:none;
}

.cc-back{ transform:rotateY(180deg); }

.cc-card.flipped .cc-front{ transform:rotateY(180deg); }
.cc-card.flipped .cc-back{ transform:rotateY(0deg); }

/* ===============================
   CARD CONTENT
================================ */
.cc-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.cc-top img{
  height:28px;
  max-width:90px;
  object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));
}

.cc-number{
  margin-top:40px;
  font-size:24px;
  font-weight:600;
  letter-spacing:3px;
  white-space:nowrap;
  line-height:1;
  text-shadow:0 2px 4px rgba(0,0,0,.6);
}

.cc-bottom{
  display:flex;
  justify-content:space-between;
  margin-top:34px;
}

.cc-label{
  font-size:11px;
  opacity:.7;
  letter-spacing:.08em;
  text-transform:uppercase;
}

#ccName,
#ccExp{
  font-size:14px;
  font-weight:600;
  letter-spacing:.05em;
}

/* ===============================
   BACK
================================ */
.strip{
  background:#000;
  height:42px;
  margin-top:24px;
}

.cvc{
  text-align:right;
  margin-top:30px;
  font-size:14px;
}

/* ===============================
   FORM
================================ */
input, textarea{
  border-radius:10px;
  border:1px solid #e2e8f0;
  padding:10px 12px;
}

input:focus, textarea:focus{
  outline:none;
  border-color:#3b82f6;
  box-shadow:0 0 0 2px rgba(59,130,246,.15);
}

/* ===============================
   INSTALLMENTS
================================ */
.installment-table{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 14px rgba(0,0,0,.06);
}

/* ===============================
   BUTTONS
================================ */
.btn-success{
  background:#16a34a;
  border:none;
  font-weight:600;
  padding:10px 18px;
  border-radius:10px;
}
.btn-success:hover{
  background:#15803d;
}
.payment-summary {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: #1f2937;
}

.payment-summary b {
  font-weight: 600;
}

.payment-summary .total {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}
#installmentArea {
  margin-top: 10px;
}
#btnPay {
  min-width: 260px;
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 14px;
}
@media (min-width: 992px) {
  #ccCard {
    transform: scale(0.96);
  }
}
.amount-breakdown {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
}
.installment-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
}

/* ===============================
   MOBILE
================================ */
@media(max-width:768px){
  .cc-card{ height:200px; }
  .cc-number{ font-size:20px; }
}