/* service-create.css
   Staged extraction of inline styles from Views/Service/Create.cshtml
   This file contains the copied CSS from the view. The original inline
   <style> blocks were intentionally left in the Razor view for validation
   and will be removed once the external stylesheet has been verified.

   Notes applied during extraction:
   - Razor-escaped media/keyframes tokens like "@@media" and "@@keyframes"
     were normalized to standard @media / @keyframes rules so this file
     is valid CSS.
   - Url.Content(...) usages were replaced with static application paths
     (e.g. /Content/Images/service-bg.jpg) because CSS files cannot
     execute Razor.
*/

/* ----------------------------------------- */
/* Hero / Intro */
.login-hero {
    background: linear-gradient(135deg, rgba(10, 25, 47, 0.98), rgba(2, 12, 27, 0.95)), url('/Content/Images/service-bg.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 80px 0 80px;
    text-align: center;
    border-bottom: 1px solid var(--accent-gold);
}

.login-hero h2 { font-weight: 800; letter-spacing: -1px; font-size: 42px; margin: 0; }
.login-hero .gold-tag { color: var(--accent-gold); text-transform: uppercase; letter-spacing: 5px; font-size: 12px; font-weight: 700; display:block; margin-bottom:10px; }

/* Card and Form */
.login-container { max-width: 450px; margin: -100px auto 80px; position: relative; z-index: 10; padding: 0 15px; }
.login-card { background: #ffffff; padding: 20px 30px; border-radius: 24px; box-shadow: 0 40px 100px rgba(0,0,0,0.1); border: 1px solid rgba(179,147,89,0.2); }
.login-card h4 { font-weight:800; color:var(--dark-navy); margin-bottom:35px; text-align:center; font-size:26px; }

.form-group { margin-bottom: 25px; }
.form-label { font-weight:700; color:var(--dark-navy); font-size:11px; margin-bottom:10px; display:block; text-transform:uppercase; letter-spacing:1px; }
.form-control { height:55px; border-radius:12px; border:1.5px solid #e2e8f0; padding:0 20px; font-size:16px; transition: all 0.3s ease; background:#f8fafc; }
.form-control:focus { border-color:var(--accent-gold); background:#fff; box-shadow:0 0 0 4px rgba(179,147,89,0.1); outline:none; }

.password-wrapper { position:relative; }
.toggle-btn { position:absolute; right:15px; top:50%; transform:translateY(-50%); background:none; border:none; color:#94a3b8; cursor:pointer; font-size:20px; }

.btn-login { background:var(--dark-navy); color:white; border:none; width:100%; padding:16px; border-radius:12px; font-weight:700; font-size:16px; transition:all 0.4s ease; margin-top:10px; cursor:pointer; box-shadow:0 10px 20px rgba(10,25,47,0.2); }
.btn-login:hover { background:var(--darker-navy); transform:translateY(-2px); box-shadow:0 15px 30px rgba(10,25,47,0.3); }
.btn-otp { background:transparent; color:var(--accent-gold); border:2px solid var(--accent-gold); width:100%; padding:14px; border-radius:12px; margin-top:15px; font-weight:700; transition:all 0.3s; }
.btn-otp:hover { background:var(--accent-gold); color:white; }

.footer-links { text-align:center; margin-top:35px; font-size:14px; color:#64748b; border-top:1px solid #f1f5f9; padding-top:25px; }
.footer-links a { color:var(--accent-gold); font-weight:700; text-decoration:none; }

#btnForgetPassword { display:block; text-align:right; font-size:13px; color:var(--accent-gold); font-weight:600; margin-top:8px; text-decoration:none; cursor:pointer; }
.text-danger.small { font-size:12px; margin-top:5px; display:block; font-weight:600; }

.btn-next { background-color:#007bff; color:white; border:none; padding:0 30px; height:45px; border-radius:8px; font-weight:600; cursor:pointer; }
.btn-prev { background:none; color:#666; border:none; font-weight:600; cursor:pointer; }

.city-wrapper { margin-bottom:40px; }
.city-header { background:#0a192f; color:#ffffff !important; padding:10px 20px; border-radius:8px; font-size:18px; font-weight:700; margin-bottom:15px; display:flex; font-size:13px; font-weight:600; text-decoration:none; transition:all 0.2s ease-in-out; }

.sc-card:hover { background:#0a192f; color:#ffffff; border-color:#0a192f; transform:scale(1.02); }
.sc-card::before { content:'•'; color:#b39359; margin-right:8px; font-size:18px; }

/* Normalize Select2 visuals */
.select2-selection__clear { display:none !important; }
.input-error { border:2px solid #ff4d4d !important; background-color:#fff9f9 !important; }
.select2-container .select2-selection.input-error { border:2px solid #ff4d4d !important; background-color:#fff9f9 !important; }
.web-input, .select2-selection { transition:border-color 0.3s ease; }
.select2-container .select2-selection--single { height:45px !important; border:1px solid #ddd !important; border-radius:8px !important; padding-top:8px !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height:42px !important; }

/* Wizard layout */
.wizard-container { max-width:1050px; margin:40px auto; background:#fff; border-radius:24px; box-shadow:0 20px 40px rgba(0,0,0,0.1); overflow:hidden; font-family:'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
.wizard-main-wrapper { display:flex; min-height:650px; }
.wizard-sidebar { flex:0 0 320px; background:#0f172a; color:#fff; padding:40px; }
.brand-badge { background:#38bdf8; color:#0f172a; padding:4px 12px; border-radius:6px; font-weight:700; font-size:12px; margin-bottom:20px; display:inline-block; }
.sidebar-title { font-size:28px; font-weight:800; margin-bottom:40px; line-height:1.2; }
.stepper-vertical { position:relative; }
.step-link { display:flex; align-items:center; margin-bottom:35px; opacity:0.3; transition:0.4s; }
.step-link.active { opacity:1; }
.dot { width:12px; height:12px; background:#38bdf8; border-radius:50%; margin-right:15px; box-shadow:0 0 10px rgba(56,189,248,0.5); }
.link-text strong { display:block; font-size:11px; text-transform:uppercase; color:#38bdf8; }
.link-text span { font-size:15px; }
.wizard-content-area { flex:1; padding:50px; position:relative; background:#fff; }
.form-section-title { font-size:22px; font-weight:700; color:#1e293b; margin-bottom:25px; }
.field-label { font-size:13px; font-weight:600; color:#64748b; margin-bottom:8px; display:block; }

/* Inputs & validation */
.web-input { height:48px; border-radius:10px; border:2px solid #f1f5f9; background:#f8fafc; font-size:15px; transition:0.3s; padding:0 15px; }
.web-input:focus { border-color:#38bdf8; background:#fff; box-shadow:none; outline:none; }
.input-error { border-color:#ef4444 !important; background-color:#fef2f2 !important; animation:shake 0.2s ease-in-out 2; }
.input-container { position:relative; }
.prefix { position:absolute; left:15px; top:13px; font-weight:700; color:#94a3b8; }
#txtMobile { padding-left:50px; }

/* Modern radios */
.modern-radio-group { display:flex; gap:12px; }
.radio-option { flex:1; cursor:pointer; }
.radio-option input { display:none; }
.radio-card { padding:12px; border:2px solid #f1f5f9; border-radius:10px; text-align:center; font-weight:600; color:#64748b; transition:0.3s; }
.radio-option input:checked + .radio-card { border-color:#2563eb; background:#eff6ff; color:#2563eb; }

.step-footer { margin-top:15px; display:flex; justify-content:space-between; align-items:center; }
.btn-primary { background:#2563eb; border:none; padding:12px 25px; border-radius:10px; font-weight:700; }
.btn-success { background:#059669; border:none; padding:12px 30px; border-radius:10px; font-weight:700; font-size:16px; }

/* Responsive rules (normalized) */
@media (max-width:600px) {
    .sc-grid { grid-template-columns: repeat(2, 1fr); }
    .collapsible-trigger { font-size:16px; }
}

@media (max-width:768px) {
    .wizard-main-wrapper { flex-direction:column; }
    .wizard-sidebar { flex:0 0 auto; padding:25px; text-align:center; }
    .stepper-vertical { display:flex; justify-content:space-between; }
    .link-text span { display:none; }
    .wizard-content-area { padding:30px 20px; }
}

@keyframes shake { 0%,100%{ transform:translateX(0);} 25%{ transform:translateX(5px);} 75%{ transform:translateX(-5px);} }

/* FAQ and content cards */
.faq-card.active { border-color:var(--ds-primary); background:#fff; }
.faq-card.active .faq-answer-wrapper { max-height:300px; }
.faq-answer-content { padding:0 24px 24px 71px; color:var(--ds-text-slate); font-size:15px; line-height:1.7; }
.ds-action-tag { margin-top:15px; font-size:12px; font-weight:600; color:#10b981; display:inline-block; padding:4px 12px; background:#ecfdf5; border-radius:20px; }
.ds-wrapper { font-family:'Inter','Segoe UI',sans-serif; max-width:1200px; margin:40px 0; padding:0 20px; color:#1e293b; }
.about-ds { background:#f8fafc; border-radius:24px; padding:40px; margin-bottom:40px; border:1px solid #e2e8f0; }
.about-ds h2 { font-size:32px; font-weight:850; color:#0f172a; margin-bottom:20px; }
.about-ds p { font-size:16px; line-height:1.8; color:#475569; margin-bottom:20px; }
.philosophy-quote { font-style:italic; color:#2563eb; font-weight:700; border-left:4px solid #2563eb; padding-left:15px; margin:20px 0; }

.theory-panel { display:flex; flex-wrap:wrap; gap:30px; background:#ffffff; }
.theory-main { flex:2; min-width:320px; }
.theory-card { background:#fff; border:1px solid #eef2f6; border-radius:20px; padding:35px; box-shadow:0 10px 30px rgba(0,0,0,0.02); margin-bottom:30px; }
.theory-title { font-size:28px; font-weight:800; color:#1e293b; margin-bottom:20px; border-left:6px solid #2563eb; padding-left:20px; }
.theory-sidebar { flex:1; min-width:280px; }

/* Brand & service grid */
.service-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap:20px; margin-top:30px; }
.service-item { background:#f8fafc; padding:15px 20px; border-radius:10px; border:1px solid #edf2f7; display:flex; align-items:center; gap:10px; font-size:14px; }
.service-item::before { content:'✓'; color:#10b981; font-weight:bold; }
.brand-section { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.brand-tag { background:white; border:1px solid #e2e8f0; padding:8px 16px; border-radius:50px; font-size:13px; font-weight:600; color:var(--ds-slate); transition:0.3s; }
.brand-tag:hover { border-color:var(--ds-blue); color:var(--ds-blue); transform:translateY(-2px); }

/* Second style block contents (marquee, animations, minor duplicates normalized) */
.marquee-card { display:inline-block; width:320px; background:#ffffff; border:1px solid #eef2f6; border-radius:16px; padding:20px; margin-right:25px; vertical-align:top; white-space:normal; box-shadow:0 10px 20px rgba(0,0,0,0.04); transition:all 0.3s ease; position:relative; overflow:hidden; }
.marquee-card:hover { transform:translateY(-5px); box-shadow:0 15px 30px rgba(0,0,0,0.08); border-color:#d1d5db; }
.user-icon { width:44px; height:44px; background:linear-gradient(135deg,#f1f5f9 0%, #e2e8f0 100%); border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:700; color:#475569; font-size:18px; }
.live-pulse { width:8px; height:8px; background:#10b981; border-radius:50%; display:inline-block; margin-right:5px; box-shadow:0 0 0 rgba(16,185,129,0.4); animation:pulse-green 2s infinite; }

@keyframes pulse-green { 0%{ box-shadow:0 0 0 0 rgba(16,185,129,0.7);} 70%{ box-shadow:0 0 0 10px rgba(16,185,129,0);} 100%{ box-shadow:0 0 0 0 rgba(16,185,129,0);} }

/* Keep additional small scoped rules for wizard interactions and animations */
.wizard-content-area { min-height:550px; position:relative; }
.wizard-step { animation:fadeIn 0.4s ease-in-out; }
@keyframes fadeIn { from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} }

/* Accessibility / helper classes */
.policy-box { background:#f8fafc; padding:15px; border-radius:10px; border:1px solid #e2e8f0; }
.m-t-15 { margin-top:20px; }

/* Variables fallback */
:root { --ds-blue:#2563eb; --ds-dark:#0f172a; --ds-slate:#475569; --ds-accent:#38bdf8; --ds-bg-warm:#fff9f5; }

/* End of extracted styles */