/* The country prefix picker (resources/views/components/phone-picker.blade.php).

   The select is the real control: transparent, laid over the face that
   shows the chosen flag and calling code ("🇸🇰 +421"), so a tap opens the
   platform's own country list and the screen reader reads the select.
   Both sit at least 44 px tall, in the kit (.ntk) and on the older front
   forms alike. */
.nt-pp-row { display: flex; gap: 8px; align-items: stretch; }
.nt-pp-cc { position: relative; flex: 0 0 auto; display: block; min-width: 104px; }
.nt-pp-face {
    display: flex !important;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    height: 100%;
    padding-right: 30px !important;
    white-space: nowrap;
    background-image: linear-gradient(45deg, transparent 50%, #8A7F6E 50%), linear-gradient(135deg, #8A7F6E 50%, transparent 50%) !important;
    background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50% !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
}
.nt-pp-flag { font-size: 18px; line-height: 1; }
.nt-pp-dial { font-variant-numeric: tabular-nums; }
.nt-pp-sel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 44px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 16px; /* no zoom on iOS focus */
}
.nt-pp-sel:focus + .nt-pp-face { border-color: #E6B31E; box-shadow: 0 0 0 3px rgba(230,179,30,.18); }
.nt-pp-num { flex: 1 1 auto; min-width: 0; min-height: 44px; }
.nt-pp-row .form-control.nt-pp-num, .nt-pp-row .form-control.nt-pp-face { height: auto; }
.nt-pp-err { color: #b42318; font-size: 13px; line-height: 1.4; margin: 4px 0 0; }
.nt-pp-hint { margin-bottom: 0; }
/* customer.css paints .nt-modal .help-block (and .nt-field .help-block) in
   the error red; the format hint is help, not an error, in the sign-up and
   guest-checkout modals too. */
.nt-pp .help-block.nt-pp-hint { color: #6B6355; }
/* Inside a horizontal form (the admin user forms) the picker's own
   form-group sits in a column: no second negative gutter. */
.form-horizontal .nt-pp.form-group { margin-left: 0; margin-right: 0; margin-bottom: 0; }