/**
 * TTPixel Child Theme — Global Design System
 *
 * Scope  : Global — loaded on every page, after main.css.
 * Purpose: Extended design tokens, reusable component classes, and layout
 *          utilities. This file is the single source of truth for all
 *          visual design decisions consumed by future components.
 *
 * Load order (guaranteed by enqueue.php):
 *   1. hello-elementor        (parent reset.css)
 *   2. hello-elementor-theme-style (parent theme.css)
 *   3. ttpixel-main-style     (main.css — base tokens + resets)
 *   4. THIS FILE  ← ttpixel-design-system
 *   5. ttpixel-woocommerce-style (woocommerce.css — WC pages only)
 *
 * Dependency rule:
 *   - Reads :root tokens defined in main.css.
 *   - Extends them with additional design system tokens.
 *   - Never redefines tokens already declared in main.css.
 *
 * Elementor Compatibility (Phase 5 rules maintained):
 *   - No .elementor-* selectors targeted.
 *   - Component classes use .ttp- prefix — never collide with Elementor classes.
 *   - Layout utilities use .ttp- prefix.
 *   - All heading / link rules remain scoped per Phase 5 (they live in main.css).
 *   - Elementor inline styles always win over our class-level rules (by design).
 *
 * Sections:
 *   1.  Extended Design Tokens
 *       1a. Extended Colour Palette
 *       1b. Extended Typography Tokens
 *       1c. Extended Spacing & Size Tokens
 *       1d. Shadow Tokens
 *       1e. Transition Tokens
 *       1f. Z-Index Scale
 *   2.  Typography System
 *   3.  Spacing System Utilities
 *   4.  Layout System
 *       4a. Container
 *       4b. Grid Helpers
 *       4c. Flex Helpers
 *   5.  Button System
 *       5a. Base Button
 *       5b. Primary Button
 *       5c. Secondary Button
 *       5d. Outline Button
 *       5e. Ghost Button
 *       5f. Button Sizes
 *   6.  Common UI Components
 *       6a. Card
 *       6b. Badge
 *       6c. Tag
 *       6d. Divider
 *       6e. Form Elements
 *
 * @package TTPixel_Child_Theme
 */

/* =============================================================================
   1. Extended Design Tokens
   Extends the base :root variables from main.css.
   Never redefines --ttpixel-color-primary, --ttpixel-space-*, etc.
   ============================================================================= */

:root {

	/* ── 1a. Extended Colour Palette ────────────────────────────────────────── */

	/* Primary scale */
	--color-primary-50:   #eff6ff;
	--color-primary-100:  #dbeafe;
	--color-primary-200:  #bfdbfe;
	--color-primary-500:  #3b82f6;
	--color-primary-600:  #2563eb;   /* = --ttpixel-color-primary */
	--color-primary-700:  #1d4ed8;   /* = --ttpixel-color-primary-dark */
	--color-primary-900:  #1e3a8a;

	/* Secondary / accent scale */
	--color-secondary-50:  #f5f3ff;
	--color-secondary-100: #ede9fe;
	--color-secondary-500: #8b5cf6;
	--color-secondary-600: #7c3aed;  /* = --ttpixel-color-secondary */
	--color-secondary-700: #6d28d9;

	/* Neutral / grey scale */
	--color-neutral-50:  #f9fafb;   /* = --ttpixel-color-bg-alt */
	--color-neutral-100: #f3f4f6;
	--color-neutral-200: #e5e7eb;   /* = --ttpixel-color-border */
	--color-neutral-300: #d1d5db;
	--color-neutral-400: #9ca3af;
	--color-neutral-500: #6b7280;   /* = --ttpixel-color-text-light */
	--color-neutral-600: #4b5563;
	--color-neutral-700: #374151;
	--color-neutral-800: #1f2937;   /* = --ttpixel-color-text */
	--color-neutral-900: #111827;

	/* State colours */
	--color-success:      #16a34a;   /* = --ttpixel-color-success */
	--color-success-light: #f0fdf4;
	--color-success-dark:  #15803d;
	--color-error:        #dc2626;   /* = --ttpixel-color-error */
	--color-error-light:  #fef2f2;
	--color-error-dark:   #b91c1c;
	--color-warning:      #d97706;   /* = --ttpixel-color-warning */
	--color-warning-light: #fffbeb;
	--color-info:         #0284c7;
	--color-info-light:   #f0f9ff;

	/* Surface colours */
	--color-surface:        #ffffff;
	--color-surface-raised: #ffffff;
	--color-surface-overlay: rgba(0, 0, 0, 0.5);

	/* ── 1b. Extended Typography Tokens ─────────────────────────────────────── */

	/* Font size scale (fluid-friendly rem values) */
	--font-size-xs:   0.75rem;    /* 12px */
	--font-size-sm:   0.875rem;   /* 14px */
	--font-size-base: 1rem;       /* 16px */
	--font-size-md:   1.125rem;   /* 18px */
	--font-size-lg:   1.25rem;    /* 20px */
	--font-size-xl:   1.5rem;     /* 24px */
	--font-size-2xl:  1.875rem;   /* 30px */
	--font-size-3xl:  2.25rem;    /* 36px */
	--font-size-4xl:  3rem;       /* 48px */
	--font-size-5xl:  3.75rem;    /* 60px */

	/* Font weight scale */
	--font-weight-light:    300;
	--font-weight-normal:   400;
	--font-weight-medium:   500;
	--font-weight-semibold: 600;
	--font-weight-bold:     700;
	--font-weight-extrabold:800;

	/* Line height scale */
	--line-height-tight:   1.25;
	--line-height-snug:    1.375;
	--line-height-normal:  1.5;
	--line-height-relaxed: 1.625;
	--line-height-loose:   2;

	/* Letter spacing */
	--letter-spacing-tight:  -0.025em;
	--letter-spacing-normal:  0;
	--letter-spacing-wide:    0.025em;
	--letter-spacing-wider:   0.05em;
	--letter-spacing-widest:  0.1em;

	/* ── 1c. Extended Spacing & Size Tokens ─────────────────────────────────── */

	/* Spacing scale (extends --ttpixel-space-* from main.css) */
	--space-1:  0.25rem;    /*  4px */
	--space-2:  0.5rem;     /*  8px */
	--space-3:  0.75rem;    /* 12px */
	--space-4:  1rem;       /* 16px */
	--space-5:  1.25rem;    /* 20px */
	--space-6:  1.5rem;     /* 24px */
	--space-8:  2rem;       /* 32px */
	--space-10: 2.5rem;     /* 40px */
	--space-12: 3rem;       /* 48px */
	--space-16: 4rem;       /* 64px */
	--space-20: 5rem;       /* 80px */
	--space-24: 6rem;       /* 96px */
	--space-32: 8rem;       /* 128px */

	/* Section padding (used by header, footer, page sections) */
	--section-padding-y:     var(--space-16);   /* 64px */
	--section-padding-y-sm:  var(--space-10);   /* 40px */
	--section-padding-y-lg:  var(--space-24);   /* 96px */
	--section-padding-x:     var(--space-6);    /* 24px */

	/* Border radius (extends --ttpixel-radius-* from main.css) */
	--radius-xs:   2px;
	--radius-sm:   4px;     /* = --ttpixel-radius-sm */
	--radius-md:   8px;     /* = --ttpixel-radius-md */
	--radius-lg:   12px;    /* = --ttpixel-radius-lg */
	--radius-xl:   16px;
	--radius-2xl:  24px;
	--radius-full: 9999px;  /* = --ttpixel-radius-full */

	/* Container widths */
	--container-sm:  640px;
	--container-md:  768px;
	--container-lg:  1024px;
	--container-xl:  1400px;  /* = --ttpixel-container-max */
	--container-2xl: 1400px;
	--container-padding: var(--space-6);   /* 24px side padding */

	/* ── 1d. Shadow Tokens ──────────────────────────────────────────────────── */

	--shadow-xs:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-sm:  0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
	--shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
	--shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	--shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
	--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
	--shadow-none: none;

	/* Coloured shadows (for cards and elevated elements) */
	--shadow-primary: 0 4px 14px 0 rgba(37, 99, 235, 0.25);

	/* ── 1e. Transition Tokens ──────────────────────────────────────────────── */

	--transition-fast:    0.1s ease;
	--transition-base:    0.2s ease;     /* = --ttpixel-transition */
	--transition-slow:    0.3s ease;
	--transition-slower:  0.5s ease;

	/* Named transition properties */
	--transition-colors:  color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
	--transition-shadow:  box-shadow var(--transition-base);
	--transition-transform: transform var(--transition-base);
	--transition-all:     all var(--transition-base);

	/* ── 1f. Z-Index Scale ──────────────────────────────────────────────────── */

	--z-below:    -1;
	--z-base:      0;
	--z-raised:    10;
	--z-dropdown:  100;
	--z-sticky:    200;
	--z-overlay:   300;
	--z-modal:     400;
	--z-toast:     500;
	--z-tooltip:   600;
	--z-top:       9999;

}

/* =============================================================================
   2. Typography System

   Elementor Compatibility:
   - Component typography classes (.ttp-heading-*, .ttp-text-*) use the .ttp-
     prefix and are opt-in only — never applied globally.
   - Heading element rules already scoped in main.css (Phase 5).
   - These utilities are for non-Elementor content areas only.
   ============================================================================= */

/* Heading utility classes — opt-in, not global */
.ttp-display {
	font-size: var(--font-size-5xl);
	font-weight: var(--font-weight-extrabold);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
}

.ttp-h1 {
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
}

.ttp-h2 {
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-snug);
}

.ttp-h3 {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-snug);
}

.ttp-h4 {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-normal);
}

.ttp-h5 {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-normal);
}

.ttp-h6 {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-normal);
}

/* Body text utilities */
.ttp-text-xs   { font-size: var(--font-size-xs); }
.ttp-text-sm   { font-size: var(--font-size-sm); }
.ttp-text-base { font-size: var(--font-size-base); }
.ttp-text-md   { font-size: var(--font-size-md); }
.ttp-text-lg   { font-size: var(--font-size-lg); }
.ttp-text-xl   { font-size: var(--font-size-xl); }

/* Weight utilities */
.ttp-font-normal   { font-weight: var(--font-weight-normal); }
.ttp-font-medium   { font-weight: var(--font-weight-medium); }
.ttp-font-semibold { font-weight: var(--font-weight-semibold); }
.ttp-font-bold     { font-weight: var(--font-weight-bold); }

/* Color utilities */
.ttp-text-primary   { color: var(--color-primary-600); }
.ttp-text-secondary { color: var(--color-secondary-600); }
.ttp-text-muted     { color: var(--color-neutral-500); }
.ttp-text-light     { color: var(--color-neutral-400); }
.ttp-text-dark      { color: var(--color-neutral-800); }
.ttp-text-white     { color: #ffffff; }

/* Lead / intro text */
.ttp-lead {
	font-size: var(--font-size-lg);
	line-height: var(--line-height-relaxed);
	color: var(--color-neutral-600);
}

/* =============================================================================
   3. Spacing System Utilities

   Lightweight spacing helpers for non-Elementor content areas.
   All use the .ttp- prefix to avoid conflicts.
   ============================================================================= */

/* Margin top utilities */
.ttp-mt-0  { margin-top: 0; }
.ttp-mt-1  { margin-top: var(--space-1); }
.ttp-mt-2  { margin-top: var(--space-2); }
.ttp-mt-4  { margin-top: var(--space-4); }
.ttp-mt-6  { margin-top: var(--space-6); }
.ttp-mt-8  { margin-top: var(--space-8); }
.ttp-mt-12 { margin-top: var(--space-12); }
.ttp-mt-16 { margin-top: var(--space-16); }

/* Margin bottom utilities */
.ttp-mb-0  { margin-bottom: 0; }
.ttp-mb-1  { margin-bottom: var(--space-1); }
.ttp-mb-2  { margin-bottom: var(--space-2); }
.ttp-mb-4  { margin-bottom: var(--space-4); }
.ttp-mb-6  { margin-bottom: var(--space-6); }
.ttp-mb-8  { margin-bottom: var(--space-8); }
.ttp-mb-12 { margin-bottom: var(--space-12); }
.ttp-mb-16 { margin-bottom: var(--space-16); }

/* Section spacing */
.ttp-section {
	padding-top: var(--section-padding-y);
	padding-bottom: var(--section-padding-y);
}

.ttp-section--sm {
	padding-top: var(--section-padding-y-sm);
	padding-bottom: var(--section-padding-y-sm);
}

.ttp-section--lg {
	padding-top: var(--section-padding-y-lg);
	padding-bottom: var(--section-padding-y-lg);
}

/* =============================================================================
   4. Layout System

   Elementor Compatibility:
   - .ttp-container is for NON-Elementor pages (WooCommerce, standard WP content).
   - Never apply .ttp-container inside Elementor sections.
   - Elementor manages its own container width via its Section/Container widgets.
   ============================================================================= */

/* ── 4a. Container ──────────────────────────────────────────────────────────── */

.ttp-container {
	width: 100%;
	max-width: var(--container-xl);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-padding);
	padding-right: var(--container-padding);
}

@media (max-width: 767.98px) {
	.ttp-container {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
}

.ttp-container--sm  { max-width: var(--container-sm); }
.ttp-container--md  { max-width: var(--container-md); }
.ttp-container--lg  { max-width: var(--container-lg); }
.ttp-container--2xl { max-width: var(--container-2xl); }
.ttp-container--full { max-width: none; }

/* ── 4b. Grid Helpers ──────────────────────────────────────────────────────── */

.ttp-grid {
	display: grid;
	gap: var(--space-6);
}

/* Auto-fit responsive grid — no media query needed */
.ttp-grid--auto-sm {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.ttp-grid--auto-md {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.ttp-grid--auto-lg {
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* Fixed column grids */
.ttp-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ttp-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ttp-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
	.ttp-grid--2,
	.ttp-grid--3,
	.ttp-grid--4 {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 576px) and (max-width: 991px) {
	.ttp-grid--3,
	.ttp-grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ── 4c. Flex Helpers ──────────────────────────────────────────────────────── */

.ttp-flex         { display: flex; }
.ttp-flex--center { display: flex; align-items: center; justify-content: center; }
.ttp-flex--between { display: flex; align-items: center; justify-content: space-between; }
.ttp-flex--start  { display: flex; align-items: center; justify-content: flex-start; }
.ttp-flex--end    { display: flex; align-items: center; justify-content: flex-end; }
.ttp-flex--wrap   { flex-wrap: wrap; }
.ttp-flex--col    { flex-direction: column; }
.ttp-flex--gap-2  { gap: var(--space-2); }
.ttp-flex--gap-4  { gap: var(--space-4); }
.ttp-flex--gap-6  { gap: var(--space-6); }
.ttp-flex--gap-8  { gap: var(--space-8); }

/* =============================================================================
   5. Button System

   All button classes use the .ttp-btn prefix.
   Elementor Compatibility:
   - These classes do NOT target .elementor-button or WooCommerce default buttons.
   - They are opt-in classes applied to custom theme HTML only.
   - WooCommerce buttons are styled separately in woocommerce.css.
   - Elementor button widget styles remain fully managed by the builder.
   ============================================================================= */

/* ── 5a. Base Button ──────────────────────────────────────────────────────── */

.ttp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);

	/* Typography */
	font-family: inherit;
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;

	/* Layout */
	padding: var(--space-3) var(--space-6);
	border-radius: var(--radius-md);
	border: 2px solid transparent;

	/* Interaction */
	cursor: pointer;
	user-select: none;
	transition: var(--transition-colors), var(--transition-shadow), var(--transition-transform);

	/* Reset */
	appearance: none;
	background: none;
}

/* Prevent layout shift on press */
.ttp-btn:active {
	transform: translateY(1px);
}

/* Disabled state */
.ttp-btn:disabled,
.ttp-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* Focus — accessible for keyboard users */
.ttp-btn:focus-visible {
	outline: 3px solid var(--color-primary-500);
	outline-offset: 3px;
}

/* ── 5b. Primary Button ───────────────────────────────────────────────────── */

.ttp-btn--primary {
	background-color: var(--color-primary-600);
	color: #ffffff;
	border-color: var(--color-primary-600);
}

.ttp-btn--primary:hover {
	background-color: var(--color-primary-700);
	border-color: var(--color-primary-700);
	color: #ffffff;
	text-decoration: none;
	box-shadow: var(--shadow-primary);
}

.ttp-btn--primary:active {
	background-color: var(--color-primary-900);
	border-color: var(--color-primary-900);
}

/* ── 5c. Secondary Button ─────────────────────────────────────────────────── */

.ttp-btn--secondary {
	background-color: var(--color-secondary-600);
	color: #ffffff;
	border-color: var(--color-secondary-600);
}

.ttp-btn--secondary:hover {
	background-color: var(--color-secondary-700);
	border-color: var(--color-secondary-700);
	color: #ffffff;
	text-decoration: none;
}

.ttp-btn--secondary:active {
	background-color: var(--color-secondary-600);
}

/* ── 5d. Outline Button ───────────────────────────────────────────────────── */

.ttp-btn--outline {
	background-color: transparent;
	color: var(--color-primary-600);
	border-color: var(--color-primary-600);
}

.ttp-btn--outline:hover {
	background-color: var(--color-primary-600);
	color: #ffffff;
	text-decoration: none;
}

.ttp-btn--outline:active {
	background-color: var(--color-primary-700);
	border-color: var(--color-primary-700);
	color: #ffffff;
}

/* ── 5e. Ghost Button ─────────────────────────────────────────────────────── */

.ttp-btn--ghost {
	background-color: transparent;
	color: var(--color-primary-600);
	border-color: transparent;
}

.ttp-btn--ghost:hover {
	background-color: var(--color-primary-50);
	color: var(--color-primary-700);
	text-decoration: none;
}

.ttp-btn--ghost:active {
	background-color: var(--color-primary-100);
}

/* ── 5f. Button Sizes ─────────────────────────────────────────────────────── */

.ttp-btn--xs {
	font-size: var(--font-size-xs);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-sm);
}

.ttp-btn--sm {
	font-size: var(--font-size-sm);
	padding: var(--space-2) var(--space-4);
}

.ttp-btn--lg {
	font-size: var(--font-size-lg);
	padding: var(--space-4) var(--space-8);
	border-radius: var(--radius-lg);
}

.ttp-btn--xl {
	font-size: var(--font-size-xl);
	padding: var(--space-5) var(--space-10);
	border-radius: var(--radius-lg);
}

.ttp-btn--full {
	width: 100%;
}

/* =============================================================================
   6. Common UI Components

   All component classes use the .ttp- prefix.
   Generic and reusable — consumed by Header, Footer, WooCommerce, and any
   future template-parts.

   Elementor Compatibility:
   - These classes are NEVER applied inside Elementor widget HTML.
   - Elementor manages its own card/box/container widget styles.
   ============================================================================= */

/* ── 6a. Card ─────────────────────────────────────────────────────────────── */

.ttp-card {
	background-color: var(--color-surface);
	border: 1px solid var(--color-neutral-200);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: var(--transition-shadow), var(--transition-transform);
}

.ttp-card:hover {
	box-shadow: var(--shadow-md);
}

/* Elevated card — starts with shadow */
.ttp-card--elevated {
	box-shadow: var(--shadow-sm);
	border: none;
}

.ttp-card--elevated:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-2px);
}

/* Card body padding */
.ttp-card__body {
	padding: var(--space-6);
}

.ttp-card__body--sm { padding: var(--space-4); }
.ttp-card__body--lg { padding: var(--space-8); }

/* Card header */
.ttp-card__header {
	padding: var(--space-4) var(--space-6);
	border-bottom: 1px solid var(--color-neutral-200);
	font-weight: var(--font-weight-semibold);
}

/* Card footer */
.ttp-card__footer {
	padding: var(--space-4) var(--space-6);
	border-top: 1px solid var(--color-neutral-200);
	background-color: var(--color-neutral-50);
}

/* Card image (full-bleed top image) */
.ttp-card__image img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
}

/* ── 6b. Badge ────────────────────────────────────────────────────────────── */

.ttp-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-2);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	line-height: 1;
	border-radius: var(--radius-full);
	white-space: nowrap;
}

/* Badge variants */
.ttp-badge--primary {
	background-color: var(--color-primary-100);
	color: var(--color-primary-700);
}

.ttp-badge--secondary {
	background-color: var(--color-secondary-100);
	color: var(--color-secondary-700);
}

.ttp-badge--success {
	background-color: var(--color-success-light);
	color: var(--color-success-dark);
}

.ttp-badge--error {
	background-color: var(--color-error-light);
	color: var(--color-error-dark);
}

.ttp-badge--warning {
	background-color: var(--color-warning-light);
	color: var(--color-warning);
}

.ttp-badge--neutral {
	background-color: var(--color-neutral-100);
	color: var(--color-neutral-700);
}

/* Solid badge variant */
.ttp-badge--solid-primary {
	background-color: var(--color-primary-600);
	color: #ffffff;
}

/* ── 6c. Tag ──────────────────────────────────────────────────────────────── */

.ttp-tag {
	display: inline-flex;
	align-items: center;
	padding: var(--space-1) var(--space-3);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	line-height: 1.4;
	border: 1px solid var(--color-neutral-200);
	border-radius: var(--radius-full);
	background-color: var(--color-neutral-50);
	color: var(--color-neutral-700);
	text-decoration: none;
	transition: var(--transition-colors);
}

/* Interactive tag */
.ttp-tag[href]:hover,
.ttp-tag:hover {
	border-color: var(--color-primary-600);
	color: var(--color-primary-600);
	background-color: var(--color-primary-50);
	text-decoration: none;
}

/* Active/selected tag */
.ttp-tag--active {
	background-color: var(--color-primary-600);
	border-color: var(--color-primary-600);
	color: #ffffff;
}

/* ── 6d. Divider ──────────────────────────────────────────────────────────── */

.ttp-divider {
	border: none;
	border-top: 1px solid var(--color-neutral-200);
	margin: var(--space-8) 0;
}

.ttp-divider--sm { margin: var(--space-4) 0; }
.ttp-divider--lg { margin: var(--space-16) 0; }

/* Divider with text label */
.ttp-divider--labeled {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	border: none;
	margin: var(--space-8) 0;
}

.ttp-divider--labeled::before,
.ttp-divider--labeled::after {
	content: '';
	flex: 1;
	border-top: 1px solid var(--color-neutral-200);
}

.ttp-divider--labeled span {
	font-size: var(--font-size-sm);
	color: var(--color-neutral-500);
	white-space: nowrap;
}

/* ── 6e. Form Elements ────────────────────────────────────────────────────── */

/*
 * Reusable form component classes for non-WooCommerce forms.
 * WooCommerce forms are styled in woocommerce.css via WC-specific selectors.
 *
 * Elementor Compatibility:
 * - These classes are NOT applied to Elementor Form widget inputs.
 * - Elementor Form widget manages its own styles.
 */

/* Form group */
.ttp-form-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
}

/* Label */
.ttp-form-label {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	color: var(--color-neutral-700);
}

.ttp-form-label--required::after {
	content: ' *';
	color: var(--color-error);
}

/* Input, Select, Textarea */
.ttp-form-input,
.ttp-form-select,
.ttp-form-textarea {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	font-family: inherit;
	font-size: var(--font-size-base);
	line-height: var(--line-height-normal);
	color: var(--color-neutral-800);
	background-color: var(--color-surface);
	border: 1px solid var(--color-neutral-300);
	border-radius: var(--radius-md);
	transition: border-color var(--transition-base), box-shadow var(--transition-base);
	appearance: none;
}

.ttp-form-input:focus,
.ttp-form-select:focus,
.ttp-form-textarea:focus {
	border-color: var(--color-primary-600);
	outline: none;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.ttp-form-input::placeholder,
.ttp-form-textarea::placeholder {
	color: var(--color-neutral-400);
}

/* Input states */
.ttp-form-input--error,
.ttp-form-select--error {
	border-color: var(--color-error);
}

.ttp-form-input--error:focus,
.ttp-form-select--error:focus {
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.ttp-form-input--success {
	border-color: var(--color-success);
}

/* Textarea specific */
.ttp-form-textarea {
	min-height: 120px;
	resize: vertical;
}

/* Helper / error text */
.ttp-form-hint {
	font-size: var(--font-size-sm);
	color: var(--color-neutral-500);
}

.ttp-form-error {
	font-size: var(--font-size-sm);
	color: var(--color-error);
}

/* Checkbox & Radio */
.ttp-form-check {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	cursor: pointer;
}

.ttp-form-check input[type="checkbox"],
.ttp-form-check input[type="radio"] {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	accent-color: var(--color-primary-600);
	cursor: pointer;
}

.ttp-form-check__label {
	font-size: var(--font-size-sm);
	line-height: 1.5;
	color: var(--color-neutral-700);
}

/* =============================================================================
   7. Custom Contact Form Component (.ttp-contact-form)
   ========================================================================== */
.ttp-contact-form-wrapper {
	max-width: 720px;
	margin: 2rem auto;
	padding: 36px 32px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-top: 4px solid var(--ttpixel-color-primary, #2563eb);
	border-radius: 20px;
	box-shadow: 0 20px 40px -15px rgba(37, 99, 235, 0.08), 0 4px 12px rgba(0, 0, 0, 0.03);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.ttp-contact-form-header {
	text-align: center;
	margin-bottom: 28px;
}

.ttp-form-badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ttpixel-color-primary, #2563eb);
	background: #eff6ff;
	padding: 4px 12px;
	border-radius: 999px;
	margin-bottom: 10px;
}

.ttp-form-title {
	font-size: 26px;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 8px 0;
	line-height: 1.25;
}

.ttp-form-subtitle {
	font-size: 14px;
	color: #64748b;
	margin: 0;
	line-height: 1.5;
}

.ttp-contact-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* 2-Column Row for Desktop */
.ttp-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

@media (max-width: 640px) {
	.ttp-form-row {
		grid-template-columns: 1fr;
	}
	.ttp-contact-form-wrapper {
		padding: 24px 18px;
	}
}

.ttp-form-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ttp-form-label {
	font-size: 14px;
	font-weight: 600;
	color: #1e293b;
}

.ttp-form-label .required {
	color: #ef4444;
	margin-left: 2px;
}

/* Inputs with SVG Icons */
.ttp-input-with-icon {
	position: relative;
	display: flex;
	align-items: center;
}

.ttp-field-icon {
	position: absolute;
	left: 14px;
	color: #94a3b8;
	pointer-events: none;
	transition: color 0.2s ease;
	flex-shrink: 0;
}

.ttp-textarea-with-icon .ttp-field-icon {
	top: 14px;
}

.ttp-input-with-icon .ttp-form-input,
.ttp-input-with-icon .ttp-form-textarea {
	padding-left: 42px !important;
}

.ttp-form-input,
.ttp-form-textarea {
	width: 100%;
	padding: 12px 16px;
	font-size: 15px;
	font-family: inherit;
	color: #0f172a;
	background-color: #f8fafc;
	border: 1.5px solid #cbd5e1;
	border-radius: 10px;
	transition: all 0.2s ease;
	outline: none;
}

.ttp-form-textarea {
	min-height: 120px;
	resize: vertical;
}

.ttp-form-input:focus,
.ttp-form-textarea:focus {
	background-color: #ffffff;
	border-color: var(--ttpixel-color-primary, #2563eb);
	box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.ttp-input-with-icon:focus-within .ttp-field-icon {
	color: var(--ttpixel-color-primary, #2563eb);
}

.ttp-form-input::placeholder,
.ttp-form-textarea::placeholder {
	color: #94a3b8;
}

/* File Dropzone Uploader */
.ttp-file-dropzone {
	position: relative;
	border: 2px dashed #93c5fd;
	border-radius: 12px;
	padding: 24px;
	text-align: center;
	background-color: #f0f9ff;
	transition: all 0.25s ease;
	cursor: pointer;
}

.ttp-file-dropzone:hover,
.ttp-file-dropzone.ttp-is-dragover {
	border-color: var(--ttpixel-color-primary, #2563eb);
	background-color: #e0f2fe;
}

.ttp-file-input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
}

.ttp-upload-icon-wrapper {
	width: 48px;
	height: 48px;
	background: #ffffff;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
	box-shadow: 0 4px 10px rgba(37, 99, 235, 0.1);
}

.ttp-upload-icon {
	color: var(--ttpixel-color-primary, #2563eb);
}

.ttp-dropzone-text {
	font-size: 14px;
	font-weight: 600;
	color: #1e293b;
	margin: 0 0 4px 0;
}

.ttp-dropzone-hint {
	font-size: 12px;
	color: #64748b;
}

/* Preview Area */
.ttp-file-preview {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	width: 100%;
}

#ttp-preview-img {
	width: 52px;
	height: 52px;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
}

#ttp-preview-filename {
	font-size: 13px;
	font-weight: 600;
	color: #1e293b;
	flex-grow: 1;
	word-break: break-all;
	text-align: left;
}

.ttp-remove-photo-btn {
	background: #fee2e2;
	color: #dc2626;
	border: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	z-index: 3;
}

.ttp-remove-photo-btn:hover {
	background: #ef4444;
	color: #ffffff;
}

/* Submit Button & Spinner */
.ttp-form-submit-row {
	margin-top: 10px;
}

.ttp-submit-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
	border: none !important;
	border-radius: 12px !important;
	box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35) !important;
	cursor: pointer;
	transition: all 0.25s ease !important;
}

.ttp-submit-btn:hover {
	background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 25px rgba(37, 99, 235, 0.45) !important;
}

.ttp-submit-btn:active {
	transform: translateY(0);
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}

.ttp-submit-btn:disabled {
	opacity: 0.7;
	cursor: not-allowed;
	transform: none;
}

.ttp-spinner {
	animation: ttp-spin 0.8s linear infinite;
}

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

/* Alert Messages */
.ttp-form-response {
	padding: 14px 18px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	margin-bottom: 12px;
}

.ttp-response-success {
	background-color: #f0fdf4;
	color: #15803d;
	border: 1.5px solid #bbf7d0;
}

.ttp-response-error {
	background-color: #fef2f2;
	color: #b91c1c;
	border: 1.5px solid #fecaca;
}

/* =============================================================================
   8. Gutenberg Container Layout Alignment
   ========================================================================== */
.entry-content,
.site-main .page .entry-content,
.page .site-main {
	max-width: var(--ttpixel-container-max, 1200px);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-6, 24px);
	padding-right: var(--space-6, 24px);
	width: 100%;
}

.entry-content > .alignfull {
	max-width: 100vw;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.entry-content > .alignwide {
	max-width: var(--container-xl, 1400px);
	margin-left: auto;
	margin-right: auto;
}