/* ============================================================
   Smart Contact Form — Public / Frontend Styles
   ============================================================ */

:root {
    --scf-pub-primary:      #2271b1;
    --scf-pub-primary-dark: #135e96;
    --scf-pub-text:         #1d2327;
    --scf-pub-text-muted:   #646970;
    --scf-pub-border:       #c3c4c7;
    --scf-pub-bg:           #f6f7f7;
    --scf-pub-white:        #ffffff;
    --scf-pub-error:        #d63638;
    --scf-pub-success:      #00a32a;
    --scf-pub-radius:       6px;
    --scf-pub-transition:   .2s ease;
}

.scf-form-wrapper { max-width: 680px; }
.scf-form-title { margin: 0 0 20px; font-size: 22px; }

/* ---- Response message ---- */
.scf-response { display: none; padding: 14px 18px; border-radius: var(--scf-pub-radius); margin-bottom: 20px; font-size: 15px; }
.scf-response.scf-success { background: #edfaef; color: #00a32a; border: 1px solid #b8e6c1; }
.scf-response.scf-error   { background: #fce8e8; color: #d63638; border: 1px solid #f5c6c6; }

/* ---- Fields Row (flex layout) ---- */
.scf-fields-row { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---- Field container widths ---- */
.scf-field-container { flex: 1 1 100%; min-width: 0; }
.scf-field-width-full  { flex: 1 1 100%; }
.scf-field-width-half  { flex: 1 1 calc(50% - 8px); }
.scf-field-width-third { flex: 1 1 calc(33.33% - 12px); }
@media (max-width: 480px) {
    .scf-field-width-half,
    .scf-field-width-third { flex: 1 1 100%; }
}

/* ---- Labels ---- */
.scf-label {
    display: block; margin-bottom: 6px;
    font-size: 14px; font-weight: 600; color: var(--scf-pub-text);
}
.scf-required { color: var(--scf-pub-error); margin-left: 3px; }

/* ---- Phone field (country dial dropdown + number input) ---- */
.scf-phone-wrapper {
    display: flex;
    gap: 0;
    align-items: stretch;
}
.scf-phone-dial {
    flex: 0 0 auto;
    width: 120px;
    padding: 10px 24px 10px 10px;
    font-size: 15px;
    line-height: 1.5;
    box-sizing: border-box;
    border: 1.5px solid var(--scf-pub-border);
    border-right: none;
    border-radius: var(--scf-pub-radius) 0 0 var(--scf-pub-radius);
    background: var(--scf-pub-bg);
    color: var(--scf-pub-text);
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M5 6L0 0h10z' fill='%23646970'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color var(--scf-pub-transition);
}
.scf-phone-dial:focus {
    outline: none;
    border-color: var(--scf-pub-primary);
    z-index: 1;
}
.scf-phone-dial-native {
    display: none !important;
}
.scf-form-wrapper .scf-phone-picker,
.scf-form .scf-phone-picker,
.scf-phone-picker {
    position: relative;
    flex: 0 0 54px;
    width: 54px;
    min-width: 54px;
    max-width: 54px;
    box-sizing: border-box;
}
.scf-form-wrapper button.scf-phone-picker-toggle,
.scf-form button.scf-phone-picker-toggle,
button.scf-phone-picker-toggle {
    all: unset !important;
    box-sizing: border-box !important;
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 6px 13px 6px 5px !important;
    border: 1px solid #d7dce1 !important;
    border-right: 0 !important;
    border-radius: 4px 0 0 4px !important;
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    color: #333 !important;
    cursor: pointer !important;
    position: relative !important;
    font-family: Arial, sans-serif !important;
    line-height: 1 !important;
}
.scf-form-wrapper button.scf-phone-picker-toggle:focus,
.scf-form button.scf-phone-picker-toggle:focus,
button.scf-phone-picker-toggle:focus {
    outline: none;
    border-color: #9fb7d7;
    box-shadow: none;
    position: relative;
    z-index: 2;
}
.scf-phone-picker-flags {
    display: inline-flex !important;
    align-items: center !important;
    gap: 1px !important;
    flex: 0 0 auto !important;
}
.scf-phone-picker-flag {
    width: 18px !important;
    height: 13px !important;
    min-width: 18px !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: inline-block !important;
    vertical-align: middle !important;
}
.scf-phone-picker-code {
    font-size: 13px !important;
    white-space: nowrap !important;
    color: #777 !important;
    font-family: Arial, sans-serif !important;
    font-weight: 400 !important;
}
.scf-phone-picker-arrow {
    position: absolute !important;
    right: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #555 !important;
    font-size: 9px !important;
    line-height: 1 !important;
}
.scf-form-wrapper .scf-phone-picker-menu,
.scf-form .scf-phone-picker-menu,
.scf-phone-picker-menu {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 1px) !important;
    left: 0 !important;
    width: 116px !important;
    max-height: 226px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 999999 !important;
    padding: 3px 0 !important;
    background: #fff !important;
    background-color: #fff !important;
    border: 1px solid #d7dce1 !important;
    border-radius: 0 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,.12) !important;
    box-sizing: border-box !important;
}
.scf-phone-picker.is-open .scf-phone-picker-menu {
    display: block !important;
}
.scf-form-wrapper button.scf-phone-picker-option,
.scf-form button.scf-phone-picker-option,
button.scf-phone-picker-option {
    all: unset !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 26px !important;
    min-height: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 4px 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    color: #333 !important;
    cursor: pointer !important;
    font-family: Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    text-align: left !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transform: none !important;
    margin: 0 !important;
}
.scf-form-wrapper button.scf-phone-picker-option.is-selected,
.scf-form button.scf-phone-picker-option.is-selected,
button.scf-phone-picker-option.is-selected {
    background: #fff !important;
    background-color: #fff !important;
    color: #333 !important;
}
.scf-form-wrapper button.scf-phone-picker-option:hover,
.scf-form button.scf-phone-picker-option:hover,
button.scf-phone-picker-option:hover {
    background: #f5f5f5 !important;
    background-color: #f5f5f5 !important;
    color: #333 !important;
}
.scf-phone-number {
    flex: 1 1 auto;
    display: block;
    width: auto;
    min-width: 0;
    min-height: 34px !important;
    height: 34px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    border-width: 1px !important;
    border-radius: 0 4px 4px 0 !important;
    box-sizing: border-box;
}
.scf-phone-dial.scf-field-invalid,
.scf-phone-number.scf-field-invalid {
    border-color: var(--scf-pub-error);
}
@media (max-width: 400px) {
    .scf-phone-wrapper { flex-direction: column; }
    .scf-phone-dial { width: 100%; border-right: 1.5px solid var(--scf-pub-border); border-bottom: none; border-radius: var(--scf-pub-radius) var(--scf-pub-radius) 0 0; }
    .scf-phone-picker { flex: 0 0 auto; width: 100%; }
    .scf-phone-picker-toggle { border-right: 1.5px solid var(--scf-pub-border); border-bottom: none; border-radius: var(--scf-pub-radius) var(--scf-pub-radius) 0 0; }
    .scf-phone-picker-menu { width: 100%; }
    .scf-phone-number { width: 100%; border-radius: 0 0 var(--scf-pub-radius) var(--scf-pub-radius) !important; }
}

/* ---- Inputs ---- */
.scf-input,
.scf-textarea,
.scf-select {
    display: block; width: 100%;
    padding: 10px 14px; font-size: 15px;
    border: 1.5px solid var(--scf-pub-border);
    border-radius: var(--scf-pub-radius);
    background: var(--scf-pub-white); color: var(--scf-pub-text);
    transition: border-color var(--scf-pub-transition), box-shadow var(--scf-pub-transition);
    font-family: inherit; line-height: 1.5;
    -webkit-appearance: none; appearance: none;
}
.scf-input:focus,
.scf-textarea:focus,
.scf-select:focus {
    border-color: var(--scf-pub-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(34,113,177,.15);
}
.scf-input.scf-field-invalid,
.scf-textarea.scf-field-invalid,
.scf-select.scf-field-invalid {
    border-color: var(--scf-pub-error);
    box-shadow: 0 0 0 3px rgba(214,54,56,.1);
}
.scf-textarea { resize: vertical; min-height: 120px; }
.scf-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M6 8L0 0h12z' fill='%23646970'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }

/* ---- Radio & Checkbox ---- */
.scf-radio-group,
.scf-checkbox-group { display: flex; flex-direction: column; gap: 8px; }
.scf-radio-label,
.scf-checkbox-label {
    display: flex; align-items: center; gap: 10px;
    font-size: 14px; color: var(--scf-pub-text); cursor: pointer;
}
.scf-radio-label input,
.scf-checkbox-label input {
    width: 18px; height: 18px; accent-color: var(--scf-pub-primary); flex-shrink: 0; cursor: pointer;
}

/* ---- Name field ---- */
.scf-name-group { display: flex; gap: 12px; }
.scf-name-group .scf-input { flex: 1; }
@media (max-width: 400px) { .scf-name-group { flex-direction: column; } }

/* ---- Rating ---- */
.scf-rating-group { display: flex; gap: 4px; }
.scf-rating-star {
    background: none; border: none; font-size: 28px; color: #dcdcde;
    cursor: pointer; padding: 0; line-height: 1; transition: color .15s, transform .15s;
}
.scf-rating-star:hover,
.scf-rating-star.scf-star-active { color: #f0a500; }
.scf-rating-star:hover { transform: scale(1.15); }

/* ---- Divider ---- */
.scf-divider { border: none; border-top: 1px solid var(--scf-pub-border); margin: 8px 0; }

/* ---- HTML block ---- */
.scf-html-block { font-size: 14px; color: var(--scf-pub-text-muted); }

/* ---- Help text ---- */
.scf-help-text { font-size: 12px; color: var(--scf-pub-text-muted); margin: 4px 0 0; }

/* ---- Error message ---- */
.scf-field-error { font-size: 12px; color: var(--scf-pub-error); margin-top: 4px; min-height: 0; }

/* ---- Submit ---- */
.scf-submit-row { margin-top: 8px; }
.scf-submit-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 32px; font-size: 16px; font-weight: 600;
    background: var(--scf-pub-primary); color: #fff;
    border: none; border-radius: var(--scf-pub-radius);
    cursor: pointer; transition: background var(--scf-pub-transition), transform .1s;
    font-family: inherit;
}
.scf-submit-btn:hover  { background: var(--scf-pub-primary-dark); }
.scf-submit-btn:active { transform: scale(.98); }
.scf-submit-btn:disabled { opacity: .7; cursor: wait; }
.scf-btn-spinner {
    display: none; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff; border-radius: 50; animation: scf-spin .7s linear infinite;
}
.scf-submit-btn.scf-loading .scf-btn-spinner { display: inline-block; }
.scf-submit-btn.scf-loading .scf-btn-text { opacity: .75; }

@keyframes scf-spin { to { transform: rotate(360deg); } }

/* ---- Success state ---- */
.scf-form.scf-form-submitted { display: none; }