/* ================================================================
   BlinoMASK — Frontend Styles
   Flag selector + phone mask
   ================================================================ */

/* ── Wrapper ── */
.bm-wrapper {
    position: relative;
    display: flex !important;
    align-items: stretch !important;
    width: 100%;
}

/* ── Flag button ── */
.bm-flag-btn {
    display:         flex !important;
    align-items:     center !important;
    gap:             5px !important;
    padding:         0 10px !important;
    background:      #f7f7f7 !important;
    border:          1px solid #ccc !important;
    border-right:    none !important;
    border-radius:   4px 0 0 4px !important;
    cursor:          pointer !important;
    white-space:     nowrap !important;
    min-width:       80px !important;
    font-size:       13px !important;
    line-height:     1 !important;
    height:          auto !important;
    transition:      background 0.15s, border-color 0.15s !important;
    flex-shrink:     0 !important;
    box-shadow:      none !important;
    color:           #333 !important;
    font-family:     inherit !important;
}

.bm-flag-btn:hover,
.bm-flag-btn:focus {
    background:    #ebebeb !important;
    border-color:  #0073aa !important;
    outline:       none !important;
}

.bm-flag {
    font-size: 20px;
    line-height: 1;
    display: inline-block;
}

.bm-code {
    font-size:   12px;
    font-weight: 700;
    color:       #444;
    letter-spacing: 0.3px;
}

.bm-caret {
    font-size: 8px;
    color:     #888;
    margin-left: 1px;
}

/* ── Phone input inside wrapper ── */
.bm-wrapper > input[type="tel"],
.bm-wrapper > input[type="text"],
.bm-wrapper > input[type="number"],
.bm-wrapper > input[type="phone"] {
    flex:           1 1 auto !important;
    border-radius:  0 4px 4px 0 !important;
    margin:         0 !important;
    min-width:      0 !important;
    width:          100% !important;
    box-sizing:     border-box !important;
}

/* ── Dropdown container ── */
.bm-dd {
    position:   absolute;
    top:        calc(100% + 3px);
    left:       0;
    z-index:    99999;
    background: #fff;
    border:     1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0,0,0,.14);
    width:      300px;
    max-width:  96vw;
    overflow:   hidden;
}

.bm-dd[hidden] {
    display: none !important;
}

/* ── Search ── */
.bm-srch-wrap {
    padding:           8px 8px 6px;
    border-bottom:     1px solid #eee;
    background:        #fff;
    position:          sticky;
    top:               0;
    z-index:           2;
}

.bm-srch {
    display:       block !important;
    width:         100% !important;
    padding:       8px 10px !important;
    border:        1px solid #ddd !important;
    border-radius: 4px !important;
    font-size:     13px !important;
    box-sizing:    border-box !important;
    outline:       none !important;
    color:         #333 !important;
    background:    #fafafa !important;
    margin:        0 !important;
}

.bm-srch:focus {
    border-color: #0073aa !important;
    background:   #fff !important;
    box-shadow:   0 0 0 2px rgba(0,115,170,.15) !important;
}

/* ── Country list ── */
.bm-list {
    list-style:  none !important;
    margin:      0 !important;
    padding:     4px 0 !important;
    max-height:  260px;
    overflow-y:  auto;
}

.bm-list li {
    display:     flex !important;
    align-items: center !important;
    gap:         8px !important;
    padding:     8px 12px !important;
    cursor:      pointer !important;
    font-size:   13px !important;
    color:       #333 !important;
    transition:  background 0.1s !important;
    border:      none !important;
    margin:      0 !important;
}

.bm-list li:hover,
.bm-list li:focus {
    background: #f0f6fc !important;
    outline:    none !important;
}

.bm-list li.bm-sel {
    background:  #e8f4fb !important;
    font-weight: 600 !important;
}

.bm-li-flag {
    font-size:   18px;
    line-height: 1;
    width:       24px;
    text-align:  center;
    flex-shrink: 0;
}

.bm-li-name {
    flex:          1 1 auto;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.bm-li-dial {
    font-size:    11px;
    font-weight:  700;
    color:        #555;
    background:   #eee;
    padding:      2px 7px;
    border-radius: 10px;
    flex-shrink:  0;
}

/* ── Scrollbar ── */
.bm-list::-webkit-scrollbar {
    width: 5px;
}
.bm-list::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.bm-list::-webkit-scrollbar-thumb {
    background:    #c1c1c1;
    border-radius: 3px;
}
.bm-list::-webkit-scrollbar-thumb:hover {
    background: #0073aa;
}

/* ── Validation ── */
input.bm-err,
.bm-wrapper input.bm-err {
    border-color: #dc3232 !important;
    box-shadow:   0 0 0 2px rgba(220,50,50,.15) !important;
}

.bm-err-msg {
    display:     block;
    color:       #dc3232;
    font-size:   12px;
    font-weight: 500;
    margin-top:  4px;
}

/* ── WooCommerce specific adjustments ── */
.woocommerce-checkout .bm-wrapper,
.woocommerce-page .bm-wrapper {
    margin-top: 0;
}

.woocommerce form .form-row .bm-wrapper input {
    line-height: normal;
}

/* Make sure WooCommerce's .form-row has enough height */
.form-row .bm-wrapper {
    height: auto;
}