/*
Theme Name: Noqstock Contact Form
Theme URI: https://noqstock.com
Author: Yehor Dementiev
Author URI: https://noqstock.com
Description: A custom WordPress theme for Noqstock Contact Form
Version: 1.0.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: noqstock-dashboard
*/

/* CSS Variables */
:root {
  /* =========================================================================
     CHARCOAL WARM ORCHARD - Dark Mode Dashboard Variables
     Design Philosophy: "Warm Orchard Nights"
     Based on original Golden Orchard palette, inverted for dark mode
     ========================================================================= */

  /* =========================================================================
     1. THEME COLORS - Charcoal Warm Palette
     ========================================================================= */

  /* PRIMARY: Warm Hazelnut Gold - SAME as light mode */
  --theme-primary: #C5956B;           /* Hazelnut shell - authentic, grounded */
  --theme-primary-light: #D4A87F;     /* Lighter gold for hovers */
  --theme-primary-dark: #B68355;      /* Deeper gold for pressed states */

  /* SECONDARY: Turkish Sunrise Gold - SAME warmth */
  --theme-secondary: #E8B87E;         /* Sunrise gold - warmth, optimism */
  --theme-secondary-light: #F0C995;   /* Champagne gold */
  --theme-secondary-dark: #D9A666;    /* Amber gold */

  /* ACCENT: Orchard Green - Adjusted for dark mode */
  --theme-accent: #7A9378;            /* Soft sage - growth, nature */
  --theme-accent-light: #8FA88B;      /* Brighter sage for dark backgrounds */
  --theme-accent-dark: #6A8368;       /* Deeper sage */

  /* CONTRAST: Roasted Coffee Depth - Enhanced for dark mode */
  --theme-dark: #6B4423;              /* Roasted coffee authority */
  --theme-dark-light: #7F5637;        /* Lighter roast */
  --theme-dark-dark: #563618;         /* Darkest roast */

  /* BACKGROUNDS: Charcoal Warm (inverted from light neutrals) */
  --bg-primary: #1A140E;              /* Deep roasted coffee (was neutral-900) */
  --bg-surface: #2E261E;              /* Rich mocha (was neutral-800) */
  --bg-elevated: #4A3F35;             /* Warm bark (was neutral-700) */
  --bg-hover: #3A332A;                /* Hover state between surface and elevated */

  /* FUNCTIONAL COLORS - Adjusted for dark mode */
  --success-green: #7A9378;           /* Soft sage success */
  --success-bg: rgba(122, 147, 120, 0.15);

  --warning-amber: #E8B87E;           /* Warm amber warning */
  --warning-bg: rgba(232, 184, 126, 0.15);

  --error-red: #D9695F;               /* Softened red for dark mode */
  --error-bg: rgba(217, 105, 95, 0.15);

  /* NEUTRAL SCALE - Warm charcoal to cream (inverted) */
  --neutral-900: #1A140E;             /* Darkest - deep coffee */
  --neutral-800: #2E261E;             /* Dark - mocha */
  --neutral-700: #4A3F35;             /* Medium dark - bark */
  --neutral-600: #6B5F53;             /* Medium - warm stone */
  --neutral-500: #9B8B79;             /* Medium light - warm sand */
  --neutral-400: #C4B5A3;             /* Light - beige */
  --neutral-300: #E5D5C3;             /* Lighter - warm sand */
  --neutral-200: #F5EDE0;             /* Very light - cream */
  --neutral-100: #FFF8F0;             /* Lightest - paper white */
  --neutral-50: #FFFFFF;              /* Pure white */

  /* TEXT COLORS - Inverted from light mode */
  --text-primary: #FFF8F0;            /* Cream white (was background) */
  --text-secondary: #E5D5C3;          /* Warm sand (was neutral-300) */
  --text-tertiary: #C4B5A3;           /* Muted beige (was neutral-400) */
  --text-disabled: #9B8B79;           /* Warm gray (was neutral-500) */
  --text-on-gold: #1A140E;            /* Dark text on gold buttons */

  /* BORDER COLORS - Warm subtle borders (improved for accessibility) */
  --border-subtle: rgba(197, 149, 107, 0.15);   /* 15% gold tint - improved contrast (was 0.1) */
  --border-medium: rgba(197, 149, 107, 0.25);   /* 25% gold tint (was 0.2) */
  --border-strong: rgba(197, 149, 107, 0.35);   /* 35% gold tint (was 0.3) */

  /* GOLD PALETTE - Strategic use for branding */
  --gold-primary: #C5956B;            /* Main hazelnut gold */
  --gold-bright: #D4A87F;             /* Bright gold for emphasis */
  --gold-pale: #E8B87E;               /* Turkish sunrise gold */
  --gold-hover: #E0B383;              /* Hover state gold */
  --gold-glow: rgba(197, 149, 107, 0.3);  /* Glow effect */

  /* GRADIENT: Metallic Gold (3-stop) */
  --gradient-gold-metallic: linear-gradient(
    135deg,
    #E8B87E 0%,                       /* Champagne */
    #C5956B 50%,                      /* Hazelnut */
    #A67C52 100%                      /* Deep bronze */
  );

  /* GRADIENT: Warm Charcoal (subtle depth) */
  --gradient-charcoal-warm: linear-gradient(
    135deg,
    #1A140E 0%,
    #2E261E 50%,
    #1A140E 100%
  );

  /* GRADIENT: Paper Texture Overlay */
  --gradient-paper-texture: linear-gradient(
    135deg,
    rgba(255, 248, 240, 0.02) 0%,
    transparent 50%,
    rgba(197, 149, 107, 0.02) 100%
  );


  /* =========================================================================
     2. TYPOGRAPHY - Golden Orchard Type System (SAME AS ORIGINAL)
     ========================================================================= */

  /* Font Families - Premium, editorial feel with technical precision */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-headings: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-data: 'DM Mono', 'Courier New', 'Courier', monospace;
  --font-body: var(--font-primary);
  --font-mono: var(--font-data);

  /* Font Sizes - Step-based for precise control */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-xxl: 24px;

  /* Heading Sizes - Fluid typography using clamp (optimized for Playfair Display) */
  --text-h1: clamp(2.75rem, 5vw + 1rem, 5rem);        /* 44px → 80px */
  --text-h2: clamp(2.25rem, 4vw + 0.5rem, 3.75rem);   /* 36px → 60px */
  --text-h3: clamp(1.75rem, 3vw + 0.25rem, 2.75rem);  /* 28px → 44px */
  --text-h4: clamp(1.375rem, 2.5vw, 2rem);            /* 22px → 32px */
  --text-h5: clamp(1.25rem, 2vw, 1.625rem);           /* 20px → 26px */
  --text-h6: clamp(1.125rem, 1.5vw, 1.375rem);        /* 18px → 22px */

  /* Font Weights - Inter specific weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line Heights - Optimized for readability */
  --leading-tight: 1.2;
  --leading-heading: 1.3;
  --leading-base: 1.6;
  --leading-relaxed: 1.8;

  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;


  /* =========================================================================
     3. SPACING SYSTEM - Step-based (SAME AS ORIGINAL)
     ========================================================================= */

  --space-1: 4px;      /* 0.25rem */
  --space-2: 8px;      /* 0.5rem */
  --space-3: 12px;     /* 0.75rem */
  --space-4: 16px;     /* 1rem */
  --space-5: 20px;     /* 1.25rem */
  --space-6: 24px;     /* 1.5rem */
  --space-8: 32px;     /* 2rem */
  --space-10: 40px;    /* 2.5rem */
  --space-12: 48px;    /* 3rem */
  --space-16: 64px;    /* 4rem */
  --space-20: 80px;    /* 5rem */
  --space-24: 96px;    /* 6rem */
  --space-32: 128px;   /* 8rem */

  /* Semantic aliases */
  --spacing-xxs: var(--space-1);
  --spacing-xs: var(--space-2);
  --spacing-sm: var(--space-4);
  --spacing-md: var(--space-6);
  --spacing-lg: var(--space-8);
  --spacing-xl: var(--space-12);
  --spacing-xxl: var(--space-16);
  --spacing-xxxl: var(--space-24);


  /* =========================================================================
     4. BORDERS / RADIUS / SHADOWS
     ========================================================================= */

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* Shadows - Warm, organic shadows */
  --shadow-sm: 0 2px 4px rgba(26, 20, 14, 0.3);
  --shadow-md: 0 4px 8px rgba(26, 20, 14, 0.4);
  --shadow-lg: 0 8px 16px rgba(26, 20, 14, 0.5);
  --shadow-xl: 0 12px 24px rgba(26, 20, 14, 0.6);
  --shadow-2xl: 0 20px 40px rgba(26, 20, 14, 0.7);

  /* Shadow with warm highlight (paper feel) */
  --shadow-warm:
    0 8px 24px rgba(26, 20, 14, 0.4),
    inset 0 1px 0 rgba(255, 248, 240, 0.05);

  /* Gold accent shadow */
  --shadow-gold: 0 4px 12px rgba(197, 149, 107, 0.3);
  --shadow-gold-strong: 0 8px 24px rgba(197, 149, 107, 0.4);


  /* =========================================================================
     5. OPACITY SYSTEM
     ========================================================================= */

  --opacity-disabled: 0.5;
  --opacity-hover: 0.8;
  --opacity-muted: 0.6;
  --opacity-subtle: 0.4;


  /* =========================================================================
     6. TRANSITIONS & ANIMATIONS (SAME AS ORIGINAL)
     ========================================================================= */

  --transition-fast: 150ms ease-in-out;
  --transition-normal: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
  --transition-slowest: 500ms ease-in-out;

  /* Easing functions */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);


  /* =========================================================================
     7. CONTAINER / BREAKPOINTS (SAME AS ORIGINAL)
     ========================================================================= */

  /* Container Widths */
  --container-narrow: 768px;      /* Forms, single-column content */
  --container-default: 1200px;    /* Standard page width ← MAIN CHANGE */
  --container-wide: 1400px;       /* Hero, wide layouts */
  --container-full: 1600px;       /* Maximum content (charts) */

  /* Container Padding - Responsive */
  --container-padding-mobile: var(--space-6);     /* 24px */
  --container-padding-tablet: var(--space-12);    /* 48px */
  --container-padding-desktop: var(--space-16);   /* 64px */

  /* Breakpoints */
  --breakpoint-xs: 480px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 968px;
  --breakpoint-xl: 1280px;
  --breakpoint-xxl: 1440px;


  /* =========================================================================
     8. Z-INDEX SYSTEM
     ========================================================================= */

  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;


  /* =========================================================================
     9. COLORFUL ACCENT SYSTEM - Revolut-Inspired Data Visualization
     ========================================================================= */

  /* Colorful Accents - Multi-color system for different data types */
  --accent-positive: #7A9378;         /* Green - gains, growth, success */
  --accent-negative: #D9695F;         /* Red - losses, warnings, alerts */
  --accent-info: #6BBFDE;             /* Cyan - information, markets, data */
  --accent-warning: #E8B87E;          /* Amber - alerts, attention, caution */
  --accent-primary: #C5956B;          /* Gold - hazelnuts, premium, primary */
  --accent-highlight: #F0C995;        /* Champagne - highlights, emphasis */

  /* Accent backgrounds (with opacity) */
  --accent-positive-bg: rgba(122, 147, 120, 0.15);
  --accent-negative-bg: rgba(217, 105, 95, 0.15);
  --accent-info-bg: rgba(107, 191, 222, 0.15);
  --accent-warning-bg: rgba(232, 184, 126, 0.15);
  --accent-primary-bg: rgba(197, 149, 107, 0.15);
  --accent-highlight-bg: rgba(240, 201, 149, 0.15);

  /* Accent hover states (lighter) */
  --accent-positive-hover: #8FA88B;
  --accent-negative-hover: #E07B72;
  --accent-info-hover: #7EC9E5;
  --accent-warning-hover: #F0C995;
  --accent-primary-hover: #D4A87F;
  --accent-highlight-hover: #F5D5AA;

  /* Gradient Accents */
  --gradient-sunset: linear-gradient(135deg, #E8B87E 0%, #C5956B 50%, #6B4423 100%);
  --gradient-orchard: linear-gradient(180deg, #6BBFDE 0%, #7A9378 100%);
  --gradient-warm: linear-gradient(135deg, #C5956B 0%, #E8B87E 100%);
  --gradient-positive: linear-gradient(135deg, #7A9378 0%, #8FA88B 100%);
  --gradient-negative: linear-gradient(135deg, #D9695F 0%, #E07B72 100%);

  /* Data Visualization Tokens */

  /* Progress bars */
  --progress-bg: var(--bg-elevated);
  --progress-fill-primary: var(--accent-primary);
  --progress-fill-positive: var(--accent-positive);
  --progress-fill-warning: var(--accent-warning);
  --progress-fill-negative: var(--accent-negative);
  --progress-height: 8px;
  --progress-height-lg: 12px;

  /* Chart colors */
  --chart-line-primary: var(--accent-primary);
  --chart-line-secondary: var(--accent-info);
  --chart-line-tertiary: var(--accent-warning);
  --chart-area-fill: rgba(197, 149, 107, 0.1);
  --chart-grid: rgba(197, 149, 107, 0.08);
  --chart-axis: var(--text-tertiary);

  /* Chart comparison overlays */
  --chart-overlay-gold: #D4A87F;
  --chart-overlay-btc: #F7931A;
  --chart-overlay-sp500: #6BBFDE;

  /* Indicators (arrows, badges) */
  --indicator-up: var(--accent-positive);
  --indicator-down: var(--accent-negative);
  --indicator-neutral: var(--text-secondary);
  --indicator-new: var(--accent-info);
  --indicator-featured: var(--accent-primary);
  --indicator-urgent: var(--accent-warning);

  /* Badge colors */
  --badge-success: var(--accent-positive);
  --badge-error: var(--accent-negative);
  --badge-info: var(--accent-info);
  --badge-warning: var(--accent-warning);
  --badge-primary: var(--accent-primary);

  /* Donut/Pie chart segments */
  --donut-segment-1: var(--accent-primary);      /* Gold - Position 1 */
  --donut-segment-2: var(--accent-warning);      /* Amber - Position 2 */
  --donut-segment-3: var(--accent-info);         /* Cyan - Position 3 */
  --donut-segment-4: var(--accent-positive);     /* Green - Position 4 */
  --donut-center-bg: var(--bg-primary);
  --donut-stroke-width: 40;


  /* =========================================================================
     10. DASHBOARD-SPECIFIC TOKENS
     ========================================================================= */

  /* Header - Premium Height */
  --header-height-mobile: 64px;   /* Compact on mobile */
  --header-height-desktop: 80px;  /* Premium breathing room */
  --header-height: var(--header-height-mobile); /* Default */
  --header-bg: rgba(26, 20, 14, 0.9);
  --header-border: rgba(197, 149, 107, 0.1);

  /* Ticker Bar */
  --ticker-height: 48px;
  --ticker-bg: var(--bg-primary);
  --ticker-border: var(--border-subtle);
  --ticker-speed: 60s;

  /* Cards - Responsive Brownspace System */
  --card-bg: var(--bg-surface);
  --card-border: var(--border-subtle);
  --card-padding-mobile: var(--space-6);   /* 24px - compact for mobile */
  --card-padding-tablet: var(--space-8);   /* 32px - comfortable for tablet */
  --card-padding-desktop: var(--space-10); /* 40px - luxurious for desktop */
  --card-padding: var(--card-padding-mobile); /* Default fallback */
  --card-radius: var(--radius-xl);
  --card-hover-lift: translateY(-2px);
  --card-hover-shadow: var(--shadow-warm);

  /* Dashboard Container - Visual Rhythm System */
  --dashboard-max-width: var(--container-default); /* 1200px - base rhythm */
  --dashboard-max-width-breakout: var(--container-wide); /* 1400px - breathe wider */
  --dashboard-max-width-tight: var(--container-narrow); /* 768px - focused content */
  --dashboard-padding: var(--space-6);

  /* Chart Heights */
  --chart-height-desktop: 400px;
  --chart-height-tablet: 350px;
  --chart-height-mobile: 300px;

  /* Cinematic Header */
  --cinematic-height-desktop: 60vh;
  --cinematic-height-tablet: 50vh;
  --cinematic-height-mobile: 40vh;


  /* =========================================================================
     11. COMPONENT-SPECIFIC OVERRIDES
     ========================================================================= */

  /* Buttons */
  --btn-primary-bg: var(--gold-primary);
  --btn-primary-hover: var(--gold-bright);
  --btn-primary-text: var(--text-on-gold);

  --btn-secondary-bg: transparent;
  --btn-secondary-border: var(--border-medium);
  --btn-secondary-text: var(--text-primary);
  --btn-secondary-hover-bg: var(--bg-hover);

  /* Forms */
  --input-bg: var(--bg-elevated);
  --input-border: var(--border-subtle);
  --input-text: var(--text-primary);
  --input-placeholder: var(--text-tertiary);
  --input-focus-border: var(--gold-primary);

  /* Legacy compatibility variables */
  --color-primary: var(--theme-primary);
  --color-secondary: var(--theme-secondary);
  --color-accent: var(--theme-accent);
  --color-bg-primary: var(--bg-primary);
  --color-bg-secondary: var(--bg-surface);
  --color-bg-dark: var(--theme-dark);
  --color-bg-accent: var(--bg-elevated);
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-light: var(--text-primary);
  --color-border: var(--border-subtle);
  --font-size-xs: var(--text-xs);
  --font-size-sm: var(--text-sm);
  --font-size-md: var(--text-lg);
  --font-size-lg: var(--text-xl);
  --font-size-xl: var(--text-xxl);
  --font-size-xxl: var(--text-h4);
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-bg-secondary);
    background: linear-gradient(138deg, #462912 0%, #3D240F 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

h1 {
    font-size: var(--font-size-xxl);
}

.entry-content {
    width: 100%;
}

/* Container */
.content-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

.content-container.wide {
    max-width: 1400px;
}

/* Header Styles */
.site-header {
    background: var(--bg-primary) !important;
    background-image: var(--gradient-paper-texture) !important;
    padding: var(--spacing-sm) 0;
    box-shadow: var(--shadow-sm);
}

.header-container {
	row-gap: 20px;
	flex-wrap: wrap;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Header Logo */
.header-logo {
    flex-shrink: 0;
}

.site-logo {
    height: 50px;
    width: auto;
    display: block;
}

/* Header CTA Button */
.header-cta {
    flex-shrink: 0;
}

.cta-button {
    display: inline-flex;
    padding: 12px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--color-accent);
    color: #FFF;
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
    text-decoration: none;
    transition: background-color var(--transition-normal), box-shadow var(--transition-normal);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.cta-button:hover {
    background: #8a9e69;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

/* Responsive Header */
@media (max-width: 768px) {
    .header-container {
        padding: 0 15px;
    }

    .site-logo {
        height: 40px;
    }

    .cta-button {
        padding: 10px 20px;
        font-size: 14px;
    }
}

/* Main Content */
.site-main {
    min-height: 60vh;
}

/* Page Template with White Background */
.page-template-white-bg {
    background-color: #FFFFFF !important;
    color: #000 !important;
    padding: var(--spacing-lg) 0;
}

.page-template-white-bg .container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

/* Footer Styles */
.site-footer {
    background: linear-gradient(91deg, #2d1a0e 0%, #1C1008 100%);
    color: var(--color-text-light);
    padding: var(--spacing-xl) 0 var(--spacing-md);
}

.site-footer .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

/* Footer Column */
.footer-column {
    display: flex;
    flex-direction: column;
}

/* Footer Logo */
.footer-logo img {
    width: 80%;
    height: auto;
}

/* Footer Links */
.footer-links .footer-navigation {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.footer-navigation a {
    color: var(--color-text-light);
    text-decoration: none;
    transition: opacity var(--transition-normal);
    font-size: var(--font-size-sm);
}

.footer-navigation a:hover {
    opacity: 0.8;
}

/* Footer Address */
.footer-address p {
    margin: 0 0 5px 0;
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

.footer-address p:first-child {
    margin-bottom: 10px;
}

/* Footer Copyright */
.footer-copyright {
    text-align: center;
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-copyright p {
    margin: 0;
    font-size: 14px;
    opacity: 0.8;
}

/* Responsive Footer */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
        text-align: center;
    }

    .footer-logo img {
        margin: 0 auto;
    }

    .footer-links .footer-navigation {
        align-items: center;
    }

    .footer-address {
        align-items: center;
    }
}

/* Utilities */
.radius-sm {
    border-radius: 4px;
}




/* Layouts */
section.accent-column2 {
    display: flex;
    align-items: flex-start;
    position: relative;
}

/* section.accent-column2 > div {

} */

section.accent-column2.right > div:nth-child(2) {
    background-color: var(--color-bg-accent);
    box-shadow: 0 0 34px 11px rgba(0, 0, 0, 0.05);
}

section.accent-column2.left > div:nth-child(1) {
    background-color: var(--color-bg-accent);
    box-shadow: 0 0 34px 11px rgba(0, 0, 0, 0.05);
}

section.accent-column2.formular.right > div:nth-child(2) {
    padding: 128px 65px 64px 65px;
}

section.accent-column2.formular.left > div:nth-child(1) {
    padding: 128px 65px 64px 65px;
}

section.accent-column2.right.w60p > div:nth-child(2) {
    flex: 60;
}

section.accent-column2.right.w60p > div:nth-child(1) {
    flex: 40;
}


section.accent-column2.left.w60p > div:nth-child(1) {
    flex: 60;
}

section.accent-column2.left.w60p > div:nth-child(2) {
    flex: 40;
}


section.accent-column2.w50p > div {
    flex: 50;
}

/* min-width of a form on a pc */
@media (min-width: 1025px) {
    section.accent-column2.formular.right >  div:nth-child(2) {
        min-width: 618px;
    }

    section.accent-column2.formular.left >  div:nth-child(1) {
        min-width: 618px;
    }

    section.accent-column2.right {
        padding-right: 20px;
    }

    section.accent-column2.left {
        padding-right: 20px;
    }
}


section.accent-column2 div.sticky-content {
    position: sticky;
    top: 50%;
    transform: translateY(-50%);
    align-self: flex-start;
}
  
section.accent-column2 div.sticky-content img.illustration {
    width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    section.accent-column2.formular.right > div:nth-child(2) {
        padding: 65px 30px 64px 30px;
    }
    
    section.accent-column2.formular.left > div:nth-child(1) {
        padding: 65px 30px 64px 30px;
    }

    .hide-on-mobile {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .hide-on-tablet {
        display: none !important;
    }
}


/* Centered Formular Section */
section.formular-centered {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

section.formular-centered > div {
    background-color: var(--color-bg-accent);
    box-shadow: 0 0 34px 11px rgba(0, 0, 0, 0.05);
    padding: 128px 65px 64px 65px;
    max-width: 1200px;
    width: 100%;
}


@media (max-width: 768px) {
    section.formular-centered > div {
        padding: 64px 30px 48px 30px;
    }
}

/**
 * Forminator Custom Styling for Noqstock Theme
 *
 * Overrides Forminator default styles to match the Charcoal Warm Orchard design
 * Uses design tokens from variables-charcoal.css
 *
 * Note: Uses !important to override Forminator's default styles
 *
 * @package Noqstock_Dashboard
 * @version 1.0.0
 */

/* =========================================================================
   1. FORM CONTAINER
   ========================================================================= */

.forminator-guttenberg {
  width: 100% !important;
  max-width: var(--container-narrow, 768px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.forminator-ui.forminator-custom-form {
  background: var(--bg-surface, #2E261E) !important;
  border: 1px solid var(--border-subtle, rgba(197, 149, 107, 0.15)) !important;
  border-radius: var(--radius-xl, 24px) !important;
  padding: var(--space-8, 32px) !important;
  box-shadow: var(--shadow-warm, 0 8px 24px rgba(26, 20, 14, 0.4)) !important;
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  color: var(--text-primary, #FFF8F0) !important;
}

@media (min-width: 768px) {
  .forminator-ui.forminator-custom-form {
    padding: var(--space-12, 48px) !important;
  }
}


/* =========================================================================
   2. FORM LAYOUT - Grid System
   ========================================================================= */

.forminator-row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-left: calc(var(--space-4, 16px) * -0.5) !important;
  margin-right: calc(var(--space-4, 16px) * -0.5) !important;
  margin-bottom: var(--space-6, 24px) !important;
}

.forminator-row:last-child {
  margin-bottom: 0 !important;
}

.forminator-col {
  padding-left: calc(var(--space-4, 16px) * 0.5) !important;
  padding-right: calc(var(--space-4, 16px) * 0.5) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.forminator-col-12 {
  width: 100% !important;
}

.forminator-col-6 {
  width: 100% !important;
}

@media (min-width: 640px) {
  .forminator-col-6 {
    width: 50% !important;
  }
}

/* Hidden rows (UTM parameters) */
.forminator-row.forminator-hidden {
  display: none !important;
}


/* =========================================================================
   3. FORM FIELDS - General Styling
   ========================================================================= */

.forminator-field {
  width: 100% !important;
  position: relative !important;
}


/* =========================================================================
   4. LABELS - Typography & Spacing
   ========================================================================= */

.forminator-label {
  display: block !important;
  font-size: var(--text-sm, 14px) !important;
  font-weight: var(--font-medium, 500) !important;
  color: var(--text-primary, #FFF8F0) !important;
  margin-bottom: var(--space-2, 8px) !important;
  letter-spacing: var(--tracking-normal, 0) !important;
  line-height: var(--leading-base, 1.6) !important;
}

.forminator-label .forminator-required {
  color: var(--error-red, #D9695F) !important;
  margin-left: var(--space-1, 4px) !important;
}


/* =========================================================================
   5. INPUT FIELDS - Text, Email, Phone, Number
   ========================================================================= */

.forminator-input,
.forminator-input.forminator-name--field,
.forminator-input.forminator-email--field,
.forminator-input.forminator-field--phone,
.forminator-input.forminator-number--field {
  width: 100% !important;
  padding: var(--space-3, 12px) var(--space-4, 16px) !important;
  background: var(--input-bg, #4A3F35) !important;
  border: 1px solid var(--input-border, rgba(197, 149, 107, 0.15)) !important;
  border-radius: var(--radius-md, 8px) !important;
  color: var(--input-text, #FFF8F0) !important;
  -webkit-text-fill-color: var(--input-text, #FFF8F0) !important;
  font-size: var(--text-base, 16px) !important;
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  line-height: var(--leading-base, 1.6) !important;
  transition: all var(--transition-normal, 250ms ease-in-out) !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

.forminator-input::placeholder {
  color: var(--input-placeholder, #C4B5A3) !important;
  opacity: 0.6 !important;
}

.forminator-input:hover {
  border-color: var(--border-medium, rgba(197, 149, 107, 0.25)) !important;
  background: var(--bg-elevated, #4A3F35) !important;
}

.forminator-input:focus {
  outline: none !important;
  border-color: var(--input-focus-border, #C5956B) !important;
  background: var(--bg-elevated, #4A3F35) !important;
  box-shadow: 0 0 0 3px rgba(197, 149, 107, 0.15) !important;
}

.forminator-input:disabled {
  opacity: var(--opacity-disabled, 0.5) !important;
  cursor: not-allowed !important;
  background: var(--bg-surface, #2E261E) !important;
}

/* Number input specific styling */
.forminator-input[type="number"] {
  appearance: textfield !important;
  -moz-appearance: textfield !important;
}

.forminator-input[type="number"]::-webkit-outer-spin-button,
.forminator-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}


/* =========================================================================
   6. INPUT WITH PREFIX/SUFFIX - For calculation field
   ========================================================================= */

.forminator-input-with-prefix {
  display: flex !important;
  align-items: center !important;
  color: var(--input-text, #fff8f0) !important;
  background: var(--input-bg, #4A3F35) !important;
  border: 1px solid var(--input-border, rgba(197, 149, 107, 0.15)) !important;
  border-radius: var(--radius-md, 8px) !important;
  overflow: hidden !important;
  transition: all var(--transition-normal, 250ms ease-in-out) !important;
}

.forminator-input-with-prefix:focus-within {
  border-color: var(--input-focus-border, #C5956B) !important;
  box-shadow: 0 0 0 3px rgba(197, 149, 107, 0.15) !important;
}

.forminator-prefix,
.forminator-suffix {
  color: var(--text-secondary, #E5D5C3) !important;
  font-size: var(--text-base, 16px) !important;
  font-weight: var(--font-semibold, 600) !important;
  font-family: var(--font-data, 'DM Mono', monospace) !important;
  white-space: nowrap !important;
}

.forminator-suffix {
  border-right: none !important;
  background: var(--input-bg, rgba(0,0,0,0)) !important;
}

.forminator-input-with-prefix .forminator-input,
.forminator-input-with-prefix .forminator-calculation {
  flex: 1 !important;
  border: none !important;
  background: transparent !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.forminator-input .forminator-calculation {
  color: var(--input-text, #FFF8F0) !important;
  -webkit-text-fill-color: var(--input-text, #FFF8F0) !important;
}

.forminator-input-with-prefix .forminator-input:focus,
.forminator-input-with-prefix .forminator-calculation:focus {
  box-shadow: none !important;
}


/* =========================================================================
   7. DESCRIPTION TEXT - Helper text below fields
   ========================================================================= */

.forminator-description {
  display: block !important;
  margin-top: var(--space-2, 8px) !important;
  font-size: var(--text-sm, 14px) !important;
  color: var(--text-tertiary, #C4B5A3) !important;
  line-height: var(--leading-base, 1.6) !important;
}


/* =========================================================================
   8. CHECKBOX - Custom styled checkbox
   ========================================================================= */

.forminator-checkbox {
  display: flex !important;
  align-items: flex-start !important;
  cursor: pointer !important;
  position: relative !important;
  padding-left: var(--space-8, 32px) !important;
  margin-top: var(--space-2, 8px) !important;
}

.forminator-checkbox input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

.forminator-checkbox-box {
  position: absolute !important;
  left: 0 !important;
  top: 2px !important;
  width: 20px !important;
  height: 20px !important;
  background: var(--input-bg, #4A3F35) !important;
  border: 2px solid var(--input-border, rgba(197, 149, 107, 0.15)) !important;
  border-radius: var(--radius-sm, 4px) !important;
  transition: all var(--transition-normal, 250ms ease-in-out) !important;
  flex-shrink: 0 !important;
}

.forminator-checkbox-box::after {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) scale(0) !important;
  width: 10px !important;
  height: 10px !important;
  background: var(--gold-primary, #C5956B) !important;
  border-radius: 2px !important;
  transition: transform var(--transition-normal, 250ms ease-in-out) !important;
}

.forminator-checkbox input[type="checkbox"]:checked ~ .forminator-checkbox-box {
  background: var(--bg-elevated, #4A3F35) !important;
  border-color: var(--gold-primary, #C5956B) !important;
}

.forminator-checkbox input[type="checkbox"]:checked ~ .forminator-checkbox-box::after {
  transform: translate(-50%, -50%) scale(1) !important;
}

.forminator-checkbox:hover .forminator-checkbox-box {
  border-color: var(--border-medium, rgba(197, 149, 107, 0.25)) !important;
}

.forminator-checkbox input[type="checkbox"]:focus ~ .forminator-checkbox-box {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(197, 149, 107, 0.15) !important;
}

.forminator-checkbox-label {
  color: var(--text-primary, #FFF8F0) !important;
  font-size: var(--text-sm, 14px) !important;
  line-height: var(--leading-base, 1.6) !important;
  user-select: none !important;
}


/* =========================================================================
   9. HTML FIELD - Custom content area (Haselnuss terms)
   ========================================================================= */

.forminator-field-html {
  width: 100% !important;
}

.haselnuss-terms {
  background: var(--bg-elevated, #4A3F35) !important;
  border: 1px solid var(--border-medium, rgba(197, 149, 107, 0.25)) !important;
  border-radius: var(--radius-lg, 16px) !important;
  padding: var(--space-6, 24px) !important;
  margin: var(--space-4, 16px) 0 !important;
}

.haselnuss-terms h3 {
  font-family: var(--font-headings, 'Playfair Display', serif) !important;
  font-size: var(--text-xl, 20px) !important;
  font-weight: var(--font-semibold, 600) !important;
  color: var(--gold-primary, #C5956B) !important;
  margin-top: 0 !important;
  margin-bottom: var(--space-4, 16px) !important;
  line-height: var(--leading-heading, 1.3) !important;
}

.haselnuss-terms ul {
  margin: 0 0 var(--space-4, 16px) 0 !important;
  padding-left: var(--space-6, 24px) !important;
  list-style-type: none !important;
}

.haselnuss-terms li {
  position: relative !important;
  padding-left: var(--space-4, 16px) !important;
  margin-bottom: var(--space-3, 12px) !important;
  color: var(--text-secondary, #E5D5C3) !important;
  font-size: var(--text-sm, 14px) !important;
  line-height: var(--leading-relaxed, 1.8) !important;
}

.haselnuss-terms li::before {
  content: '•' !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--gold-primary, #C5956B) !important;
  font-weight: var(--font-bold, 700) !important;
}

.haselnuss-terms p {
  margin: 0 !important;
  color: var(--text-tertiary, #C4B5A3) !important;
  font-size: var(--text-sm, 14px) !important;
  line-height: var(--leading-base, 1.6) !important;
}

.haselnuss-terms em {
  font-style: italic !important;
  color: var(--text-secondary, #E5D5C3) !important;
}


/* =========================================================================
   10. SUBMIT BUTTON - Primary CTA
   ========================================================================= */

.forminator-button,
.forminator-button-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--space-4, 16px) var(--space-8, 32px) !important;
  background: var(--btn-primary-bg, #C5956B) !important;
  color: var(--btn-primary-text, #1A140E) !important;
  font-size: var(--text-base, 16px) !important;
  font-weight: var(--font-semibold, 600) !important;
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  border: none !important;
  border-radius: var(--radius-md, 8px) !important;
  cursor: pointer !important;
  transition: all var(--transition-normal, 250ms ease-in-out) !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-gold, 0 4px 12px rgba(197, 149, 107, 0.3)) !important;
}

.forminator-button::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(
    135deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  ) !important;
  opacity: 0 !important;
  transition: opacity var(--transition-normal, 250ms ease-in-out) !important;
}

.forminator-button:hover {
  background: var(--btn-primary-hover, #D4A87F) !important;
  box-shadow: var(--shadow-gold-strong, 0 8px 24px rgba(197, 149, 107, 0.4)) !important;
  transform: translateY(-2px) !important;
}

.forminator-button:hover::before {
  opacity: 1 !important;
}

.forminator-button:active {
  transform: translateY(0) !important;
  box-shadow: var(--shadow-gold, 0 4px 12px rgba(197, 149, 107, 0.3)) !important;
}

.forminator-button:focus {
  outline: none !important;
  box-shadow:
    var(--shadow-gold, 0 4px 12px rgba(197, 149, 107, 0.3)),
    0 0 0 3px rgba(197, 149, 107, 0.3) !important;
}

.forminator-button:disabled {
  opacity: var(--opacity-disabled, 0.5) !important;
  cursor: not-allowed !important;
  transform: none !important;
}

.forminator-button-submit {
  width: 100% !important;
}

@media (min-width: 640px) {
  .forminator-button-submit {
    width: auto !important;
    min-width: 240px !important;
  }
}


/* =========================================================================
   11. ERROR & SUCCESS MESSAGES
   ========================================================================= */

.forminator-response-message {
  padding: var(--space-4, 16px) var(--space-6, 24px) !important;
  border-radius: var(--radius-md, 8px) !important;
  font-size: var(--text-sm, 14px) !important;
  line-height: var(--leading-base, 1.6) !important;
  margin-bottom: var(--space-6, 24px) !important;
  display: none !important;
}

.forminator-response-message[aria-hidden="false"] {
  display: block !important;
}

.forminator-response-message.forminator-error {
  background: var(--error-bg, rgba(217, 105, 95, 0.15)) !important;
  border: 1px solid var(--error-red, #D9695F) !important;
  color: var(--error-red, #D9695F) !important;
}

.forminator-response-message.forminator-success {
  background: var(--success-bg, rgba(122, 147, 120, 0.15)) !important;
  border: 1px solid var(--success-green, #7A9378) !important;
  color: var(--success-green, #7A9378) !important;
}

/* Field-level error messages */
.forminator-input-error {
  display: block !important;
  margin-top: var(--space-2, 8px) !important;
  color: var(--error-red, #D9695F) !important;
  font-size: var(--text-xs, 12px) !important;
  line-height: var(--leading-base, 1.6) !important;
}

/* Error state for inputs */
.forminator-has-error .forminator-input {
  border-color: var(--error-red, #D9695F) !important;
}

.forminator-has-error .forminator-input:focus {
  box-shadow: 0 0 0 3px rgba(217, 105, 95, 0.15) !important;
}


/* =========================================================================
   12. EDIT MODULE LINK - Hide in production
   ========================================================================= */

.forminator-edit-module {
  margin-top: var(--space-4, 16px) !important;
  text-align: center !important;
}

.forminator-module-edit-link {
  color: var(--text-tertiary, #C4B5A3) !important;
  font-size: var(--text-xs, 12px) !important;
  text-decoration: none !important;
  transition: color var(--transition-fast, 150ms ease-in-out) !important;
}

.forminator-module-edit-link:hover {
  color: var(--gold-primary, #C5956B) !important;
}


/* =========================================================================
   13. RESPONSIVE ADJUSTMENTS
   ========================================================================= */

@media (max-width: 639px) {
  .forminator-ui.forminator-custom-form {
    padding: var(--space-6, 24px) !important;
  }

  .forminator-row {
    margin-left: calc(var(--space-3, 12px) * -0.5) !important;
    margin-right: calc(var(--space-3, 12px) * -0.5) !important;
    margin-bottom: var(--space-5, 20px) !important;
  }

  .forminator-col {
    padding-left: calc(var(--space-3, 12px) * 0.5) !important;
    padding-right: calc(var(--space-3, 12px) * 0.5) !important;
  }

  .haselnuss-terms {
    padding: var(--space-5, 20px) !important;
  }

  .forminator-button {
    padding: var(--space-3, 12px) var(--space-6, 24px) !important;
    font-size: var(--text-sm, 14px) !important;
  }
}


/* =========================================================================
   14. ACCESSIBILITY ENHANCEMENTS
   ========================================================================= */

/* Focus visible for keyboard navigation */
.forminator-input:focus-visible,
.forminator-button:focus-visible,
.forminator-checkbox input:focus-visible ~ .forminator-checkbox-box {
  outline: 2px solid var(--gold-primary, #C5956B) !important;
  outline-offset: 2px !important;
}

/* Screen reader only text */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border-width: 0 !important;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .forminator-input,
  .forminator-button,
  .forminator-checkbox-box,
  .forminator-checkbox-box::after,
  .forminator-button::before {
    transition: none !important;
  }
}


/* =========================================================================
   15. PRINT STYLES
   ========================================================================= */

@media print {
  .forminator-edit-module,
  .forminator-button {
    display: none !important;
  }

  .forminator-ui.forminator-custom-form {
    box-shadow: none !important;
    border: 1px solid #000 !important;
  }
}