/**
 * Get Started Today (Dark Background) Block Styles
 * Based on Figma Design
 */

/* Main Block Container */
.get-started-dark-block {
    width: 100%;
    background-color: #28323C; /* Base UI-Four from Figma */
    padding: 120px 0;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Full Width Alignment */
.get-started-dark-block.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.get-started-dark-container {
    max-width: 1728px;
    margin: 0 auto;
    padding: 0 150px;
}

.get-started-dark-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Form Section */
.get-started-dark-form-wrapper {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}

/* Header Section */
.get-started-dark-header {
    max-width: 100%; /* Full width within left column */
    display: flex;
    flex-direction: column;
    gap: 24px; /* Gap from Figma */
}

.get-started-dark-heading {
    font-family: 'Outfit', sans-serif;
    font-size: 32px; /* 32px from figma */
    font-weight: 600; /* SemiBold from image */
    line-height: 40px;
    color: #B4E850; /* color from figma */
    margin: 0;
    padding: 0;
}

.get-started-dark-description {
    font-family: 'Outfit', sans-serif;
    font-size: 16px; /* 16px from figma */
    font-weight: 300; /* 300 from figma */
    line-height: 24px;
    color: #FFFFFF; /* white from figma */
    margin: 0;
    padding: 0;
    width: 425px;
}

/* Divider */
.get-started-dark-divider {
    width: 100%;
    height: 1px;
    background-color: #68747C; /* Base UI-Three from Figma */
}

/* Form Section */
.get-started-dark-form {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.get-started-dark-form-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns on desktop */
    gap: 24px;
}

.get-started-dark-form-column {
    display: contents; /* Make children direct grid items */
}

/* Form Fields */
.get-started-dark-form-field {
    position: relative;
    width: 100%;
}

.get-started-dark-form-field input,
.get-started-dark-form-field select {
    width: 100%;
   
    padding: 16px; /* 16px from image */
    background-color: #FFFFFF; /* White from image */
    border: 1px solid rgba(172, 180, 188, 0.3); /* Very subtle light gray border from image */
    border-radius: 8px; /* 8px from image */
    font-family: 'Outfit', sans-serif;
    font-size: 18px; /* 18px from image */
    font-weight: 300;
    line-height: 1.4444em;
    color: #28323C; /* Dark gray text from image */
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.get-started-dark-form-field textarea {
    width: 100%;
    border-radius: 10px;
    padding: 16px;
    background-color: #FFFFFF;
    border: 1px solid rgba(172, 180, 188, 0.3);
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.4444em;
    color: #28323C;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
    min-height: 100px;
    resize: vertical;
}

.get-started-dark-form-field input:focus,
.get-started-dark-form-field select:focus,
.get-started-dark-form-field textarea:focus {
    outline: none;
    border-color: #9FE870; /* Green focus state from image */
}

.get-started-dark-form-field input::placeholder {
    color: #A0A0A0; /* Placeholder color from image */
    opacity: 1;
}

/* File Upload Helper Text */
.get-started-dark-form-field small {
    display: block;
    color: #FFFFFF;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5em;
    margin-top: 8px;
}

/* Select Field Styling */
.get-started-dark-form-field select {
    appearance: none;
    cursor: pointer;
    padding-right: 48px; /* Space for custom arrow */
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='8' viewBox='0 0 15 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.29167 7.45833L0.25 1.41667C0.166667 1.33333 0.104167 1.24306 0.0625 1.14583C0.0208333 1.04861 0 0.944445 0 0.833333C0 0.611111 0.0763889 0.416667 0.229167 0.25C0.381944 0.0833333 0.583333 0 0.833333 0H13.5C13.75 0 13.9514 0.0833333 14.1042 0.25C14.2569 0.416667 14.3333 0.611111 14.3333 0.833333C14.3333 0.888889 14.25 1.08333 14.0833 1.41667L8.04167 7.45833C7.90278 7.59722 7.76389 7.69445 7.625 7.75C7.48611 7.80556 7.33333 7.83333 7.16667 7.83333C7 7.83333 6.84722 7.80556 6.70833 7.75C6.56944 7.69445 6.43056 7.59722 6.29167 7.45833Z' fill='%23141A1E'/%3E%3C/svg%3E");
    background-position: right 20px center;
    background-repeat: no-repeat;
    background-size: 15px 8px;
    color: #68747C;
}

.get-started-dark-form-field select option {
    font-weight: 300;
    color: #28323C;
}

/* Custom Dropdown Arrow */
.get-started-dark-form-icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    width: 40px;
    height: 40px;
}

/* Consent Checkbox */
.get-started-dark-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px; /* Gap from Figma */
    max-width: 664px; /* Width from Figma */
}

.get-started-dark-consent input[type="checkbox"] {
    width: 24px; /* Size from Figma */
    height: 24px;
    min-width: 24px;
    flex-shrink: 0;
    cursor: pointer;
    margin-top: 2px;
    background: transparent;
    border: 1px solid #FFFFFF;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.get-started-dark-consent input[type="checkbox"]:checked {
    background: transparent;
    border: 1px solid #FFFFFF;
    position: relative;
}

.get-started-dark-consent input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #FFFFFF;
}

.get-started-dark-consent label {
    font-family: 'Outfit', sans-serif;
    font-size: 12px; /* Body Light 12 from Figma */
    font-weight: 300; /* Light from Figma */
    line-height: 1.3333em; /* 1.3333em from Figma */
    color: #DADEE0; /* Base UI-Two from Figma */
    cursor: pointer;
}

.get-started-dark-consent label p {
    margin: 0;
}

/* Contact Form 7 Checkbox Alignment */
.get-started-dark-form-wrapper .wpcf7-list-item,
.get-started-dark-block .wpcf7-list-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.get-started-dark-form-wrapper .wpcf7-list-item label,
.get-started-dark-block .wpcf7-list-item label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.3333em;
    color: #DADEE0;
    cursor: pointer;
    margin: 0;
}

.get-started-dark-form-wrapper .wpcf7-list-item label input[type="checkbox"],
.get-started-dark-block .wpcf7-list-item label input[type="checkbox"] {
    width: 24px;
    height: 24px;
    min-width: 24px;
    flex-shrink: 0;
    cursor: pointer;
    margin: 0;
    margin-top: 0;
    align-self: flex-start;
    background: transparent;
    border: 1px solid #FFFFFF;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.get-started-dark-form-wrapper .wpcf7-list-item label input[type="checkbox"]:checked,
.get-started-dark-block .wpcf7-list-item label input[type="checkbox"]:checked {
    background: transparent;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_994_1481' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_994_1481)'%3E%3Cpath d='M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H17.475C17.7583 3 17.9958 3.09583 18.1875 3.2875C18.3792 3.47917 18.475 3.71667 18.475 4C18.475 4.28333 18.3792 4.52083 18.1875 4.7125C17.9958 4.90417 17.7583 5 17.475 5H5V19H19V12.5C19 12.2167 19.0958 11.9792 19.2875 11.7875C19.4792 11.5958 19.7167 11.5 20 11.5C20.2833 11.5 20.5208 11.5958 20.7125 11.7875C20.9042 11.9792 21 12.2167 21 12.5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM11.525 14.2L20.025 5.7C20.2083 5.51667 20.4333 5.425 20.7 5.425C20.9667 5.425 21.2 5.51667 21.4 5.7C21.6 5.88333 21.7 6.11667 21.7 6.4C21.7 6.68333 21.6 6.925 21.4 7.125L12.225 16.3C12.025 16.5 11.7917 16.6 11.525 16.6C11.2583 16.6 11.025 16.5 10.825 16.3L6.575 12.05C6.39167 11.8667 6.3 11.6333 6.3 11.35C6.3 11.0667 6.39167 10.8333 6.575 10.65C6.75833 10.4667 6.99167 10.375 7.275 10.375C7.55833 10.375 7.79167 10.4667 7.975 10.65L11.525 14.2Z' fill='%23DADEE0'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    height: 24px;
    width: 24px;
}

.get-started-dark-form-wrapper .wpcf7-list-item-label,
.get-started-dark-block .wpcf7-list-item-label {
    display: inline;
    flex: 1;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 300;
    line-height: 16px;
    color: #DADEE0;
    margin: 0;
    padding: 0;
}

/* Submit Button */
.get-started-dark-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 282px;
    height: 64px;
    border-radius: 100px;
    padding-top: 19px;
    padding-right: 32px;
    padding-bottom: 19px;
    padding-left: 48px;
    gap: 4px;
    opacity: 1;
    background-color: #B4E850;
    border: none;
    font-family: 'Outfit', sans-serif;
    font-size: 18px; /* 18px from image */
    font-weight: 600; /* SemiBold from image */
    line-height: 1.4444em;
    color: #28323C;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: none;
}

.get-started-dark-submit::after {
    content: '';
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_2666_181' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_2666_181)'%3E%3Cpath d='M16.175 13.0001H5C4.71667 13.0001 4.47917 12.9043 4.2875 12.7126C4.09583 12.5209 4 12.2834 4 12.0001C4 11.7168 4.09583 11.4793 4.2875 11.2876C4.47917 11.0959 4.71667 11.0001 5 11.0001H16.175L11.275 6.10011C11.075 5.90011 10.9792 5.66678 10.9875 5.40011C10.9958 5.13344 11.1 4.90011 11.3 4.70011C11.5 4.51678 11.7333 4.42094 12 4.41261C12.2667 4.40428 12.5 4.50011 12.7 4.70011L19.3 11.3001C19.4 11.4001 19.4708 11.5084 19.5125 11.6251C19.5542 11.7418 19.575 11.8668 19.575 12.0001C19.575 12.1334 19.5542 12.2584 19.5125 12.3751C19.4708 12.4918 19.4 12.6001 19.3 12.7001L12.7 19.3001C12.5167 19.4834 12.2875 19.5751 12.0125 19.5751C11.7375 19.5751 11.5 19.4834 11.3 19.3001C11.1 19.1001 11 18.8626 11 18.5876C11 18.3126 11.1 18.0751 11.3 17.8751L16.175 13.0001Z' fill='%2328323C'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    filter: none;
    display: inline-block;
}

.get-started-dark-submit:hover {
    background-color: #8DD760; /* Slightly darker green on hover */
    transform: translateY(-1px);
    box-shadow: 0px 4px 8px 0px rgba(40, 50, 60, 0.16);
}

.get-started-dark-submit:active {
    transform: translateY(0);
}

/* Hide SVG elements inside submit button (using ::after for arrow instead) */
.get-started-dark-submit svg {
    display: none;
}

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

/* Hide Contact Form 7 Honeypot Field (Anti-Spam) */
/* Hide on frontend and in editor */
.get-started-dark-form-wrapper label:has(textarea[name="_wpcf7_ak_hp_textarea"]),
.get-started-dark-form-wrapper textarea[name="_wpcf7_ak_hp_textarea"],
label:has(textarea[name="_wpcf7_ak_hp_textarea"]),
textarea[name="_wpcf7_ak_hp_textarea"],
.wpcf7-form label:has(textarea[name="_wpcf7_ak_hp_textarea"]),
.wpcf7-form textarea[name="_wpcf7_ak_hp_textarea"],
/* Hide any label containing honeypot textarea */
label:has(textarea[name*="_wpcf7_ak_hp"]),
textarea[name*="_wpcf7_ak_hp"],
/* Hide honeypot fields in block editor */
.block-editor-block-list__layout label:has(textarea[name*="_wpcf7_ak_hp"]),
.block-editor-block-list__layout textarea[name*="_wpcf7_ak_hp"],
.editor-styles-wrapper label:has(textarea[name*="_wpcf7_ak_hp"]),
.editor-styles-wrapper textarea[name*="_wpcf7_ak_hp"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    line-height: 0 !important;
    font-size: 0 !important;
}

/* Alternative selector for older browsers - target by name attribute */
label[for*="_wpcf7_ak_hp"],
textarea[name*="_wpcf7_ak_hp"],
input[name*="_wpcf7_ak_hp"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Contact Form 7 Response Output Styling */
.get-started-dark-form-wrapper .wpcf7-response-output,
.get-started-dark-block .wpcf7-response-output {
    color: #FFFFFF !important;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    margin: 16px 0 0 0;
    padding: 12px 16px;
    border-radius: 8px;
}

/* Success message styling */
.get-started-dark-form-wrapper .wpcf7-mail-sent-ok,
.get-started-dark-block .wpcf7-mail-sent-ok {
    color: #FFFFFF !important;
    background-color: rgba(159, 232, 112, 0.1);
    border: 1px solid #9FE870;
}

/* Error message styling */
.get-started-dark-form-wrapper .wpcf7-validation-errors,
.get-started-dark-form-wrapper .wpcf7-mail-sent-ng,
.get-started-dark-block .wpcf7-validation-errors,
.get-started-dark-block .wpcf7-mail-sent-ng {
    color: #FFFFFF !important;
    background-color: rgba(255, 107, 107, 0.1);
    border: 1px solid #FF6B6B;
}

/* Spam message styling */
.get-started-dark-form-wrapper .wpcf7-spam,
.get-started-dark-block .wpcf7-spam {
    color: #FFFFFF !important;
    background-color: rgba(255, 165, 0, 0.1);
    border: 1px solid #FFA500;
}

.wpcf7-list-item {
    margin: 0 !important;
}

/* ===================================
   RESPONSIVE STYLES
   =================================== */

/* 1280px and below */
@media (max-width: 1280px) {
    .get-started-dark-container {
        padding: 0 40px;
    }
}

/* Tablet (1024px and below) */
@media (max-width: 1024px) {
    .get-started-dark-block {
        padding: 80px 0;
    }
    
    .get-started-dark-container {
        padding: 0 40px;
    }
    
    .get-started-dark-form-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet */
    }
    
    .get-started-dark-consent {
        max-width: 100%;
    }
}

/* Mobile (768px and below) */
@media (max-width: 768px) {
    .get-started-dark-block {
        padding: 60px 0;
    }
    
    .get-started-dark-container {
        padding: 0 24px;
    }
    
    .get-started-dark-content {
        gap: 24px;
    }
    
    .get-started-dark-header {
        max-width: 100%;
        gap: 16px;
    }
    
    .get-started-dark-heading {
        font-family: 'Outfit', sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 32px;
        line-height: 40px;
        letter-spacing: 0;
    }
    
    .get-started-dark-description {
        font-family: 'Outfit', sans-serif;
        font-weight: 300;
        font-style: normal;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0;
    }
    
    .get-started-dark-form {
        gap: 24px;
    }
    
    .get-started-dark-form-grid {
        grid-template-columns: 1fr 1fr; /* Two columns to allow side-by-side fields */
        gap: 16px;
    }
    
    /* Make all fields full width by default (span both columns) */
    .get-started-dark-form-grid > *,
    .get-started-dark-form-grid .get-started-dark-form-field {
        grid-column: 1 / -1;
    }
    
    .get-started-dark-form-field input,
    .get-started-dark-form-field select {
        height: 48px;
        padding: 12px;
        font-size: 16px;
    }
    
    .get-started-dark-form-wrapper .wpcf7-list-item-label,
    .get-started-dark-block .wpcf7-list-item-label {
        font-family: 'Outfit', sans-serif;
        font-weight: 300;
        font-style: normal;
        font-size: 12px;
        line-height: 16px;
        letter-spacing: 0;
    }
    
    .get-started-dark-submit {
        width: 243px;
        height: 56px;
        opacity: 1;
        gap: 8px;
        border-radius: 100px;
        padding-top: 19px;
        padding-right: 32px;
        padding-bottom: 19px;
        padding-left: 48px;
        font-size: 16px;
        margin: auto;
    }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
    .get-started-dark-block {
        padding: 60px 0;
    }
    
    .get-started-dark-submit {
        width: 243px;
        height: 56px;
        opacity: 1;
        gap: 8px;
        border-radius: 100px;
        padding-top: 19px;
        padding-right: 32px;
        padding-bottom: 19px;
        padding-left: 48px;
        font-size: 16px;
        margin: auto;
    }
    .get-started-dark-container {
        padding: 0 20px;
    }
    
    .get-started-dark-content {
        gap: 20px;
    }
    
    .get-started-dark-header {
        gap: 12px;
    }
    
    .get-started-dark-heading {
        font-family: 'Outfit', sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 32px;
        line-height: 40px;
        letter-spacing: 0;
    }
    
    .get-started-dark-description {
        font-family: 'Outfit', sans-serif;
        font-weight: 300;
        font-style: normal;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0;
        width: 100%;
    }
    
    .get-started-dark-form {
        gap: 20px;
    }
    
    .get-started-dark-form-wrapper .wpcf7-list-item-label,
    .get-started-dark-block .wpcf7-list-item-label {
        font-family: 'Outfit', sans-serif;
        font-weight: 300;
        font-style: normal;
        font-size: 12px;
        line-height: 16px;
        letter-spacing: 0;
    }
    
    .get-started-dark-form-grid {
        grid-template-columns: 1fr 1fr; /* Two columns to allow side-by-side fields */
        gap: 12px;
    }
    
    /* Make all fields full width by default (span both columns) */
    .get-started-dark-form-grid > *,
    .get-started-dark-form-grid .get-started-dark-form-field {
        grid-column: 1 / -1;
    }
    
    .get-started-dark-form-column {
        gap: 12px;
    }
    
    .get-started-dark-form-field input,
    .get-started-dark-form-field select {
        font-size: 14px;
    }
    
    .get-started-dark-consent {
        gap: 6px;
    }
    
    .get-started-dark-consent label {
        font-size: 11px;
    }
}