/* 
 * base.css - Foundation Styles
 * Reset, Typography, Base Elements
 */

@import url('variables.css');

/* FONT FACES */
@font-face { font-family: Montserrat; src: url(/web/fonts/Montserrat-Light.ttf); font-weight: 300; }
@font-face { font-family: Montserrat; src: url(/web/fonts/Montserrat-Regular.ttf); font-weight: 400; }
@font-face { font-family: Montserrat; src: url(/web/fonts/Montserrat-Medium.ttf); font-weight: 600; }
@font-face { font-family: Montserrat; src: url(/web/fonts/Montserrat-Bold.ttf); font-weight: 700; }
@font-face { font-family: Montserrat; src: url(/web/fonts/Montserrat-Black.ttf); font-weight: 800; }
@font-face { font-family: Roboto; src: url(/web/fonts/Roboto-Light.ttf); font-weight: 300; }
@font-face { font-family: Roboto; src: url(/web/fonts/Roboto-Regular.ttf); font-weight: 400; }
@font-face { font-family: Roboto; src: url(/web/fonts/Roboto-Medium.ttf); font-weight: 600; }
@font-face { font-family: Roboto; src: url(/web/fonts/Roboto-Bold.ttf); font-weight: 700; }
@font-face { font-family: Roboto; src: url(/web/fonts/Roboto-Black.ttf); font-weight: 800; }
@font-face { font-family: Poppins; src: url(/web/fonts/Poppins-Light.ttf); font-weight: 300; }
@font-face { font-family: Poppins; src: url(/web/fonts/Poppins-Regular.ttf); font-weight: 400; }
@font-face { font-family: Poppins; src: url(/web/fonts/Poppins-Medium.ttf); font-weight: 600; }
@font-face { font-family: Poppins; src: url(/web/fonts/Poppins-Bold.ttf); font-weight: 700; }
@font-face { font-family: Poppins; src: url(/web/fonts/Poppins-Black.ttf); font-weight: 800; }

/* MODERN CSS RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { min-height: 100%; font-family: var(--font-secondary); font-size: var(--font-size-base); line-height: var(--line-height-normal); color: var(--body-color); background-color: var(--body-bg); }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-primary); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--heading-color); margin-bottom: 1rem; }
h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }
p { margin-bottom: 1rem; line-height: var(--line-height-relaxed); }
a { color: var(--link-color); text-decoration: none; transition: var(--transition-normal); }
a:hover { color: var(--link-hover-color); }
ul, ol { padding-left: 1.5rem; margin-bottom: 1rem; }
strong, b { font-weight: var(--font-weight-bold); }
em, i { font-style: italic; }

/* RESPONSIVE TYPOGRAPHY */
@media (max-width: 768px) {
  h1 { font-size: var(--font-size-3xl); }
  h2 { font-size: var(--font-size-2xl); }
  h3 { font-size: var(--font-size-xl); }
  h4 { font-size: var(--font-size-lg); }
}

@media (max-width: 640px) {
  h1 { font-size: var(--font-size-2xl); }
  h2 { font-size: var(--font-size-xl); }
  h3 { font-size: var(--font-size-lg); }
}

/* LAYOUT CONTAINERS */
.container { width: 96%!important; max-width: var(--container-width); margin: 0 auto; }
@media (min-width: 640px) { .container { padding: 0 1%!important; } }
@media (min-width: 1024px) { .container { } }

/* BUTTONS */
.btn { display: inline-block; font-family: var(--font-primary); font-weight: var(--font-weight-bold); font-size: var(--font-size-base); text-align: center; text-decoration: none; padding: var(--btn-padding-y) var(--btn-padding-x); border-radius: var(--btn-border-radius); border: 2px solid transparent; cursor: pointer; transition: var(--transition-normal); line-height: 1.5; }
.btn-primary { background-color: var(--primary); color: var(--white); border-color: var(--primary); }
.btn-primary:hover { background-color: var(--primary-dark); border-color: var(--primary-dark); color: var(--white); transform: translateY(-2px); box-shadow: var(--box-shadow); }
.btn-accent { background-color: var(--accent); color: var(--white); border-color: var(--accent); }
.btn-accent:hover { background-color: var(--accent-dark); border-color: var(--accent-dark); color: var(--white); transform: translateY(-2px); box-shadow: var(--box-shadow); }
.btn-secondary { background-color: transparent; color: var(--primary); border: 2px solid var(--primary); }
.btn-secondary:hover { background-color: var(--primary); color: var(--white); transform: translateY(-2px); }
.btn-lg { padding: 1rem 2rem; font-size: var(--font-size-lg); }
.btn-sm { padding: 0.5rem 1rem; font-size: var(--font-size-sm); }
@media (max-width: 640px) { .btn { width: 100%; } }

/* CARDS */
.card { background-color: var(--white); border-radius: var(--card-border-radius); box-shadow: var(--card-shadow); overflow: hidden; transition: var(--transition-normal); }
.card:hover { transform: translateY(-5px); box-shadow: var(--box-shadow-md); }
.card-body { padding: var(--card-padding); }
.card-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); margin-bottom: 0.75rem; color: var(--heading-color); }
.card-text { color: var(--neutral-600); margin-bottom: 1rem; line-height: var(--line-height-relaxed); }

/* SECTIONS */
.section { padding: var(--section-padding) 0; }
.section-sm { padding: var(--section-padding-sm) 0; }
.section-lg { padding: var(--section-padding-lg) 0; }
@media (max-width: 768px) { .section { padding: var(--section-padding-sm) 0; } .section-lg { padding: var(--section-padding) 0; } }

/* SECTION DIVIDERS */
.section-divider { position: relative; margin: 4rem 0; text-align: center; height: 1px; background: linear-gradient(to right, transparent, var(--neutral-300), transparent); }
.section-divider span { position: relative; display: inline-block; padding: 0 1.5rem; background-color: var(--white); color: var(--neutral-600); font-size: 1rem; font-weight: 600; transform: translateY(-50%); }
.section-divider::before { content: ''; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; background-color: var(--primary); border-radius: 50%; transform: translateX(-50%); }
.section-divider-minimal { background: var(--neutral-200); height: 1px; margin: 3rem 0; }
.section-divider-minimal::before { display: none; }
.section-divider-blank { margin: 4rem 0; }
@media (max-width: 768px) { .section-divider, .section-divider-blank { margin: 2.5rem 0; } }

/* PAGE HEADERS */
.page-header { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; min-height: 250px; }
.page-header-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.4)); }
.page-header .container { position: relative; z-index: 2; padding: 50px 1rem; }
.page-header h1 { color: var(--white); font-size: 2.5rem; font-weight: 800; margin: 0; text-shadow: 0 2px 10px rgba(0,0,0,0.3); animation: fadeInUp 0.4s ease-out forwards; }
.page-header h1::after { content: ''; display: block; width: 80px; height: 3px; background-color: var(--primary); margin: 15px auto 0; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 768px) { .page-header { min-height: 200px; } .page-header h1 { font-size: 2rem; } }

.page-header-about {background-image: url('/web/images/stockbackground-cars-04.jpg');}
.page-header-contact {background-image: url('/web/images/stockbackground-cars-04.jpg');}
.page-header-request {background-image: url('/web/images/stockbackground-cars-04.jpg');}
.page-header-sell {background-image: url('/web/images/stockbackground-cars-04.jpg');}
.page-header-finance {background-image: url('/web/images/stockbackground-cars-04.jpg');}

/* PAGE CONTENT LAYOUT */
.page-content-section { padding: 60px 0; background-color: var(--white); }
.page-content { display: flex; gap: 40px; }
.page-main { flex: 1; min-width: 0; }
.page-sidebar { width: 350px; flex-shrink: 0; }
@media (max-width: 992px) { .page-content { flex-direction: column; gap: 30px; } .page-sidebar { width: 100%; } }
@media (max-width: 768px) { .page-content-section { padding: 40px 0; } }

/* UTILITY CLASSES */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.align-items-center { align-items: center; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.gap-1 { gap: var(--spacing-1); }
.gap-2 { gap: var(--spacing-2); }
.gap-3 { gap: var(--spacing-3); }
.gap-4 { gap: var(--spacing-4); }
.w-100 { width: 100%; }
.h-100 { height: 100%; }
.overflow-hidden { overflow: hidden; }
.position-relative { position: relative; }
.rounded { border-radius: var(--border-radius); }
.shadow { box-shadow: var(--box-shadow); }
.bg-light { background-color: var(--neutral-50); }
.bg-white { background-color: var(--white); }

/* FORMS (essential only) */
.sell-form-sec-1, .sell-form-sec-2, .request-form-sec-1, .request-form-sec-2 { width: 100% !important; }

/* ANIMATIONS */
@keyframes slideUp {
  from { transform: translateY(100px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.animate-slide-up {
  animation: slideUp 1s ease-out 0.6s forwards;
  opacity: 0;
}

@keyframes slideDown {
  from { transform: translateY(-100px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideLeft {
  from { transform: translateX(100px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideRight {
  from { transform: translateX(-100px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes scaleIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes scaleOut {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(0.8); opacity: 0; }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

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

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

@keyframes flipIn {
  from { transform: perspective(400px) rotateY(90deg); opacity: 0; }
  to { transform: perspective(400px) rotateY(0); opacity: 1; }
}
/* RESPONSIVE DISPLAY UTILITIES */
@media (max-width: 767px) { .d-none-mobile { display: none !important; } }
@media (min-width: 768px) { .d-none-desktop { display: none !important; } }

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }