/********************************************************************************************
 *                                                                                           *
 *   ██████╗░██╗░░░██╗░██████╗░█████╗░██████╗░███████╗░█████╗░████████╗██╗██╗░░░██╗███████╗  *
 *   ██╔══██╗██║░░░██║██╔════╝██╔══██╗██╔══██╗██╔════╝██╔══██╗╚══██╔══╝██║██║░░░██║██╔════╝  *
 *   ██████╔╝██║░░░██║╚█████╗░██║░░╚═╝██████╔╝█████╗░░███████║░░░██║░░░██║╚██╗░██╔╝█████╗░░  *
 *   ██╔══██╗██║░░░██║░╚═══██╗██║░░██╗██╔══██╗██╔══╝░░██╔══██║░░░██║░░░██║░╚████╔╝░██╔══╝░░  *
 *   ██║░░██║╚██████╔╝██████╔╝╚█████╔╝██║░░██║███████╗██║░░██║░░░██║░░░██║░░╚██╔╝░░███████╗  *
 *   ╚═╝░░╚═╝░╚═════╝░╚═════╝░░╚════╝░╚═╝░░╚═╝╚══════╝╚═╝░░╚═╝░░░╚═╝░░░╚═╝░░░╚═╝░░░╚══════╝  *
 *                                                                              © 2013-2026  *
 * ----------------------------------------------------------------------------------------- *
 * This is commercial software, only users who have purchased a valid license and accept     *
 * to the terms of the License Agreement can install and use this program.                   *
 * ----------------------------------------------------------------------------------------- *
 * www: https://ruscreative.com                                                              *
 * email: info@ruscreative.com                                                               *
 * @license       Commercial                                                                 *
 * @copyright (C) 2013-2026 RusCreative.com | All rights reserved.                           *
 ********************************************************************************************/
/**
 * mod_rcmforms preset: "latte" — approximates the Latte/Tailwind look used by the
 * latte-studio.ru site. Pure CSS-variable overrides over the neutral base wherever
 * possible; only minimal structural tweaks where the Tailwind feel differs (larger
 * radius, more generous spacing, softer borders).
 *
 * Scope: .rcmforms--preset-latte (added to the <form> by the Dispatcher).
 * NOTE: brand accent / exact spacing are placeholders, tuned 1:1 during migration.
 */

.rcmforms--preset-latte {
    /* Tailwind-ish tokens. Accent is a brand placeholder (Latte uses a warm tone). */
    --rcmf-accent: #b45309;            /* amber-700 placeholder brand accent */
    --rcmf-accent-text: #ffffff;
    --rcmf-radius: 0.75rem;            /* rounded-xl — Latte uses generous corners */
    --rcmf-control-bg: #ffffff;
    --rcmf-control-border: #d1d5db;    /* gray-300 */
    --rcmf-control-text: #111827;      /* gray-900 */
    --rcmf-label-text: #374151;        /* gray-700 */
    --rcmf-muted: #6b7280;             /* gray-500 */
    --rcmf-error: #dc2626;             /* red-600 */
    --rcmf-success: #16a34a;           /* green-600 */
    --rcmf-gap: 1.25rem;               /* roomier vertical rhythm */
    --rcmf-control-padding: 0.625rem 0.875rem;  /* py-2.5 px-3.5 */
    --rcmf-font-size: 1rem;

    /* Tailwind default sans stack. */
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* Tailwind-style focus ring (soft brand-tinted halo). */
.rcmforms--preset-latte .rcmforms__control:focus {
    outline: 0;
    border-color: var(--rcmf-accent);
    box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.2);
}

/* Slightly bolder labels and a pill-ish submit, matching the Latte feel. */
.rcmforms--preset-latte .rcmforms__label {
    font-weight: 600;
}

.rcmforms--preset-latte .rcmforms__submit {
    padding: 0.7rem 1.6rem;
}

/* P-11: Latte modals are opened exclusively by external triggers (CTA buttons,
 * tariff cards, the contact page). The module's built-in trigger <button>
 * (rendered at the `modals` position, outside the preset wrapper) is never used
 * here, so suppress it. This stylesheet only loads on Latte (preset=latte) pages. */
.rcmforms-trigger {
    display: none !important;
}

/* Modal-chrome parity with the original Latte design: the dialog is max-w-2xl
 * (42rem, was 32rem) and the header (title + desc) is larger and CENTERED. The
 * overlay carries no preset class (the preset sits on the inner <form>), so scope
 * via :has() on the contained Latte form. Matches latte-studio.ru exactly. */
.rcmforms-modal:has(form.rcmforms--preset-latte) .rcmforms-modal__dialog {
    width: min(42rem, calc(100vw - 2rem));
}
.rcmforms-modal:has(form.rcmforms--preset-latte) .rcmforms-modal__title {
    font-size: 1.5rem;          /* text-2xl (was 1.25em ≈ 20px) */
    text-align: center;
    padding-right: 0;           /* centered title needs no close-button gutter */
}
.rcmforms-modal:has(form.rcmforms--preset-latte) .rcmforms-modal__desc {
    text-align: center;
}

/* Terracotta range slider — mirrors the legacy `.slider-terracotta` (Latte theme):
 * slim rounded track, 20px round terracotta thumb with white ring + soft shadow.
 * Uses the theme's --terracotta/--latte HSL tokens with hex-ish HSL fallbacks so it
 * still renders if the tokens are absent. Overrides the base .rcmforms__control box. */
.rcmforms--preset-latte input[type="range"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 0.5rem;
    padding: 0;
    border: 0;
    border-radius: 0.5rem;
    background: hsl(var(--latte, 28 40% 90%));
    cursor: pointer;
}
.rcmforms--preset-latte input[type="range"]:focus {
    outline: 0;
    box-shadow: 0 0 0 3px hsl(var(--terracotta, 13 68% 62%) / 0.25);
}
.rcmforms--preset-latte input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: hsl(var(--terracotta, 13 68% 62%));
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px #0003;
}
.rcmforms--preset-latte input[type="range"]::-moz-range-thumb {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: hsl(var(--terracotta, 13 68% 62%));
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px #0003;
}
.rcmforms--preset-latte input[type="range"]::-moz-range-track {
    background: hsl(var(--latte, 28 40% 90%));
    height: 0.5rem;
    border-radius: 0.5rem;
}
/* Range live-value + marks tuned to the Latte feel. */
.rcmforms--preset-latte .rcmforms__range-value {
    display: block;
    margin-top: 0.5rem;
    font-weight: 600;
    color: hsl(var(--terracotta, 13 68% 62%));
}
.rcmforms--preset-latte .rcmforms__marks {
    display: flex;
    justify-content: space-between;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--rcmf-muted, #6b7280);
}

/* Shared success modal ("возвратка") — match the legacy success.php dialog:
 * wider box (max-w-2xl) on the cream `--background`, so the CircleCheck icon +
 * serif title + message + terracotta button read like the original. */
.rcmforms-success.rcmforms--preset-latte .rcmforms-success__dialog {
    width: min(42rem, calc(100vw - 2rem));
    background: hsl(var(--background, 45 36% 97%));
    border: 1px solid hsl(var(--border, 28 30% 88%));
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    /* The preset wrapper sets ui-sans-serif; the legacy success modal inherits the
     * site body font (Open Sans) + foreground colour. Restore both so the title
     * (serif via font-serif class), message and button read 1:1 with the original. */
    font-family: "Open Sans", ui-sans-serif, system-ui, sans-serif;
    color: hsl(var(--foreground, 25 20% 15%));
}

/* Consent checkbox parity: the original Latte checkbox is a 24px (w-6 h-6) box with
 * a terracotta check, not the tiny ~13px native default. Enlarge + brand-tint the
 * neutral .rcmforms__consent-input; min-width + flex-shrink:0 keep it square next to
 * the (often multi-line) consent label. */
.rcmforms--preset-latte .rcmforms__consent-input {
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
    flex-shrink: 0;
    accent-color: hsl(var(--terracotta, 13 68% 62%));
    cursor: pointer;
}

/* Submit: full-width terracotta CTA, matching the legacy Latte button. */
.rcmforms--preset-latte .rcmforms__submit {
    width: 100%;
    background: hsl(var(--terracotta, 13 68% 62%));
    color: #fff;
    border: 0;
    border-radius: 0.5rem;
    padding: 0.85rem 1.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter .2s ease, transform .2s ease;
}
.rcmforms--preset-latte .rcmforms__submit:hover { filter: brightness(0.96); transform: translateY(-1px); }