:root{
  --brand-50:#ecfeff;--brand-200:#a5f3fc;--brand-500:#06b6d4;--brand-600:#0891b2;--brand-700:#0e7490;
  --ink-700:#334155;--ink-500:#64748b;--danger-600:#e11d48;
  --bg-grad-1:#eefcfb;--bg-grad-2:#ffffff;
}
@media (prefers-color-scheme: dark){
  :root{--bg-grad-1:#0b1720;--bg-grad-2:#0f172a;--ink-700:#e2e8f0;--ink-500:#cbd5e1}
}
body{
  background: radial-gradient(1200px 600px at 10% -20%, var(--bg-grad-1), transparent 60%),
              radial-gradient(1000px 600px at 110% -10%, var(--bg-grad-1), transparent 55%),
              linear-gradient(180deg, var(--bg-grad-2), var(--bg-grad-2));
  color:var(--ink-700)
}
.card-soft{box-shadow:0 10px 30px rgba(2,8,23,.06); border-radius:1rem}
.brand-pill{background:var(--brand-600);color:#fff;border-radius:1rem;padding:.5rem 1rem;display:inline-block}
.option-card{cursor:pointer;transition:transform .08s ease, box-shadow .2s ease; position:relative}
.option-card:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(2,8,23,.08)}
.option-card input[type=radio]{display:none}
.option-card.active{outline:2px solid var(--brand-500);box-shadow:0 0 0 .25rem rgba(6,182,212,.18)}
.badge-reco{position:absolute; top:.5rem; right:.5rem}
.signature-pad{border:2px dashed #cbd5e1;border-radius:.75rem;background:#fff;height:170px}
.required::after{content:" *";color:var(--danger-600)}
.btn-soft{background:var(--brand-600);color:#fff;border:none}
.btn-soft:hover{background:var(--brand-700);color:#fff}
.btn-outline-brand{border-color:var(--brand-600);color:var(--brand-700)}
.btn-outline-brand:hover{background:var(--brand-600);color:#fff}
.list-group-item{border-color:#e5e7eb}
.card-demo .accepted img{height:22px}
.card-demo .form-control::placeholder{color:#94a3b8}
.card-demo .btn-pay{padding:.9rem 1rem}
.card-demo .helper{color:#64748b}
.card-demo .form-control.is-invalid, .card-demo .form-select.is-invalid{border-color:#dc3545}
.review-actions .btn{padding:.35rem .6rem}
.omc-container{margin:2rem 0}

/* Full-width & Responsive max width */
.omc-container main{width:100%}
.omc-container .card-soft{max-width:1200px; width:100%; margin-left:auto; margin-right:auto;}
.omc-container header .container, 
.omc-container main .container {max-width:100%}
.omc-container .container, .omc-container .container-fluid{padding-left:1rem; padding-right:1rem}
@media (min-width: 1400px){
  .omc-container .card-soft{max-width:1320px}
}
#step-5 .row.g-2 > [class^="col-"]{min-width: 120px}
.signature-pad {
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  background: #ffffff;
  width: 100%;
  height: 170px;       /* height fix rakhi hai */
  touch-action: none;  /* mobile touch drawing ke liye important */
  cursor: crosshair;
}

.review-actions.d-flex.gap-2 {
    display: none !important;
}

/* New CSS
/* Additional styles for new layout */
.placeholder-image {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.bg-brand-light {
  background-color: rgba(102, 126, 234, 0.1);
}

.text-brand {
  color: #667eea;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
  .card-soft {
    border-radius: 1rem;
  }
}

/* Form enhancements */
.form-control:focus, .form-select:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.btn-soft {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  font-weight: 600;
}

.btn-soft:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
  color: white;
  transform: translateY(-1px);
}

/* Shipping address transition */
#shippingAddressSection {
  transition: all 0.3s ease;
}


/* New CSS */
/* Header Responsive Styles */
@media (max-width: 767.98px) {
  .brand-pill {
    font-size: 0.8rem !important;
    padding: 0.4rem 1rem !important;
  }
  
  #loginTopBtn span {
    font-size: 0.8rem;
  }
  
  .btn-sm {
    padding: 0.3rem 0.6rem !important;
  }
}

@media (max-width: 575.98px) {
  .brand-pill {
    font-size: 0.75rem !important;
    padding: 0.35rem 0.8rem !important;
  }
  
  #loginTopBtn {
    padding: 0.3rem 0.5rem !important;
  }
  
  #loginTopBtn span {
    font-size: 0.75rem;
  }
}

@media (max-width: 400px) {
  .brand-pill {
    font-size: 0.7rem !important;
    padding: 0.3rem 0.7rem !important;
  }
  
  #loginTopBtn span {
    font-size: 0.7rem;
  }
}

/* Theme toggle animation */
#themeToggle {
  transition: all 0.3s ease;
}

#themeToggle:hover {
  border-color: #1AA3A9 !important;
  color: #1AA3A9 !important;
}

/* Login button hover effects */
#loginTopBtn {
  transition: all 0.3s ease;
}

#loginTopBtn:hover {
  background: #1AA3A9 !important;
  color: white !important;
}

/* User badge styles */
#userNameBadge {
  transition: all 0.3s ease;
}

#mobileUserInfo {
  transition: all 0.3s ease;
}

/* Plans Grid Responsive Improvements */
#plansGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

.option-card {
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2px solid #E2E8F0 !important;
}

.option-card:hover {
  border-color: #1AA3A9 !important;
  transform: translateY(-2px);
}

.option-card.active {
  border-color: #1AA3A9 !important;
  background-color: #E8F6F7;
}

.badge-reco {
  position: absolute;
  top: -8px;
  right: 12px;
  background: #1AA3A9 !important;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  #plansGrid {
    grid-template-columns: 1fr;
  }
  
  .option-card {
    margin-bottom: 1rem;
  }
  
  .review-actions {
    flex-direction: column;
    width: 100%;
  }
  
  .review-actions .btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}

/* Button spacing for mobile */
@media (max-width: 576px) {
  .d-flex.justify-content-between {
    flex-direction: column;
    gap: 1rem;
  }
  
  .d-flex.justify-content-between .btn {
    width: 100%;
    text-align: center;
  }
}

/* Duration Selection Styling */
#durationGrid .option-card {
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2px solid #E2E8F0 !important;
}

#durationGrid .option-card:hover {
  border-color: #1AA3A9 !important;
  transform: translateY(-2px);
}

#durationGrid .option-card.active {
  border-color: #1AA3A9 !important;
  background-color: #E8F6F7;
}

/* Save badge styling */
.save-badge {
  background: #198754 !important;
  color: white !important;
  padding: 2px 8px !important;
  border-radius: 12px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  white-space: nowrap;
}

/* Radio button styling */
#durationGrid .form-check-input {
  width: 1.2em;
  height: 1.2em;
  margin-top: 0.2em;
}

#durationGrid .form-check-input:checked {
  background-color: #1AA3A9;
  border-color: #1AA3A9;
}

/* Mobile responsiveness for duration grid */
@media (max-width: 768px) {
  #durationGrid .col-md-8 {
    width: 100%;
  }
  
  .save-badge {
    font-size: 0.7rem !important;
    padding: 1px 6px !important;
  }
  
  #durationGrid .option-card {
    padding: 1rem !important;
  }
}

/* Plan selection improvements */
#plansGrid .option-card {
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2px solid #E2E8F0 !important;
}

#plansGrid .option-card:hover {
  border-color: #1AA3A9 !important;
}

#plansGrid .option-card.active {
  border-color: #1AA3A9 !important;
  background-color: #E8F6F7;
}


.plan-card {
  border: 2px solid #f1f5f9 !important;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  cursor: pointer;
}

.plan-card:hover {
  transform: translateY(-4px);
  border-color: #1AA3A9 !important;
  box-shadow: 0 8px 25px rgba(26, 163, 169, 0.15) !important;
}

.plan-card.active {
  border-color: #1AA3A9 !important;
  background: linear-gradient(135deg, #f0fdfa 0%, #ecfdf5 100%);
  box-shadow: 0 8px 25px rgba(26, 163, 169, 0.2) !important;
}

.plan-card.active::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  height: 3px;
  background: linear-gradient(90deg, #1AA3A9, #10b981);
  border-radius: 8px 8px 0 0;
}

.card-badges {
  z-index: 2;
}

.card-badges .badge {
  font-size: 0.7rem;
  padding: 0.35rem 0.65rem;
  backdrop-filter: blur(10px);
}

.feature-item {
  padding: 0.25rem 0;
}

.price-section {
  padding: 1rem 0;
}

.plan-selection {
  padding-top: 1rem;
  border-top: 1px solid #f1f5f9;
}

.form-check-input {
  width: 1.2em;
  height: 1.2em;
  margin-top: 0.15em;
}

.form-check-input:checked {
  background-color: #1AA3A9;
  border-color: #1AA3A9;
}

.card-hover-border {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid transparent;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.plan-card:hover .card-hover-border {
  opacity: 1;
  border-color: #1AA3A9;
}

.transition-all {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .plan-card {
    margin-bottom: 1rem;
  }
  
  .card-body {
    padding: 1.5rem !important;
  }
  
  .price-section .h2 {
    font-size: 1.75rem;
  }
}

@media (max-width: 576px) {
  .card-badges {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
  }
  
  .plan-header {
    text-align: left !important;
  }
  
  .features-list {
    margin-bottom: 1.5rem;
  }
}

/* Fix radio button visibility */
.form-check-input {
  border: 2px solid #E2E8F0 !important;
  background-color: white;
}

.form-check-input:checked {
  background-color: #1AA3A9;
  border-color: #1AA3A9 !important;
}

.form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(26, 163, 169, 0.25);
  border-color: #1AA3A9 !important;
}