/* Country Code by Febric v1.1.0 — same visual design; checkout-only; India-only */
.ccbf-phone-shell{
    display:flex!important;
    align-items:stretch!important;
    width:100%!important;
    min-width:0!important;
    min-height:54px;
    border:1px solid #c8c8c8;
    border-radius:6px;
    background:#fff!important;
    box-sizing:border-box!important;
    overflow:hidden;
    transition:none!important;
}
.ccbf-phone-shell:focus-within{
    border-color:#c8c8c8!important;
    outline:0!important;
    box-shadow:none!important;
}
.ccbf-prefix{
    flex:0 0 auto;
    display:flex!important;
    align-items:center!important;
    height:auto;
    padding:0 0 0 10px;
    background:#fff!important;
    color:#3f3f46!important;
    white-space:nowrap;
    box-sizing:border-box!important;
    cursor:default!important;
    user-select:none;
    pointer-events:none;
}
.ccbf-flag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    margin-right:8px;
    font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
    font-size:31px;
    line-height:1;
}
.ccbf-code{
    font:500 20px/1.2 Arial,sans-serif;
    color:#45454d!important;
    -webkit-text-fill-color:#45454d!important;
}
.ccbf-chevron{
    width:9px;
    height:9px;
    margin:0 10px 3px 10px;
    border-right:1.6px solid #444;
    border-bottom:1.6px solid #444;
    transform:rotate(45deg);
    box-sizing:border-box;
}
.ccbf-divider{
    position:relative;
    z-index:20;
    flex:0 0 1px;
    width:1px;
    height:34px;
    margin:auto 0;
    background:#d4d4d4!important;
    box-shadow:2px 0 0 #fff, 3px 0 0 #fff;
    pointer-events:none;
}
.ccbf-phone-shell .ccbf-phone-input{
    flex:1 1 auto!important;
    min-width:0!important;
    width:100%!important;
    height:auto!important;
    min-height:52px!important;
    margin:0!important;
    padding:12px 16px!important;
    border:0!important;
    border-radius:0!important;
    outline:0!important;
    box-shadow:none!important;
    border-left:0!important;
    background:#fff!important;
    color:#222!important;
    font-size:16px!important;
    box-sizing:border-box!important;
}
.ccbf-phone-shell .ccbf-phone-input:focus,
.ccbf-phone-shell .ccbf-phone-input:focus-visible,
.ccbf-phone-shell .ccbf-phone-input:active{
    outline:0!important;
    border:0!important;
    border-left:0!important;
    box-shadow:none!important;
}
/* Prevent FunnelKit/theme focus accents from drawing a blue separator after the prefix. */
.ccbf-phone-shell .ccbf-phone-input::before,
.ccbf-phone-shell .ccbf-phone-input::after{
    display:none!important;
    content:none!important;
}
@media (max-width:480px){
    .ccbf-phone-shell{min-height:52px}
    .ccbf-prefix{padding-left:8px}
    .ccbf-flag{width:29px;margin-right:7px;font-size:27px}
    .ccbf-code{font-size:18px}
    .ccbf-chevron{width:8px;height:8px;margin-left:9px;margin-right:9px}
    .ccbf-divider{height:31px}
    .ccbf-phone-shell .ccbf-phone-input{min-height:50px!important;padding-left:13px!important;font-size:16px!important}
}

/* v1.0.2: neutralize builder/browser focus accents at the input's left edge. */
.ccbf-phone-shell:focus-within .ccbf-prefix,
.ccbf-phone-shell:focus-within .ccbf-divider{
    border-color:#d4d4d4!important;
}
.ccbf-phone-shell .ccbf-phone-input,
.ccbf-phone-shell .ccbf-phone-input:hover,
.ccbf-phone-shell .ccbf-phone-input:focus,
.ccbf-phone-shell .ccbf-phone-input:focus-visible,
.ccbf-phone-shell .ccbf-phone-input:active{
    outline:none!important;
    outline-width:0!important;
    border-left:none!important;
    box-shadow:none!important;
    -webkit-box-shadow:none!important;
}


/* v1.1.0: FunnelKit focus-color isolation. Keep this custom phone shell visually unchanged on focus/error/success. */
.ccbf-phone-shell,
.ccbf-phone-shell:hover,
.ccbf-phone-shell:focus,
.ccbf-phone-shell:focus-visible,
.ccbf-phone-shell:focus-within,
.ccbf-phone-shell.woocommerce-invalid,
.ccbf-phone-shell.woocommerce-validated{
    border-color:#c8c8c8!important;
    outline:0!important;
    box-shadow:none!important;
}
.ccbf-phone-shell .ccbf-prefix,
.ccbf-phone-shell .ccbf-divider,
.ccbf-phone-shell:focus-within .ccbf-prefix,
.ccbf-phone-shell:focus-within .ccbf-divider{
    outline:0!important;
    box-shadow:none!important;
}
.ccbf-phone-shell .ccbf-phone-input,
.ccbf-phone-shell .ccbf-phone-input:hover,
.ccbf-phone-shell .ccbf-phone-input:focus,
.ccbf-phone-shell .ccbf-phone-input:focus-visible,
.ccbf-phone-shell .ccbf-phone-input:active{
    border:0!important;
    border-color:transparent!important;
    border-left:0!important;
    outline:0!important;
    outline-color:transparent!important;
    box-shadow:none!important;
    -webkit-box-shadow:none!important;
}

/* v1.3.0 dark checkout option — scoped only to this plugin's phone shell. */
.ccbf-theme-dark.ccbf-phone-shell,
.ccbf-theme-dark.ccbf-phone-shell:hover,
.ccbf-theme-dark.ccbf-phone-shell:focus,
.ccbf-theme-dark.ccbf-phone-shell:focus-visible,
.ccbf-theme-dark.ccbf-phone-shell:focus-within,
.ccbf-theme-dark.ccbf-phone-shell.woocommerce-invalid,
.ccbf-theme-dark.ccbf-phone-shell.woocommerce-validated{
    background:#000!important;
    border-color:#555!important;
    outline:0!important;
    box-shadow:none!important;
}
.ccbf-theme-dark .ccbf-prefix{
    background:#000!important;
    color:#fff!important;
}
.ccbf-theme-dark .ccbf-code{
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
}
.ccbf-theme-dark .ccbf-chevron{
    border-right-color:#fff!important;
    border-bottom-color:#fff!important;
}
.ccbf-theme-dark .ccbf-divider,
.ccbf-theme-dark:focus-within .ccbf-divider{
    background:#555!important;
    border-color:#555!important;
    box-shadow:2px 0 0 #000,3px 0 0 #000!important;
}
.ccbf-theme-dark .ccbf-phone-input,
.ccbf-theme-dark .ccbf-phone-input:hover,
.ccbf-theme-dark .ccbf-phone-input:focus,
.ccbf-theme-dark .ccbf-phone-input:focus-visible,
.ccbf-theme-dark .ccbf-phone-input:active{
    background:#000!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    caret-color:#fff!important;
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
}
.ccbf-theme-dark .ccbf-phone-input::placeholder{color:#aaa!important;opacity:1}

/* v1.4.0 — FunnelKit dark floating-label alignment and compact left prefix. */
.ccbf-theme-dark .ccbf-prefix{padding-left:4px!important}
.ccbf-theme-dark .ccbf-flag{margin-right:6px!important}
.ccbf-theme-dark .ccbf-chevron{margin-left:8px!important;margin-right:8px!important}

/* v1.4.2 — Respect FunnelKit label-position setting.
   Outside labels start at the normal field edge. Floating labels shift after the +91 divider. */
.ccbf-phone-row.ccbf-label-floating label[for="billing_phone"],
.ccbf-phone-row.ccbf-label-floating .funnelkit-input-label,
.ccbf-phone-row.ccbf-label-floating .wfacp-form-control-label,
.ccbf-phone-row.ccbf-label-floating .woocommerce-input-wrapper + label{
    left:calc(var(--ccbf-prefix-width) + 14px)!important;
    max-width:calc(100% - var(--ccbf-prefix-width) - 28px)!important;
}
.ccbf-phone-row.ccbf-label-outside label[for="billing_phone"],
.ccbf-phone-row.ccbf-label-outside .funnelkit-input-label,
.ccbf-phone-row.ccbf-label-outside .wfacp-form-control-label,
.ccbf-phone-row.ccbf-label-outside .woocommerce-input-wrapper + label{
    left:0!important;
    max-width:100%!important;
}


/* v1.4.4 — FunnelKit floating labels.
   FunnelKit uses the field placeholder as the initial in-field label on this layout.
   Keep it visible while the field is empty; the browser removes it naturally as the
   customer types, allowing FunnelKit's own compact/floating label to take over. */
body.ccbf-dark-checkout #billing_first_name::placeholder,
body.ccbf-dark-checkout #billing_last_name::placeholder,
body.ccbf-dark-checkout #billing_email::placeholder,
body.ccbf-dark-checkout #billing_phone::placeholder,
body.ccbf-dark-checkout input[name="billing_phone"]::placeholder{
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    opacity:1!important;
}

/* v1.4.5 — Dark theme: keep FunnelKit's native floating labels white. */
body.ccbf-dark-checkout .ccbf-phone-row.ccbf-label-floating label[for="billing_phone"],
body.ccbf-dark-checkout .ccbf-phone-row.ccbf-label-floating .funnelkit-input-label,
body.ccbf-dark-checkout .ccbf-phone-row.ccbf-label-floating .wfacp-form-control-label,
body.ccbf-dark-checkout .ccbf-phone-row.ccbf-label-floating .woocommerce-input-wrapper + label,
body.ccbf-dark-checkout .ccbf-phone-row.ccbf-label-floating label[for="billing_phone"] *,
body.ccbf-dark-checkout .ccbf-phone-row.ccbf-label-floating .funnelkit-input-label *,
body.ccbf-dark-checkout .ccbf-phone-row.ccbf-label-floating .wfacp-form-control-label *{
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    opacity:1!important;
}


/* v1.4.6 — In FunnelKit floating mode show only the centered/placeholder Phone Number
   while the field is empty. Reveal FunnelKit's compact floating label only after
   focus/value state begins. This prevents duplicate Phone Number text. */
body.ccbf-dark-checkout .ccbf-phone-row.ccbf-label-floating.ccbf-phone-empty label[for="billing_phone"],
body.ccbf-dark-checkout .ccbf-phone-row.ccbf-label-floating.ccbf-phone-empty .funnelkit-input-label,
body.ccbf-dark-checkout .ccbf-phone-row.ccbf-label-floating.ccbf-phone-empty .wfacp-form-control-label,
body.ccbf-dark-checkout .ccbf-phone-row.ccbf-label-floating.ccbf-phone-empty .woocommerce-input-wrapper + label{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
}

/* v1.4.7 — Do not reveal the compact floating phone label merely on focus.
   It stays hidden while the phone value is empty and appears only after typing. */