/* --- Enhanced Header Navigation --- */
.main-navigation {
position: sticky;
top: 0;
z-index: 1000;
background: rgba(0, 40, 104, 0.9);
backdrop-filter: blur(10px);
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.main-navigation .nav-menu {
display: flex;
gap: 0.5rem;
align-items: center;
flex-wrap: wrap;
}
.main-navigation .nav-item {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
color: #ffffff; /* Pure white for better contrast */
text-decoration: none;
border-radius: 8px;
transition: all .25s ease;
position: relative;
font-weight: 500;
}
.main-navigation .nav-item:hover {
background: rgba(255,255,255,0.15); /* Increased opacity for better visibility */
color: #ffffff;
transform: translateY(-1px);
}
.main-navigation .nav-item.cta {
background: linear-gradient(135deg, #D2B48C, #DAA520);
color: #002868 !important;
font-weight: 700;
box-shadow: 0 6px 18px rgba(218,165,32,0.25);
}
.main-navigation .nav-item.cta:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(218,165,32,0.35);
}
.main-navigation .nav-item.active::after {
content: '';
position: absolute;
left: 10px;
right: 10px;
bottom: 6px;
height: 2px;
background: linear-gradient(90deg, #20b2aa, #D2B48C);
border-radius: 2px;
}
/* Mobile menu toggle (hamburger) */
.mobile-menu-toggle {
display: none;
align-items: center;
justify-content: center;
gap: 4px;
width: 44px;
height: 44px;
border: 1px solid rgba(255,255,255,0.3); /* Increased opacity for visibility */
background: transparent;
border-radius: 8px;
color: #ffffff; /* Pure white for better contrast */
cursor: pointer;
}
.mobile-menu-toggle span {
display: block;
width: 20px;
height: 2px;
background: currentColor;
border-radius: 2px;
}
@media (max-width: 768px) {
.mobile-menu-toggle { display: inline-flex; }
.main-navigation .nav-menu {
display: none;
flex-direction: column;
gap: 0.25rem;
width: 100%;
padding: 0.5rem;
}
.main-navigation.mobile-open .nav-menu {
display: flex;
}
.main-navigation .nav-item {
width: 100%;
justify-content: flex-start;
}
}
/*
Theme Name: Nashmi Immigration
Description: WordPress theme for Nashmi Immigration - Express Immigration Services
Version: 1.0
Author: Nashmi LLC
Text Domain: nashmi-immigration
*/
/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Source+Sans+Pro:wght@300;400;600;700&family=Noto+Sans+Arabic:wght@400;600;700&display=swap');
/* CSS Variables - Enhanced for Better Contrast */
:root {
/* Primary Immigration Colors */
--liberty-blue: #002868;
--hope-teal: #008B8B;
--document-tan: #D2B48C;
/* Secondary Immigration Colors */
--success-green: #1e7e34; /* Darker green for better contrast */
--slate-gray: #495057; /* Darker gray for better readability */
/* Master Brand Colors */
--nashmi-red: #C8102E;
--desert-gold: #B8860B; /* Darker gold for better contrast */
--midnight-blue: #1A2238;
--warm-white: #FAF9F6;
--stone-gray: #6c757d; /* Better contrast gray */
--deep-charcoal: #212529; /* Darker for better contrast */
/* Enhanced text colors for better contrast */
--text-primary: #212529; /* Very dark for maximum contrast */
--text-secondary: #495057; /* Medium dark for secondary text */
--text-muted: #6c757d; /* Accessible muted text */
--text-light: #ffffff; /* Pure white for dark backgrounds */
/* Gradients */
--immigration-gradient: linear-gradient(135deg, var(--liberty-blue), var(--hope-teal));
--progress-gradient: linear-gradient(135deg, var(--hope-teal), var(--success-green));
--document-gradient: linear-gradient(135deg, var(--document-tan), #E6D7A3);
/* Shadows */
--card-shadow: 0 8px 25px rgba(0, 40, 104, 0.15);
--hover-shadow: 0 12px 35px rgba(0, 40, 104, 0.25);
}
/* Brand Colors Override (aliases for convenience) */
:root {
--primary-color: #002868; /* Liberty Blue */
--secondary-color: #008B8B; /* Hope Teal */
--accent-color: #B8860B; /* Darker Desert Gold for better contrast */
--success-color: #1e7e34; /* Darker Success Green */
--text-dark: #212529; /* Enhanced dark text */
--bg-light: #FAF9F6; /* Warm White */
}
/* Typography Enhancement overrides */
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', sans-serif !important;
color: var(--text-primary) !important; /* Better contrast */
}
body {
font-family: 'Source Sans Pro', sans-serif !important;
color: var(--text-primary) !important;
background: var(--bg-light);
}
/* Global Button Harmonization */
.btn-primary { background: var(--success-color) !important; border: none !important; transition: all 0.3s ease; color: #fff !important; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(34, 139, 34, 0.3); }
/* Navigation Enhancement alias for potential .navbar usage */
.navbar, .main-navigation { background: var(--primary-color) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
/* Card Improvements */
.service-card { border: none; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.service-card:hover { transform: translateY(-5px); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15); }
/* FAQ Accordion */
.faq { max-width: 1000px; margin: 2rem auto; }
.faq-item { background: #fff; border-radius: 12px; box-shadow: var(--card-shadow); margin: 0.75rem 0; overflow: hidden; }
.faq-q {
width: 100%;
text-align: left;
padding: 1rem 1.25rem;
background: #f8f9fa;
border: 0;
font-weight: 700;
color: var(--liberty-blue);
cursor: pointer;
font-size: 1rem;
}
.faq-a {
padding: 0 1.25rem 1rem;
color: var(--text-secondary);
display: none;
line-height: 1.6;
}
.faq-item.open .faq-a { display: block; }
/* Counters */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; align-items: stretch; }
.stat { background: #fff; border-radius: 14px; padding: 1.25rem; box-shadow: var(--card-shadow); text-align: center; }
.stat .num { font-size: 2rem; font-weight: 800; color: var(--hope-teal); }
.stat .label { color: var(--text-secondary); font-weight: 600; font-size: 1rem; }
/* Testimonials */
.testimonials { background: #fff; border-radius: 16px; box-shadow: var(--card-shadow); padding: 2rem; }
.testimonial { display: none; }
.testimonial.active { display: block; }
.testimonial p { color: var(--text-primary); font-size: 1.05rem; line-height: 1.7; }
.testimonial .author { margin-top: .75rem; color: var(--text-secondary); font-weight: 600; }
/* WhatsApp Floating Button */
.whatsapp-float { position: fixed; right: 18px; bottom: 18px; z-index: 999; background: #25D366; color: #fff; display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1rem; border-radius: 999px; box-shadow: 0 10px 24px rgba(37,211,102,0.35); text-decoration: none; font-weight: 700; }
.whatsapp-float i { font-size: 1.2rem; }
/* Reset & Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
font-family: 'Source Sans Pro', 'Arial', sans-serif;
line-height: 1.6;
color: var(--text-primary);
background: var(--warm-white);
direction: ltr;
min-height: 100vh;
}
/* Ensure WordPress admin bar doesn't interfere */
body.admin-bar .site-header {
top: 32px;
}
/* Container */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
width: 100%;
}
/* RTL Support for Arabic */
body.rtl {
direction: rtl;
font-family: 'Noto Sans Arabic', 'Tahoma', 'Arial', sans-serif;
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', 'Arial Black', sans-serif;
margin-bottom: 1rem;
color: var(--liberty-blue);
line-height: 1.3; /* Better line height for readability */
}
h1 {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 800;
}
h2 {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
}
h3 {
font-size: 1.8rem;
font-weight: 600;
}
h4 {
font-size: 1.5rem;
font-weight: 600;
}
p {
margin-bottom: 1rem;
line-height: 1.7;
color: var(--text-primary); /* Ensure all paragraphs have good contrast */
}
/* Enhanced focus indicators for accessibility */
*:focus {
outline: 2px solid var(--hope-teal);
outline-offset: 2px;
}
.btn:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: 2px solid var(--hope-teal);
outline-offset: 2px;
}
/* Container */
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
}
/* Header Styles */
.site-header {
background: var(--liberty-blue);
color: var(--warm-white);
padding: 1.5rem 0;
box-shadow: 0 4px 15px rgba(0, 40, 104, 0.3);
position: sticky;
top: 0;
z-index: 1000;
}
/* Sticky state modifier */
.site-header.is-sticky {
padding: 0.75rem 0;
box-shadow: 0 6px 20px rgba(0, 40, 104, 0.35);
backdrop-filter: saturate(120%) blur(6px);
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
flex-wrap: wrap;
}
.logo-section {
display: flex;
align-items: center;
gap: 1rem;
}
.site-logo {
height: 80px;
width: auto;
filter: brightness(0) invert(1);
}
.logo-section {
display: flex;
align-items: center;
gap: 1rem;
}
.site-logo {
height: 60px;
width: auto;
max-width: 200px;
object-fit: contain;
background: transparent !important;
mix-blend-mode: normal;
filter: none;
}
.site-logo:hover {
opacity: 0.8;
transition: opacity 0.3s ease;
}
.site-branding {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.site-title {
font-family: 'Montserrat', sans-serif;
font-size: 2.2rem;
font-weight: 800;
color: var(--warm-white);
margin: 0;
}
.site-subtitle {
font-size: 1.1rem;
color: var(--hope-teal);
font-weight: 600;
margin-top: 0.2rem;
}
.header-actions {
display: flex;
align-items: center;
gap: 2rem;
flex-wrap: wrap;
}
.contact-info {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
}
.contact-item {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--warm-white);
font-size: 0.9rem;
}
.contact-item i {
color: var(--hope-teal);
}
/* Language Switcher */
.language-switcher {
display: flex;
gap: 1rem;
align-items: center;
}
.lang-btn {
background: var(--hope-teal);
color: var(--warm-white);
border: none;
padding: 0.8rem 1.5rem;
border-radius: 25px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
text-decoration: none;
font-size: 0.95rem;
}
.lang-btn:hover,
.lang-btn.active {
background: var(--desert-gold);
transform: translateY(-2px);
}
/* Language switching loading state */
.language-switching {
position: relative;
}
.language-switching::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 40, 104, 0.8);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.language-switching::before {
content: 'Switching language... | تبديل اللغة...';
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--warm-white);
padding: 20px 30px;
border-radius: 12px;
font-weight: 600;
color: var(--liberty-blue);
z-index: 10000;
box-shadow: 0 8px 32px rgba(0, 40, 104, 0.3);
font-size: 16px;
text-align: center;
min-width: 250px;
}
/* Main Content */
.main-content {
flex: 1;
min-height: calc(100vh - 120px);
}
/* Section Header */
.section-header {
text-align: center;
margin-bottom: 3rem;
padding: 2rem 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.section-header h1,
.section-header h2 {
color: var(--liberty-blue);
margin-bottom: 1rem;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
text-align: center;
width: 100%;
}
.section-header p {
font-size: 1.1rem;
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto 1rem;
line-height: 1.7;
text-align: center;
width: 100%;
}
.engineer-info {
background: var(--document-tan);
color: var(--liberty-blue);
padding: 1rem 2rem;
border-radius: 25px;
display: inline-block;
font-weight: 600;
margin-top: 1rem;
}
/* Enhanced center alignment utilities */
.text-center-force {
text-align: center !important;
display: block;
margin-left: auto !important;
margin-right: auto !important;
}
.section-header * {
text-align: center;
}
/* Ensure section headers maintain center alignment regardless of parent container */
.section-header h1,
.section-header h2,
.section-header h3,
.section-header h4,
.section-header h5,
.section-header h6 {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
display: block;
width: 100%;
}
.section-header p,
.section-header span,
.section-header div {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100%;
}
/* Override any flex or grid alignment that might interfere */
.section-header {
align-items: center !important;
justify-content: center !important;
justify-items: center !important;
place-items: center !important;
}
/* Specific fix for containers that might have different alignment */
.main-content .section-header,
.wizard-section .section-header,
.services-section .section-header,
.process-section .section-header {
text-align: center !important;
align-items: center !important;
justify-content: center !important;
}
/* Wizard Section */
.wizard-section {
background: var(--warm-white);
padding: 4rem 0;
min-height: 80vh;
}
/* Case Tracking Section */
.case-tracking-section {
background: var(--warm-white);
padding: 4rem 0;
min-height: 80vh;
}
.case-lookup {
background: white;
border-radius: 15px;
padding: 3rem;
box-shadow: var(--card-shadow);
max-width: 600px;
margin: 0 auto;
border: 2px solid var(--document-tan);
}
.lookup-form .form-group {
margin-bottom: 0;
}
.lookup-form .form-group input {
margin-bottom: 1rem;
}
/* Progress Container */
.progress-container {
margin: 2rem 0 3rem;
text-align: center;
}
.progress-bar {
width: 100%;
height: 10px;
background: rgba(0, 40, 104, 0.1);
border-radius: 10px;
overflow: hidden;
margin-bottom: 1rem;
}
.progress-fill {
height: 100%;
background: var(--progress-gradient);
border-radius: 10px;
transition: width 0.5s ease;
width: 0%;
}
.progress-text {
color: var(--liberty-blue);
font-weight: 600;
font-size: 1.1rem;
}
/* Hero Section */
.hero-section {
background: var(--immigration-gradient);
color: var(--warm-white);
padding: 6rem 0 4rem;
text-align: center;
position: relative;
overflow: hidden;
}
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.hero-content {
position: relative;
z-index: 1;
}
.hero-content h1 {
color: var(--warm-white);
margin-bottom: 1.5rem;
}
.hero-subtitle {
font-size: 1.3rem;
margin-bottom: 2rem;
opacity: 0.95;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.contact-info {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 2rem;
margin: 3rem auto 0;
max-width: 600px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.contact-engineer {
font-size: 1.1rem;
margin-bottom: 1.5rem;
font-weight: 600;
}
.contact-methods {
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
}
.contact-method {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--warm-white);
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.contact-method:hover {
color: var(--desert-gold);
transform: translateY(-2px);
}
/* Wizard Navigation */
.wizard-navigation {
display: flex;
justify-content: space-between;
margin: 2rem 0 3rem;
flex-wrap: wrap;
gap: 1rem;
}
.wizard-step-indicator {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
padding: 1rem;
border-radius: 15px;
flex: 1;
min-width: 200px;
background: rgba(112, 128, 144, 0.1);
border: 2px solid transparent;
}
.wizard-step-indicator:hover {
background: rgba(0, 139, 139, 0.1);
}
.wizard-step-indicator.active {
background: rgba(0, 40, 104, 0.1);
border-color: var(--liberty-blue);
}
.wizard-step-indicator.completed {
background: rgba(34, 139, 34, 0.1);
border-color: var(--success-green);
}
.step-number {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--slate-gray);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.2rem;
margin-bottom: 0.5rem;
transition: all 0.3s ease;
}
.wizard-step-indicator.active .step-number {
background: var(--liberty-blue);
transform: scale(1.1);
}
.wizard-step-indicator.completed .step-number {
background: var(--success-green);
}
.step-label {
font-weight: 600;
color: var(--slate-gray);
font-size: 0.9rem;
}
.wizard-step-indicator.active .step-label {
color: var(--liberty-blue);
}
.wizard-step-indicator.completed .step-label {
color: var(--success-green);
}
/* Wizard Container and Form */
.wizard-container {
background: white;
border-radius: 20px;
box-shadow: var(--card-shadow);
margin: 2rem 0;
overflow: hidden;
border: 3px solid var(--document-tan);
max-width: 100%; /* Ensure same width as other containers */
width: 100%; /* Full width alignment */
}
.wizard-form {
padding: 2rem; /* Reduced from 3rem for tighter spacing */
background: linear-gradient(145deg, #ffffff 0%, #f8fbfb 100%);
border-radius: 20px;
box-shadow:
0 15px 35px rgba(0, 40, 104, 0.1),
0 5px 15px rgba(0, 0, 0, 0.05);
position: relative;
overflow: hidden;
}
.wizard-form::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--liberty-blue), var(--hope-teal), var(--document-tan));
}
.wizard-step {
display: none;
animation: fadeInSlide 0.6s ease;
}
.wizard-step.active {
display: block;
}
@keyframes fadeInSlide {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.wizard-step h2 {
color: var(--liberty-blue);
margin-bottom: 2.5rem;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 2.2rem;
position: relative;
padding-bottom: 1rem;
}
.wizard-step h2::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(90deg, var(--hope-teal), var(--liberty-blue));
border-radius: 2px;
}
/* Form Elements */
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-bottom: 2rem;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: var(--liberty-blue);
font-size: 1rem;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 1rem 1.2rem;
border: 2px solid var(--document-tan);
border-radius: 12px;
font-size: 1rem;
transition: all 0.3s ease;
background: white;
color: var(--text-primary);
font-family: inherit;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
/* Enhanced placeholder styling for better contrast */
.form-group input::placeholder,
.form-group textarea::placeholder {
color: var(--text-secondary);
opacity: 0.8;
font-weight: 400;
}
.form-group select {
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008B8B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 16px;
padding-right: 3rem;
cursor: pointer;
z-index: 100 !important;
position: relative;
}
.form-group select:hover {
border-color: var(--hope-teal);
background-color: #f8fbfb;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--hope-teal);
box-shadow: 0 0 0 4px rgba(0, 139, 139, 0.1);
background-color: #f8fbfb;
}
.form-group input[required],
.form-group select[required],
.form-group textarea[required] {
border-left: 4px solid var(--hope-teal);
}
.form-group small {
display: block;
margin-top: 0.5rem;
color: var(--text-secondary);
font-size: 0.875rem;
line-height: 1.4;
}
/* Radio and Checkbox Groups */
.radio-group {
display: flex;
gap: 2rem;
flex-wrap: wrap;
margin-top: 0.5rem;
}
.radio-label {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
font-weight: 500;
color: var(--text-primary);
font-size: 1rem;
}
.radio-custom {
width: 20px;
height: 20px;
border: 2px solid var(--document-tan);
border-radius: 50%;
position: relative;
background: white;
transition: all 0.3s ease;
}
.radio-label input[type="radio"] {
display: none;
}
.radio-label input[type="radio"]:checked + .radio-custom {
border-color: var(--hope-teal);
background: var(--hope-teal);
}
.radio-label input[type="radio"]:checked + .radio-custom::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
/* Wizard Navigation Buttons */
.wizard-navigation-buttons {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem 3rem;
background: rgba(0, 40, 104, 0.05);
border-top: 2px solid var(--document-tan);
gap: 1rem;
}
/* Button Styles */
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2rem;
border: none;
border-radius: 10px;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
white-space: nowrap;
}
.btn-primary {
background: var(--liberty-blue);
color: white;
}
.btn-primary:hover {
background: var(--hope-teal);
transform: translateY(-2px);
box-shadow: var(--hover-shadow);
}
.btn-secondary {
background: var(--text-secondary);
color: var(--text-light);
font-weight: 600;
}
.btn-secondary:hover {
background: var(--text-primary);
transform: translateY(-2px);
color: var(--text-light);
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
}
/* Quick Actions */
.quick-actions-section {
background: var(--warm-white);
padding: 3rem 0;
border-top: 3px solid var(--document-tan);
}
.quick-actions {
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
}
.quick-action-btn {
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem;
background: white;
border-radius: 15px;
box-shadow: var(--card-shadow);
text-decoration: none;
color: var(--liberty-blue);
transition: all 0.3s ease;
min-width: 200px;
border: 2px solid var(--document-tan);
}
.quick-action-btn:hover {
transform: translateY(-5px);
box-shadow: var(--hover-shadow);
border-color: var(--hope-teal);
}
.quick-action-btn i {
font-size: 2rem;
margin-bottom: 1rem;
color: var(--hope-teal);
}
.quick-action-btn span {
font-weight: 600;
font-size: 1.1rem;
}
/* Document Upload Styles */
.documents-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin: 2rem 0;
}
.document-item h4 {
color: var(--liberty-blue);
margin-bottom: 1rem;
font-weight: 600;
}
.required {
color: var(--nashmi-red);
font-weight: 700;
}
.file-upload-area {
border: 3px dashed var(--document-tan);
border-radius: 15px;
padding: 2rem;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
background: rgba(210, 180, 140, 0.05);
min-height: 120px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.file-upload-area:hover {
border-color: var(--hope-teal);
background: rgba(0, 139, 139, 0.05);
}
.file-upload-area.dragover {
border-color: var(--liberty-blue);
background: rgba(0, 40, 104, 0.1);
transform: scale(1.02);
}
.file-upload-area.uploading {
border-color: var(--desert-gold);
background: rgba(212, 175, 55, 0.1);
}
.file-upload-area.uploaded {
border-color: var(--success-green);
background: rgba(34, 139, 34, 0.1);
}
.upload-status {
color: var(--slate-gray);
font-weight: 600;
}
.upload-status i {
font-size: 1.5rem;
margin-bottom: 0.5rem;
display: block;
}
.file-upload-area.uploading .upload-status {
color: var(--desert-gold);
}
.file-upload-area.uploaded .upload-status {
color: var(--success-green);
}
/* Enhanced file upload states for individual files */
.file-item.uploading {
opacity: 0.7;
background: rgba(0, 123, 255, 0.05);
border-left: 3px solid #007bff;
}
.file-item.uploaded {
background: rgba(40, 167, 69, 0.05);
border-left: 3px solid #28a745;
}
.file-item.error {
background: rgba(220, 53, 69, 0.05);
border-left: 3px solid #dc3545;
}
.file-status {
font-size: 0.8rem;
margin-top: 0.25rem;
color: #666;
}
.upload-progress {
color: #007bff;
}
.text-success {
color: #28a745 !important;
}
.text-danger {
color: #dc3545 !important;
}
/* Terms Section */
.terms-section {
margin: 3rem 0 2rem;
padding: 2rem;
background: rgba(0, 40, 104, 0.05);
border-radius: 15px;
border: 2px solid var(--document-tan);
}
.checkbox-label {
display: flex;
align-items: flex-start;
gap: 1rem;
cursor: pointer;
font-size: 1rem;
line-height: 1.6;
}
.checkbox-custom {
width: 20px;
height: 20px;
border: 2px solid var(--document-tan);
border-radius: 5px;
background: white;
flex-shrink: 0;
margin-top: 2px;
transition: all 0.3s ease;
}
.checkbox-label input[type="checkbox"] {
display: none;
}
.checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
background: var(--hope-teal);
border-color: var(--hope-teal);
}
.checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
content: '✓';
color: white;
font-weight: 700;
font-size: 14px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.checkbox-custom {
position: relative;
}
/* Success Container */
.success-container {
text-align: center;
padding: 4rem 2rem;
}
.success-message {
background: white;
border-radius: 20px;
padding: 4rem 2rem;
box-shadow: var(--card-shadow);
border: 3px solid var(--success-green);
max-width: 600px;
margin: 0 auto;
}
.success-message i {
font-size: 4rem;
color: var(--success-green);
margin-bottom: 2rem;
}
.success-message h2 {
color: var(--success-green);
margin-bottom: 1.5rem;
}
.success-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 2rem;
}
/* Error and Validation Styles */
.field-error {
color: #dc3545; /* Stronger red for better contrast */
font-size: 0.875rem;
margin-top: 0.5rem;
font-weight: 600; /* Increased weight for better readability */
display: block;
}
.form-group input.error,
.form-group select.error,
.form-group textarea.error {
border-color: #dc3545; /* Consistent with Bootstrap danger color */
box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}
.error-message {
background: #dc3545; /* Standard accessible red */
color: #ffffff; /* Pure white for maximum contrast */
padding: 1rem 2rem;
border-radius: 10px;
margin: 1rem 0;
display: flex;
align-items: center;
gap: 1rem;
position: fixed;
top: 100px;
right: 20px;
z-index: 10000;
box-shadow: var(--hover-shadow);
max-width: 400px;
font-weight: 600;
}
.success-notification {
background: #28a745; /* Standard accessible green */
color: #ffffff; /* Pure white for maximum contrast */
padding: 1rem 2rem;
border-radius: 10px;
margin: 1rem 0;
display: flex;
align-items: center;
gap: 1rem;
position: fixed;
top: 100px;
right: 20px;
z-index: 10000;
box-shadow: var(--hover-shadow);
max-width: 400px;
font-weight: 600;
}
.close-error,
.close-success {
background: none;
border: none;
color: #ffffff;
font-size: 1.5rem;
cursor: pointer;
margin-left: auto;
opacity: 0.8;
transition: opacity 0.3s ease;
}
.close-error:hover,
.close-success:hover {
opacity: 1;
}
/* Animation */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive Design */
@media (max-width: 768px) {
.form-row {
grid-template-columns: 1fr;
gap: 1rem;
}
.section-header {
padding: 1.5rem 1rem;
margin-bottom: 2rem;
text-align: center;
}
.section-header h1,
.section-header h2 {
font-size: clamp(1.8rem, 5vw, 2.5rem);
text-align: center;
margin-bottom: 1rem;
line-height: 1.2;
}
.section-header p {
font-size: 1rem;
max-width: 100%;
padding: 0 0.5rem;
text-align: center;
margin: 0 auto 1rem;
line-height: 1.6;
}
.wizard-navigation {
justify-content: center;
flex-wrap: wrap;
gap: 0.5rem;
}
.wizard-step-indicator {
min-width: 140px;
flex: none;
padding: 0.8rem 0.5rem;
font-size: 0.85rem;
}
.wizard-form {
padding: 2rem 1rem;
}
.wizard-navigation-buttons {
flex-direction: column;
gap: 1rem;
padding: 2rem 1rem;
}
.btn {
width: 100%;
justify-content: center;
}
.documents-grid {
grid-template-columns: 1fr;
}
.quick-actions {
flex-direction: column;
align-items: center;
}
.header-content {
flex-direction: column;
gap: 1rem;
}
.header-actions {
flex-direction: column;
gap: 1rem;
width: 100%;
}
.contact-info {
flex-direction: column;
gap: 0.5rem;
align-items: center;
}
}
@media (max-width: 480px) {
.wizard-step h2 {
font-size: 1.5rem;
}
.site-title {
font-size: 1.8rem;
}
.section-header {
padding: 1.5rem 0;
margin-bottom: 2rem;
}
.section-header h1,
.section-header h2 {
font-size: 2rem;
text-align: center;
margin-bottom: 0.75rem;
}
.section-header p {
font-size: 1rem;
max-width: 100%;
padding: 0 1rem;
text-align: center;
margin: 0 auto 1rem;
}
.error-message,
.success-notification {
position: relative;
top: auto;
right: auto;
margin: 1rem;
max-width: none;
}
}
.wizard-container {
background: var(--warm-white);
min-height: 80vh;
padding: 4rem 0;
}
.wizard-card {
background: white;
border-radius: 20px;
box-shadow: var(--card-shadow);
margin: 2rem auto;
max-width: 1000px;
overflow: hidden;
border: 3px solid var(--document-tan);
}
.wizard-header {
background: var(--document-gradient);
padding: 2rem;
text-align: center;
color: var(--liberty-blue);
}
.wizard-progress {
margin: 2rem 0;
}
.progress-bar {
width: 100%;
height: 8px;
background: rgba(0, 40, 104, 0.1);
border-radius: 10px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: var(--progress-gradient);
border-radius: 10px;
transition: width 0.5s ease;
}
.progress-steps {
display: flex;
justify-content: space-between;
margin-top: 1rem;
padding: 0 1rem;
}
.progress-step {
display: flex;
flex-direction: column;
align-items: center;
font-size: 0.9rem;
color: var(--slate-gray);
transition: all 0.3s ease;
}
.progress-step.active {
color: var(--liberty-blue);
font-weight: 600;
}
.progress-step.completed {
color: var(--success-green);
}
.step-circle {
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--slate-gray);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
margin-bottom: 0.5rem;
transition: all 0.3s ease;
}
.progress-step.active .step-circle {
background: var(--liberty-blue);
transform: scale(1.1);
}
.progress-step.completed .step-circle {
background: var(--success-green);
}
/* Form Sections */
.wizard-body {
padding: 3rem;
}
.form-section {
display: none;
animation: fadeIn 0.5s ease;
}
.form-section.active {
display: block;
}
.section-title {
color: var(--liberty-blue);
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 3px solid var(--hope-teal);
}
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: var(--liberty-blue);
font-size: 1rem;
}
.form-control {
width: 100%;
padding: 1rem;
border: 2px solid var(--document-tan);
border-radius: 10px;
font-size: 1rem;
transition: all 0.3s ease;
background: var(--warm-white);
}
.form-control:focus {
outline: none;
border-color: var(--hope-teal);
box-shadow: 0 0 0 3px rgba(0, 139, 139, 0.1);
}
.form-control:invalid {
border-color: var(--nashmi-red);
}
.radio-group,
.checkbox-group {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.radio-option,
.checkbox-option {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
padding: 0.8rem 1.2rem;
border: 2px solid var(--document-tan);
border-radius: 10px;
transition: all 0.3s ease;
background: var(--warm-white);
}
.radio-option:hover,
.checkbox-option:hover {
border-color: var(--hope-teal);
background: rgba(0, 139, 139, 0.05);
}
.radio-option input[type="radio"]:checked + span,
.checkbox-option input[type="checkbox"]:checked + span {
font-weight: 600;
color: var(--liberty-blue);
}
/* File Upload */
.file-upload-area {
border: 3px dashed var(--document-tan);
border-radius: 15px;
padding: 2rem;
text-align: center;
background: var(--warm-white);
transition: all 0.3s ease;
cursor: pointer;
}
.file-upload-area:hover {
border-color: var(--hope-teal);
background: rgba(0, 139, 139, 0.05);
}
.file-upload-area.dragover {
border-color: var(--success-green);
background: rgba(34, 139, 34, 0.1);
}
.upload-icon {
font-size: 3rem;
color: var(--document-tan);
margin-bottom: 1rem;
}
.upload-text {
font-size: 1.1rem;
color: var(--slate-gray);
margin-bottom: 1rem;
}
.upload-button {
background: var(--hope-teal);
color: var(--warm-white);
border: none;
padding: 1rem 2rem;
border-radius: 10px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
}
.upload-button:hover {
background: var(--liberty-blue);
transform: translateY(-2px);
}
.uploaded-files {
margin-top: 1rem;
}
.uploaded-file {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--document-tan);
padding: 0.8rem 1rem;
border-radius: 8px;
margin-bottom: 0.5rem;
color: var(--liberty-blue);
}
.file-remove {
background: var(--nashmi-red);
color: white;
border: none;
border-radius: 50%;
width: 25px;
height: 25px;
cursor: pointer;
font-size: 0.9rem;
}
/* Navigation Buttons */
.wizard-navigation {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem 3rem;
background: rgba(0, 40, 104, 0.05);
border-top: 1px solid var(--document-tan);
}
.nav-btn {
background: var(--liberty-blue);
color: var(--warm-white);
border: none;
padding: 1rem 2.5rem;
border-radius: 10px;
cursor: pointer;
font-weight: 600;
font-size: 1.1rem;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
}
.nav-btn:hover {
background: var(--hope-teal);
transform: translateY(-2px);
box-shadow: var(--hover-shadow);
}
.nav-btn:disabled {
background: var(--slate-gray);
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.nav-btn.secondary {
background: var(--document-tan);
color: var(--liberty-blue);
}
.nav-btn.secondary:hover {
background: var(--desert-gold);
}
.nav-btn.submit {
background: var(--success-green);
}
.nav-btn.submit:hover {
background: #1e7c1e;
}
/* Case Tracking - Modern Timeline Design */
.case-tracking-section {
background: white;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 40, 104, 0.1);
overflow: hidden;
margin: 2rem 0;
}
.tracking-container {
padding: 2rem;
}
.case-lookup {
margin-bottom: 3rem;
}
.lookup-input-group {
display: flex;
gap: 1rem;
max-width: 600px;
margin: 0 auto;
align-items: stretch;
}
.input-wrapper {
flex: 1;
position: relative;
}
.input-wrapper i {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: var(--hope-teal);
font-size: 1.1rem;
}
.input-wrapper input {
width: 100%;
padding: 1rem 1rem 1rem 3rem;
border: 2px solid var(--document-tan);
border-radius: 12px;
font-size: 1rem;
transition: all 0.3s ease;
background: white;
}
.input-wrapper input:focus {
outline: none;
border-color: var(--hope-teal);
box-shadow: 0 0 0 4px rgba(0, 139, 139, 0.1);
}
.btn-track {
padding: 1rem 2rem;
background: linear-gradient(135deg, var(--hope-teal), var(--liberty-blue));
color: white;
border: none;
border-radius: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
}
.btn-track:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 139, 139, 0.3);
}
/* Loading State */
.tracking-loading {
text-align: center;
padding: 3rem 0;
}
.loading-spinner .spinner {
width: 50px;
height: 50px;
border: 4px solid #f3f3f3;
border-top: 4px solid var(--hope-teal);
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 1rem;
}
.loading-spinner p {
color: var(--liberty-blue);
font-weight: 500;
}
/* Case Header */
.case-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
background: linear-gradient(135deg, #f8fbfb, #e8f4f8);
padding: 2rem;
border-radius: 15px;
margin-bottom: 2rem;
border-left: 5px solid var(--hope-teal);
}
.case-info h3 {
color: var(--liberty-blue);
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.case-meta {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.case-meta span {
background: white;
padding: 0.3rem 0.8rem;
border-radius: 20px;
font-size: 0.85rem;
color: var(--slate-gray);
border: 1px solid var(--document-tan);
}
.current-status .status-badge {
background: white;
padding: 1rem 1.5rem;
border-radius: 25px;
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
border: 2px solid var(--success-green);
color: var(--success-green);
}
.status-badge.pending {
border-color: #ffc107;
color: #ffc107;
}
.status-badge.processing {
border-color: var(--hope-teal);
color: var(--hope-teal);
}
.status-badge.missing_documents {
border-color: #ff6b35;
color: #ff6b35;
background: rgba(255, 107, 53, 0.1);
animation: pulse-orange 2s infinite;
}
@keyframes pulse-orange {
0% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.4); }
70% { box-shadow: 0 0 0 6px rgba(255, 107, 53, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0); }
}
.status-badge.approved {
border-color: var(--success-green);
color: var(--success-green);
}
.status-badge.rejected {
border-color: #dc3545;
color: #dc3545;
}
/* Timeline Design */
.progress-timeline {
margin: 3rem 0;
}
.timeline-header {
text-align: center;
margin-bottom: 2rem;
}
.timeline-header h4 {
color: var(--liberty-blue);
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.timeline-header p {
color: var(--slate-gray);
}
.timeline-container {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.timeline-track {
display: flex;
justify-content: space-between;
align-items: flex-start;
position: relative;
padding: 2rem 0;
}
.timeline-track::before {
content: '';
position: absolute;
top: 50px;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--document-tan), var(--hope-teal));
z-index: 1;
}
.timeline-item {
flex: 1;
text-align: center;
position: relative;
z-index: 2;
}
.timeline-point {
width: 60px;
height: 60px;
border-radius: 50%;
background: white;
border: 4px solid var(--document-tan);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
font-size: 1.2rem;
transition: all 0.3s ease;
position: relative;
}
.timeline-item.completed .timeline-point {
background: var(--success-green);
border-color: var(--success-green);
color: white;
}
.timeline-item.active .timeline-point {
background: var(--hope-teal);
border-color: var(--hope-teal);
color: white;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(0, 139, 139, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(0, 139, 139, 0); }
100% { box-shadow: 0 0 0 0 rgba(0, 139, 139, 0); }
}
.timeline-content h5 {
color: var(--liberty-blue);
font-weight: 600;
margin-bottom: 0.5rem;
font-size: 0.9rem;
}
.timeline-content p {
color: var(--slate-gray);
font-size: 0.8rem;
line-height: 1.4;
}
.timeline-date {
font-size: 0.75rem;
color: var(--hope-teal);
font-weight: 500;
margin-top: 0.5rem;
}
/* Case Details */
.case-details {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.detail-section {
background: #f8fbfb;
padding: 1.5rem;
border-radius: 12px;
border-left: 4px solid var(--hope-teal);
}
.detail-section h5 {
color: var(--liberty-blue);
font-weight: 700;
margin-bottom: 1rem;
font-size: 1.1rem;
}
.contact-details p {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
color: var(--deep-charcoal);
}
.contact-details i {
color: var(--hope-teal);
width: 16px;
}
/* Error State */
.case-not-found {
text-align: center;
padding: 3rem 2rem;
}
.error-content i {
font-size: 4rem;
color: #ffc107;
margin-bottom: 1rem;
}
.error-content h3 {
color: var(--liberty-blue);
margin-bottom: 1rem;
}
.error-content p {
color: var(--slate-gray);
margin-bottom: 2rem;
}
.error-help {
background: #f8f9fa;
padding: 1.5rem;
border-radius: 10px;
border: 1px solid #e9ecef;
}
.contact-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--hope-teal);
text-decoration: none;
font-weight: 600;
margin-top: 0.5rem;
}
.contact-link:hover {
color: var(--liberty-blue);
}
/* Responsive Design */
@media (max-width: 768px) {
.lookup-input-group {
flex-direction: column;
}
.case-header {
flex-direction: column;
gap: 1rem;
text-align: center;
}
.timeline-track {
flex-direction: column;
gap: 2rem;
}
.timeline-track::before {
width: 4px;
height: 100%;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.timeline-item {
display: flex;
align-items: center;
text-align: left;
gap: 1rem;
}
.timeline-point {
flex-shrink: 0;
margin: 0;
}
.case-details {
grid-template-columns: 1fr;
}
}
.tracking-container {
max-width: 800px;
margin: 4rem auto;
padding: 0 2rem;
}
.tracking-card {
background: white;
border-radius: 20px;
box-shadow: var(--card-shadow);
padding: 3rem;
text-align: center;
border: 3px solid var(--success-green);
}
.case-number {
background: var(--immigration-gradient);
color: var(--warm-white);
padding: 1.5rem 3rem;
border-radius: 15px;
font-size: 2rem;
font-weight: 800;
margin: 2rem 0;
letter-spacing: 2px;
}
.tracking-steps {
display: flex;
justify-content: space-between;
margin: 3rem 0;
position: relative;
}
.tracking-steps::before {
content: '';
position: absolute;
top: 20px;
left: 10%;
right: 10%;
height: 4px;
background: var(--document-tan);
z-index: 0;
}
.tracking-step {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 1;
background: var(--warm-white);
padding: 0 1rem;
min-width: 120px;
}
.tracking-step.completed .tracking-icon,
.tracking-step.current .tracking-icon {
background: var(--success-green);
color: white;
}
.tracking-step.current .tracking-icon {
background: var(--hope-teal);
animation: pulse 2s infinite;
}
.tracking-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--slate-gray);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
margin-bottom: 1rem;
transition: all 0.3s ease;
}
.tracking-label {
font-size: 0.9rem;
font-weight: 600;
color: var(--liberty-blue);
text-align: center;
line-height: 1.3;
}
.tracking-step.completed .tracking-label,
.tracking-step.current .tracking-label {
color: var(--success-green);
}
/* =====================================================
FOOTER STYLING - COMPLETE REDESIGN FOR VISIBILITY
===================================================== */
/* Step 1: Foundation - Main Footer Container with Shemagh Pattern */
.site-footer {
background: linear-gradient(135deg, #1A2238 0%, #C8102E 100%);
color: var(--warm-white);
padding: 5rem 0 2rem;
margin-top: 0;
border-top: none;
position: relative;
overflow: hidden;
}
/* Shemagh Pattern Background - Matching Hero Section */
.site-footer::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cdefs%3E%3Cpattern id='footerShemagPattern' x='0' y='0' width='100' height='100' patternUnits='userSpaceOnUse'%3E%3Cline x1='50' y1='0' x2='100' y2='50' stroke='rgba(212,175,55,0.3)' stroke-width='2'/%3E%3Cline x1='0' y1='50' x2='50' y2='100' stroke='rgba(212,175,55,0.3)' stroke-width='2'/%3E%3Cline x1='50' y1='0' x2='0' y2='50' stroke='rgba(212,175,55,0.3)' stroke-width='2'/%3E%3Cline x1='100' y1='50' x2='50' y2='100' stroke='rgba(212,175,55,0.3)' stroke-width='2'/%3E%3Ccircle cx='0' cy='0' r='7' fill='%23D4AF37' opacity='0.7'/%3E%3Ccircle cx='100' cy='0' r='7' fill='%23D4AF37' opacity='0.7'/%3E%3Ccircle cx='0' cy='100' r='7' fill='%23D4AF37' opacity='0.7'/%3E%3Ccircle cx='100' cy='100' r='7' fill='%23D4AF37' opacity='0.7'/%3E%3Ccircle cx='50' cy='50' r='9' fill='%23F4D03F' opacity='0.8'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23footerShemagPattern)'/%3E%3C/svg%3E");
background-size: 100px 100px;
opacity: 0.15;
z-index: 1;
pointer-events: none;
}
/* Traditional Top Border */
.site-footer::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 6px;
background: repeating-linear-gradient(
90deg,
#D4AF37 0px,
#D4AF37 20px,
#F4D03F 20px,
#F4D03F 40px
);
box-shadow: 0 3px 20px rgba(212, 175, 55, 0.5);
z-index: 10;
}
/* Ensure all footer content appears above pattern */
.site-footer * {
position: relative;
z-index: 2;
}
/* Ensure ALL footer text is visible with proper gold accents */
.site-footer p,
.site-footer span,
.site-footer div,
.site-footer li,
.site-footer a {
color: rgba(250, 249, 246, 0.9) !important;
}
/* Step 2: Layout Structure - Responsive Footer Content */
.footer-content {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
margin-bottom: 3rem;
padding: 0 2rem;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 1200px) {
.footer-content {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
}
@media (max-width: 768px) {
.footer-content {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 0 1rem;
}
}
/* Step 3: Footer Sections Styling - Glass Card Design */
.footer-section {
padding: 1.5rem;
background: rgba(250, 249, 246, 0.05);
backdrop-filter: blur(20px);
border-radius: 16px;
border: 2px solid rgba(212, 175, 55, 0.2);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
}
.footer-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: radial-gradient(circle, rgba(212, 175, 55, 0.03) 2px, transparent 2px);
background-size: 30px 30px;
pointer-events: none;
opacity: 0.5;
}
.footer-section:hover {
background: rgba(250, 249, 246, 0.1);
transform: translateY(-5px);
border-color: #D4AF37;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(212, 175, 55, 0.2);
}
.footer-section h4 {
color: #F4D03F !important;
margin-bottom: 1.5rem;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 1.2rem;
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 2px solid rgba(212, 175, 55, 0.3);
padding-bottom: 0.8rem;
position: relative;
}
.footer-section h4::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 60px;
height: 2px;
background: linear-gradient(90deg, #D4AF37, #F4D03F);
box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}
/* Step 4: Contact Details with Gold Accents */
.contact-details p {
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.5rem 0;
transition: all 0.3s ease;
}
.contact-details p:hover {
color: #F4D03F !important;
transform: translateX(5px);
}
.contact-details i {
color: #D4AF37 !important;
width: 20px;
text-align: center;
font-size: 1.1rem;
}
.contact-details a {
color: rgba(250, 249, 246, 0.9) !important;
text-decoration: none;
transition: all 0.3s ease;
font-weight: 500;
}
.contact-details a:hover {
color: #F4D03F !important;
text-decoration: underline;
}
/* Step 5: Lists Styling with Gold Highlights */
.services-list,
.quick-links {
list-style: none;
padding: 0;
margin: 0;
}
.services-list li,
.quick-links li {
margin-bottom: 0.8rem;
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.5rem;
border-radius: 6px;
transition: all 0.3s ease;
}
.services-list li:hover,
.quick-links li:hover {
background: rgba(212, 175, 55, 0.1);
transform: translateX(5px);
}
.services-list i,
.quick-links i {
color: #D4AF37 !important;
width: 20px;
text-align: center;
font-size: 1rem;
}
.quick-links a {
color: rgba(250, 249, 246, 0.9) !important;
text-decoration: none;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.8rem;
font-weight: 500;
width: 100%;
}
.quick-links a:hover {
color: #F4D03F !important;
text-decoration: underline;
}
/* Office Hours */
.office-hours p {
margin-bottom: 0.8rem;
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.3rem 0;
}
.office-hours i {
color: #D4AF37 !important;
width: 20px;
text-align: center;
}
/* Step 6: Social Links with Gold Styling */
.social-links {
margin-top: 2rem;
}
.social-links h5 {
color: #F4D03F !important;
margin-bottom: 1rem;
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
background: linear-gradient(135deg, #D4AF37 0%, #F4D03F 100%);
color: #1A2238 !important;
border-radius: 50%;
text-decoration: none;
margin-right: 1rem;
margin-bottom: 0.5rem;
transition: all 0.3s ease;
font-size: 1.2rem;
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}
.social-link:hover {
background: linear-gradient(135deg, #F4D03F 0%, #D4AF37 100%);
transform: translateY(-5px) scale(1.1);
box-shadow: 0 8px 25px rgba(212, 175, 55, 0.5);
}
/* Step 7: Footer Certifications with Gold Accents */
.footer-certifications {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 2rem;
margin: 3rem 0;
padding: 2rem 0;
border-top: 1px solid rgba(212, 175, 55, 0.3);
border-bottom: 1px solid rgba(212, 175, 55, 0.3);
}
.certification-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.95rem;
color: rgba(250, 249, 246, 0.9) !important;
padding: 0.5rem 1rem;
background: rgba(212, 175, 55, 0.08);
border-radius: 20px;
border: 1px solid rgba(212, 175, 55, 0.2);
transition: all 0.3s ease;
}
.certification-item:hover {
background: rgba(212, 175, 55, 0.15);
border-color: #D4AF37;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(212, 175, 55, 0.2);
}
.certification-item i {
color: #D4AF37 !important;
}
/* Step 8: Footer Bottom with Gold Border */
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 2rem;
padding: 2rem;
border-top: 2px solid rgba(212, 175, 55, 0.3);
background: rgba(0, 0, 0, 0.2);
margin: 0 -2rem -2rem -2rem;
}
@media (max-width: 768px) {
.footer-bottom {
flex-direction: column;
text-align: center;
gap: 1rem;
}
}
.footer-bottom-left,
.footer-bottom-right {
flex: 1;
color: var(--warm-white) !important;
}
.footer-bottom-left {
text-align: left;
}
.footer-bottom-right {
text-align: right;
}
@media (max-width: 768px) {
.footer-bottom-left,
.footer-bottom-right {
text-align: center;
}
}
.footer-logo-img {
height: 60px;
width: auto;
filter: brightness(0) invert(1);
transition: all 0.3s ease;
}
.footer-logo-img:hover {
transform: scale(1.05);
filter: brightness(0) invert(1) sepia(1) hue-rotate(140deg) saturate(2);
}
/* Step 9: Legal Disclaimer */
.legal-disclaimer {
margin-top: 2rem;
padding: 2rem;
border-top: 1px solid rgba(0, 139, 139, 0.3);
text-align: center;
background: rgba(0, 0, 0, 0.1);
}
.legal-disclaimer p {
margin: 0;
font-size: 0.85rem;
opacity: 1; /* Full opacity for better visibility */
line-height: 1.6;
color: #e8f4f8 !important; /* Even lighter color for better contrast */
font-weight: 400;
}
.legal-disclaimer i {
color: var(--hope-teal) !important;
margin-right: 0.5rem;
}
/* Step 10: Back to Top Button Enhancement */
.back-to-top {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 55px;
height: 55px;
background: var(--liberty-blue);
background-image: linear-gradient(135deg, var(--liberty-blue), var(--hope-teal));
color: white !important;
border: 2px solid var(--hope-teal);
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
z-index: 1000;
box-shadow: 0 4px 15px rgba(0, 139, 139, 0.4);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
}
.back-to-top:hover {
background: var(--hope-teal);
transform: translateY(-3px) scale(1.1);
box-shadow: 0 8px 25px rgba(0, 139, 139, 0.6);
}
/* Step 11: Responsive Font Sizes */
@media (max-width: 768px) {
.site-footer {
padding: 3rem 0 1.5rem;
}
.footer-section h4 {
font-size: 1.1rem;
}
.contact-details p,
.services-list li,
.quick-links li {
font-size: 0.9rem;
}
.legal-disclaimer p {
font-size: 0.8rem;
}
}
/* Step 12: High Contrast Mode Support */
@media (prefers-contrast: high) {
.site-footer {
background: #000000;
color: #ffffff;
}
.footer-section h4,
.contact-details i,
.services-list i,
.quick-links i {
color: #00ffff !important;
}
}
/* WhatsApp Float Button */
.whatsapp-float {
position: fixed;
bottom: 2rem;
left: 2rem;
z-index: 1000;
}
.whatsapp-btn {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
background: #25D366;
color: white;
border-radius: 50%;
text-decoration: none;
font-size: 1.5rem;
transition: all 0.3s ease;
box-shadow: var(--card-shadow);
}
.whatsapp-btn:hover {
transform: scale(1.1);
box-shadow: var(--hover-shadow);
}
/* Loading Overlay */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 40, 104, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
}
.loading-spinner {
text-align: center;
color: white;
}
.loading-spinner i {
font-size: 3rem;
margin-bottom: 1rem;
color: var(--hope-teal);
}
.loading-spinner p {
font-size: 1.2rem;
margin: 0;
}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.fade-in {
animation: fadeIn 0.6s ease forwards;
}
/* Responsive Design */
@media (max-width: 768px) {
.container {
padding: 0 1rem;
}
.header-content {
flex-direction: column;
gap: 1rem;
text-align: center;
}
.footer-content {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.footer-bottom {
flex-direction: column;
text-align: center;
gap: 1rem;
}
.footer-bottom-left,
.footer-bottom-right {
text-align: center;
}
.footer-certifications {
flex-direction: column;
align-items: center;
gap: 1rem;
}
.social-links {
text-align: center;
}
.whatsapp-float {
bottom: 5rem;
left: 1rem;
}
.back-to-top {
bottom: 5rem;
right: 1rem;
}
.contact-methods {
flex-direction: column;
gap: 1rem;
}
.wizard-card {
margin: 1rem;
border-radius: 15px;
}
.wizard-body {
padding: 2rem 1.5rem;
}
.wizard-navigation {
padding: 1.5rem;
flex-direction: column;
gap: 1rem;
}
.form-grid {
grid-template-columns: 1fr;
}
.radio-group,
.checkbox-group {
flex-direction: column;
}
.progress-steps {
flex-wrap: wrap;
gap: 1rem;
}
.tracking-steps {
flex-direction: column;
gap: 2rem;
}
.tracking-steps::before {
display: none;
}
.logo-main {
font-size: 2rem;
}
.logo-sub {
font-size: 1rem;
}
.case-number {
font-size: 1.5rem;
padding: 1rem 2rem;
}
}
/* RTL Specific Styles */
body.rtl .header-content {
flex-direction: row-reverse;
}
body.rtl .language-switcher {
flex-direction: row-reverse;
}
body.rtl .wizard-navigation {
flex-direction: row-reverse;
}
body.rtl .radio-group,
body.rtl .checkbox-group {
flex-direction: row-reverse;
}
body.rtl .uploaded-file {
flex-direction: row-reverse;
}
/* Ensure section headers remain centered in RTL */
body.rtl .section-header {
text-align: center !important;
}
body.rtl .section-header h1,
body.rtl .section-header h2,
body.rtl .section-header h3,
body.rtl .section-header h4,
body.rtl .section-header h5,
body.rtl .section-header h6 {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.rtl .section-header p {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Loading States */
.loading {
opacity: 0.7;
pointer-events: none;
}
.spinner {
border: 3px solid var(--document-tan);
border-top: 3px solid var(--hope-teal);
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
margin: 1rem auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Enhanced Link Contrast and Accessibility */
a {
color: var(--liberty-blue);
text-decoration: underline;
transition: color 0.3s ease;
}
a:hover {
color: var(--hope-teal);
text-decoration: underline;
}
a:focus {
outline: 2px solid var(--hope-teal);
outline-offset: 2px;
}
/* Enhanced text contrast for various elements */
.text-muted {
color: var(--text-secondary) !important;
}
.text-light {
color: var(--text-light) !important;
}
.text-dark {
color: var(--text-primary) !important;
}
/* Ensure good contrast for status indicators */
.status-indicator {
min-height: 24px;
min-width: 24px;
}
/* Improved contrast for small text elements */
small, .small {
color: var(--text-secondary);
font-size: 0.875rem;
line-height: 1.4;
}
/* Success/Error Messages */
.message {
padding: 1rem 1.5rem;
border-radius: 10px;
margin: 1rem 0;
font-weight: 600;
}
.message.success {
background: rgba(34, 139, 34, 0.1);
color: var(--success-green);
border: 2px solid var(--success-green);
}
.message.error {
background: rgba(200, 16, 46, 0.1);
color: var(--nashmi-red);
border: 2px solid var(--nashmi-red);
}
.message.info {
background: rgba(0, 139, 139, 0.1);
color: var(--hope-teal);
border: 2px solid var(--hope-teal);
}
/* Utility Classes */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.hidden { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
/* ===== ENHANCED WIZARD FEATURES ===== */
/* Loading Animation for Wizard Container */
.wizard-container {
opacity: 0;
transform: translateY(20px);
transition: all 0.6s ease;
}
.wizard-container.loaded {
opacity: 1;
transform: translateY(0);
}
/* Enhanced Step Indicators */
.wizard-step-indicator .step-status {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 0.8rem;
font-weight: 700;
}
.wizard-step-indicator.current .step-status i {
animation: pulse-edit 2s infinite ease-in-out;
}
.wizard-step-indicator.celebrate {
animation: celebrate 1s ease-out;
}
@keyframes pulse-edit {
0%, 100% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
50% {
transform: translate(-50%, -50%) scale(1.1);
opacity: 0.8;
}
}
@keyframes celebrate {
0%, 100% {
transform: scale(1) rotate(0deg);
}
25% {
transform: scale(1.05) rotate(-2deg);
}
75% {
transform: scale(1.05) rotate(2deg);
}
}
/* Enhanced Progress Bar */
.progress-bar.final-step .progress-fill {
background: linear-gradient(90deg, var(--hope-teal), var(--success-green), var(--hope-teal));
animation: final-step-glow 1s ease;
}
.progress-bar.completed::after {
content: '✓';
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--success-green);
font-weight: 700;
font-size: 1.2rem;
}
@keyframes final-step-glow {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.2) drop-shadow(0 0 10px var(--hope-teal)); }
}
/* Field Success State */
.form-group.focused {
transform: translateY(-2px);
transition: transform 0.3s ease;
}
.form-control.success {
border-color: var(--success-green) !important;
box-shadow: 0 0 0 0.2rem rgba(34, 139, 34, 0.15) !important;
}
.field-success {
display: inline-flex;
align-items: center;
color: var(--success-green);
font-size: 0.875rem;
margin-top: 0.5rem;
font-weight: 600;
}
.field-success i {
margin-right: 0.5rem;
}
/* Enhanced Field Error with Animation */
.form-control.error {
border-color: var(--nashmi-red) !important;
box-shadow: 0 0 0 0.2rem rgba(200, 16, 46, 0.15) !important;
}
.form-control.shake {
animation: shake 0.5s ease-in-out;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
/* Auto-Save Indicator */
.auto-save-indicator {
position: fixed;
top: 20px;
right: 20px;
background: rgba(34, 139, 34, 0.95);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 25px;
font-size: 0.875rem;
font-weight: 600;
z-index: 9999;
display: none;
box-shadow: 0 4px 15px rgba(34, 139, 34, 0.3);
backdrop-filter: blur(10px);
}
.auto-save-indicator i {
margin-right: 0.5rem;
animation: cloud-save 1s ease-in-out;
}
@keyframes cloud-save {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
/* Step Validation Summary */
.step-validation-summary {
background: linear-gradient(135deg, rgba(0, 139, 139, 0.1), rgba(0, 139, 139, 0.05));
border: 1px solid rgba(0, 139, 139, 0.2);
border-radius: 12px;
padding: 1rem;
margin-bottom: 1.5rem;
font-size: 0.875rem;
}
.validation-progress {
display: flex;
align-items: center;
gap: 1rem;
}
.validation-bar {
flex: 1;
height: 6px;
background: rgba(0, 139, 139, 0.2);
border-radius: 3px;
overflow: hidden;
}
.validation-fill {
height: 100%;
background: linear-gradient(90deg, var(--hope-teal), var(--success-green));
border-radius: 3px;
transition: width 0.3s ease;
}
.valid-count {
color: var(--success-green);
font-weight: 700;
}
.total-count {
color: var(--text-secondary);
font-weight: 600;
}
/* Enhanced Success Notifications */
.success-notification,
.error-message {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
padding: 1rem 2rem;
border-radius: 25px;
font-weight: 600;
z-index: 9999;
display: flex;
align-items: center;
gap: 0.75rem;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(10px);
max-width: 90vw;
}
.success-notification {
background: rgba(34, 139, 34, 0.95);
color: white;
border: 1px solid rgba(34, 139, 34, 0.3);
}
.error-message {
background: rgba(200, 16, 46, 0.95);
color: white;
border: 1px solid rgba(200, 16, 46, 0.3);
}
.close-success,
.close-error {
background: none;
border: none;
color: currentColor;
font-size: 1.2rem;
cursor: pointer;
padding: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background-color 0.2s ease;
}
.close-success:hover,
.close-error:hover {
background: rgba(255, 255, 255, 0.2);
}
/* Enhanced Button States */
.wizard-next,
.wizard-prev,
.wizard-submit {
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.wizard-next:hover,
.wizard-prev:hover,
.wizard-submit:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 40, 104, 0.25);
}
.wizard-submit.loading::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
animation: loading-sweep 1.5s infinite;
}
@keyframes loading-sweep {
0% { left: -100%; }
100% { left: 100%; }
}
/* Copy Button Enhancement */
.copy-case-number.copied {
background: var(--success-green) !important;
transform: scale(1.05);
}
/* Mobile Enhancements */
@media (max-width: 768px) {
.auto-save-indicator {
top: 10px;
right: 10px;
left: 10px;
transform: none;
text-align: center;
}
.success-notification,
.error-message {
left: 10px;
right: 10px;
transform: none;
max-width: none;
}
.step-validation-summary {
padding: 0.75rem;
margin-bottom: 1rem;
}
.validation-progress {
flex-direction: column;
gap: 0.5rem;
text-align: center;
}
}
/* RTL Support for Enhanced Features */
.rtl-layout .auto-save-indicator {
right: auto;
left: 20px;
}
.rtl-layout .field-success i,
.rtl-layout .field-error i {
margin-right: 0;
margin-left: 0.5rem;
}
.rtl-layout .wizard-next i,
.rtl-layout .wizard-prev i {
transform: scaleX(-1);
}
/* Enhanced Radio Button and Checkbox Styling */
.radio-group,
.checkbox-group {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.radio-label,
.checkbox-label {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
border: 2px solid rgba(0, 139, 139, 0.2);
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
background: white;
position: relative;
}
.radio-label:hover,
.checkbox-label:hover {
border-color: var(--hope-teal);
background: rgba(0, 139, 139, 0.05);
transform: translateY(-1px);
}
.radio-label.checked,
.checkbox-label.checked {
border-color: var(--hope-teal);
background: rgba(0, 139, 139, 0.1);
font-weight: 600;
color: var(--hope-teal);
}
.radio-label input[type="radio"],
.radio-label input[type="checkbox"],
.checkbox-label input[type="radio"],
.checkbox-label input[type="checkbox"] {
opacity: 0;
position: absolute;
width: 1px;
height: 1px;
}
.radio-custom,
.checkbox-custom {
width: 20px;
height: 20px;
border: 2px solid rgba(0, 139, 139, 0.3);
border-radius: 50%;
position: relative;
flex-shrink: 0;
transition: all 0.3s ease;
background: white;
}
.checkbox-custom {
border-radius: 4px;
}
.radio-label:hover .radio-custom,
.checkbox-label:hover .checkbox-custom {
border-color: var(--hope-teal);
transform: scale(1.1);
}
.radio-label.checked .radio-custom,
.checkbox-label.checked .checkbox-custom {
border-color: var(--hope-teal);
background: var(--hope-teal);
}
.radio-label.checked .radio-custom::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
background: white;
border-radius: 50%;
}
.checkbox-label.checked .checkbox-custom::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 12px;
font-weight: bold;
}
/* Error states for radio/checkbox groups */
.radio-group.error .radio-label,
.checkbox-group.error .checkbox-label {
border-color: var(--nashmi-red);
}
.radio-group.error .radio-label:not(.checked),
.checkbox-group.error .checkbox-label:not(.checked) {
background: rgba(200, 16, 46, 0.05);
}
/* Success states for radio/checkbox groups */
.radio-group.success .radio-label.checked,
.checkbox-group.success .checkbox-label.checked {
border-color: var(--success-green);
background: rgba(34, 139, 34, 0.1);
color: var(--success-green);
}
.radio-group.success .radio-label.checked .radio-custom,
.checkbox-group.success .checkbox-label.checked .checkbox-custom {
border-color: var(--success-green);
background: var(--success-green);
}
/* Mobile responsive adjustments */
@media (max-width: 768px) {
.radio-group,
.checkbox-group {
gap: 0.5rem;
}
.radio-label,
.checkbox-label {
padding: 0.5rem 0.75rem;
font-size: 0.9rem;
}
.radio-custom,
.checkbox-custom {
width: 18px;
height: 18px;
}
}
/* RTL support for radio/checkbox groups */
.rtl-layout .radio-label,
.rtl-layout .checkbox-label {
flex-direction: row-reverse;
}
.rtl-layout .radio-group,
.rtl-layout .checkbox-group {
text-align: right;
}
/* High Contrast Mode Support */
@media (prefers-contrast: high) {
.form-control.success {
border-color: #008000 !important;
border-width: 2px !important;
}
.form-control.error {
border-color: #ff0000 !important;
border-width: 2px !important;
}
.field-success {
color: #008000;
}
.field-error {
color: #ff0000;
}
}
/* ==========================================================================
ENHANCED ONE-QUESTION-AT-A-TIME WIZARD REDESIGN
========================================================================== */
/* =====================================================
WIZARD FORM - COMPLETE REDESIGN & FIX
===================================================== */
/* =====================================================
WIZARD FORM - UNIFIED LAYOUT STRUCTURE
===================================================== */
/* Step 1: Fix Wizard Section Container - Vertical Flow */
.wizard-section {
background: linear-gradient(135deg, #f8fbfb 0%, #ffffff 100%) !important;
padding: 2rem 1rem !important;
margin: 2rem 0 !important;
min-height: auto !important;
display: block !important; /* Changed from flex to block for proper stacking */
position: relative !important;
width: 100% !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
overflow-y: visible !important; /* Allow dropdowns to show below */
}
.wizard-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
z-index: 1;
}
/* Step 2: Header Section at Top */
.wizard-section .section-header {
background: var(--liberty-blue) !important;
background-image: linear-gradient(135deg, var(--liberty-blue) 0%, var(--midnight-blue) 100%) !important;
color: var(--warm-white) !important;
padding: 3rem 2rem !important;
text-align: center !important;
border-radius: 20px 20px 0 0 !important;
margin: 0 auto 0 auto !important; /* No bottom margin - connects to progress */
max-width: 900px !important;
width: 100% !important;
position: relative !important;
z-index: 10 !important;
box-shadow: 0 4px 20px rgba(0, 40, 104, 0.15) !important;
}
.wizard-section .section-header h1 {
font-size: 2.5rem !important;
font-weight: 700 !important;
margin-bottom: 1rem !important;
color: var(--warm-white) !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}
.wizard-section .section-header p {
font-size: 1.2rem !important;
margin-bottom: 0 !important;
opacity: 0.95 !important;
color: var(--warm-white) !important;
font-weight: 400 !important;
}
/* Step 3: Progress Bar Integration */
.progress-container {
background: linear-gradient(135deg, #ffffff 0%, #f8fbfb 100%) !important;
padding: 2rem 2.5rem !important;
border: none !important; /* Remove border to connect seamlessly */
border-top: 3px solid var(--hope-teal) !important; /* Connect to header */
position: relative !important;
z-index: 9 !important;
margin: 0 auto !important; /* No margins - seamless connection */
max-width: 900px !important;
width: 100% !important;
box-shadow: 0 0 20px rgba(0, 40, 104, 0.08) !important;
}
.progress-header {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
margin-bottom: 1.5rem !important;
font-weight: 700 !important;
color: var(--liberty-blue) !important;
font-size: 1.1rem !important;
}
.progress-step {
font-size: 1rem !important;
color: #1a2332 !important; /* Changed to dark color for better visibility */
font-weight: 600 !important;
}
.progress-percentage {
font-size: 1.2rem !important;
color: #1a2332 !important; /* Changed to dark color for better visibility */
font-weight: 700 !important;
/* Removed gradient background for solid dark color */
}
/* Step 4: Enhanced Wizard Container - Connected Flow */
.wizard-container {
background: white !important;
border-radius: 0 0 20px 20px !important; /* Only bottom corners rounded */
box-shadow: 0 20px 40px rgba(0, 40, 104, 0.12) !important;
margin: 0 auto !important; /* No top margin - connects to progress */
overflow: visible !important; /* Changed from hidden to visible to allow dropdowns */
border: none !important; /* Remove border for seamless connection */
border-bottom: 2px solid var(--document-tan) !important;
border-left: 2px solid var(--document-tan) !important;
border-right: 2px solid var(--document-tan) !important;
position: relative !important;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
min-height: 500px !important;
max-width: 900px !important;
width: 100% !important;
z-index: 8 !important;
}
.wizard-container::before {
display: none !important; /* Remove top accent bar since header provides it */
}
.wizard-container.loaded {
opacity: 1 !important;
transform: translateY(0) !important;
}
/* Step 4: Fixed Progress Bar Styling */
.progress-bar {
width: 100% !important;
height: 12px !important;
background: #e1e8ed !important;
border-radius: 6px !important;
overflow: hidden !important;
position: relative !important;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}
.progress-fill {
height: 100% !important;
background: linear-gradient(90deg, var(--hope-teal), var(--liberty-blue)) !important;
transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
position: relative !important;
border-radius: 6px !important;
}
.progress-fill::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
animation: shimmer 2.5s infinite;
}
/* Navigation container pulse animation */
.wizard-navigation-buttons.pulse {
animation: navigationPulse 0.2s ease-out;
}
@keyframes navigationPulse {
0% { transform: scale(1); }
50% { transform: scale(1.01); }
100% { transform: scale(1); }
}
/* Progress container pulse animation */
.progress-container.pulse {
animation: progressPulse 0.3s ease-out;
}
@keyframes progressPulse {
0% { transform: scale(1); }
50% { transform: scale(1.02); }
100% { transform: scale(1); }
}
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* Progress bar completion state */
.progress-bar.completed .progress-fill {
background: linear-gradient(90deg, #28a745, #20c997) !important;
animation: completionGlow 1s ease-out;
}
.progress-bar.completed .progress-fill::after {
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
animation: completionShimmer 2s infinite;
}
@keyframes completionGlow {
0% { box-shadow: 0 0 0 rgba(40, 167, 69, 0.4); }
50% { box-shadow: 0 0 20px rgba(40, 167, 69, 0.6); }
100% { box-shadow: 0 0 0 rgba(40, 167, 69, 0.4); }
}
@keyframes completionShimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* Success message animations */
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(0.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(0.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* Step 5: Enhanced Wizard Form */
.wizard-form {
padding: 3rem 2.5rem !important;
background: white !important;
min-height: 500px !important;
display: block !important;
position: relative !important;
z-index: 3 !important;
overflow: visible !important; /* Allow dropdowns to extend beyond form */
}
/* Step 6: Fixed Wizard Steps */
.wizard-step {
display: none !important;
opacity: 0;
transform: translateX(30px);
transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
min-height: 400px !important;
padding: 2rem 1rem !important;
position: relative !important;
overflow: visible !important; /* Allow dropdowns to extend beyond step */
}
.wizard-step.active {
display: block !important;
opacity: 1 !important;
transform: translateX(0) !important;
}
/* Enhanced mode for one-question-at-a-time */
.wizard-container.enhanced-mode .wizard-step {
text-align: center !important;
display: none !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
min-height: 450px !important;
}
.wizard-container.enhanced-mode .wizard-step.active {
display: flex !important;
}
/* Step 7: Enhanced Question Typography */
.wizard-step h2 {
font-size: 2.4rem !important;
color: var(--liberty-blue) !important;
margin-bottom: 1.5rem !important;
font-weight: 700 !important;
text-align: center !important;
line-height: 1.2 !important;
position: relative !important;
background: linear-gradient(135deg, var(--liberty-blue), var(--hope-teal));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
max-width: 700px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.wizard-step h2::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--liberty-blue), var(--hope-teal));
border-radius: 2px;
}
.wizard-step .question-subtitle {
font-size: 1.2rem !important;
color: #1a2332 !important; /* Much darker for better visibility */
margin-bottom: 3rem !important;
font-weight: 600 !important; /* Increased weight for prominence */
line-height: 1.6 !important;
text-align: center !important;
max-width: 600px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Step 8: Enhanced Single Question Container */
.wizard-step .single-question {
width: 100% !important;
max-width: 600px !important;
margin: 0 auto !important;
padding: 2.2rem !important;
background: #ffffff !important;
border-radius: 22px !important;
box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12) !important;
border: 1px solid #e4e9f5 !important;
overflow: visible !important; /* Allow dropdowns to overflow */
}
/* Step 9: Form Group Styling */
.wizard-step .form-group {
margin-bottom: 1.6rem !important;
text-align: left !important;
position: relative !important;
z-index: 10 !important; /* Ensure dropdowns appear above other elements */
}
.wizard-step .form-group label {
display: block !important;
font-size: 1rem !important;
font-weight: 600 !important;
color: #1f2937 !important;
margin-bottom: 0.6rem !important;
text-align: left !important;
line-height: 1.4 !important;
}
/* Step 10: Enhanced Input Styling */
.wizard-step input[type="text"],
.wizard-step input[type="email"],
.wizard-step input[type="tel"],
.wizard-step input[type="number"],
.wizard-step input[type="date"],
.wizard-step select,
.wizard-step textarea {
width: 100% !important;
padding: 0.9rem 1.2rem !important;
border: 1px solid #d7dce6 !important;
border-radius: 14px !important;
font-size: 1rem !important;
font-weight: 500 !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
background: #ffffff !important;
box-shadow: none !important;
color: #1f2937 !important;
box-sizing: border-box !important;
}
.wizard-step input:focus,
.wizard-step select:focus,
.wizard-step textarea:focus {
outline: none !important;
border-color: #2563eb !important;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
transform: none !important;
background: #ffffff !important;
}
/* Step 11: Enhanced Select Dropdown */
.wizard-step select {
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008B8B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
background-repeat: no-repeat !important;
background-position: right 1.5rem center !important;
background-size: 24px !important;
padding-right: 4rem !important;
cursor: pointer !important;
position: relative !important;
z-index: 100 !important; /* High z-index for dropdown menu */
}
.wizard-step select:hover {
border-color: var(--hope-teal) !important;
box-shadow: 0 6px 18px rgba(0, 139, 139, 0.1) !important;
}
.wizard-step select:invalid {
color: #999 !important;
}
.wizard-step select:valid {
color: #1a2332 !important;
}
/* Enhanced Required Field Styling */
.required-field-message {
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
margin-top: 1rem !important;
padding: 0.8rem 1rem !important;
background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%) !important;
border: 1px solid #ffa726 !important;
border-radius: 8px !important;
font-size: 0.9rem !important;
font-weight: 600 !important;
color: #e65100 !important;
}
.required-field-message::before {
content: '⚠️';
font-size: 1rem;
}
/* Enhanced form validation feedback */
.form-group.has-value select {
border-color: #28a745 !important;
background: linear-gradient(145deg, #ffffff 0%, #f8fff9 100%) !important;
}
.form-group.has-value select::after {
content: '✓';
position: absolute;
right: 3rem;
top: 50%;
transform: translateY(-50%);
color: #28a745;
font-weight: bold;
font-size: 1.2rem;
}
/* Step 12: Enhanced Radio Button Groups */
.wizard-step .radio-group {
display: flex !important;
flex-direction: column !important;
gap: 1.5rem !important;
margin-top: 1.5rem !important;
}
.wizard-step .radio-label {
display: flex !important;
align-items: center !important;
padding: 1.5rem 2rem !important;
border: 3px solid #e1e8ed !important;
border-radius: 16px !important;
cursor: pointer !important;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
background: white !important;
font-size: 1.2rem !important;
font-weight: 600 !important;
position: relative !important;
box-shadow: 0 4px 12px rgba(0, 40, 104, 0.05) !important;
}
.wizard-step .radio-label:hover {
border-color: var(--hope-teal) !important;
transform: translateY(-3px) !important;
box-shadow: 0 12px 25px rgba(0, 139, 139, 0.2) !important;
background: linear-gradient(145deg, #ffffff 0%, #f8fbfb 100%) !important;
}
.wizard-step .radio-label input[type="radio"] {
position: absolute !important;
opacity: 0 !important;
cursor: pointer !important;
width: 100% !important;
height: 100% !important;
z-index: 1 !important;
}
.wizard-step .radio-custom {
width: 28px !important;
height: 28px !important;
border: 3px solid #ddd !important;
border-radius: 50% !important;
margin-right: 1.5rem !important;
position: relative !important;
background: white !important;
transition: all 0.3s ease !important;
flex-shrink: 0 !important;
}
.wizard-step .radio-label input[type="radio"]:checked + .radio-custom {
border-color: var(--hope-teal) !important;
background: var(--hope-teal) !important;
box-shadow: 0 0 0 4px rgba(0, 139, 139, 0.2) !important;
}
.wizard-step .radio-label input[type="radio"]:checked + .radio-custom::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
border-radius: 50%;
background: white;
}
.wizard-step .radio-label input[type="radio"]:checked ~ .radio-text {
color: var(--liberty-blue) !important;
font-weight: 700 !important;
}
/* Step 13: Enhanced Navigation - Fixed Positioning */
.wizard-navigation-buttons {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
margin: 0 !important; /* Remove margin for seamless integration */
padding: 3rem 2.5rem 2.5rem !important;
border-top: 2px solid #e1e8ed !important;
gap: 2rem !important;
background: linear-gradient(145deg, #f8fbfb 0%, #ffffff 100%) !important;
border-radius: 0 0 20px 20px !important; /* Match container rounding */
}
/* Individual button styling */
.wizard-prev,
.wizard-next,
.wizard-submit {
padding: 1.2rem 3rem !important;
border: none !important;
border-radius: 50px !important;
font-size: 1.2rem !important;
font-weight: 700 !important;
cursor: pointer !important;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
position: relative !important;
overflow: hidden !important;
min-width: 160px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.8rem !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
box-sizing: border-box !important;
}
.wizard-prev {
background: linear-gradient(135deg, #f8f9fa, #e9ecef) !important;
color: var(--slate-gray) !important;
border: 3px solid #e1e8ed !important;
}
.wizard-prev:hover:not(:disabled) {
background: linear-gradient(135deg, #e9ecef, #dee2e6) !important;
transform: translateY(-3px) !important;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
border-color: var(--slate-gray) !important;
}
.wizard-next,
.wizard-submit {
background: linear-gradient(135deg, var(--hope-teal), var(--liberty-blue)) !important;
color: white !important;
box-shadow: 0 8px 25px rgba(0, 139, 139, 0.35) !important;
border: 3px solid transparent !important;
}
.wizard-next:hover:not(:disabled),
.wizard-submit:hover:not(:disabled) {
background: linear-gradient(135deg, var(--liberty-blue), var(--hope-teal)) !important;
transform: translateY(-3px) !important;
box-shadow: 0 15px 35px rgba(0, 139, 139, 0.45) !important;
}
.wizard-prev:disabled,
.wizard-next:disabled,
.wizard-submit:disabled {
opacity: 0.5 !important;
cursor: not-allowed !important;
transform: none !important;
box-shadow: none !important;
}
/* Hidden button styling */
.wizard-prev[style*="display: none"],
.wizard-next[style*="display: none"],
.wizard-submit[style*="display: none"] {
display: none !important;
}
/* Ensure proper button spacing when only one button is visible */
.wizard-navigation-buttons .wizard-prev:only-child,
.wizard-navigation-buttons .wizard-next:only-child,
.wizard-navigation-buttons .wizard-submit:only-child {
margin-left: auto !important;
}
/* Step 14: Question Animation Enhancement */
@keyframes questionFadeIn {
0% {
opacity: 0;
transform: translateY(30px) scale(0.95);
}
50% {
opacity: 0.7;
transform: translateY(15px) scale(0.98);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.wizard-step.active .single-question {
animation: questionFadeIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Step 15: Error and Success States */
.form-group.error input,
.form-group.error select {
border-color: #dc3545 !important;
background: #fff8f8 !important;
animation: shake 0.5s ease-in-out;
box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.15) !important;
}
.form-group.error .error-message {
color: #dc3545 !important;
font-size: 1rem !important;
margin-top: 1rem !important;
display: flex !important;
align-items: center !important;
gap: 0.8rem !important;
animation: fadeIn 0.3s ease-in-out !important;
font-weight: 600 !important;
padding: 1rem !important;
background: #fff8f8 !important;
border-radius: 12px !important;
border-left: 4px solid #dc3545 !important;
}
.form-group.error .error-message::before {
content: '⚠️';
font-size: 1.2rem;
}
@keyframes shake {
0%, 20%, 40%, 60%, 80% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-8px);
}
}
@keyframes fadeIn {
0% { opacity: 0; transform: translateY(-10px); }
100% { opacity: 1; transform: translateY(0); }
}
/* Step 16: Responsive Design - Unified Layout */
@media (max-width: 768px) {
.wizard-section {
padding: 1rem 0.5rem !important;
margin: 1rem 0 !important;
}
.wizard-section .section-header {
padding: 2rem 1.5rem !important;
border-radius: 16px 16px 0 0 !important;
}
.wizard-section .section-header h1 {
font-size: 2rem !important;
}
.wizard-section .section-header p {
font-size: 1rem !important;
}
.wizard-container {
width: 100% !important;
margin: 0 !important;
border-radius: 0 0 16px 16px !important;
min-height: 400px !important;
}
.wizard-form {
padding: 2rem 1.5rem !important;
}
.progress-container {
padding: 1.5rem !important;
}
.wizard-step h2 {
font-size: 1.8rem !important;
}
.wizard-step .question-subtitle {
font-size: 1rem !important;
}
.wizard-step .single-question {
padding: 1.5rem !important;
}
.wizard-navigation-buttons {
flex-direction: column !important;
gap: 1rem !important;
padding: 2rem 1.5rem !important;
}
.wizard-prev,
.wizard-next,
.wizard-submit {
width: 100% !important;
padding: 1rem 2rem !important;
min-width: auto !important;
}
.wizard-step input,
.wizard-step select,
.wizard-step textarea {
padding: 1.2rem 1.5rem !important;
font-size: 1.1rem !important;
}
.wizard-step .radio-label {
padding: 1.2rem 1.5rem !important;
font-size: 1.1rem !important;
}
}
@media (max-width: 480px) {
.wizard-section {
padding: 0.5rem 0.25rem !important;
margin: 0.5rem 0 !important;
}
.wizard-section .section-header {
border-radius: 12px 12px 0 0 !important;
padding: 1.5rem 1rem !important;
}
.wizard-container {
border-radius: 0 0 12px 12px !important;
border-left: 1px solid var(--document-tan) !important;
border-right: 1px solid var(--document-tan) !important;
}
.wizard-step h2 {
font-size: 1.6rem !important;
}
.progress-container {
padding: 1rem !important;
}
.wizard-navigation-buttons {
padding: 1.5rem 1rem !important;
}
}
/* Step 17: Focus and Accessibility */
.wizard-step input:focus,
.wizard-step select:focus,
.wizard-step textarea:focus,
.wizard-step .radio-label:focus-within {
outline: 3px solid rgba(0, 139, 139, 0.3) !important;
outline-offset: 2px !important;
}
/* Step 18: Loading States */
.wizard-container.loading {
opacity: 0.7 !important;
pointer-events: none !important;
}
.wizard-container.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid var(--hope-teal);
border-radius: 50%;
animation: spin 1s linear infinite;
z-index: 1000;
}
@keyframes spin {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Step 19: High Contrast Mode */
@media (prefers-contrast: high) {
.wizard-container {
border: 4px solid #000000 !important;
}
.wizard-step h2 {
color: #000000 !important;
-webkit-text-fill-color: #000000 !important;
}
.wizard-step .question-subtitle {
color: #000000 !important;
}
.wizard-step input,
.wizard-step select,
.wizard-step textarea {
border-color: #000000 !important;
}
}
/* Step 21: Unified Form Container - Complete Integration */
.wizard-section .section-header + .progress-container + .wizard-container {
box-shadow: 0 20px 40px rgba(0, 40, 104, 0.12) !important;
}
/* Ensure seamless visual connection between all components */
.wizard-section .section-header,
.wizard-section .progress-container,
.wizard-section .wizard-container {
width: 100% !important;
max-width: 900px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Remove any potential gaps between sections */
.wizard-section .section-header {
margin-bottom: 0 !important;
}
.wizard-section .progress-container {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.wizard-section .wizard-container {
margin-top: 0 !important;
}
/* Ensure consistent border styling */
.wizard-section .section-header {
border: 2px solid var(--document-tan) !important;
border-bottom: none !important;
}
.wizard-section .progress-container {
border-left: 2px solid var(--document-tan) !important;
border-right: 2px solid var(--document-tan) !important;
border-bottom: none !important;
}
.wizard-section .wizard-container {
border-top: none !important;
}
/* Visual enhancements for unified appearance */
.wizard-section {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
min-height: auto !important;
}
/* Ensure all children maintain proper stacking context */
.wizard-section > * {
position: relative !important;
z-index: auto !important;
}
/* Step 22: Print Styles */
@media print {
.wizard-container {
box-shadow: none !important;
border: 2px solid #000000 !important;
}
.progress-container {
background: white !important;
}
.wizard-navigation-buttons {
display: none !important;
}
}
/* Shake animation for validation errors */
.shake {
animation: shake 0.5s ease-in-out;
}
/* Error states enhancement */
.form-group.error input,
.form-group.error select {
border-color: #dc3545 !important;
background: #fff8f8 !important;
animation: shake 0.5s ease-in-out;
}
.form-group.error .error-message {
color: #dc3545;
font-size: 0.9rem;
margin-top: 0.5rem;
display: flex !important;
align-items: center;
gap: 0.5rem;
animation: fadeIn 0.3s ease-in-out;
}
.form-group.error .error-message::before {
content: '⚠️';
font-size: 1rem;
}
/* Success states enhancement */
.form-group.completed input,
.form-group.completed select {
border-color: #28a745 !important;
background: #f8fff9 !important;
}
.form-group.completed::after {
content: '✓';
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
color: #28a745;
font-weight: bold;
font-size: 1.2rem;
animation: scaleIn 0.3s ease-in-out;
}
@keyframes fadeIn {
0% { opacity: 0; transform: translateY(-10px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
0% { transform: translateY(-50%) scale(0); }
100% { transform: translateY(-50%) scale(1); }
}
/* Loading State */
.wizard-submit.loading::after {
content: '';
width: 20px;
height: 20px;
border: 2px solid transparent;
border-top: 2px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-left: 0.5rem;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Responsive Design */
@media (max-width: 768px) {
.wizard-form {
padding: 2rem 1rem !important;
}
.wizard-step {
padding: 1rem !important;
min-height: 350px !important;
}
.wizard-step h2 {
font-size: 1.8rem !important;
}
.wizard-navigation {
flex-direction: column !important;
gap: 1rem !important;
}
.wizard-prev,
.wizard-next,
.wizard-submit {
width: 100% !important;
min-width: auto !important;
}
.progress-container {
margin-bottom: 1.5rem !important;
padding: 1rem !important;
}
.wizard-container {
margin: 1rem 0 !important;
min-height: 500px !important;
}
.wizard-step .radio-label {
padding: 1rem !important;
font-size: 1rem !important;
}
.wizard-step .single-question {
max-width: 100% !important;
}
}
@media (max-width: 480px) {
.wizard-step h2 {
font-size: 1.6rem !important;
}
.wizard-step .question-subtitle {
font-size: 1rem !important;
}
.wizard-step .radio-label {
padding: 0.8rem !important;
font-size: 0.9rem !important;
}
.wizard-form {
padding: 1.5rem 0.8rem !important;
}
.wizard-container {
border-radius: 16px !important;
min-height: 450px !important;
}
.wizard-step input,
.wizard-step select {
padding: 1rem !important;
font-size: 1rem !important;
}
.progress-header {
flex-direction: column !important;
gap: 0.5rem !important;
text-align: center !important;
}
}
/* Enhanced Dark Mode Support */
@media (prefers-color-scheme: dark) {
.wizard-container {
background: #1a1a1a !important;
border-color: #333 !important;
}
.wizard-form {
background: linear-gradient(145deg, #1a1a1a 0%, #2d2d2d 100%) !important;
}
.wizard-step h2 {
color: #4a9eff !important;
}
.wizard-step .question-subtitle {
color: #ccc !important;
}
.wizard-step input,
.wizard-step select {
background: #2d2d2d !important;
border-color: #444 !important;
color: white !important;
}
.wizard-step .radio-label {
background: #2d2d2d !important;
border-color: #444 !important;
color: white !important;
}
.progress-container {
background: #2d2d2d !important;
border-color: #444 !important;
}
}
/* Focus indicators for accessibility */
.wizard-step input:focus,
.wizard-step select:focus,
.wizard-step .radio-label:focus-within {
outline: 3px solid rgba(0, 139, 139, 0.3) !important;
outline-offset: 2px !important;
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.wizard-step input,
.wizard-step select,
.wizard-step .radio-label {
border-width: 3px !important;
}
.wizard-step h2::after {
height: 6px !important;
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.wizard-step,
.wizard-step *,
.progress-fill,
.progress-fill::after {
animation: none !important;
transition: none !important;
}
.wizard-step.active .single-question {
animation: none !important;
}
}
/* Print styles */
@media print {
.wizard-navigation,
.progress-container {
display: none !important;
}
.wizard-container {
box-shadow: none !important;
border: 2px solid #000 !important;
}
.wizard-step {
display: block !important;
page-break-inside: avoid !important;
}
}
/* === Enhanced Form Field Styles === */
/* Textarea Styling */
textarea {
width: 100%;
min-height: 120px;
padding: 12px 16px;
border: 2px solid #e1e5e9;
border-radius: 8px;
font-family: inherit;
font-size: 16px;
line-height: 1.5;
resize: vertical;
transition: all 0.3s ease;
background: #ffffff;
}
textarea:focus {
outline: none;
border-color: var(--primary-color, #002868);
box-shadow: 0 0 0 3px rgba(0, 40, 104, 0.1);
}
/* File Upload Styling */
.file-upload-area {
border: 2px dashed #e1e5e9;
border-radius: 12px;
padding: 32px 24px;
text-align: center;
background: #fafbfc;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
}
.file-upload-area:hover {
border-color: var(--primary-color, #002868);
background: #f8f9fa;
}
.file-upload-area.dragover {
border-color: var(--primary-color, #002868);
background: #e3f2fd;
transform: scale(1.02);
}
.upload-prompt {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.upload-prompt i {
font-size: 48px;
color: var(--primary-color, #002868);
opacity: 0.7;
}
.upload-text {
font-size: 18px;
font-weight: 600;
color: #333;
margin: 0;
}
.upload-hint {
font-size: 14px;
color: #666;
margin: 0;
}
.upload-status {
margin-top: 16px;
font-weight: 500;
padding: 8px 16px;
border-radius: 6px;
display: none;
}
.upload-status.success {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
display: block;
}
.upload-status.error {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
display: block;
}
.file-list {
margin-top: 16px;
}
.file-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: #ffffff;
border: 1px solid #e1e5e9;
border-radius: 8px;
margin-bottom: 8px;
}
.file-info {
display: flex;
align-items: center;
gap: 12px;
}
.file-icon {
font-size: 20px;
color: var(--primary-color, #002868);
}
.file-details {
display: flex;
flex-direction: column;
}
.file-name {
font-weight: 500;
color: #333;
}
.file-size {
font-size: 12px;
color: #666;
}
.remove-file {
background: #dc3545;
color: white;
border: none;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
transition: background 0.3s ease;
}
.remove-file:hover {
background: #c82333;
}
/* Signature Pad Styling */
.signature-pad-container {
border: 2px solid #e1e5e9;
border-radius: 12px;
background: #ffffff;
padding: 16px;
text-align: center;
}
.signature-pad {
border: 1px solid #ddd;
border-radius: 8px;
background: #fafafa;
cursor: crosshair;
width: 100%;
max-width: 400px;
height: 200px;
}
.signature-controls {
margin-top: 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
.clear-signature {
background: #6c757d;
color: white;
border: none;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
transition: background 0.3s ease;
}
.clear-signature:hover {
background: #5a6268;
}
.signature-status {
font-size: 14px;
color: #666;
}
.signature-status.signed {
color: #28a745;
font-weight: 500;
}
/* Conditional Questions */
.conditional-question {
display: none !important;
}
.conditional-question.show {
display: flex !important;
}
/* Enhanced Progress Information */
.progress-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.progress-step-text {
font-size: 14px;
font-weight: 600;
color: #333;
}
.progress-percentage {
font-size: 14px;
font-weight: 600;
color: var(--primary-color, #002868);
}
/* Responsive File Upload */
@media (max-width: 768px) {
.file-upload-area {
padding: 24px 16px;
}
.upload-prompt i {
font-size: 36px;
}
.upload-text {
font-size: 16px;
}
.signature-pad {
height: 150px;
}
.signature-controls {
flex-direction: column;
gap: 12px;
}
}
/* ========================================
COMPREHENSIVE STYLE ENHANCEMENTS 2025
Modern Immigration Website Design
======================================== */
/* Enhanced CSS Variables - Professional Immigration Service Palette */
:root {
/* Enhanced Professional Colors */
--primary-blue: #2c5aa0; /* Trust & Authority */
--secondary-teal: #17a2b8; /* Modern & Professional */
--accent-gold: #f39c12; /* Premium Feel */
--success-green: #28a745; /* Positive Actions */
--warning-amber: #ffc107; /* Attention */
--danger-red: #dc3545; /* Errors */
--light-bg: #f8f9fa; /* Background */
--professional-dark: #212529; /* Primary Text */
--professional-medium: #6c757d; /* Secondary Text */
/* Enhanced Spacing Variables */
--section-padding: 4rem 0;
--card-padding: 2rem;
--border-radius: 8px;
--border-radius-small: 6px;
--border-radius-large: 12px;
/* Enhanced Typography Scale */
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 1.875rem;
--font-size-4xl: 2.25rem;
--font-size-5xl: 3rem;
/* Enhanced Shadows */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
--shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
/* Animation Variables */
--transition-fast: 0.15s ease;
--transition-base: 0.3s ease;
--transition-slow: 0.5s ease;
}
/* ========================================
1. TYPOGRAPHY ENHANCEMENT
======================================== */
/* Primary font stack for better readability */
body, .site-content, .immigration-content {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Source Sans Pro', sans-serif !important;
font-size: 16px;
line-height: 1.6;
color: var(--professional-dark);
font-weight: 400;
}
/* Enhanced heading hierarchy */
h1, .h1 {
font-size: var(--font-size-4xl);
font-weight: 700;
margin-bottom: 1rem;
line-height: 1.2;
color: var(--primary-blue);
}
h2, .h2 {
font-size: var(--font-size-3xl);
font-weight: 600;
margin-bottom: 0.75rem;
line-height: 1.3;
color: var(--professional-dark);
}
h3, .h3 {
font-size: var(--font-size-2xl);
font-weight: 600;
margin-bottom: 0.5rem;
line-height: 1.4;
color: var(--professional-dark);
}
h4, .h4 {
font-size: var(--font-size-xl);
font-weight: 600;
margin-bottom: 0.5rem;
line-height: 1.4;
}
h5, .h5 {
font-size: var(--font-size-lg);
font-weight: 600;
margin-bottom: 0.5rem;
line-height: 1.5;
}
h6, .h6 {
font-size: var(--font-size-base);
font-weight: 600;
margin-bottom: 0.5rem;
line-height: 1.5;
}
/* Improved text contrast and readability */
.text-muted { color: var(--professional-medium); }
.text-primary { color: var(--primary-blue); }
.text-secondary { color: var(--secondary-teal); }
.text-success { color: var(--success-green); }
.text-warning { color: var(--warning-amber); }
.text-danger { color: var(--danger-red); }
/* Enhanced paragraph styling */
p {
margin-bottom: 1rem;
line-height: 1.6;
}
.lead {
font-size: var(--font-size-lg);
font-weight: 400;
line-height: 1.7;
color: var(--professional-medium);
}
/* ========================================
2. LAYOUT & SPACING IMPROVEMENTS
======================================== */
/* Enhanced container spacing */
.container, .site-content, .immigration-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.container-fluid {
padding: 0 20px;
}
/* Consistent section spacing */
.section-padding {
padding: var(--section-padding);
}
.section-padding-sm {
padding: 2rem 0;
}
.section-padding-lg {
padding: 6rem 0;
}
/* Card-based design for better organization */
.content-card, .immigration-card {
background: white;
border-radius: var(--border-radius);
box-shadow: var(--shadow-md);
padding: var(--card-padding);
margin-bottom: 2rem;
transition: var(--transition-base);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.content-card:hover, .immigration-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.content-card-sm {
padding: 1.5rem;
}
.content-card-lg {
padding: 3rem;
}
/* Enhanced grid system */
.grid-2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.grid-4 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
/* ========================================
3. ENHANCED NAVIGATION
======================================== */
/* Enhanced main navigation - building on existing */
.main-navigation {
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: var(--shadow-sm);
padding: 1rem 0;
}
.main-navigation .nav-menu a {
color: var(--professional-dark) !important;
font-weight: 500;
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: var(--border-radius-small);
transition: var(--transition-base);
font-size: var(--font-size-base);
}
.main-navigation .nav-menu a:hover {
background: var(--primary-blue);
color: white !important;
transform: translateY(-1px);
}
.main-navigation .nav-menu .current-menu-item a {
background: var(--secondary-teal);
color: white !important;
}
/* Mobile navigation enhancements */
@media (max-width: 768px) {
.main-navigation .nav-menu {
flex-direction: column;
gap: 0.5rem;
}
.main-navigation .nav-menu a {
display: block;
text-align: center;
padding: 0.75rem 1rem;
}
}
/* ========================================
4. BUTTON & FORM STYLING
======================================== */
/* Professional button styling */
.btn, .button, input[type="submit"], .wp-block-button__link {
background: var(--primary-blue);
color: white !important;
border: none;
padding: 12px 24px;
border-radius: var(--border-radius-small);
font-weight: 600;
font-size: var(--font-size-base);
cursor: pointer;
transition: var(--transition-base);
text-decoration: none;
display: inline-block;
line-height: 1.4;
text-align: center;
min-height: 44px;
border: 2px solid var(--primary-blue);
}
.btn:hover, .button:hover, input[type="submit"]:hover {
background: #1e3d72;
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
color: white !important;
border-color: #1e3d72;
}
.btn:active, .button:active, input[type="submit"]:active {
transform: translateY(0);
box-shadow: var(--shadow-md);
}
/* Button variants */
.btn-secondary {
background: var(--secondary-teal);
border-color: var(--secondary-teal);
}
.btn-secondary:hover {
background: #138496;
border-color: #138496;
}
.btn-outline {
background: transparent;
color: var(--primary-blue) !important;
border: 2px solid var(--primary-blue);
}
.btn-outline:hover {
background: var(--primary-blue);
color: white !important;
}
.btn-success {
background: var(--success-green);
border-color: var(--success-green);
}
.btn-success:hover {
background: #1e7e34;
border-color: #1e7e34;
}
.btn-warning {
background: var(--warning-amber);
border-color: var(--warning-amber);
color: var(--professional-dark) !important;
}
.btn-warning:hover {
background: #e0a800;
border-color: #e0a800;
color: var(--professional-dark) !important;
}
.btn-danger {
background: var(--danger-red);
border-color: var(--danger-red);
}
.btn-danger:hover {
background: #c82333;
border-color: #c82333;
}
/* Button sizes */
.btn-sm {
padding: 8px 16px;
font-size: var(--font-size-sm);
min-height: 36px;
}
.btn-lg {
padding: 16px 32px;
font-size: var(--font-size-lg);
min-height: 52px;
}
/* Enhanced form inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
select,
textarea,
.form-control {
border: 2px solid #e9ecef;
border-radius: var(--border-radius-small);
padding: 12px 16px;
font-size: 16px;
line-height: 1.5;
transition: var(--transition-base);
width: 100%;
background: white;
color: var(--professional-dark);
font-family: inherit;
}
input:focus,
select:focus,
textarea:focus,
.form-control:focus {
border-color: var(--primary-blue);
outline: none;
box-shadow: 0 0 0 3px rgba(44, 90, 160, 0.1);
}
/* Form labels */
label, .form-label {
font-weight: 600;
color: var(--professional-dark);
margin-bottom: 0.5rem;
display: block;
font-size: var(--font-size-base);
}
/* Form groups */
.form-group, .form-field {
margin-bottom: 1.5rem;
}
.form-group-sm {
margin-bottom: 1rem;
}
.form-group-lg {
margin-bottom: 2rem;
}
/* ========================================
5. TRUST & CREDIBILITY ELEMENTS
======================================== */
/* Trust badges and certifications */
.trust-indicators {
display: flex;
justify-content: center;
align-items: center;
padding: 2rem 0;
background: var(--light-bg);
flex-wrap: wrap;
gap: 2rem;
}
.trust-badge {
margin: 0 1rem;
opacity: 0.7;
transition: var(--transition-base);
filter: grayscale(100%);
}
.trust-badge:hover {
opacity: 1;
filter: grayscale(0%);
transform: scale(1.05);
}
.trust-badge img {
max-height: 60px;
width: auto;
}
/* Testimonial styling */
.testimonial {
background: white;
padding: 2rem;
border-left: 4px solid var(--primary-blue);
margin: 1rem 0;
border-radius: 0 var(--border-radius) var(--border-radius) 0;
box-shadow: var(--shadow-md);
position: relative;
}
.testimonial::before {
content: '"';
font-size: 4rem;
color: var(--primary-blue);
opacity: 0.3;
position: absolute;
top: -10px;
left: 20px;
font-family: Georgia, serif;
}
.testimonial-author {
margin-top: 1rem;
font-weight: 600;
color: var(--professional-medium);
}
.testimonial-role {
font-size: var(--font-size-sm);
color: var(--professional-medium);
font-style: italic;
}
/* ========================================
6. MOBILE RESPONSIVENESS
======================================== */
/* Responsive typography */
@media (max-width: 768px) {
h1, .h1 { font-size: var(--font-size-3xl); }
h2, .h2 { font-size: var(--font-size-2xl); }
h3, .h3 { font-size: var(--font-size-xl); }
h4, .h4 { font-size: var(--font-size-lg); }
.container, .site-content, .immigration-container {
padding: 0 15px;
}
.section-padding {
padding: 2rem 0;
}
.content-card, .immigration-card {
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.grid-2, .grid-3, .grid-4 {
grid-template-columns: 1fr;
gap: 1rem;
}
}
/* Touch-friendly buttons on mobile */
@media (max-width: 768px) {
.btn, .button, input[type="submit"] {
padding: 14px 28px;
font-size: 16px;
min-height: 48px;
width: 100%;
margin-bottom: 0.5rem;
}
.btn-sm {
min-height: 40px;
padding: 10px 20px;
}
.btn-lg {
min-height: 56px;
padding: 18px 36px;
}
}
/* ========================================
7. LOADING & ANIMATION IMPROVEMENTS
======================================== */
/* Smooth transitions for all elements */
* {
transition: var(--transition-fast);
}
/* Loading states */
.loading {
position: relative;
overflow: hidden;
opacity: 0.7;
}
.loading::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
animation: loading 1.5s infinite;
}
@keyframes loading {
0% { left: -100%; }
100% { left: 100%; }
}
/* Fade in animation */
.fade-in {
animation: fadeIn 0.6s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Slide in animation */
.slide-in-left {
animation: slideInLeft 0.6s ease-out;
}
@keyframes slideInLeft {
from { opacity: 0; transform: translateX(-30px); }
to { opacity: 1; transform: translateX(0); }
}
.slide-in-right {
animation: slideInRight 0.6s ease-out;
}
@keyframes slideInRight {
from { opacity: 0; transform: translateX(30px); }
to { opacity: 1; transform: translateX(0); }
}
/* ========================================
8. ENHANCED WORDPRESS ELEMENTS
======================================== */
/* Enhanced WordPress blocks */
.wp-block-group,
.wp-block-columns {
margin-bottom: 2rem;
}
.wp-block-column {
padding: 0 1rem;
}
.wp-block-quote {
border-left: 4px solid var(--primary-blue);
padding-left: 1.5rem;
margin: 2rem 0;
font-style: italic;
color: var(--professional-medium);
}
.wp-block-pullquote {
background: var(--light-bg);
padding: 2rem;
border-radius: var(--border-radius);
text-align: center;
border: none;
}
/* Enhanced list styling */
ul, ol {
padding-left: 1.5rem;
margin-bottom: 1rem;
}
li {
margin-bottom: 0.5rem;
line-height: 1.6;
}
/* Enhanced table styling */
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 2rem;
background: white;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
th, td {
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid #e9ecef;
}
th {
background: var(--light-bg);
font-weight: 600;
color: var(--professional-dark);
}
tr:hover {
background: rgba(44, 90, 160, 0.05);
}
/* Footer improvements */
.site-footer {
background: var(--professional-dark);
color: white;
padding: 3rem 0 1rem;
margin-top: 4rem;
}
.site-footer a {
color: #ffffff;
text-decoration: none;
transition: var(--transition-base);
}
.site-footer a:hover {
color: var(--accent-gold);
}
.footer-section {
margin-bottom: 2rem;
}
.footer-section h4 {
color: white;
margin-bottom: 1rem;
font-size: var(--font-size-lg);
}
/* ========================================
9. ACCESSIBILITY IMPROVEMENTS
======================================== */
/* Focus indicators */
button:focus,
input:focus,
select:focus,
textarea:focus,
a:focus {
outline: 2px solid var(--primary-blue);
outline-offset: 2px;
}
/* Skip links */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
background: var(--professional-dark);
color: white;
padding: 1rem;
text-decoration: none;
z-index: 9999;
}
.skip-link:focus {
left: 0;
}
/* Screen reader text */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ========================================
10. UTILITY CLASSES
======================================== */
/* Spacing utilities */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
/* Text utilities */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.font-weight-light { font-weight: 300 !important; }
.font-weight-normal { font-weight: 400 !important; }
.font-weight-bold { font-weight: 600 !important; }
.font-weight-bolder { font-weight: 700 !important; }
/* Display utilities */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }
/* Flex utilities */
.justify-content-start { justify-content: flex-start !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: flex-end !important; }
/* Border utilities */
.border { border: 1px solid #e9ecef !important; }
.border-0 { border: 0 !important; }
.border-primary { border-color: var(--primary-blue) !important; }
.border-secondary { border-color: var(--secondary-teal) !important; }
.rounded { border-radius: var(--border-radius) !important; }
.rounded-0 { border-radius: 0 !important; }
.rounded-sm { border-radius: var(--border-radius-small) !important; }
.rounded-lg { border-radius: var(--border-radius-large) !important; }
/* Shadow utilities */
.shadow-none { box-shadow: none !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
/* Background utilities */
.bg-primary { background-color: var(--primary-blue) !important; }
.bg-secondary { background-color: var(--secondary-teal) !important; }
.bg-success { background-color: var(--success-green) !important; }
.bg-warning { background-color: var(--warning-amber) !important; }
.bg-danger { background-color: var(--danger-red) !important; }
.bg-light { background-color: var(--light-bg) !important; }
.bg-dark { background-color: var(--professional-dark) !important; }
.bg-white { background-color: white !important; }
/* ========================================
END OF COMPREHENSIVE ENHANCEMENTS
======================================== */
/* Visa services tree */
.visa-tree-grid {
display: grid;
gap: 1.75rem;
margin-top: 2.5rem;
}
.visa-tree-card {
background: #ffffff;
border: 1px solid #d6deed;
border-radius: 18px;
box-shadow: 0 10px 32px rgba(20, 38, 77, 0.08);
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.visa-tree-card:hover {
border-color: #b7c6e4;
box-shadow: 0 14px 40px rgba(20, 38, 77, 0.12);
}
.visa-tree-card.is-open {
border-color: #96aee0;
box-shadow: 0 18px 48px rgba(20, 38, 77, 0.18);
}
.tree-card-header {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 1.25rem;
align-items: center;
padding: 1.65rem 1.9rem;
background: linear-gradient(135deg, #f7faff 0%, #eef3ff 100%);
}
.tree-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
border-radius: 16px;
background: #dbe5fb;
color: #102d60;
font-size: 1.6rem;
}
.tree-card-meta h3 {
margin: 0;
font-size: 1.4rem;
font-weight: 700;
color: #142646;
}
.tree-card-meta p {
margin: 0.35rem 0 0;
color: #4d5c75;
font-size: 0.98rem;
line-height: 1.55;
}
.tree-card-toggle {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 1.05rem;
border-radius: 999px;
border: 1px solid #b4c2e1;
background: #ffffff;
color: #142646;
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.tree-card-toggle:hover,
.tree-card-toggle:focus-visible {
background: #e8efff;
border-color: #91a8d8;
color: #0e1e3a;
outline: none;
}
.tree-card-content {
padding: 1.9rem 1.9rem 2.1rem;
background: #fbfcff;
}
.tree-programs {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 1.2rem;
}
.tree-program {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.9rem;
align-items: stretch;
}
.tree-program-connector {
position: relative;
width: 34px;
display: flex;
justify-content: center;
}
.tree-connector-line {
position: absolute;
top: 0;
bottom: 0;
width: 2px;
background: #d7dff1;
}
.tree-program:first-child .tree-connector-line {
top: 18px;
}
.tree-program:last-child .tree-connector-line {
bottom: 18px;
}
.tree-connector-node {
position: relative;
width: 12px;
height: 12px;
border-radius: 50%;
background: #a6b8de;
margin-top: 6px;
box-shadow: 0 0 0 4px #f0f4ff;
}
.tree-program-body {
border: 1px solid #dbe3f5;
border-radius: 16px;
background: #ffffff;
padding: 1.2rem 1.4rem;
box-shadow: 0 6px 18px rgba(17, 34, 62, 0.08);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tree-program-body:hover {
border-color: #bfcdef;
box-shadow: 0 12px 28px rgba(17, 34, 62, 0.12);
}
.tree-program-header {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0.6rem;
}
.tree-program-header h4 {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
color: #16284a;
}
.tree-program-meta {
display: inline-flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.tree-meta-pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.75rem;
border-radius: 999px;
background: #eef3ff;
color: #1c3364;
font-size: 0.82rem;
font-weight: 600;
}
.tree-meta-pill i {
color: #395593;
}
.tree-program-description {
margin: 0.25rem 0 0.85rem;
color: #44516d;
line-height: 1.6;
font-size: 0.95rem;
}
.tree-program-link {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.48rem 0.95rem;
border-radius: 999px;
background: #dfe8ff;
color: #113075;
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
transition: background 0.2s ease, color 0.2s ease;
}
.tree-program-link:hover,
.tree-program-link:focus-visible {
background: #cbd9ff;
color: #0c2459;
outline: none;
}
.tree-program-empty {
border: 1px dashed #bfc9e2;
border-radius: 14px;
background: #f4f6ff;
padding: 1.6rem;
text-align: center;
color: #44516d;
}
.tree-program-empty i {
display: block;
font-size: 1.6rem;
color: #7f94c2;
margin-bottom: 0.6rem;
}
@media (max-width: 768px) {
.tree-card-header {
grid-template-columns: 1fr;
text-align: left;
}
.tree-card-toggle {
justify-content: center;
width: 100%;
}
.tree-program {
grid-template-columns: 1fr;
}
.tree-program-connector {
display: none;
}
}
/* Wizard field palette */
.wizard-step input,
.wizard-step select,
.wizard-step textarea {
background-color: #ffffff !important;
border: 1px solid #cbd3e4 !important;
color: #1b2340 !important;
box-shadow: none !important;
}
.wizard-step select option {
color: #1b2340;
}
.wizard-step input:focus,
.wizard-step select:focus,
.wizard-step textarea:focus {
border-color: #6c8edb !important;
box-shadow: 0 0 0 3px rgba(108, 142, 219, 0.25) !important;
outline: none !important;
}
.wizard-step ::placeholder {
color: #5a6783 !important;
opacity: 1;
}
/* Immersive Wizard Redesign */
.wizard-section {
position: relative;
padding: 5rem 0 !important;
background: radial-gradient(120% 140% at 10% 0%, #21437c 0%, #0b1b39 55%, #030712 100%) !important;
color: #e9f1ff !important;
overflow: hidden;
}
.wizard-section::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(70% 60% at 90% 10%, rgba(94, 224, 188, 0.18) 0%, rgba(94, 224, 188, 0) 100%);
pointer-events: none;
opacity: 0.9;
}
.wizard-section > .container {
position: relative;
z-index: 1;
}
.wizard-shell {
display: grid;
gap: 2.5rem;
grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
align-items: stretch;
}
@media (max-width: 1100px) {
.wizard-shell {
grid-template-columns: 1fr;
}
}
.wizard-sidebar {
background: linear-gradient(160deg, rgba(28, 60, 115, 0.92) 0%, rgba(12, 30, 66, 0.95) 65%, rgba(7, 20, 44, 0.98) 100%);
border-radius: 28px;
padding: 2.75rem 2.25rem;
box-shadow: 0 35px 80px rgba(4, 12, 28, 0.55);
color: #f4f7ff;
backdrop-filter: blur(12px);
position: relative;
overflow: hidden;
}
.wizard-sidebar::after {
content: '';
position: absolute;
inset: 10% -30% -30% 35%;
background: radial-gradient(70% 70% at 0% 0%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 100%);
opacity: 0.45;
pointer-events: none;
}
.wizard-sidebar-inner {
position: relative;
display: flex;
flex-direction: column;
gap: 2.5rem;
height: 100%;
z-index: 1;
}
.wizard-badge {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.4rem 1.1rem;
border-radius: 999px;
background: rgba(94, 224, 188, 0.2);
color: #5ee0bc;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.wizard-sidebar-title {
margin: 0;
font-size: 1.75rem;
font-weight: 800;
color: #ffffff;
}
.wizard-sidebar-intro {
margin: 0;
color: rgba(233, 240, 255, 0.8);
font-size: 0.98rem;
line-height: 1.65;
}
.wizard-sidebar-steps {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.wizard-sidebar-step {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem 1.2rem;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.07);
transition: all 0.25s ease;
}
.wizard-sidebar-step .step-index {
width: 36px;
height: 36px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1rem;
background: rgba(255, 255, 255, 0.18);
color: #f9fbff;
flex-shrink: 0;
}
.wizard-sidebar-step .step-title {
display: block;
font-size: 1rem;
font-weight: 700;
color: #f1f6ff;
}
.wizard-sidebar-step .step-caption {
display: block;
font-size: 0.84rem;
color: rgba(233, 240, 255, 0.7);
margin-top: 0.15rem;
}
.wizard-sidebar-step.is-current {
border-color: rgba(255, 255, 255, 0.45);
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 22px 60px rgba(8, 16, 35, 0.6);
}
.wizard-sidebar-step.is-current .step-index {
background: #f9fbff;
color: #12223f;
}
.wizard-sidebar-step.is-current .step-caption {
color: rgba(255, 255, 255, 0.9);
}
.wizard-sidebar-step.is-complete {
border-color: rgba(94, 224, 188, 0.55);
background: linear-gradient(125deg, rgba(67, 210, 176, 0.22), rgba(94, 224, 188, 0.25));
color: #f1fffb;
}
.wizard-sidebar-step.is-complete .step-index {
background: #5ee0bc;
color: #06201d;
}
.wizard-sidebar-support {
margin-top: auto;
padding: 1.6rem 1.5rem;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(0, 0, 0, 0.18);
color: rgba(236, 242, 255, 0.85);
}
.wizard-sidebar-support h3 {
margin: 0 0 0.5rem 0;
font-size: 1.1rem;
color: #ffffff;
}
.wizard-support-link {
display: inline-flex;
align-items: center;
gap: 0.6rem;
margin-top: 0.75rem;
color: #5ee0bc;
font-weight: 700;
text-decoration: none;
transition: transform 0.2s ease, color 0.2s ease;
}
.wizard-support-link:hover {
transform: translateX(4px);
color: #ffffff;
}
.wizard-main {
display: flex;
flex-direction: column;
gap: 2rem;
min-width: 0;
}
.wizard-main-header {
background: rgba(255, 255, 255, 0.08);
border-radius: 26px;
padding: 2.5rem 2.75rem;
box-shadow: 0 28px 70px rgba(5, 12, 30, 0.45);
color: #f5f8ff;
}
.wizard-main-header h1 {
margin: 0 0 0.75rem 0;
font-size: 2.35rem;
font-weight: 800;
}
.wizard-main-header p {
margin: 0;
max-width: 560px;
color: rgba(229, 236, 255, 0.82);
font-size: 1rem;
line-height: 1.7;
}
.wizard-main-card {
background: #ffffff;
border-radius: 32px;
padding: 2.75rem 3rem;
box-shadow: 0 40px 90px rgba(8, 16, 38, 0.28);
min-width: 0;
}
@media (max-width: 768px) {
.wizard-main-header {
padding: 2rem 1.75rem;
}
.wizard-main-card {
padding: 2rem 1.5rem;
}
}
.wizard-progress-card {
margin-bottom: 2.25rem;
background: #f5f7ff;
border-radius: 22px;
padding: 1.6rem 1.8rem;
box-shadow: inset 0 0 0 1px rgba(34, 56, 130, 0.05);
}
.wizard-progress-card .progress-container {
margin: 0 !important;
}
.wizard-progress-card .progress-header {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 1rem !important;
margin-bottom: 1.1rem !important;
font-weight: 600 !important;
color: #172b4d !important;
}
.wizard-progress-card .progress-bar {
background: #dbe3ff !important;
border-radius: 999px !important;
height: 10px !important;
box-shadow: inset 0 0 0 1px rgba(63, 96, 178, 0.12) !important;
}
.wizard-progress-card .progress-fill {
background: linear-gradient(90deg, #536dff 0%, #7c5dff 45%, #5ee0bc 100%) !important;
border-radius: 999px !important;
}
.wizard-main-card .wizard-container {
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
}
.wizard-main-card .wizard-form {
background: transparent !important;
padding: 0 !important;
box-shadow: none !important;
}
.wizard-main-card .wizard-form h2 {
font-size: 2rem !important;
color: #0d1c3a !important;
margin-bottom: 1.5rem !important;
}
.wizard-main-card .form-row {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem !important;
}
.wizard-main-card .form-group {
margin-bottom: 1.5rem !important;
}
.wizard-main-card .form-group label {
font-weight: 700 !important;
color: #0e2246 !important;
margin-bottom: 0.6rem !important;
}
.wizard-main-card .form-group input,
.wizard-main-card .form-group select,
.wizard-main-card .form-group textarea {
width: 100% !important;
background: #f9faff !important;
border: 1px solid #c7d3f1 !important;
border-radius: 16px !important;
padding: 1rem 1.1rem !important;
font-size: 1rem !important;
color: #15223f !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-shadow: none !important;
}
.wizard-main-card .form-group input:focus,
.wizard-main-card .form-group select:focus,
.wizard-main-card .form-group textarea:focus {
border-color: #5c6bff !important;
box-shadow: 0 0 0 3px rgba(92, 107, 255, 0.25) !important;
outline: none !important;
}
.wizard-main-card .radio-label {
display: flex !important;
align-items: center !important;
gap: 0.9rem !important;
padding: 1rem 1.3rem !important;
border-radius: 16px !important;
border: 1px solid #d4ddf8 !important;
background: #f9faff !important;
transition: all 0.2s ease !important;
}
.wizard-main-card .radio-label:hover {
border-color: #5c6bff !important;
box-shadow: 0 16px 40px rgba(92, 107, 255, 0.18) !important;
}
.wizard-main-card .radio-label .radio-custom {
width: 22px !important;
height: 22px !important;
border: 2px solid #a6b4de !important;
background: #ffffff !important;
}
.wizard-main-card input[type="radio"]:checked + .radio-custom {
border-color: #5c6bff !important;
background: linear-gradient(135deg, #536dff 0%, #5ee0bc 100%) !important;
box-shadow: 0 0 0 3px rgba(92, 107, 255, 0.2) !important;
}
.wizard-main-card .wizard-navigation-buttons {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 1rem !important;
margin-top: 2.5rem !important;
flex-wrap: wrap;
}
.wizard-main-card .wizard-navigation-buttons .btn {
display: inline-flex !important;
align-items: center !important;
gap: 0.75rem !important;
padding: 0.95rem 2.3rem !important;
border-radius: 999px !important;
font-weight: 700 !important;
font-size: 1rem !important;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}
.wizard-main-card .wizard-navigation-buttons .wizard-prev {
background: transparent !important;
color: #3c4a7c !important;
border: 1px solid #cbd4f3 !important;
}
.wizard-main-card .wizard-navigation-buttons .wizard-prev:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(11, 26, 63, 0.15);
}
.wizard-main-card .wizard-navigation-buttons .wizard-next,
.wizard-main-card .wizard-navigation-buttons .wizard-submit {
background: linear-gradient(135deg, #536dff 0%, #7c5dff 40%, #43d6b7 100%) !important;
border: none !important;
color: #ffffff !important;
box-shadow: 0 18px 45px rgba(69, 92, 222, 0.45) !important;
}
.wizard-main-card .wizard-navigation-buttons .wizard-next:hover,
.wizard-main-card .wizard-navigation-buttons .wizard-submit:hover {
transform: translateY(-2px);
box-shadow: 0 24px 55px rgba(69, 92, 222, 0.52) !important;
}
.wizard-main-card .wizard-navigation-buttons .wizard-next:disabled,
.wizard-main-card .wizard-navigation-buttons .wizard-submit:disabled {
opacity: 0.6 !important;
box-shadow: none !important;
transform: none !important;
}
.wizard-main-card .terms-section {
margin-top: 2rem !important;
padding: 1.2rem 1.3rem !important;
border-radius: 16px !important;
background: #f0f4ff !important;
border: 1px dashed #bcc8ee !important;
}
.wizard-main-card .terms-section a {
color: #536dff !important;
font-weight: 600 !important;
}
@media (max-width: 768px) {
.wizard-sidebar {
padding: 2.25rem 1.9rem;
}
.wizard-sidebar-steps {
flex-direction: row;
flex-wrap: wrap;
gap: 0.75rem;
}
.wizard-sidebar-step {
flex: 1 1 calc(50% - 0.75rem);
min-width: 200px;
}
.wizard-main-card .wizard-navigation-buttons {
justify-content: center !important;
}
.wizard-main-card .wizard-navigation-buttons .btn {
width: 100%;
justify-content: center;
}
}
@media (max-width: 520px) {
.wizard-sidebar-steps {
flex-direction: column;
}
.wizard-sidebar-step {
min-width: unset;
}
}
.wizard-main-card .single-question {
background: #ffffff !important;
border-radius: 20px !important;
padding: 1.6rem 1.8rem !important;
border: 1px solid rgba(203, 212, 242, 0.7) !important;
box-shadow: 0 18px 45px rgba(16, 34, 74, 0.08) !important;
margin-bottom: 1.75rem !important;
}
.wizard-main-card .single-question:last-of-type {
margin-bottom: 0 !important;
}
.wizard-main-card .single-question h2 {
font-size: 1.45rem !important;
color: #0e2246 !important;
margin-bottom: 0.65rem !important;
}
.wizard-main-card .single-question .question-subtitle {
color: #4b5980 !important;
font-size: 0.95rem !important;
margin-bottom: 1.1rem !important;
}
.wizard-main-header h1 {
color: #f5f8ff !important;
}
.wizard-main-header p {
color: rgba(229, 236, 255, 0.85) !important;
}
/* Wizard Experience Overrides */
.wizard-main-card .wizard-container.enhanced-mode .wizard-step {
text-align: left !important;
align-items: stretch !important;
justify-content: flex-start !important;
min-height: auto !important;
padding: 0 !important;
}
.wizard-main-card .wizard-container.enhanced-mode .wizard-step .single-question {
max-width: 680px;
margin: 0 auto;
}
.wizard-main-card .single-question {
color: #0d1c3a !important;
}
.wizard-main-card .single-question h2 {
background: none !important;
text-align: left !important;
margin-left: 0 !important;
color: #0e2246 !important;
-webkit-text-fill-color: #0e2246 !important;
}
.wizard-main-card .single-question h2::after {
display: none !important;
}
.wizard-main-card .single-question .question-subtitle {
color: #4c5875 !important;
}
.wizard-main-card .single-question input,
.wizard-main-card .single-question select,
.wizard-main-card .single-question textarea {
background: #f9faff !important;
border: 1px solid #c7d3f1 !important;
color: #0d1c3a !important;
}
.wizard-main-card .single-question select option {
color: #0d1c3a !important;
}
.wizard-main-card .single-question .radio-label {
color: #0d1c3a !important;
}
.wizard-progress-card .progress-header span,
.wizard-progress-card .progress-estimation {
color: #172b4d !important;
}
.wizard-progress-card .progress-estimation {
margin-top: 0.9rem !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 0.75rem;
font-size: 0.9rem !important;
font-weight: 600 !important;
}
.wizard-progress-card .progress-estimation .estimation-remaining {
color: #51607f !important;
font-weight: 500 !important;
}
/* ============================================
Price Display Widget Styles
============================================ */
.nashmi-price-display {
margin: 20px 0;
}
.price-display-container {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 12px;
padding: 30px;
text-align: center;
box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
transition: all 0.3s ease;
}
.price-display-container:hover {
transform: translateY(-2px);
box-shadow: 0 6px 25px rgba(102, 126, 234, 0.4);
}
.price-display-label {
color: #ffffff;
font-size: 16px;
font-weight: 500;
margin-bottom: 15px;
opacity: 0.95;
}
.price-display-amount {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
margin: 20px 0;
}
.currency-symbol {
font-size: 36px;
font-weight: 700;
color: #ffffff;
}
.price-value {
font-size: 48px;
font-weight: 700;
color: #ffffff;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
transition: all 0.3s ease;
}
.price-value.updating {
opacity: 0.6;
transform: scale(0.95);
}
.price-display-breakdown {
background: rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 15px;
margin-top: 20px;
backdrop-filter: blur(10px);
}
.breakdown-item {
display: flex;
justify-content: space-between;
padding: 8px 0;
color: #ffffff;
font-size: 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.breakdown-item:last-child {
border-bottom: none;
}
.breakdown-item .label {
opacity: 0.9;
}
.breakdown-item .value {
font-weight: 600;
}
.breakdown-total {
display: flex;
justify-content: space-between;
padding: 12px 0 0;
margin-top: 8px;
border-top: 2px solid rgba(255, 255, 255, 0.3);
color: #ffffff;
font-size: 16px;
font-weight: 700;
}
.toggle-breakdown {
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
border: none;
border-radius: 6px;
padding: 10px 20px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 15px;
}
.toggle-breakdown:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-1px);
}
.toggle-breakdown:active {
transform: translateY(0);
}
/* Price animation */
@keyframes priceUpdate {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.price-value.price-updated {
animation: priceUpdate 0.4s ease-in-out;
}
/* Responsive design */
@media (max-width: 768px) {
.price-display-container {
padding: 20px;
}
.currency-symbol {
font-size: 28px;
}
.price-value {
font-size: 36px;
}
}