/**
 * 2026-03-10 - Mandar - Get Pre-Approved form styling with background_car.jpg blur
 * Modern blue theme consistent across all public forms
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

*
{
   box-sizing: border-box;
}

body
{
   font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
   margin: 0;
   padding: 0;
   min-height: 100vh;
   background: #1a1a2e;
}

/* ========== Background with blur ========== */
.pre-approved-bg
{
   position: relative;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 30px 20px;
}

.pre-approved-bg::before
{
   content: '';
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-image: url('../../images/background_car.jpg');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   filter: blur(6px) brightness(0.65);
   z-index: 0;
}

/* ========== Page title above card ========== */
.pre-approved-page-title
{
   position: relative;
   z-index: 1;
   text-align: center;
   margin-bottom: 25px;
}

.pre-approved-page-title h1
{
   font-size: 42px;
   font-weight: 800;
   color: white;
   text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
   margin: 0 0 8px 0;
   letter-spacing: -0.5px;
}

.pre-approved-page-title p
{
   font-size: 16px;
   color: rgba(255, 255, 255, 0.85);
   margin: 0;
   font-weight: 400;
}

.pre-approved-page-title img
{
   max-width: 220px;
   height: auto;
   margin-bottom: 15px;
   background: rgba(255, 255, 255, 0.95);
   padding: 12px 20px;
   border-radius: 12px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* ========== Card container ========== */
.pre-approved-container
{
   max-width: 580px;
   width: 100%;
   margin: 0 auto;
   background: rgba(255, 255, 255, 0.97);
   border-radius: 20px;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1);
   overflow: hidden;
   position: relative;
   z-index: 1;
   backdrop-filter: blur(10px);
}

.pre-approved-body
{
   padding: 35px 35px 30px;
}

/* ========== Step indicator ========== */
.step-indicator
{
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 30px;
   gap: 0;
}

.step-dot
{
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: #e8edf2;
   color: #9ca3af;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   font-size: 15px;
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   border: 3px solid transparent;
}

.step-dot.active
{
   background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
   color: white;
   box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
   border-color: transparent;
}

.step-dot.completed
{
   background: linear-gradient(135deg, #10b981 0%, #059669 100%);
   color: white;
   box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.step-line
{
   width: 70px;
   height: 3px;
   background: #e5e7eb;
   margin: 0 8px;
   border-radius: 2px;
   transition: all 0.4s ease;
}

.step-line.active
{
   background: linear-gradient(90deg, #10b981, #2563eb);
}

/* ========== Step labels ========== */
.step-labels
{
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 60px;
   margin-bottom: 25px;
}

.step-label
{
   text-align: center;
   font-size: 12px;
   font-weight: 600;
   color: #6b7280;
   line-height: 1.4;
}

.step-label.active
{
   color: #2563eb;
}

/* ========== Form step visibility ========== */
.form-step
{
   display: none;
}

.form-step.active
{
   display: block;
   animation: fadeIn 0.3s ease;
}

@keyframes fadeIn
{
   from { opacity: 0; transform: translateY(8px); }
   to { opacity: 1; transform: translateY(0); }
}

/* ========== Form sections ========== */
.form-section
{
   margin-bottom: 10px;
}

.form-group
{
   margin-bottom: 18px;
}

.form-group label
{
   display: block;
   margin-bottom: 6px;
   color: #1f2937;
   font-weight: 600;
   font-size: 13px;
   letter-spacing: 0.01em;
}

.form-control
{
   width: 100%;
   padding: 13px 16px;
   border: 2px solid #e5e7eb;
   border-radius: 10px;
   font-size: 15px;
   font-family: 'Inter', sans-serif;
   transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
   box-sizing: border-box;
   background: #fafbfc;
   color: #1f2937;
}

.form-control::placeholder
{
   color: #9ca3af;
}

.form-control:hover
{
   border-color: #cbd5e1;
   background: #fff;
}

.form-control:focus
{
   border-color: #2563eb;
   outline: none;
   box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
   background: #fff;
}

.form-row
{
   display: flex;
   gap: 16px;
   margin-bottom: 2px;
}

.form-row .form-group
{
   flex: 1;
   margin-bottom: 0;
}

/* ========== Error states ========== */
.help-block
{
   color: #dc2626;
   font-size: 12px;
   margin-top: 4px;
   font-weight: 500;
}

.has-error .form-control
{
   border-color: #dc2626;
   box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
}

/* ========== Consent section ========== */
.consent-section
{
   background: linear-gradient(135deg, #f0f7ff 0%, #f8fafc 100%);
   border: 1px solid #dbeafe;
   border-radius: 12px;
   padding: 18px 16px;
   margin-top: 20px;
   margin-bottom: 10px;
}

.consent-label
{
   display: flex;
   align-items: flex-start;
   gap: 12px;
   cursor: pointer;
   font-weight: 400;
}

.consent-label input[type="checkbox"]
{
   width: 20px;
   height: 20px;
   cursor: pointer;
   margin-top: 2px;
   flex-shrink: 0;
   accent-color: #2563eb;
}

.consent-text
{
   font-size: 12px;
   line-height: 1.7;
   color: #4b5563;
}

.consent-link
{
   color: #2563eb;
   text-decoration: none;
   font-weight: 600;
   border-bottom: 1px solid transparent;
   transition: border-color 0.2s;
}

.consent-link:hover
{
   border-bottom-color: #2563eb;
   color: #1d4ed8;
}

/* ========== Buttons ========== */
.form-nav
{
   text-align: center;
   margin-top: 25px;
}

.form-nav-split
{
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.btn-next,
.btn-submit-form
{
   background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
   color: white;
   padding: 14px 48px;
   border: none;
   border-radius: 12px;
   font-size: 15px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   font-family: 'Inter', sans-serif;
   letter-spacing: 0.02em;
   box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}

.btn-next:hover,
.btn-submit-form:hover
{
   background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
   transform: translateY(-2px);
   box-shadow: 0 8px 25px rgba(37, 99, 235, 0.4);
}

.btn-next:active,
.btn-submit-form:active
{
   transform: translateY(0);
   box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.btn-prev
{
   background: transparent;
   color: #2563eb;
   padding: 14px 28px;
   border: 2px solid #2563eb;
   border-radius: 12px;
   font-size: 15px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
   font-family: 'Inter', sans-serif;
}

.btn-prev:hover
{
   background: rgba(37, 99, 235, 0.06);
   border-color: #1d4ed8;
}

/* ========== Privacy policy ========== */
.privacy-link-section
{
   text-align: center;
   margin-top: 18px;
   padding-top: 15px;
   border-top: 1px solid #f0f0f0;
}

.btn-privacy
{
   display: inline-flex;
   align-items: center;
   gap: 6px;
   color: #2563eb;
   font-size: 13px;
   text-decoration: none;
   font-weight: 500;
   padding: 8px 18px;
   border-radius: 8px;
   transition: all 0.2s;
   border: 1px solid #dbeafe;
   background: #f0f7ff;
}

.btn-privacy:hover
{
   background: #dbeafe;
   color: #1d4ed8;
}

/* ========== Footer ========== */
.pre-approved-footer
{
   text-align: center;
   padding: 12px 20px;
   color: rgba(255, 255, 255, 0.6);
   font-size: 12px;
   position: relative;
   z-index: 1;
   margin-top: 20px;
}

.pre-approved-footer a
{
   color: rgba(255, 255, 255, 0.8);
   text-decoration: none;
}

.pre-approved-footer a:hover
{
   color: white;
}

/* ========== Responsive ========== */
@media (max-width: 768px)
{
   .pre-approved-bg
   {
      padding: 20px 15px;
   }

   .pre-approved-page-title h1
   {
      font-size: 30px;
   }

   .pre-approved-container
   {
      border-radius: 16px;
   }

   .pre-approved-body
   {
      padding: 25px 20px 20px;
   }

   .form-row
   {
      flex-direction: column;
      gap: 0;
   }

   .form-row .form-group
   {
      margin-bottom: 18px;
   }

   .step-labels
   {
      gap: 40px;
   }

   .form-nav-split
   {
      flex-direction: column-reverse;
      gap: 12px;
   }

   .btn-prev,
   .btn-next,
   .btn-submit-form
   {
      width: 100%;
   }
}