.custom-select {
  appearance: none;         
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url(../image/svg/keyboard_arrow_down.svg);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

.custom-select:focus {
  outline: none;
  box-shadow: none;
}

.common-input-uni {
        width: 100%;
        min-height: 57px;
        background: #D9D9D9;
        border-radius: 20px;
        border: none;
        outline: none;
        padding: 0 12px;
    }
    .univercity{
      margin-block: 2rem !important;
    }

    @media screen and (max-width:1224px) {
       .uni-selection-flex{
        flex-wrap: wrap;
       }
       .uni-selection{
        width: 100% !important;
        justify-content: start !important;
       }
    }
    @media screen and (max-width:990px) {
       .uni-selection-flex{
        flex-wrap: nowrap;
       }
       .uni-selection{
        width: 50% !important;
        justify-content: start !important;
       }
    }
     @media screen and (max-width:767px) {
      .poc-uni-box{
        width: 100% !important;
       }
     }
    @media screen and (max-width:610px) {
       .uni-selection-flex{
        flex-wrap: wrap;
       }
       .uni-selection{
        width: 100% !important;
        justify-content: start !important;
        flex-direction: column-reverse !important;
        gap: .8rem !important;
       }
       .uni-selection p{
        width: 100%;
        margin-bottom: 0 !important;
        text-align: start;
       }
      
    }
    p{
      margin-bottom: 0 !important;
    }

    /* new
     */

/* ========================================= */
/* --- PATHFINDER EXPERIENCE SECTION CSS --- */
/* ========================================= */

/* 1. The Container for Years & Months Block */
.uni-selection-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px !important; 
    width: 100%;
}

/* 2. The Individual Wrapper (Gray Box Area) */
.uni-selection {
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    gap: 15px !important;
    width: 50%;
    position: relative;
}

/* --- FIX FOR NESTED TAGS (P and SPAN) --- */
/* This is the key fix for the issue in your image */

/* Force the <p> tag to take full available space */
.uni-selection p {
    width: 100% !important;
    margin: 0 !important;
    display: block !important;
}

/* Force the CF7 wrapper <span> to be full width */
.uni-selection .wpcf7-form-control-wrap {
    width: 100% !important;
    display: block !important;
}

/* 3. Dropdown Input Style */
.uni-selection select.common-input {
    width: 100% !important; /* Now it has room to grow */
    height: 57px !important; 
    border-radius: 20px !important;
    background-color: #D9D9D9 !important;
    border: none !important;
    padding: 0 15px !important;
    
    /* Custom Arrow */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
    cursor: pointer;
}

/* 4. The Label Text ("Years" / "Months") */
/* We target the P tag that comes AFTER the select div if possible, 
   or just the specific text element class if you added one */
.uni-selection > p.form-label, 
.uni-selection > .text-black { 
    margin: 0 !important;
    font-size: 18px;
    font-weight: 400;
    color: #000;
    white-space: nowrap; 
   
}

/* ========================================= */
/* --- RESPONSIVE FIX --- */
/* ========================================= */
@media (max-width: 768px) {
    .uni-selection-flex {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }

    .uni-selection {
        width: 100% !important;
    }
}
/*  */

/* ========================================= */
/* --- ROBUST PHONE LAYOUT FIX (LOCKED) --- */
/* ========================================= */

/* 1. Main Container: Never wrap, keep items in a row */
.phone-input-main {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 50px !important;
    position: relative;
    background-color: #D9D9D9;
    border-radius: 20px;
    overflow: visible !important; /* Allow errors to float outside */
}

/* Support for <p> tags if CF7 adds them */
.phone-input-main p {
    display: flex !important;
    width: 100%;
    margin: 0 !important;
    gap: 0 !important;
}

/* 2. Country Code Wrapper: STRICTLY LOCKED TO 60px */
/* UPDATED: Now targets both 'country-code' AND 'poc-country-code' */
.phone-input-main .wpcf7-form-control-wrap[data-name="country-code"],
.phone-input-main .wpcf7-form-control-wrap[data-name="poc-country-code"] {
    width: 60px !important;
    min-width: 60px !important; /* Never smaller */
    max-width: 60px !important; /* Never bigger */
    flex: 0 0 60px !important; /* Do not grow, do not shrink */
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
}

/* 3. Phone Number Wrapper: Fill the rest */
/* UPDATED: Now targets both 'your-phone' AND 'poc-phone' */
.phone-input-main .wpcf7-form-control-wrap[data-name="your-phone"],
.phone-input-main .wpcf7-form-control-wrap[data-name="poc-phone"] {
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
}

/* 4. Country Code Input Style (The '91') */
.phone-input-main input.country-code-input {
    width: 100% !important;
    height: 100% !important;
    border-radius: 20px 0 0 20px !important;
    border: none !important;
    border-right: 1px solid rgba(0,0,0,0.2) !important; /* Separator line */
    background-color: #D9D9D9 !important;
    text-align: center;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* 5. Phone Number Input Style (The typing area) */
.phone-input-main input.phone-input {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 20px 20px 0 !important;
    border: none !important;
    background-color: #D9D9D9 !important;
    padding-left: 15px !important;
    margin: 0 !important;
}

/* 6. Fix Error Messages to float below (Don't break layout) */
.phone-input-main .wpcf7-not-valid-tip {
    position: absolute !important;
    top: 52px !important;
    left: 0;
    z-index: 100;
    width: 200px;
}

/* 7. Custom Country Code Alert (Red Text) */
.country-code-alert {
    display: none; /* Hidden by default */
    position: absolute;
    bottom: -22px; /* Push it below the grey box */
    left: 20px;
    color: #dc3545; /* Red color */
    font-size: 12px;
    font-weight: 500;
    z-index: 101;
}