/**
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to http://www.prestashop.com for more information.
 * We offer the best and most useful modules PrestaShop and modifications for your online store.
 *
 * @author    knowband.com <support@knowband.com>
 * @copyright 2017 Knowband
 * @license   see file: LICENSE.txt
 * @category  PrestaShop Module
 *
 * Description
 *
 * Frontend CSS for kbcontactform — self-contained, prefixed under .kbcf-* so it
 * doesn't leak into theme-owned selectors. Loaded on every page that hosts a
 * rendered form (via Kbcontactform::ensureFrontAssets).
 */

/* ==========================================================================
   Form layout — rows, columns, fields
   ========================================================================== */
.kbcf-form-wrap { margin: 0 0 30px 0; }

.kbcf-page-title {
    margin: 0 0 20px 0;
    font-size: 24px;
}

.kbcf-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 12px;
}
.kbcf-col {
    flex: 1 1 0;
    min-width: 200px;
}
.kbcf-row.kbcf-row-1-col .kbcf-col            { flex: 1 1 100%; }
.kbcf-row.kbcf-row-2-col-equal .kbcf-col      { flex: 1 1 calc(50% - 8px); }
.kbcf-row.kbcf-row-2-col-large-right .kbcf-col:nth-child(1) { flex: 1 1 calc(33% - 8px); }
.kbcf-row.kbcf-row-2-col-large-right .kbcf-col:nth-child(2) { flex: 1 1 calc(67% - 8px); }
.kbcf-row.kbcf-row-2-col-large-left .kbcf-col:nth-child(1)  { flex: 1 1 calc(67% - 8px); }
.kbcf-row.kbcf-row-2-col-large-left .kbcf-col:nth-child(2)  { flex: 1 1 calc(33% - 8px); }
.kbcf-row.kbcf-row-3-col-equal .kbcf-col      { flex: 1 1 calc(33% - 12px); }
.kbcf-row.kbcf-row-4-col-equal .kbcf-col      { flex: 1 1 calc(25% - 12px); }

.kbcf-field {
    display: block;
    margin-bottom: 14px;
    /* Reset any horizontal-form grid the theme may impose */
    padding-left: 0;
    padding-right: 0;
}

.kbcf-label {
    display: block;
    float: none;
    width: auto;
    text-align: left;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 14px;
    color: #333;
}

.kbcf-required-star {
    color: #d9534f;
    margin-left: 2px;
}

.kbcf-input,
.kbcf-form .kbcf-field input[type="text"],
.kbcf-form .kbcf-field input[type="email"],
.kbcf-form .kbcf-field input[type="password"],
.kbcf-form .kbcf-field input[type="tel"],
.kbcf-form .kbcf-field input[type="url"],
.kbcf-form .kbcf-field input[type="number"],
.kbcf-form .kbcf-field input[type="date"],
.kbcf-form .kbcf-field input[type="datetime-local"],
.kbcf-form .kbcf-field input[type="file"],
.kbcf-form .kbcf-field textarea,
.kbcf-form .kbcf-field select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #d0d3d6;
    border-radius: 3px;
    background: #fff;
    font-size: 14px;
    box-sizing: border-box;
}

.kbcf-form .kbcf-field textarea { min-height: 100px; resize: vertical; }

.kbcf-field-desc {
    margin-top: 4px;
    font-size: 12px;
    color: #888;
    line-height: 1.4;
}

.kbcf-field-error {
    margin-top: 4px;
    font-size: 12px;
    color: #d9534f;
}

.kbcf-options {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 6px 16px;
}
.kbcf-options.kbcf-options-stacked {
    flex-direction: column;
    gap: 6px;
}
.kbcf-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: normal;
    cursor: pointer;
}

.kbcf-html-block {
    margin: 8px 0;
    padding: 10px;
    background: #f9f9f9;
    border-radius: 3px;
    font-size: 13px;
    color: #555;
    line-height: 1.5;
}

.kbcf-submit-btn {
    display: inline-block;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: #25b9d7;
    border: 1px solid #1da8c2;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.kbcf-submit-btn:hover { background: #1da8c2; }
.kbcf-submit-btn[disabled] { opacity: 0.6; cursor: wait; }

/* ==========================================================================
   Notification banners (top of form, success / error)
   ========================================================================== */
.kbcf-notice {
    padding: 10px 14px;
    margin: 0 0 14px 0;
    border-radius: 3px;
    font-size: 14px;
}
.kbcf-notice-success { background: #dff0d8; color: #3c763d; border: 1px solid #d6e9c6; }
.kbcf-notice-error   { background: #f2dede; color: #a94442; border: 1px solid #ebccd1; }

/* ==========================================================================
   Open / Floating button + modal
   ========================================================================== */
.kbcf-open-wrap, .kbcf-floating-wrap {
    --kbcf-bg: #25b9d7;
    --kbcf-fg: #ffffff;
    --kbcf-bg-h: #1da8c2;
    --kbcf-fg-h: #ffffff;
    --kbcf-mx: 20px;
    --kbcf-my: 20px;
}

.kbcf-open-btn,
.kbcf-floating-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--kbcf-fg);
    background: var(--kbcf-bg);
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.kbcf-open-btn:hover,
.kbcf-floating-btn:hover {
    color: var(--kbcf-fg-h);
    background: var(--kbcf-bg-h);
}
.kbcf-open-icon, .kbcf-floating-icon { width: 18px; height: 18px; object-fit: contain; }

/* ----- Floating button positions (fixed-pinned) ----- */
.kbcf-floating-wrap {
    position: fixed;
    z-index: 2147482999;
}
.kbcf-floating-wrap.kbcf-pos-middle-right  { top: 50%; right: var(--kbcf-mx); transform: translateY(-50%); }
.kbcf-floating-wrap.kbcf-pos-middle-left   { top: 50%; left: var(--kbcf-mx);  transform: translateY(-50%); }
.kbcf-floating-wrap.kbcf-pos-bottom-right  { bottom: var(--kbcf-my); right: var(--kbcf-mx); }
.kbcf-floating-wrap.kbcf-pos-bottom-left   { bottom: var(--kbcf-my); left: var(--kbcf-mx); }

/* ----- Modal ----- */
.kbcf-modal[hidden] { display: none; }
.kbcf-modal {
    position: fixed;
    inset: 0;
    /* Must stay above theme/plugin overlays that can open while this popup
       is showing (native add-to-cart confirmation, quickview, other module
       modals, etc.) — those commonly sit anywhere from ~1050 (Bootstrap) up
       into the low six figures, so this is set well past that range rather
       than matched to any one theme's convention. */
    z-index: 2147483000;
}
.kbcf-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}
.kbcf-modal-dialog {
    position: relative;
    margin: 5vh auto;
    max-width: 640px;
    width: calc(100% - 32px);
    background: #fff;
    border-radius: 4px;
    padding: 24px 28px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    max-height: 90vh;
    overflow-y: auto;
}

/* ==========================================================================
   Star Rating field — fixed style, no admin colour/size options.
   Icon is visual only (Unicode glyphs, no new image assets); the stored
   value is always the integer 1-5, or unrated. Works identically inline
   and inside a popup modal.
   ========================================================================== */
.kbcf-rating {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.kbcf-rating-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 22px;
    line-height: 1;
    color: #d0d3d6;
    cursor: pointer;
    user-select: none;
    font-family: "Segoe UI Symbol", "Apple Color Emoji", "Noto Sans Symbols", sans-serif;
    font-style: normal;
    font-weight: normal;
}
.kbcf-rating-icon:focus {
    outline: 2px solid #25b9d7;
    outline-offset: 2px;
    border-radius: 3px;
}
.kbcf-rating-icon.kbcf-rating-icon-filled {
    color: #f5a623;
}
.kbcf-rating-label {
    margin-left: 8px;
    font-size: 13px;
    color: #666;
    min-height: 1em;
}

/* Icon glyphs — Unicode content, one per admin-selectable icon key. The <i>
   glyph element is a plain <i> tag, which many themes/icon-font libraries
   reset to font-style:italic or a different font-family by tag-name rules
   more specific than inheriting from the .kbcf-rating-icon wrapper — pin the
   font explicitly on the <i> itself so it's never affected by the theme.
   Code points above U+FFFF (thumb/smiley) MUST use the full 6-digit escape
   (zero-padded) — a short-form \1F44D is ambiguous to the CSS parser and can
   swallow/merge the following selector text, corrupting the whole rule. */
i[class^="kbcf-rating-icon-"],
i[class*=" kbcf-rating-icon-"] {
    font-family: "Segoe UI Symbol", "Apple Color Emoji", "Noto Sans Symbols", sans-serif;
    font-style: normal;
    font-weight: normal;
}
.kbcf-rating-icon-star::before    { content: "\002605"; } /* ★ */
.kbcf-rating-icon-heart::before   { content: "\002665"; } /* ♥ */
.kbcf-rating-icon-thumb::before   { content: "\01F44D"; } /* 👍 */
.kbcf-rating-icon-smiley::before  { content: "\01F60A"; } /* 😊 */
.kbcf-rating-icon-circle::before  { content: "\002b24"; } /* ⬤ */
.kbcf-rating-icon-diamond::before { content: "\0025c6"; } /* ◆ */
.kbcf-rating-icon-check::before   { content: "\002714"; } /* ✔ */
.kbcf-rating-icon-flag::before    { content: "\002691"; } /* ⚑ */

@media (max-width: 480px) {
    .kbcf-rating-icon { width: 26px; height: 26px; font-size: 18px; }
}
.kbcf-modal-close {
    position: absolute;
    top: 6px;
    right: 10px;
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    font-size: 28px;
    color: #555;
    cursor: pointer;
    line-height: 1;
}
.kbcf-modal-close:hover { color: #000; }
.kbcf-modal-close:focus,
.kbcf-modal-close:active {
    outline: none;
    box-shadow: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) {
    .kbcf-row .kbcf-col { flex: 1 1 100% !important; }
    .kbcf-modal-dialog { margin: 2vh auto; padding: 18px 16px; }
}