/* Version 1.0.1 */

/* ==========================================================================
   1. CONTAINER & RESET
   ========================================================================== */
.tf-wrapper {
    padding: 30px;
    border: 1px solid #e6e6e6;
    background: #fff;
    border-radius: 4px;
    box-sizing: border-box;
    max-width: 100%;
}
.tf-wrapper * { box-sizing: border-box; }

/* ==========================================================================
   2. GRID SYSTEM
   ========================================================================== */
.tf-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px 20px -15px;
}
.tf-col-12, .tf-col-6, .tf-col-4 {
    padding: 0 15px;
    position: relative;
}
.tf-col-12 { width: 100%; }
.tf-col-6  { width: 50%; }
.tf-col-4  { width: 33.3333%; }

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
.tf-wrapper h3 { 
    margin: 0 0 10px 0; 
    font-weight: 700; 
    line-height: 1.2; 
}
.tf-wrapper h4 { 
    margin: 0 0 20px 0; 
    border-bottom: 1px solid #eee; 
    padding-bottom: 10px; 
    text-transform: uppercase; 
    font-size: 14px; 
    letter-spacing: 0.5px; 
}
.tf-group-title {
    font-size: 14px; 
    font-weight: bold; 
    border-bottom: 1px solid #eee; 
    margin: 0 0 10px 0; 
    padding-bottom: 5px; 
    text-transform: uppercase; 
}
.tf-wrapper label {
    display: block; 
    margin-bottom: 8px; 
    font-weight: 600; 
    font-size: 13px; 
    color: #333; 
}
.tf-req, .tf-req-conditional { 
    color: #d63638; 
    font-weight: bold; 
    margin-left: 3px; 
}

/* ==========================================================================
   4. TEXT INPUTS & SELECTS
   ========================================================================== */
.tf-wrapper input[type="text"], 
.tf-wrapper input[type="email"], 
.tf-wrapper input[type="tel"],
.tf-wrapper select, 
.tf-wrapper textarea {
    width: 100%; 
    height: 44px !important; 
    min-height: 44px !important;
    max-height: 44px !important;
    
    /* CRITICAL FIX: Force zero vertical padding so text isn't pushed down */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    
    /* Center text vertically using line-height matching the height */
    line-height: 42px !important; 
    
    border: 1px solid #ccc; 
    border-radius: 4px;
    font-size: 14px !important; 
    color: #333; 
    background: #fdfdfd;
    box-shadow: none;
    
    /* Reset browser default appearances */
    -webkit-appearance: none;
    appearance: none;
}

/* Specific Fix for Dropdowns (Country & Phone Code) */
.tf-wrapper select {
    /* Re-add the arrow since we removed 'appearance' */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center; /* Center the arrow vertically */
    background-size: 10px auto;
    padding-right: 30px !important; /* Make room for arrow so text doesn't overlap */
    cursor: pointer;
}

/* Textareas need different rules (auto height, normal padding) */
.tf-wrapper textarea { 
    height: auto !important; 
    min-height: 120px !important; 
    max-height: none !important;
    line-height: 1.5 !important; 
    padding: 12px !important; /* Restore padding for textarea */
}

.tf-wrapper input:focus, 
.tf-wrapper select:focus, 
.tf-wrapper textarea:focus {
    border-color: #2271b1; 
    background: #fff; 
    outline: none;
}

/* Phone Group Special Layout */
.tf-phone-group { display: flex; align-items: center; }
.tf-phone-group select {
    width: 110px !important; 
    flex-shrink: 0;
    border-top-right-radius: 0; 
    border-bottom-right-radius: 0; 
    border-right: 0;
    background-color: #f0f0f1 !important;
}
.tf-phone-group input { 
    border-top-left-radius: 0; 
    border-bottom-left-radius: 0; 
}

.tf-char-counter {
    text-align: right;
    font-size: 11px;
    color: #888;
    margin-top: 4px;
    font-weight: normal;
}
.tf-limit-reached {
    color: #d63638;
    font-weight: bold;
}

/* ==========================================================================
   5. CHECKBOXES & RADIOS
   ========================================================================== */

/* A. The "Forminator" Look (Big inputs, no default margins) */
.tf-wrapper input[type="checkbox"], 
.tf-wrapper input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    
    /* Size Controls */
    width: 22px !important; 
    height: 22px !important; 
    min-width: 22px !important; 
    min-height: 22px !important;
    
    /* Box Styling */
    border: 1px solid #888 !important; 
    background: #fff !important;
    cursor: pointer; 
    padding: 0 !important;
    
    /* Flex Centering for the checkmark icon inside */
    display: inline-flex !important; 
    justify-content: center !important; 
    align-items: center !important;
    
    /* CRITICAL: KILL MARGINS & FLOATS */
    margin: 0 12px 0 0 !important; 
    top: 0 !important; 
    position: static !important; 
    float: none !important;
}

.tf-wrapper input[type="checkbox"] { border-radius: 3px !important; }
.tf-wrapper input[type="radio"] { border-radius: 50% !important; }

/* B. Checked State & Icons */
.tf-wrapper input:checked { 
    background-color: #2271b1 !important; 
    border-color: #2271b1 !important; 
}
.tf-wrapper input[type="checkbox"]:checked::after {
    content: '✓'; 
    color: #fff; 
    font-size: 16px; 
    font-weight: 900; 
    line-height: 1; 
    display: block;
}
.tf-wrapper input[type="radio"]:checked::after {
    content: ''; 
    width: 10px; 
    height: 10px; 
    background: #fff; 
    border-radius: 50%; 
    display: block;
}

/* ==========================================================================
   6. ALIGNMENT CONTAINERS (Flexbox Enforcers)
   ========================================================================== */

/* Use !important to ensure these override any global block rules */
.tf-wrapper .tf-checkbox-item, 
.tf-wrapper .tf-checkbox-item-small,
.tf-wrapper .tf-radio-card,
.tf-wrapper .tf-inline-radio-group label {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-direction: row !important;
    margin-bottom: 5px !important;
    width: 100% !important;
}

/* Ensure text spans behave and don't break lines */
.tf-wrapper .tf-checkbox-item span, 
.tf-wrapper .tf-checkbox-item-small span, 
.tf-wrapper .tf-radio-label {
    line-height: 1.3 !important;
    display: block !important;
    margin: 0 !important;
    padding-top: 2px !important; /* Optical center alignment */
    font-weight: normal !important;
    flex: 1 !important; /* Take up remaining space */
}

/* Purpose Card Specifics */
.tf-wrapper .tf-radio-card {
    border: 1px solid #ddd; 
    padding: 15px !important; 
    border-radius: 4px;
    margin-bottom: 0 !important; 
    flex: 1;
    min-height: 70px;
}
.tf-wrapper .tf-radio-card:hover { background: #f9f9f9; border-color: #999; }
.tf-radio-group { display: flex; gap: 20px; }

/* Contact Method & Inline Groups */
.tf-wrapper .tf-inline-radio-group { 
    display: flex !important; 
    gap: 25px !important; 
    align-items: center !important; 
    min-height: 44px;
}
.tf-wrapper .tf-inline-radio-group label {
    width: auto !important; /* Don't stretch */
    margin-bottom: 0 !important;
}

/* Vertical Stacks */
.tf-stack { display: flex; flex-direction: column; gap: 8px; }

/* ==========================================================================
   7. UTILITIES & MOBILE
   ========================================================================== */
.tf-section { margin-bottom: 40px; }
.tf-submit-area { 
    margin-top: 30px; 
    border-top: 1px solid #eee; 
    padding-top: 20px; 
}
#tf-submit-btn {
    width: auto;           /* CHANGED: Was 100% */
    min-width: 250px;      /* Ensure it's not too small */
    height: 48px;
    font-size: 16px; 
    font-weight: bold; 
    border: none; 
    border-radius: 4px; 
    cursor: pointer;
    display: inline-block;
}
.tf-error-border { 
    border-color: #d63638 !important; 
    background: #fff8f8 !important; 
}

@media (max-width: 768px) {
    .tf-col-6, .tf-col-4 { width: 100%; margin-bottom: 15px; }
    .tf-radio-group { flex-direction: column; }
    .tf-radio-card { width: 100%; }
    
    /* New Mobile Rules */
    #tf-submit-btn { width: 100%; }
    .tf-submit-row { flex-direction: column; align-items: flex-start; }
}

/* Recaptcha Inline Fixes */
.grecaptcha-badge { 
    box-shadow: none !important; 
    z-index: 1 !important; 
}
#tf-recaptcha-container {
    transform-origin: left center;
    /* Optional: If the badge feels too big, you can scale it down slightly */
    /* transform: scale(0.9); */
}

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

.tf-success-msg {
    color: #00a32a;
    background-color: #f0fcf4;
    border: 1px solid #00a32a;
    padding: 20px;
    border-radius: 4px;
    font-size: 16px;
    line-height: 1.5;
    margin-top: 20px;
    text-align: center;
    font-weight: 500;
}

.tf-error-msg {
    color: #d63638;
    background-color: #fdf2f2;
    border: 1px solid #d63638;
    padding: 15px;
    border-radius: 4px;
    margin-top: 15px;
    font-size: 14px;
}

#tf-loading {
    font-style: italic;
    color: #666;
    padding: 10px 0;
}