/* Selector reutilizable de "Country code" con buscador (modelo/phone_field.php +
   assets/js/phone-field.js). El boton y el buscador reciben las clases del
   formulario donde se usan (button_class / search_class), asi heredan sus
   bordes, fondo, radio, tipografia y estado focus. Aca solo va la estructura
   y el panel, con la paleta de Willy Tours. */
.wt-cc{
    position:relative;
    min-width:0;
}
.wt-cc .wt-cc-btn{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.4rem;
    text-align:left;
    cursor:pointer;
    -webkit-appearance:none;
    appearance:none;
}
.wt-cc-btn{
    font-family:Manrope,sans-serif;
}
.wt-cc .wt-cc-btn.is-invalid{
    border-color:#b91c1c;
}
.wt-cc-btn-label{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.wt-cc-btn-label.is-placeholder{
    opacity:.6;
}
.wt-cc-btn-dial{
    font-weight:700;
}
.wt-cc-chevron{
    flex-shrink:0;
    color:rgba(52,78,65,.6);
    transition:transform .2s ease;
}
.wt-cc-btn[aria-expanded="true"] .wt-cc-chevron{
    transform:rotate(180deg);
}
/* En columnas muy angostas (ej. movil): solo "+506", sin nombre. */
@media(max-width:639px){
    .wt-cc--compact .wt-cc-btn-name{
        display:none;
    }
    .wt-cc--compact .wt-cc-btn{
        padding-left:.75rem;
        padding-right:.75rem;
    }
}
.wt-cc-error{
    margin:.4rem 0 0;
    color:#b91c1c;
    font-size:.8rem;
    font-weight:600;
}
.wt-cc-error[hidden]{
    display:none;
}

/* Panel: position:fixed, calculado por JS respecto al boton -- asi no lo
   recorta ningun contenedor con overflow:hidden (ej. la tarjeta de reserva de
   tours) ni se sale del viewport en movil. */
.wt-cc-panel{
    position:fixed;
    z-index:10000;
    box-sizing:border-box;
    background:#fff;
    border:1px solid #DAD7CD;
    border-radius:.9rem;
    box-shadow:0 18px 40px rgba(31,79,58,.22);
    padding:.6rem;
    font-family:Manrope,sans-serif;
}
.wt-cc-panel[hidden]{
    display:none;
}
.wt-cc-panel .wt-cc-search{
    display:block;
    width:100%;
    box-sizing:border-box;
    margin:0 0 .5rem;
    min-height:48px;
    /* 16px: iOS hace zoom al enfocar inputs con menos. */
    font-size:16px;
}
.wt-cc-list{
    position:relative;
    list-style:none;
    margin:0;
    padding:0;
    max-height:15rem;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}
.wt-cc-option{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    min-height:44px;
    padding:.5rem .7rem;
    border-radius:.6rem;
    cursor:pointer;
    color:#344E41;
    font-size:.95rem;
    font-weight:600;
}
.wt-cc-option[hidden]{
    display:none;
}
.wt-cc-option:hover,
.wt-cc-option.is-active{
    background:#EDE8DE;
}
.wt-cc-option[aria-selected="true"]{
    background:rgba(21,128,61,.12);
}
.wt-cc-option[aria-selected="true"].is-active{
    background:#EDE8DE;
}
.wt-cc-option-dial{
    flex-shrink:0;
    color:#15803d;
    font-weight:700;
}
.wt-cc-empty{
    margin:0;
    padding:.85rem .7rem;
    color:rgba(52,78,65,.6);
    font-size:.9rem;
}
.wt-cc-empty[hidden]{
    display:none;
}