/* Self-hosted Fonts */
@font-face {
    font-family: 'Parkinsans';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/parkinsans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Parkinsans';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/parkinsans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 900;
    font-display: block;
    src: url('../fonts/material-symbols-outlined.woff2') format('woff2');
}

/* Custom styles that cannot be expressed via theme.json */

/* Material Symbols Icon Font Settings */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'liga';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Floating Badge Animation */
@media (prefers-reduced-motion: no-preference) {
    .floating-badge {
        animation: floatBadge 4s ease-in-out infinite alternate;
    }
    @keyframes floatBadge {
        0% { transform: translateY(0px); }
        100% { transform: translateY(-8px); }
    }
}

/* Custom Transition Timing */
.wpeezy-transition {
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Box Shadow Tokens */
.shadow-action-float {
    box-shadow: 0 10px 15px -3px rgba(247, 131, 55, 0.35);
}
.shadow-subtle-lift {
    box-shadow: 0 4px 20px 0 rgba(52, 51, 48, 0.06);
}

/* Utility Classes */
.text-primary { color: #F78337; }
.text-secondary { color: #1F5FBE; }
.bg-primary { background-color: #F78337; }
.bg-secondary { background-color: #1F5FBE; }
.bg-neutral-bg { background-color: #F1F9E9; }
.text-neutral-text { color: #343330; }

/* Landing Page Specific Styles */
.wpeezy-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50;
    background-color: rgba(241, 249, 233, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(52, 51, 48, 0.05);
}

.wpeezy-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.wpeezy-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.wpeezy-logo-circle {
    height: 40px;
    width: 40px;
    border-radius: 9999px;
    background-color: #1F5FBE;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'Parkinsans', system-ui, sans-serif;
    font-weight: 900;
    font-size: 20px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

.wpeezy-logo-text {
    font-family: 'Parkinsans', system-ui, sans-serif;
    font-weight: 900;
    color: #343330;
    font-size: 24px;
    letter-spacing: -0.025em;
}
.wpeezy-logo-text .accent { color: #F78337; }

/* Nav Links */
.wpeezy-nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
}
.wpeezy-nav-links a {
    color: #343330;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s;
}
.wpeezy-nav-links a:hover { color: #F78337; }

/* Nav Actions */
.wpeezy-nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Buttons */
.wpeezy-btn-primary {
    display: inline-block;
    padding: 12px 28px;
    background-color: #F78337;
    color: #343330;
    border-radius: 9999px;
    font-weight: 700;
    box-shadow: 0 10px 15px -3px rgba(247, 131, 55, 0.35);
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: 'Parkinsans', system-ui, sans-serif;
    font-size: 16px;
}
.wpeezy-btn-primary:hover { transform: scale(1.05); }

.wpeezy-btn-secondary {
    display: inline-block;
    padding: 12px 28px;
    background-color: #1F5FBE;
    color: #fff;
    border-radius: 9999px;
    font-weight: 700;
    transition: all 0.2s;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: 'Parkinsans', system-ui, sans-serif;
    font-size: 16px;
}
.wpeezy-btn-secondary:hover { opacity: 0.9; }

.wpeezy-btn-ghost {
    padding: 10px 24px;
    border-radius: 9999px;
    font-weight: 700;
    color: #343330;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    font-family: 'Parkinsans', system-ui, sans-serif;
}
.wpeezy-btn-ghost:hover { background: rgba(52, 51, 48, 0.05); }

/* Cards */
.wpeezy-card {
    background-color: #F1F9E9;
    padding: 32px;
    border-radius: 24px;
    border: 1px solid rgba(52, 51, 48, 0.05);
}
.wpeezy-card-white {
    background-color: #fff;
    padding: 32px;
    border-radius: 24px;
    border: 1px solid rgba(52, 51, 48, 0.1);
}

/* Icon Boxes */
.wpeezy-icon-box {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}
.wpeezy-icon-box--primary {
    background-color: rgba(247, 131, 55, 0.2);
    color: #F78337;
}
.wpeezy-icon-box--secondary {
    background-color: rgba(31, 95, 190, 0.2);
    color: #1F5FBE;
}

/* Section Containers */
.wpeezy-section {
    padding: 80px 0;
}
.wpeezy-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Domain Search */
.wpeezy-domain-search {
    background: #fff;
    border-radius: 9999px;
    padding: 6px 6px 6px 24px;
    display: flex;
    align-items: center;
    border: 2px solid rgba(52, 51, 48, 0.1);
    box-shadow: 0 4px 20px 0 rgba(52, 51, 48, 0.06);
    transition: all 0.2s;
}
.wpeezy-domain-search:focus-within {
    border-color: rgba(31, 95, 190, 0.4);
    box-shadow: 0 0 0 3px rgba(31, 95, 190, 0.15);
}
.wpeezy-domain-search input {
    flex-grow: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #343330;
    font-family: 'Parkinsans', system-ui, sans-serif;
    padding: 12px 8px;
    font-size: 18px;
}
.wpeezy-domain-search input::placeholder {
    color: rgba(52, 51, 48, 0.4);
}
.wpeezy-domain-prefix,
.wpeezy-domain-suffix {
    color: rgba(52, 51, 48, 0.6);
    font-weight: 700;
    user-select: none;
}

/* Pricing Toggle */
.wpeezy-billing-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #F1F9E9;
    padding: 6px;
    border-radius: 9999px;
    border: 1px solid rgba(52, 51, 48, 0.1);
}
.wpeezy-billing-btn {
    padding: 8px 24px;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Parkinsans', system-ui, sans-serif;
    background: transparent;
    color: rgba(52, 51, 48, 0.7);
}
.wpeezy-billing-btn.active {
    background: #fff;
    color: #343330;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Pricing Cards */
.wpeezy-pricing-card {
    padding: 32px;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.wpeezy-pricing-featured {
    border: 2px solid #F78337;
    box-shadow: 0 10px 15px -3px rgba(247, 131, 55, 0.35);
    position: relative;
}
.wpeezy-pricing-badge {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    background: #F78337;
    color: #343330;
    padding: 4px 16px;
    border-radius: 9999px;
    font-weight: 900;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Price Display */
.wpeezy-price {
    font-family: 'Parkinsans', system-ui, sans-serif;
    font-weight: 900;
    font-size: 48px;
    color: #343330;
}
.wpeezy-price-period {
    color: rgba(52, 51, 48, 0.7);
    font-weight: 700;
}

/* Feature Check List */
.wpeezy-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.wpeezy-check-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    font-size: 14px;
}

/* Template Buttons */
.wpeezy-template-btn {
    padding: 16px;
    border-radius: 16px;
    border: 2px solid rgba(52, 51, 48, 0.1);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Parkinsans', system-ui, sans-serif;
}
.wpeezy-template-btn:hover {
    border-color: rgba(31, 95, 190, 0.4);
}
.wpeezy-template-btn.active {
    border-color: #F78337;
    background: rgba(247, 131, 55, 0.1);
}

/* Simulator Preview */
.wpeezy-preview-frame {
    position: relative;
    background: #F1F9E9;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(52, 51, 48, 0.1);
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

/* Blog Article Cards */
.wpeezy-article-card {
    background: #fff;
    border-radius: 24px;
    padding: 24px;
    border: 1px solid rgba(52, 51, 48, 0.1);
    box-shadow: 0 4px 20px 0 rgba(52, 51, 48, 0.06);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.wpeezy-article-card:hover {
    transform: translateY(-4px);
}

/* CTA Banner */
.wpeezy-cta-banner {
    position: relative;
    background: #1F5FBE;
    border-radius: 32px;
    padding: 56px;
    overflow: hidden;
    color: #fff;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}

/* Mobile Drawer */
.wpeezy-drawer-backdrop,
#mobile-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(52, 51, 48, 0.4);
    backdrop-filter: blur(4px);
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
.wpeezy-drawer-backdrop.open,
#mobile-drawer-backdrop.open {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.wpeezy-drawer,
#mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    height: 100%;
    background: #fff;
    z-index: 50;
    box-shadow: -10px 0 40px rgba(0,0,0,0.15);
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
}
.wpeezy-drawer.open,
#mobile-drawer.open {
    transform: translateX(0) !important;
}

/* Responsive Grid */
.wpeezy-grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}
@media (min-width: 768px) {
    .wpeezy-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Hero Grid */
.wpeezy-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 80px;
    align-items: center;
}
@media (min-width: 1024px) {
    .wpeezy-hero-grid {
        grid-template-columns: 7fr 5fr;
    }
}

/* Responsive Visibility */
.wpeezy-hide-mobile { display: none; }
.wpeezy-show-mobile { display: block; }
@media (min-width: 768px) {
    .wpeezy-hide-mobile { display: flex; }
    .wpeezy-show-mobile { display: none; }
}

/* Scroll Smooth */
html { scroll-behavior: smooth; }

/* Antialiasing */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Save Badge in Pricing */
.wpeezy-save-badge {
    padding: 2px 8px;
    border-radius: 9999px;
    background: #F78337;
    color: #343330;
    font-size: 11px;
    font-weight: 900;
}

/* Simulation Progress Overlay */
.wpeezy-sim-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
}

/* Spinner */
.wpeezy-spinner {
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    border: 4px solid #F78337;
    border-top-color: transparent;
    animation: wpeezy-spin 1s linear infinite;
    margin-bottom: 16px;
}
@keyframes wpeezy-spin {
    to { transform: rotate(360deg); }
}

/* Progress Bar */
.wpeezy-progress-track {
    width: 192px;
    height: 8px;
    background: #F1F9E9;
    border-radius: 9999px;
    margin-top: 12px;
    overflow: hidden;
}
.wpeezy-progress-bar {
    height: 100%;
    background: #F78337;
    transition: width 0.5s;
    width: 0%;
}

/* Animated Fade In */
.wpeezy-fade-in {
    animation: wpeezyFadeIn 0.3s ease-out;
}
@keyframes wpeezyFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* CTA Blobs */
.wpeezy-blob {
    position: absolute;
    border-radius: 9999px;
    filter: blur(60px);
    pointer-events: none;
}