/* ============================================
   Chio Ambasador Promo 2026
   Prijavni obrazec (added below the standard
   promotion template body area bricks, which
   render on the site's red promo background)
   ============================================ */

/* Bullet lists in the area-brick wysiwyg content default to
   list-style-position: inside with no indent, so bullets sit flush
   with the left edge. Indent them like the recipe page does. */
.promo-ambasador .sub-content ul {
    list-style-position: outside;
    margin-left: 2.5rem;
}

.ambasador-form-section {
    margin-top: 40px;
    padding: 36px 24px 34px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(0, 0, 0, 0.16);
    border-radius: 20px;
}

.ambasador-closed-notice {
    color: #fff;
    font-family: 'Noto Sans', sans-serif;
    font-size: 15px;
    line-height: 1.6;
}

.ambasador-closed-title {
    font-family: 'Saira', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 20px;
    color: #ffd12f;
    margin-bottom: 10px;
}

.ambasador-section-title {
    font-family: 'Saira', sans-serif;
    font-weight: 900;
    font-size: 28px;
    text-transform: uppercase;
    margin-bottom: 26px;
    color: #ffd12f;
}

.ambasador-form .form-group {
    margin-bottom: 26px;
}

.ambasador-form label {
    display: block;
    font-family: 'Saira', sans-serif;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 8px;
    color: #fff;
}

.ambasador-form .required {
    color: #ffd12f;
    margin-left: 2px;
}

.ambasador-form .field-hint {
    font-family: 'Noto Sans', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    margin: -2px 0 10px;
    line-height: 1.4;
}

.ambasador-form input[type="text"],
.ambasador-form input[type="email"],
.ambasador-form input[type="tel"] {
    width: 100%;
    max-width: 480px;
    box-sizing: border-box;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    font-family: 'Noto Sans', sans-serif;
    font-size: 15px;
    padding: 8px 4px;
    outline: none;
    transition: border-color 0.15s ease;
}

.ambasador-form input[type="text"]::placeholder,
.ambasador-form input[type="email"]::placeholder,
.ambasador-form input[type="tel"]::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.ambasador-form input[type="text"]:focus,
.ambasador-form input[type="email"]:focus,
.ambasador-form input[type="tel"]:focus {
    border-bottom-color: #ffd12f;
}

.ambasador-file-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.ambasador-file-btn {
    background: #fff;
    color: #cd001b;
    border: 2px solid #fff;
    border-radius: 24px;
    font-family: 'Saira', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    padding: 10px 24px;
    cursor: pointer;
    transition: transform 0.15s ease;
}

/* The vendor bundle's "button:focus,input:focus{color:inherit}" reset
   outranks the plain class selector above once the button keeps focus
   after the native file picker closes, turning the text invisible.
   Restate the color at the same specificity as that reset. */
.ambasador-file-btn:focus,
.ambasador-file-btn:active {
    color: #cd001b;
    outline: none;
}

.ambasador-file-btn:hover {
    transform: translateY(-1px);
}

.ambasador-file-name {
    font-family: 'Noto Sans', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    word-break: break-all;
}

.ambasador-progress {
    position: relative;
    max-width: 480px;
    height: 22px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 26px;
}

.ambasador-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    background: #ffd12f;
    transition: width 0.2s ease;
}

.ambasador-progress-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Saira', sans-serif;
    font-weight: 700;
    font-size: 11px;
    color: #cd001b;
}

/* Higher specificity than ".ambasador-form label" so the flex row wins */
.ambasador-form label.ambasador-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    max-width: 560px;
    margin-bottom: 0;
}

.ambasador-checkbox input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    accent-color: #ffd12f;
    cursor: pointer;
}

.ambasador-checkbox span {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
}

.ambasador-submit-btn {
    display: inline-block;
    background: #ffd12f;
    color: #cd001b;
    border: none;
    border-radius: 30px;
    font-family: 'Saira', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 0.5px;
    padding: 14px 40px;
    cursor: pointer;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease;
}

.ambasador-submit-btn:hover {
    transform: translateY(-2px);
}

.ambasador-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.ambasador-pravilnik-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffd12f;
    font-family: 'Saira', sans-serif;
    font-weight: 700;
    font-size: 15px;
    text-decoration: underline;
}

.ambasador-pravilnik-link:hover,
.ambasador-pravilnik-link:focus {
    color: #ffd12f;
}

.ambasador-closing-text {
    margin-top: 30px;
    color: #fff;
    font-family: 'Noto Sans', sans-serif;
    font-size: 15px;
    line-height: 1.6;
}

.ambasador-closing-text p {
    margin-bottom: 8px;
}

.ambasador-closing-text p:last-child {
    font-weight: 700;
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .ambasador-form-section {
        padding: 48px 40px;
    }

    .ambasador-section-title {
        font-size: 32px;
    }
}