/* FORCE shared form preset — vpisnica, contact and WooCommerce */
.force-vpis-options,
.force-vpis-field,
.force-contact-form label,
.force-woo-panel .form-row,
.force-woo-panel p.form-row {
    gap: 13px !important;
}
.force-vpis-options legend,
.force-vpis-field > span,
.force-contact-form label > span,
.force-woo-panel label {
    margin-bottom: 2px;
}
.force-option-grid {
    margin-top: 3px;
    row-gap: 12px;
}
:where(.force-vpis-form, .force-contact-form, .force-woo-panel) input[type="text"],
:where(.force-vpis-form, .force-contact-form, .force-woo-panel) input[type="email"],
:where(.force-vpis-form, .force-contact-form, .force-woo-panel) input[type="tel"],
:where(.force-vpis-form, .force-contact-form, .force-woo-panel) input[type="number"],
:where(.force-vpis-form, .force-contact-form, .force-woo-panel) input[type="password"],
:where(.force-vpis-form, .force-contact-form, .force-woo-panel) textarea,
:where(.force-vpis-form, .force-contact-form, .force-woo-panel) select {
    width: 100%;
    min-height: 54px;
    border: 1px solid rgba(255,255,255,.20) !important;
    border-radius: 14px !important;
    color: #fff !important;
    background-color: rgba(0,0,0,.26) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.075) !important;
    font: 740 15px/1.35 var(--font-body) !important;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
:where(.force-vpis-form, .force-contact-form, .force-woo-panel) select {
    appearance: none;
    -webkit-appearance: none;
    padding: 14px 46px 14px 15px !important;
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(255,255,255,.88) 50%),
        linear-gradient(135deg, rgba(255,255,255,.88) 50%, transparent 50%),
        linear-gradient(135deg, rgba(255,38,63,.32), rgba(196,0,24,.24)) !important;
    background-position:
        calc(100% - 23px) 50%,
        calc(100% - 16px) 50%,
        calc(100% - 42px) 50% !important;
    background-size:
        7px 7px,
        7px 7px,
        1px 28px !important;
    background-repeat: no-repeat !important;
}
:where(.force-vpis-form, .force-contact-form, .force-woo-panel) select option {
    color: #111;
    background: #fff;
}
:where(.force-vpis-form, .force-contact-form, .force-woo-panel) input:focus,
:where(.force-vpis-form, .force-contact-form, .force-woo-panel) textarea:focus,
:where(.force-vpis-form, .force-contact-form, .force-woo-panel) select:focus {
    border-color: rgba(255,38,63,.74) !important;
    background-color: rgba(0,0,0,.36) !important;
    box-shadow: 0 0 0 4px rgba(255,38,63,.14), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
@media (max-width: 700px) {
    .force-vpis-options,
    .force-vpis-field,
    .force-contact-form label,
    .force-woo-panel .form-row,
    .force-woo-panel p.form-row {
        gap: 12px !important;
    }
    .force-option-grid {
        margin-top: 4px;
        row-gap: 10px;
    }
}

/* Click affordance for custom radio/checkbox choices */
.force-option-pill,
.force-option-pill *,
.force-option-pill input,
.force-vpis-options label,
.force-vpis-options label *,
.force-vpis-options input[type="radio"],
.force-vpis-options input[type="checkbox"] {
    cursor: pointer !important;
}

/* FORCE custom select + checkbox preset */
.force-native-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.force-select {
    position: relative;
    width: 100%;
}
.force-select-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 54px;
    padding: 14px 15px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 14px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 0%, rgba(255,38,63,.10), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.018)),
        rgba(0,0,0,.30);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 26px rgba(0,0,0,.18);
    font: 780 15px/1.35 var(--font-body);
    text-align: left;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.force-select-button span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.force-select-button i {
    position: relative;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-left: 1px solid rgba(255,38,63,.32);
}
.force-select-button i::before,
.force-select-button i::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 8px;
    height: 2px;
    border-radius: 999px;
    background: rgba(255,255,255,.88);
    transition: transform .18s ease;
}
.force-select-button i::before {
    right: 12px;
    transform: translateY(-50%) rotate(45deg);
}
.force-select-button i::after {
    right: 7px;
    transform: translateY(-50%) rotate(-45deg);
}
.force-select.is-open .force-select-button,
.force-select-button:focus-visible {
    border-color: rgba(255,38,63,.76);
    box-shadow: 0 0 0 4px rgba(255,38,63,.14), inset 0 1px 0 rgba(255,255,255,.10), 0 18px 36px rgba(0,0,0,.24);
    outline: none;
}
.force-select.is-open .force-select-button i::before {
    transform: translateY(-50%) rotate(-45deg);
}
.force-select.is-open .force-select-button i::after {
    transform: translateY(-50%) rotate(45deg);
}
.force-select.is-placeholder .force-select-button span {
    color: rgba(255,255,255,.62);
}
.force-select.is-disabled {
    opacity: .55;
    pointer-events: none;
}
.force-select.is-invalid .force-select-button {
    border-color: rgba(255,38,63,.95);
    box-shadow: 0 0 0 4px rgba(255,38,63,.20), inset 0 1px 0 rgba(255,255,255,.10);
}
.force-select-list {
    position: absolute;
    z-index: 80;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    display: grid;
    gap: 6px;
    max-height: min(330px, 58vh);
    overflow: auto;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 14px;
    background:
        radial-gradient(circle at 16% 0%, rgba(255,38,63,.16), transparent 36%),
        linear-gradient(145deg, rgba(20,20,22,.98), rgba(7,7,8,.98));
    box-shadow: 0 24px 70px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(12px) saturate(115%);
}
.force-select-list[hidden] {
    display: none !important;
}
.force-select-option {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: rgba(255,255,255,.82);
    background: transparent;
    font: 760 14px/1.25 var(--font-body);
    text-align: left;
    cursor: pointer;
}
.force-select-option:hover,
.force-select-option:focus-visible,
.force-select-option.is-selected {
    color: #fff;
    border-color: rgba(255,38,63,.44);
    background: rgba(255,38,63,.18);
    outline: none;
}
:where(.force-vpis-form, .force-contact-form, .force-woo-panel) input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    display: inline-grid;
    place-items: center;
    width: 21px !important;
    height: 21px !important;
    min-height: 0 !important;
    margin: 1px 0 0 !important;
    flex: 0 0 21px;
    border: 1px solid rgba(255,255,255,.26) !important;
    border-radius: 7px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.070), rgba(255,255,255,.018)),
        rgba(0,0,0,.28) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09) !important;
    cursor: pointer;
}
:where(.force-vpis-form, .force-contact-form, .force-woo-panel) input[type="checkbox"]::before {
    content: "";
    width: 11px;
    height: 7px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    opacity: 0;
    transform: translateY(-1px) rotate(-45deg) scale(.75);
    transition: opacity .16s ease, transform .16s ease;
}
:where(.force-vpis-form, .force-contact-form, .force-woo-panel) input[type="checkbox"]:checked {
    border-color: rgba(255,38,63,.86) !important;
    background: linear-gradient(135deg, #ff263f 0%, #c40018 100%) !important;
    box-shadow: 0 0 0 4px rgba(255,38,63,.13), 0 12px 24px rgba(255,38,63,.18) !important;
}
:where(.force-vpis-form, .force-contact-form, .force-woo-panel) input[type="checkbox"]:checked::before {
    opacity: 1;
    transform: translateY(-1px) rotate(-45deg) scale(1);
}
:where(.force-vpis-form, .force-contact-form, .force-woo-panel) input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(255,38,63,.18), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.force-consent,
.force-consent * {
    cursor: pointer;
}