/* =============================================================
   Gift Creator Landing — Elegant & Refined v3.1
   
   Design Philosophy:
   - Sophisticated, professional, dignified
   - Clean typography with proper hierarchy
   - Generous whitespace for breathing room
   - Subtle interactions, no aggressive effects
   - Centered section headings
   - Monochrome palette with refined accents
   - Privacy & Security emphasis
   
   Version 3.1 Updates:
   - Added Privacy Highlight boxes
   - Featured Security card styling
   - Privacy Guarantee section
   - Refined privacy messaging
============================================================= */

/* --------- Design Tokens --------- */
:root {
  /* Colors */
  --ink: #1a1a1a;              /* Primary text - soft black */
  --ink-light: #4a5568;        /* Secondary text */
  --muted: #718096;            /* Tertiary text */
  --border: #2d3748;           /* Strong borders */
  --divider: #e2e8f0;          /* Subtle dividers */
  --bg: #ffffff;               /* Pure white background */
  --bg-soft: #f7fafc;          /* Soft background */
  --bg-feature: #fafbfc;       /* Feature card background */
  --accent: #2c5282;           /* Refined blue accent */
  --highlight-bg: #fffbeb;     /* Warm highlight background */
  --highlight-border: #d97706; /* Amber border */
  --highlight-text: #78350f;   /* Amber text */
  
  /* Spacing */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  
  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: Georgia, 'Times New Roman', serif;
  
  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;
}

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

/* --------- Container --------- */
.gift-landing {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 40px);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.6;
}

/* Override Flatsome theme constraints */
body #wrapper .content-area.page-wrapper .row.row-main:has(.gift-landing) {
  max-width: none;
  width: 100%;
}
body #wrapper .content-area.page-wrapper .row.row-main .large-12:has(.gift-landing) {
  max-width: none;
  flex: 0 1 100%;
}

/* --------- Typography --------- */
.gift-landing h1 {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.gift-landing h2 {
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.gift-landing h3 {
  font-size: clamp(18px, 2.5vw, 22px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.gift-landing p {
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.7;
  color: var(--ink-light);
}

/* --------- Buttons --------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  font-size: clamp(15px, 2vw, 17px);
  font-weight: 600;
  color: #ffffff;
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--radius-full);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.btn-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(44, 82, 130, 0.2);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* --------- HERO SECTION --------- */
.gift-hero {
  text-align: center;
  background: var(--bg);
  padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 48px);
  margin-bottom: var(--space-xl);
  border: 2px solid var(--divider);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.gift-hero h1 {
  margin-bottom: var(--space-md);
}

.gift-hero .subtitle {
  font-size: clamp(17px, 2.5vw, 20px);
  color: var(--ink-light);
  margin-bottom: var(--space-md);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.gift-hero .tagline {
  font-size: clamp(14px, 2vw, 16px);
  color: var(--muted);
  margin-bottom: var(--space-lg);
  font-weight: 500;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
}

.gift-hero .btn-primary {
  margin-top: var(--space-sm);
  min-width: 260px;
  padding: 16px 36px;
  font-size: clamp(16px, 2vw, 18px);
}

/* --------- HIGHLIGHT BOXES --------- */
.highlight-box {
  background: var(--highlight-bg);
  border-left: 4px solid var(--highlight-border);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-sm);
  margin: var(--space-lg) 0;
  line-height: 1.7;
  font-size: clamp(14px, 2vw, 16px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.highlight-box strong {
  color: var(--highlight-text);
  font-weight: 700;
}

/* Privacy Highlight Box - Simple styling */
.privacy-highlight {
  background: var(--highlight-bg);
  border-left: 4px solid var(--highlight-border);
}

.privacy-highlight strong {
  color: var(--highlight-text);
}

/* --------- SECTION STRUCTURE --------- */
.gift-features,
.gift-how,
.gift-privacy-guarantee,
.gift-cta {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

/* Section Titles - Centered with underline */
.section-title {
  text-align: center !important;
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--divider);
  max-width: 900px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Đảm bảo h2 trong sections được căn giữa */
.gift-features h2,
.gift-how h2,
.gift-privacy-guarantee h2,
.gift-cta h2 {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Section Subtitles - Centered description */
.section-subtitle {
  text-align: center !important;
  color: var(--muted);
  margin-bottom: var(--space-xl);
  max-width: 680px;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: clamp(15px, 2vw, 17px);
}

/* Override inline styles từ PHP */
.gift-cta p[style] {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --------- FEATURE GRID --------- */
.feature-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

/* Override theme wrappers */
.feature-grid > * {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  float: none !important;
  margin: 0 !important;
}

/* Feature Cards */
.feature-card {
  background: var(--bg-feature);
  border: 1.5px solid var(--divider);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-card:hover {
  background: var(--bg);
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-4px);
}

.feature-icon {
  font-size: clamp(36px, 5vw, 48px);
  line-height: 1;
  margin-bottom: var(--space-xs);
  display: block;
}

.feature-card h3 {
  margin-bottom: var(--space-xs);
  text-align: center;
}

.feature-card p {
  flex: 1;
  font-size: clamp(14px, 1.8vw, 16px);
  text-align: center;
}

/* Featured Security Card - Subtle emphasis */
.featured-security {
  background: var(--bg-feature);
  border: 1.5px solid var(--divider);
}

.featured-security:hover {
  background: var(--bg);
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-4px);
}

/* Responsive: 2 columns on tablet */
@media (max-width: 1024px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
  }
}

/* Responsive: 1 column on mobile */
@media (max-width: 640px) {
  .feature-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

/* --------- PRIVACY GUARANTEE SECTION --------- */
.gift-privacy-guarantee {
  background: var(--bg-soft);
  border: 2px solid var(--divider);
  border-radius: var(--radius-lg);
  padding: clamp(40px, 5vw, 64px) clamp(24px, 3vw, 48px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

/* Privacy Grid */
.privacy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.privacy-item {
  background: var(--bg);
  border: 1.5px solid var(--divider);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.privacy-item:hover {
  background: var(--bg-feature);
  border-color: var(--accent-purple);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
  transform: translateY(-4px);
}

.privacy-icon {
  font-size: clamp(40px, 5vw, 52px);
  margin-bottom: var(--space-md);
  display: inline-block;
}

.privacy-item h3 {
  color: var(--ink);
  font-size: clamp(18px, 2.5vw, 21px);
  margin-bottom: var(--space-sm);
  font-weight: 600;
}

.privacy-item p {
  color: var(--ink-light);
  line-height: 1.7;
  font-size: clamp(14px, 1.8vw, 16px);
}

/* Privacy Note Box */
.privacy-note {
  background: var(--bg-feature);
  color: var(--ink);
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-md);
  border: 2px solid var(--divider);
  text-align: center;
}

.privacy-note p {
  margin: 0;
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.8;
  color: var(--ink-light);
}

.privacy-note strong {
  color: var(--ink);
  font-size: clamp(16px, 2.2vw, 19px);
  display: block;
  margin-bottom: var(--space-sm);
  font-weight: 700;
}

/* --------- HOW IT WORKS --------- */
.gift-how {
  position: relative;
}

.steps {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

/* Override theme wrappers */
.steps > * {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  float: none !important;
  margin: 0 !important;
}

.step {
  background: var(--bg-feature);
  border: 1.5px solid var(--divider);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "number title"
    "number content";
  column-gap: var(--space-md);
  row-gap: var(--space-sm);
  height: 100%;
  min-height: 180px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.step:hover {
  background: var(--bg);
  border-color: var(--accent);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.step-number {
  grid-area: number;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--divider);
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: clamp(18px, 2.5vw, 20px);
  background: var(--bg);
  color: var(--ink);
  flex-shrink: 0;
}

.step-content {
  grid-area: title / title / content / content;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.step-content h3 {
  margin-bottom: var(--space-xs);
  text-align: center;
}

.step-content p {
  font-size: clamp(14px, 1.8vw, 16px);
  text-align: center;
}

/* Highlight privacy reminder in steps */
.step-content em {
  color: var(--muted);
  font-style: italic;
}

/* Responsive: 1 column on mobile */
@media (max-width: 768px) {
  .steps {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  
  .privacy-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  
  .gift-privacy-guarantee {
    padding: clamp(32px, 4vw, 48px) clamp(20px, 3vw, 32px);
  }
  
  .privacy-note {
    padding: var(--space-lg);
  }
  
  .privacy-note strong {
    font-size: clamp(15px, 2vw, 17px);
  }
}

/* --------- CALL TO ACTION --------- */
.gift-cta {
  text-align: center !important;
  background: var(--bg-soft);
  border: 2px solid var(--divider);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 48px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.gift-cta h2 {
  margin-bottom: var(--space-md);
  text-align: center !important;
}

.gift-cta p {
  color: var(--muted);
  margin-bottom: var(--space-lg);
  max-width: 600px;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.gift-cta .btn-primary {
  min-width: 260px;
  padding: 16px 36px;
  font-size: clamp(16px, 2vw, 18px);
}

/* CTA Privacy Note */
.cta-privacy-note {
  margin-top: var(--space-md);
  font-size: clamp(14px, 1.8vw, 16px);
  color: var(--muted);
}

.cta-privacy-note em {
  font-style: italic;
}

/* --------- ACCESSIBILITY --------- */
.feature-card:focus-within,
.privacy-item:focus-within,
.step:focus-within,
.btn-primary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* --------- UTILITY --------- */
.gift-how,
#gift-how {
  scroll-margin-top: 80px;
}

/* Prevent text selection on decorative elements */
.feature-icon,
.privacy-icon,
.step-number {
  user-select: none;
  -webkit-user-select: none;
}

/* --------- RESPONSIVE ADJUSTMENTS --------- */
@media (max-width: 768px) {
  :root {
    --space-xl: 32px;
    --space-2xl: 48px;
  }
  
  .gift-landing {
    padding: clamp(16px, 3vw, 24px);
  }
  
  .gift-hero {
    padding: clamp(32px, 5vw, 48px) clamp(16px, 3vw, 32px);
  }
}

@media (max-width: 480px) {
  :root {
    --space-lg: 24px;
    --space-xl: 28px;
  }
  
  .btn-primary {
    width: 100%;
    max-width: 100%;
  }
  
  .gift-hero .btn-primary,
  .gift-cta .btn-primary {
    min-width: auto;
    width: 100%;
  }
}

/* --------- PRINT STYLES --------- */
@media print {
  .btn-primary {
    display: none;
  }
  
  .gift-landing {
    max-width: 100%;
    padding: 0;
  }
  
  .feature-card,
  .privacy-item,
  .step {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}