/* phone-field.css — styles for the reusable international phone field.
   The component is light by design: every text-bearing element carries an
   explicit background + color so country names and inputs can never render
   invisible (white on white) or inverted, whatever the host page does. */
.pf-wrap{position:relative;display:flex;gap:8px;align-items:stretch;width:100%}
.pf-cc{display:flex;align-items:center;gap:6px;padding:0 14px;min-height:48px;border:1.5px solid #ddd;border-radius:12px;background:#fafafa;font-size:16px;font-weight:600;cursor:pointer;white-space:nowrap;color:#333}
.pf-cc:active{background:#f0f0f0}
.pf-cc-arrow{font-size:12px;color:#888}
.pf-num{flex:1;min-width:0;min-height:48px;padding:0 14px;border:1.5px solid #ddd;border-radius:12px;font-size:17px;background:#fff;color:#111}
.pf-num::placeholder{color:#999;opacity:1}
.pf-num:focus{outline:none;border-color:#111}
.pf-drop{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;background:#fff;border:1px solid #e0e0e0;border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.16);overflow:hidden}
.pf-drop.hidden{display:none}
.pf-search{width:100%;border:0;border-bottom:1px solid #eee;padding:12px 14px;font-size:16px;box-sizing:border-box;background:#fff;color:#111}
.pf-search::placeholder{color:#999;opacity:1}
.pf-search:focus{outline:none}
.pf-list{max-height:280px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.pf-item{display:flex;justify-content:space-between;align-items:center;width:100%;padding:12px 14px;border:0;background:#fff;color:#111;font-size:16px;cursor:pointer;text-align:left}
.pf-item:active{background:#f5f5f5}
.pf-item.sel{background:#f0f0f0}
.pf-item-name{color:#111}
.pf-item-dial{color:#888;font-weight:600;margin-left:12px}
.pf-empty{padding:16px;text-align:center;color:#999}

/* ---------- dark mode : fond noir, texte blanc, contour blanc ---------- */
html[data-theme="dark"] .pf-cc {
  background: #000; color: #fff; -webkit-text-fill-color: #fff;
  border: 1.5px solid rgba(255,255,255,.35);
}
html[data-theme="dark"] .pf-cc:active { background: #1C1C1E; }
html[data-theme="dark"] .pf-cc-arrow { color: #fff; }
html[data-theme="dark"] .pf-num {
  background: #000 !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
  border: 1.5px solid rgba(255,255,255,.35) !important;
  caret-color: #fff;
}
html[data-theme="dark"] .pf-num::placeholder { color: rgba(255,255,255,.5); opacity: 1; }
/* Autofill : le texte reste blanc sur fond noir */
html[data-theme="dark"] .pf-num:-webkit-autofill,
html[data-theme="dark"] .pf-num:-webkit-autofill:hover,
html[data-theme="dark"] .pf-num:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff !important;
  -webkit-box-shadow: 0 0 0 1000px #000 inset !important;
  caret-color: #fff;
  transition: background-color 9999s ease-in-out 0s;
}
html[data-theme="dark"] .pf-drop {
  background: #000; border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 12px 32px rgba(0,0,0,.6);
}
html[data-theme="dark"] .pf-search {
  background: #000; color: #fff; -webkit-text-fill-color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
html[data-theme="dark"] .pf-search::placeholder { color: rgba(255,255,255,.5); opacity: 1; }
html[data-theme="dark"] .pf-item { background: #000; color: #fff; }
html[data-theme="dark"] .pf-item:active { background: #1C1C1E; }
html[data-theme="dark"] .pf-item-name { color: #fff; -webkit-text-fill-color: #fff; }
html[data-theme="dark"] .pf-item-dial { color: rgba(255,255,255,.6); }
/* Pays sélectionné : fond blanc, texte noir */
html[data-theme="dark"] .pf-item.sel { background: #fff; }
html[data-theme="dark"] .pf-item.sel .pf-item-name { color: #000; -webkit-text-fill-color: #000; }
html[data-theme="dark"] .pf-item.sel .pf-item-dial { color: #333; }
html[data-theme="dark"] .pf-empty { color: rgba(255,255,255,.6); }