/* ==========================================================================
   Aggarwal Prop World — base.css
   File: Assets/Modules/base.css
   Theme: Montserrat Edge (Aggarwal Red)
   Primary: #E31E24  •  Accent: #FADBD8  •  Font: 'Montserrat', sans-serif
   Developer: Mayank Chawdhari
   Version: 2.2.0 (The Red Edition)
   Trademark: © Aggarwal Prop World — All rights reserved.

   PURPOSE
   - Global reset and base tokens for the "Montserrat Edge" theme tuned for
     a premium Red-on-White identity (Aligned with Corporate Logo).
   - Root CSS variables (Red/Black/Navy), spacing, shadows, typography.
   - Components: 3 button variants (CTA shimmer, black uplift, outlined).
   - 3D hover & active effects included.
   ========================================================================== */

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

/* ---------------------------
   :root theme tokens (Aggarwal Red)
   --------------------------- */
:root {
  /* --- Brand Colors --- */
  --brand-red: #E31E24;           /* Primary Corporate Red */
  --brand-red-hover: #B71C1C;     /* Deep Red for Hover states */
  --brand-red-light: #FADBD8;     /* Soft Red accent/backgrounds */
  --brand-black: #101010;         /* Premium Deep Black */
  --brand-navy: #0B3A66;          /* Navy (Secondary/Professional) */
  --brand-white: #FFFFFF;         /* Pure White */

  /* --- UI Logic Colors --- */
  --ui-primary: var(--brand-red);
  --ui-secondary: var(--brand-black);
  --ui-divider: rgba(0, 0, 0, 0.08);

  /* --- Backgrounds & Text --- */
  --bg-body: #F9F9F9;             /* Very subtle off-white for depth */
  --bg-surface: #FFFFFF;          /* Pure white for cards */
  --text-main: #1A1A1A;           /* Dark Charcoal */
  --text-muted: #666666;          /* Muted Grey */
  --text-on-primary: #FFFFFF;     /* MANDATORY: White text on Red buttons */

  /* --- Typography --- */
  --font-main: 'Montserrat', system-ui, -apple-system, sans-serif;
  
  /* --- Spacing --- */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --container-max: 1400px;

  /* --- Radii (Rounded Corners) --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;              /* Larger radius for modern cards */
  --radius-btn: 8px;              /* Sophisticated button radius */

  /* --- Elevation (Shadows for "Uplifted" Look) --- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12);
  --shadow-red: 0 10px 25px rgba(227, 30, 36, 0.2); /* Glow for red buttons */

  /* --- Transitions --- */
  --ease-spring: cubic-bezier(0.25, 0.8, 0.25, 1);
  --duration: 0.3s;
}

/* ---------------------------
   Base Reset
   --------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-body);
  color: var(--text-main);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
      background-image: 
        linear-gradient(rgba(255, 198, 10, 0.4) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212, 175, 55, 0.46) 1px, transparent 1px);
    background-size: 50px 50px;

}

img {
  max-width: 100%;
  display: block;
  height: auto;
}

a {
  color: var(--brand-black);
  text-decoration: none;
  transition: color 0.2s ease;
}

/* ---------------------------
   Typography
   --------------------------- */
h1, h2, h3, h4, h5, h6 {
  color: var(--brand-black);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-sm);
  letter-spacing: -0.02em;
}

p {
  color: var(--text-muted);
  margin-bottom: 1rem;
}

/* Helper: Red Text with Shadow */
.text-red {
  color: var(--brand-red);
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(227, 30, 36, 0.1);
}

/* ---------------------------
   Uplifted Cards
   --------------------------- */
.card {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  border: 1px solid rgba(0,0,0,0.03);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration) var(--ease-spring), box-shadow var(--duration) var(--ease-spring);
  position: relative;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(227, 30, 36, 0.15); /* Slight red tint on hover */
}

/* ---------------------------
   Buttons (Refined)
   --------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-family: var(--font-main);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: all var(--duration) var(--ease-spring);
  border: none;
  position: relative;
  overflow: hidden;
  gap: 10px;
}

/* --- 1. CTA Red (Fixed: White Text) --- */
.btn--cta {
  background: var(--brand-red);
  color: var(--text-on-primary); 
  box-shadow: 0 4px 15px rgba(227, 30, 36, 0.3);
}

.btn--cta:hover {
  background: linear-gradient(135deg, var(--brand-red) 0%, #FF3D43 100%);
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(227, 30, 36, 0.45);
}

.btn--cta:active {
  transform: translateY(-1px);
}

/* Shimmer Effect for CTA */
.btn--cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-25deg);
  transition: none;
}

.btn--cta:hover::after {
  animation: shimmer 0.75s forwards;
}

@keyframes shimmer {
  100% { left: 150%; }
}

/* --- 2. Black Premium (Secondary) --- */
.btn--black {
  background-color: var(--brand-black);
  color: var(--brand-white);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn--black:hover {
  background-color: #000000;
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* --- 3. Outline (Tertiary) --- */
.btn--outline {
  background: transparent;
  border: 2px solid var(--brand-black);
  color: var(--brand-black);
}

.btn--outline:hover {
  background: var(--brand-black);
  color: var(--brand-white);
  transform: translateY(-2px);
}

/* ---------------------------
   Inputs & Forms
   --------------------------- */
input, textarea, select {
  width: 100%;
  padding: 14px;
  border: 1.5px solid #E5E5E5;
  border-radius: var(--radius-md);
  background: var(--brand-white);
  font-family: var(--font-main);
  font-size: 1rem;
  transition: all 0.2s ease;
  color: var(--brand-black);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--brand-red);
  box-shadow: 0 0 0 4px rgba(227, 30, 36, 0.1); /* Red focus ring */
}

/* ---------------------------
   Icon Circles & Utilities
   --------------------------- */
.icon-circle {
  width: 60px;
  height: 60px;
  background: var(--bg-surface);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  color: var(--brand-red);
  font-size: 24px;
  transition: var(--ease-spring) var(--duration);
}

.icon-circle:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: var(--shadow-red);
  color: var(--brand-white);
  background: var(--brand-red); /* Contrast shift to Red on hover */
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* Grid Helper */
.grid-cols-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
}

/* Price Tag Styling */
.price-tag {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--brand-black);
  display: flex;
  align-items: center;
}
.price-tag span {
  color: var(--brand-red);
  margin-right: 4px;
}

  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 43, 43, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(255, 43, 43, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 43, 43, 0); }
  }

/* Responsive */
@media (max-width: 768px) {
  :root {
    --space-md: 16px;
    --space-lg: 24px;
  }
  .btn {
    width: 100%;
  }
}
/* ---------------------------
   Custom Scrollbar (Modern, Themed)
   --------------------------- */
::-webkit-scrollbar {
  width: 12px;
  background: var(--bg-body);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, var(--brand-red) 60%, var(--brand-red-light) 100%);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(227, 30, 36, 0.12);
  border: 2px solid var(--bg-body);
  transition: background 0.3s var(--ease-spring);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, var(--brand-red-hover) 60%, var(--brand-red) 100%);
}

::-webkit-scrollbar-track {
  background: var(--bg-body);
  border-radius: 8px;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--brand-red) var(--bg-body);
}