.actool-wrapper { 
    width: 100%; 
    max-width: none !important; 
    margin: 0 auto; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
    text-align: center;
}

/* Reduced gap between form boxes (was 1.25rem) */
.actool-input-group { 
    margin-bottom: 0.75rem; 
}

/* Base styling for ALL fields (Inputs, Select, Textarea) */
.actool-modern-form input[type="text"], 
.actool-modern-form input[type="email"], 
.actool-modern-form input[type="tel"],
.actool-modern-form select,
.actool-modern-form textarea { 
    width: 100%; 
    padding: 0.65rem 1rem !important; 
    border: 1px solid #d1d5db; 
    border-radius: 6px; 
    font-size: 0.95rem !important; /* <--- This will finally reduce the normal text size! */
    box-sizing: border-box; 
    font-family: inherit;
    display: block;
}

/* Specific fix just for the Select dropdown to prevent text cropping */
.actool-modern-form select {
    height: auto !important; 
    line-height: 1.5 !important; 
}

.actool-modern-form input:focus,
.actool-modern-form select:focus,
.actool-modern-form textarea:focus { 
    outline: none; 
    border-color: #25D366; 
    box-shadow: 0 0 0 3px rgba(37,211,102,0.1); 
}

.iti { 
    width: 100%; 
    display: block; 
    text-align: left;
    min-height: 45px;
} 

.actool-modern-form .iti input[type="tel"] {
    padding-left: 3rem !important; 
}

/* Force the Country Dropdown to float above Kadence Modals */
.iti--container { 
    z-index: 999999 !important; 
}

/* Container for Cloudflare Turnstile */
.cf-turnstile-container { 
    width: 100%;
    overflow: hidden; /* Matches your Tailwind overflow-hidden */
    margin-bottom: 0.35rem; 
    height: 65px; /* Changed from min-height to a strict height */
    display: block; 
}

/* Ensure the transform scales from the top left corner */
.cf-turnstile {
    transform-origin: top left; /* Matches your Tailwind origin-top-left */
}

/* Buttons with Dynamic Theme Colors */
.actool-btn { 
    width: 100%; 
    padding: 0.65rem; 
    border: none; 
    border-radius: 6px; 
    font-size: 1rem; 
    font-weight: 600; 
    cursor: pointer; 
    color: #fff; 
    transition: background 0.2s; 
    margin-top: 0.3rem;
}
.actool-btn:disabled { 
    opacity: 0.6; 
    cursor: not-allowed; 
}

.actool-btn-primary { 
    background: var(--wp--preset--color--primary, var(--global-palette1, #111827)); 
    color: var(--wp--preset--color--base, #ffffff);
}
.actool-btn-primary:hover:not(:disabled) { 
    background: var(--wp--preset--color--secondary, var(--global-palette2, #374151)); 
}

.actool-msg { 
    margin-top: 1rem; 
    font-size: 0.875rem; 
}
.actool-error { 
    color: #dc2626; 
    font-weight: 500; 
}
.actool-success-final { 
    color: #166534; 
    padding: 2rem 0; 
}

.actool-modern-form ::placeholder {
    font-size: 0.9rem; /* Slightly smaller text */
    color: #6b7280; /* A nice, readable gray */
    opacity: 1; /* Ensures the gray isn't washed out across different browsers */
}

/* 1. Make the dropdown text look exactly like our new placeholders */
.actool-modern-form select {
    color: #6b7280; /* The same placeholder gray */
    font-size: 0.9rem; /* Match the smaller placeholder text size */
}

/* 2. Make sure the actual products in the list stay dark and readable */
.actool-modern-form select option {
    color: #1f2937; /* Dark text for the menu items */
    font-size: 0.95rem; /* Standard readable size */
}

/* 3. Magic Trick: If your select field is "required", this makes the text turn dark ONLY after they actually pick a product! */
.actool-modern-form select:valid {
    color: #1f2937;
}