/* Country Code for Elementor Form — frontend styling */

.dsccf-wrap {
  --dsccf-accent: #75CCCF;
  --dsccf-border: #d5dbde;
  --dsccf-text: #2c3338;
  --dsccf-muted: #6D7A83;

  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  /* The wrap replaces the original <input> in the DOM, which typically had
     width:100% from the theme/Elementor field CSS. Without an explicit
     width here, a flex container sizes to fit its content instead of
     filling the field, so the whole widget collapses to a tiny box. */
  width: 100%;
}

.dsccf-wrap * {
  box-sizing: border-box;
}

/* The actual input isn't always a direct child of .dsccf-wrap: some
   themes/plugins (e.g. Dynamic Content for Elementor's field-icon feature)
   wrap the <input> in their own container AFTER we've already enhanced the
   field, nesting it one level deeper. flex/width rules on the <input>
   itself then have no effect on the .dsccf-wrap layout, since only direct
   flex children respond to flex-grow — so we target whatever ends up as
   the direct child holding the input (bare input, or a third-party
   wrapper around it) and let it grow to fill the remaining space. */
.dsccf-wrap > *:not(.dsccf-trigger):not(.dsccf-dropdown) {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

/* "Flag Position: Inside" - the trigger overlays the field instead of
   sitting in its own space next to it, so the field keeps the theme's
   native width/style. Positioned in JS (layoutInlineFlag) to land right
   after any icon the theme/page builder already draws inside the field. */
.dsccf-wrap.dsccf-wrap--inside {
  display: block;
}

.dsccf-wrap--inside > *:not(.dsccf-trigger):not(.dsccf-dropdown) {
  width: 100% !important;
}

.dsccf-wrap--inside .dsccf-trigger {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%);
  height: auto !important;
  border-right: none !important;
  padding: 2px !important;
  z-index: 3;
}

/* Form controls (button/input) don't inherit the default font in some
   browsers' UA stylesheet: we force it explicitly, so the widget always
   uses the site's font (set via JS on .dsccf-wrap based on the original
   field). */
.dsccf-wrap,
.dsccf-wrap button,
.dsccf-wrap input,
.dsccf-dropdown,
.dsccf-dropdown input {
  font-family: inherit;
}

/* .dsccf-trigger is a real <button> element, so it is a direct target of
   the theme's / Elementor's global "Buttons" style (Site Settings), which
   can inject its own border-radius, padding, background, box-shadow and
   min-width/height — turning the trigger into an oversized pill or circle.
   Reset every property that style is likely to touch, with !important,
   so this widget always renders the same regardless of the site's global
   button styling. */
.dsccf-trigger {
  all: unset;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  height: 100% !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border: none !important;
  border-right: 1px solid var(--dsccf-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: normal !important;
  font-size: 13px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

.dsccf-trigger-flag {
  display: block !important;
  width: 20px !important;
  height: 14px !important;
  background-size: cover !important;
  background-position: 50% 50% !important;
  background-repeat: no-repeat !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dsccf-trigger-dial {
  display: inline-block !important;
  font-size: 13px !important;
  color: var(--dsccf-text) !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dsccf-trigger-arrow {
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 4px solid transparent !important;
  border-right: 4px solid transparent !important;
  border-top: 5px solid var(--dsccf-muted) !important;
  border-bottom: none !important;
  margin: 0 0 0 2px !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

.dsccf-wrap input[type="tel"],
.dsccf-wrap input[type="ehp-tel"] {
  flex: 1;
  min-width: 0;
  /* Some themes prepend their own phone icon to tel inputs via a
     background-image + padding-left; that would now collide with our own
     flag/trigger, so we strip it and let the input's own border/color
     styling (which we intentionally keep) show through untouched. */
  background-image: none !important;
}

/* ── Dropdown ── */

.dsccf-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;
  width: 260px;
  max-height: 280px;
  margin-top: 4px;
  background: #fff;
  border: 1px solid var(--dsccf-border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dsccf-dropdown.dsccf-hide {
  display: none;
}

.dsccf-search-wrap {
  position: relative;
  flex-shrink: 0;
}

.dsccf-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--dsccf-muted);
  pointer-events: none;
}

/* !important on the box-model/visual properties: like .dsccf-input and
   .dsccf-chips-input elsewhere, this is a real <input> and some
   themes/WP-core input styles can otherwise override our padding at
   equal-or-higher specificity - without it, the left padding for the
   icon can silently disappear, leaving it overlapping the placeholder
   text instead of sitting beside it. */
.dsccf-search {
  width: 100% !important;
  border: none !important;
  border-bottom: 1px solid var(--dsccf-border) !important;
  padding: 10px 12px 10px 34px !important;
  font-size: 14px !important;
  background: #fafbfc !important;
  box-shadow: none !important;
  outline: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.dsccf-search:focus {
  border-bottom-color: var(--dsccf-accent) !important;
  background: #fff !important;
}

.dsccf-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  max-height: 230px;
}

.dsccf-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--dsccf-text);
}

.dsccf-option:hover {
  background: rgba(117, 204, 207, 0.15);
}

.dsccf-option-flag {
  width: 20px;
  height: 14px;
  background-size: cover;
  background-position: 50% 50%;
  border-radius: 2px;
  flex-shrink: 0;
}

.dsccf-option-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dsccf-option-dial {
  color: var(--dsccf-muted);
  font-size: 12px;
  flex-shrink: 0;
}

.dsccf-divider {
  height: 1px;
  background: var(--dsccf-border);
  margin: 4px 8px;
  list-style: none;
}

/* ── Validation ── */

.dsccf-wrap.dsccf-invalid {
  border: 1px solid #d63638;
  border-radius: 4px;
}

.dsccf-error-message {
  display: block;
  color: #d63638;
  font-size: 12px;
  margin-top: 4px;
}