/* Visszahívás kérő blokk stílusok */

.contact-left.callback-only:before { display: none !important; }

.szimetrik-callback-wrapper {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}

.szimetrik-callback-form {
    width: 100%;
}

/* Fő sor: bal + jobb oszlop */
.szimetrik-callback-form-row {
    display: flex;
    gap: 30px;
    align-items: stretch;
}

/* Bal oszlop: témakör — label fent, select alul (egy vonalban a submit gombbal) */
.szimetrik-callback-col-left {
    flex: 0 0 40%;
    max-width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Ha CF7 wpautop az egészet egy <p>-be csomagolja, akkor a <p> legyen a flex */
/* container, és AZ szétpakolja a label-t felül és a select-et alul. */
.szimetrik-callback-col-left > p {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    margin: 0;
}

/* Jobb oszlop: név + telefon + gomb */
/* flex-direction: column + margin-top:auto a submit-en → a gomb a jobb oszlop aljára */
/* kerül, így egy vonalba kerül a bal oszlop alján levő dropdown-nal. */
/* (space-between-et szándékosan nem használunk, mert CF7 extra <span>/<p>-t rak a form végére.) */
.szimetrik-callback-col-right {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Labelek — .booking-header h1-gyel azonos stílus */
.szimetrik-callback-col-left label,
.szimetrik-callback-input-group label {
    display: block;
    font-size: 1.1em;
    font-weight: 700;
    color: #2b2b2b;
    margin-bottom: 0.4em;
    line-height: 1.4;
}

@media (min-width: 992px) {
    .szimetrik-callback-col-left label,
    .szimetrik-callback-input-group label {
        width: 70%;
    }
}

/* Név + Telefon egymás mellett */
.szimetrik-callback-inputs-row {
    display: flex;
    gap: 20px;
    margin-bottom: 22px;
}

.szimetrik-callback-input-group {
    flex: 1;
}

/* Form elemek */
.szimetrik-form-control {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #ddd;
    font-size: 14px;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
    background: #fff;
    color: #333;
    font-family: inherit;
    height: 48px;
}

.szimetrik-form-control:focus {
    outline: none;
    border-color: #d51e25;
}

/* Csak a Név + Telefonszám inputok — szürke háttér (theme.css default), a tel is ugyanúgy nézzen ki, mint a text */
.szimetrik-callback-input-group input.szimetrik-form-control {
    background-color: #f0f3f7;
    border: 1px solid #ccc;
}

.szimetrik-callback-input-group input.szimetrik-form-control:hover {
    border: 1px solid #b9b9b9;
    border-top: 1px solid #a0a0a0;
}

.szimetrik-callback-input-group input.szimetrik-form-control:focus {
    border: 1px solid #999;
    border-top: 1px solid #666;
}

/* Név + Telefonszám label — halványabb szürke */
.szimetrik-callback-input-group label {
    color: #666;
}

/* Kék select dropdown */
.szimetrik-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #2c3e50;
    color: #fff;
    border: 2px solid #2c3e50;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 14px;
    padding-right: 40px;
    cursor: pointer;
}

.szimetrik-select:focus {
    outline: none;
    border-color: #1a2533;
}

.szimetrik-select option {
    background: #2c3e50;
    color: #fff;
}

/* Hibaüzenet */
.szimetrik-form-error {
    background: #f8d7da;
    color: #721c24;
    padding: 12px 15px;
    margin-bottom: 15px;
    border-left: 4px solid #d51e25;
    width: 100%;
}

/* Submit gomb - teljes szélesség a jobb oszlopban */
.szimetrik-callback-submit {
    background: #d51e25;
    color: white;
    border: none;
    padding: 14px 35px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    height: 48px;
    width: 100%;
}

.szimetrik-callback-submit:hover:not(:disabled) {
    background: #b5161f;
}

.szimetrik-callback-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Loader animáció */
.szimetrik-spinner {
    animation: rotate 2s linear infinite;
    width: 20px;
    height: 20px;
}

.szimetrik-spinner .path {
    stroke: white;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }

    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

/* Responsive */
@media (max-width: 991px) {
    .szimetrik-callback-form-row {
        flex-direction: column;
        gap: 20px;
    }

    .szimetrik-callback-col-left {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .szimetrik-callback-inputs-row {
        flex-direction: column;
        gap: 15px;
    }
}

/* ==================================================================== */
/* CF7 kompatibilitás — a WP Contact Form 7 által generált wrapperek és  */
/* az `inc/theme.css`-ben levő ütköző szabályok felülbírálása.            */
/* ==================================================================== */

/* CF7 span wrapper (minden mező köré rak egyet) legyen block + 100% szélesség */
.szimetrik-callback-wrapper .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.szimetrik-callback-wrapper .wpcf7-form-control-wrap > .wpcf7-form-control {
    width: 100%;
}

/* CF7 validation / response üzenetek stílusa, hogy illeszkedjen a design-hoz */
.szimetrik-callback-wrapper .wpcf7-form-control-wrap {
    position: relative;
}

.szimetrik-callback-wrapper .wpcf7-not-valid-tip {
    color: #d51e25;
    font-size: 12px;
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 2px;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.szimetrik-callback-wrapper .wpcf7 form .wpcf7-response-output {
    background: #f8d7da;
    color: #721c24;
    padding: 12px 15px;
    margin: 15px 0 0;
    border: none;
    border-left: 4px solid #d51e25;
    width: 100%;
    font-size: 13px;
}

.szimetrik-callback-wrapper .wpcf7 form.sent .wpcf7-response-output {
    background: #d4edda;
    color: #155724;
    border-left-color: #28a745;
}

.szimetrik-callback-wrapper .wpcf7 form.invalid .wpcf7-response-output,
.szimetrik-callback-wrapper .wpcf7 form.unaccepted .wpcf7-response-output,
.szimetrik-callback-wrapper .wpcf7 form.failed .wpcf7-response-output {
    background: #f8d7da;
    color: #721c24;
    border-left-color: #d51e25;
}

/* CF7 spinner rejtve — ne foglaljon saját flex-sort a jobb oszlopban, */
/* különben a submit nem a legalsó elem lesz és a dropdown-nal sem áll egy vonalban */
.szimetrik-callback-wrapper .wpcf7-spinner {
    display: none !important;
}

/* CF7 wpautop miatt <p> tageket generál a mezők/submit köré — margin 0 */
.szimetrik-callback-wrapper p {
    margin: 0;
}

/* A submit-ot (és ha CF7 <p>-be csomagolja, a wrapper <p>-t is) a jobb oszlop */
/* aljára toljuk, hogy egy vonalba kerüljön a témakör dropdown-nal */
.szimetrik-callback-wrapper .szimetrik-callback-col-right > .szimetrik-callback-submit,
.szimetrik-callback-wrapper .szimetrik-callback-col-right > p:last-child {
    margin-top: auto;
}

/* ---------------------------------------------------------------------- */
/* A submit TELJES SZÉLESSÉG fixálása.                                    */
/*                                                                         */
/* FONTOS: az `inc/theme.css` 675. sorában van egy általános                */
/*   input[type="submit"], input[type="button"] {                          */
/*       width: 100%; max-width: 15em; display: block; ... }               */
/* szabály. A `max-width: 15em` (~240px) vágja le a gombot, ezért nem lesz  */
/* teljes szélességű. Magasabb specifikusságú szelektorral felülírjuk.     */
/* ---------------------------------------------------------------------- */
.szimetrik-callback-wrapper input[type="submit"].szimetrik-callback-submit,
.szimetrik-callback-wrapper .szimetrik-callback-col-right .szimetrik-callback-submit {
    display: block;
    width: 100%;
    max-width: none;
    line-height: 1;
    box-sizing: border-box;
    background: #d51e25;
    color: #fff;
}

/* Ha CF7 <p>-be csomagolja a submit-ot, a <p>-re is rakni kell max-width: none-t, */
/* mert a theme.css `max-width: 15em`-je a szülőn is korlátozhatja a gombot */
.szimetrik-callback-wrapper .szimetrik-callback-col-right > p:last-child {
    width: 100%;
    max-width: none;
}