/* ============================================================
   TURNONLEARNING — HOMEPAGE SECTION 3
   MICROPHONE & AUDIO CHECK

   ΠΛΗΡΕΣ ΑΝΑΝΕΩΜΕΝΟ CSS

   - Κυματιστή ένωση με το προηγούμενο section
   - Responsive διάταξη δύο καρτών
   - Επιλογή μικροφώνου
   - Κουμπιά ηχογράφησης και ακρόασης
   - Ένδειξη ηχογράφησης
   - Μηνύματα διαφορετικών καταστάσεων
   - Πράσινο Success μετά το Approve
   - Βοήθεια και σημειώσεις ασφάλειας
   - Προσβασιμότητα

   Συμβατό με:
   data-audio-state
   data-audio-result="success"
   ============================================================ */


/* ============================================================
   01. ΚΕΝΤΡΙΚΗ ΕΝΟΤΗΤΑ
   ============================================================ */

.audio-check {
    --audio-background: #f7f9fd;
    --audio-white: #ffffff;

    --audio-title: #192b45;
    --audio-text: #64748b;
    --audio-muted: #8290a3;

    --audio-blue: #2563eb;
    --audio-blue-dark: #1d4ed8;
    --audio-blue-soft: #eff5ff;

    --audio-green: #167348;
    --audio-green-soft: #eef9f2;

    --audio-border: #e1e8f1;

    --audio-shadow:
        0 8px 30px rgba(24, 47, 79, 0.045);

    position: relative;
    isolation: isolate;
    z-index: 2;

    width: 100%;
    min-width: 0;

    margin-top: -70px;

    padding:
        clamp(135px, 12vw, 165px)
        22px
        clamp(48px, 6vw, 76px);

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 8% 15%,
            rgba(219, 234, 254, 0.34),
            transparent 48%
        ),
        radial-gradient(
            ellipse at 95% 95%,
            rgba(220, 245, 231, 0.30),
            transparent 48%
        ),
        var(--audio-background);

    color: var(--audio-title);
}


/* ============================================================
   02. ΚΥΜΑΤΙΣΤΗ ΕΝΩΣΗ SECTION 2 → SECTION 3
   ============================================================ */

/* Εναλλακτική καμπύλη για παλαιότερους browsers */

.audio-check {
    clip-path: polygon(
        0 42px,
        10% 29px,
        20% 25px,
        30% 31px,
        40% 39px,
        50% 40px,
        60% 29px,
        70% 24px,
        80% 28px,
        90% 37px,
        100% 38px,
        100% 100%,
        0 100%
    );
}

/* Ομαλή κυματιστή καμπύλη */

@supports (clip-path: shape(from 0 0, line to 100% 0, close)) {

    .audio-check {
        clip-path: shape(
            from 0% 42px,

            curve to 25% 28px
                with 8% 18px / 17% 18px,

            curve to 50% 40px
                with 33% 38px / 42% 55px,

            curve to 75% 25px
                with 58% 20px / 67% 15px,

            curve to 100% 38px
                with 83% 35px / 92% 52px,

            line to 100% 100%,
            line to 0% 100%,
            close
        );
    }
}


/* ============================================================
   03. BOX SIZING ΚΑΙ ΚΡΥΦΑ ΣΤΟΙΧΕΙΑ
   ============================================================ */

.audio-check,
.audio-check *,
.audio-check *::before,
.audio-check *::after {
    box-sizing: border-box;
}

.audio-check [hidden] {
    display: none !important;
}


/* ============================================================
   04. ΚΕΝΤΡΙΚΟ CONTAINER
   ============================================================ */

.audio-check__container {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 960px;

    margin-inline: auto;
}


/* ============================================================
   05. ΕΠΙΚΕΦΑΛΙΔΑ
   ============================================================ */

.audio-check__header {
    max-width: 720px;
    margin: 0 auto 30px;
    text-align: center;
}

.audio-check__eyebrow {
    margin: 0 0 10px;

    color: var(--audio-blue);

    font-size: 0.75rem;
    font-weight: 750;
    line-height: 1.5;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.audio-check__title {
    margin: 0;

    color: var(--audio-title);

    font-size: clamp(1.9rem, 3.2vw, 2.7rem);
    font-weight: 800;
    line-height: 1.18;

    letter-spacing: -0.035em;

    text-wrap: balance;
    overflow-wrap: anywhere;
}

.audio-check__description {
    max-width: 640px;
    margin: 14px auto 0;

    color: var(--audio-text);

    font-size: clamp(0.92rem, 1.2vw, 1rem);
    line-height: 1.7;
}

.audio-check__description p {
    margin: 0;
}

.audio-check__description p + p {
    margin-top: 8px;
}


/* ============================================================
   06. ΔΙΑΤΑΞΗ ΚΑΡΤΩΝ
   ============================================================ */

.audio-check__cards {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    align-items: stretch;
    gap: 18px;
}


/* ============================================================
   07. ΚΟΙΝΗ ΕΜΦΑΝΙΣΗ ΚΑΡΤΩΝ
   ============================================================ */

.audio-check__card {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 0;
    min-height: 0;

    padding: 25px 26px;

    border: 1px solid var(--audio-border);
    border-radius: 20px;

    background-color: var(--audio-white);

    box-shadow: var(--audio-shadow);

    transition:
        border-color 200ms ease,
        box-shadow 200ms ease;
}

.audio-check__card:hover {
    box-shadow:
        0 12px 34px rgba(24, 47, 79, 0.075);
}


/* ============================================================
   08. ΚΑΡΤΑ ΗΧΟΓΡΑΦΗΣΗΣ
   ============================================================ */

.audio-check__card--record {
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f4f8ff 100%
        );

    border-color: #dce7f7;
}


/* ============================================================
   09. ΚΑΡΤΑ ΑΚΡΟΑΣΗΣ
   ============================================================ */

.audio-check__card--listen {
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f3faf5 100%
        );

    border-color: #dcece1;
}


/* ============================================================
   10. ΕΙΚΟΝΙΔΙΑ ΑΠΟ DJANGO ADMIN
   ============================================================ */

.audio-check__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    margin-bottom: 14px;

    flex-shrink: 0;
}

.audio-check__icon img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* ============================================================
   11. ΤΙΤΛΟΙ ΚΑΡΤΩΝ
   ============================================================ */

.audio-check__card-title {
    margin: 0 0 8px;

    color: var(--audio-title);

    font-size: clamp(1.12rem, 1.7vw, 1.35rem);
    font-weight: 750;
    line-height: 1.35;

    letter-spacing: -0.02em;

    overflow-wrap: anywhere;
}


/* ============================================================
   12. ΠΕΡΙΓΡΑΦΕΣ ΚΑΡΤΩΝ
   ============================================================ */

.audio-check__card-description {
    margin: 0 0 17px;

    color: var(--audio-text);

    font-size: 0.88rem;
    line-height: 1.65;

    overflow-wrap: anywhere;
}

.audio-check__card-description p {
    margin: 0;
}

.audio-check__card-description p + p {
    margin-top: 7px;
}


/* ============================================================
   13. ΕΠΙΛΟΓΗ ΜΙΚΡΟΦΩΝΟΥ
   ============================================================ */

.audio-check__microphone {
    width: 100%;
    max-width: 100%;

    margin: 0 0 16px;

    text-align: left;
}

.audio-check__microphone-label {
    display: block;

    margin-bottom: 8px;

    color: #34475f;

    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.5;
}

.audio-check__microphone-select {
    display: block;

    width: 100%;
    min-width: 0;
    min-height: 46px;

    padding: 10px 42px 10px 14px;

    border: 1px solid #d5e0ee;
    border-radius: 12px;

    background-color: #ffffff;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 18px;

    color: #263b53;

    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.5;

    appearance: none;
    -webkit-appearance: none;

    cursor: pointer;

    box-shadow:
        0 2px 7px rgba(28, 68, 111, 0.035);

    transition:
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

.audio-check__microphone-select:hover:not(:disabled) {
    border-color: #93b8ec;
}

.audio-check__microphone-select:focus-visible {
    outline: none;

    border-color: var(--audio-blue);

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.12);
}

.audio-check__microphone-select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.audio-check__microphone-select option {
    color: #263b53;
    background-color: #ffffff;
}


/* ============================================================
   14. ΕΝΔΕΙΞΗ ΗΧΟΓΡΑΦΗΣΗΣ
   ============================================================ */

.audio-check__activity {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    width: 100%;
    height: 48px;

    margin: 0 0 16px;

    border: 1px solid #e1eaf7;
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.75);
}

.audio-check__activity span {
    display: block;

    width: 5px;
    height: 10px;

    border-radius: 8px;

    background-color: #b5c9e6;

    transform-origin: center;
}

.audio-check__activity span:nth-child(2),
.audio-check__activity span:nth-child(6) {
    height: 17px;
}

.audio-check__activity span:nth-child(3),
.audio-check__activity span:nth-child(5) {
    height: 24px;
}

.audio-check__activity span:nth-child(4) {
    height: 32px;
}


/* ============================================================
   15. ANIMATION ΚΑΤΑ ΤΗΝ ΗΧΟΓΡΑΦΗΣΗ
   ============================================================ */

.audio-check[data-audio-state="recording"]
.audio-check__activity span {
    background-color: var(--audio-blue);

    animation:
        audio-check-recording-pulse
        850ms ease-in-out
        infinite alternate;
}

.audio-check[data-audio-state="recording"]
.audio-check__activity span:nth-child(2n) {
    animation-delay: 180ms;
}

.audio-check[data-audio-state="recording"]
.audio-check__activity span:nth-child(3n) {
    animation-delay: 340ms;
}

@keyframes audio-check-recording-pulse {
    from {
        transform: scaleY(0.45);
    }

    to {
        transform: scaleY(1);
    }
}


/* ============================================================
   16. ΠΕΡΙΟΧΗ ΚΟΥΜΠΙΩΝ
   ============================================================ */

.audio-check__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    width: 100%;

    margin-top: auto;
}


/* ============================================================
   17. ΚΟΙΝΗ ΕΜΦΑΝΙΣΗ ΚΟΥΜΠΙΩΝ
   ============================================================ */

.audio-check__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 43px;
    max-width: 100%;

    padding: 10px 17px;

    border: 1px solid transparent;
    border-radius: 11px;

    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.4;

    text-align: center;

    white-space: normal;
    overflow-wrap: anywhere;

    cursor: pointer;

    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}


/* ============================================================
   18. ΚΥΡΙΟ ΚΟΥΜΠΙ
   ============================================================ */

.audio-check__button--primary {
    background-color: var(--audio-blue);
    color: #ffffff;

    box-shadow:
        0 4px 11px rgba(37, 99, 235, 0.14);
}

.audio-check__button--primary:hover:not(:disabled) {
    background-color: var(--audio-blue-dark);

    box-shadow:
        0 6px 15px rgba(37, 99, 235, 0.19);

    transform: translateY(-1px);
}


/* ============================================================
   19. ΔΕΥΤΕΡΕΥΟΝ ΚΟΥΜΠΙ
   ============================================================ */

.audio-check__button--secondary {
    background-color: #ffffff;

    border-color: #cbd9eb;

    color: #315684;
}

.audio-check__button--secondary:hover:not(:disabled) {
    background-color: #eef5ff;
    border-color: #a5bfe3;
}


/* ============================================================
   20. ΚΟΥΜΠΙ APPROVE
   ============================================================ */

.audio-check__button--confirm {
    background-color: #e7f6ec;

    border-color: #b5dec4;

    color: var(--audio-green);
}

.audio-check__button--confirm:hover:not(:disabled) {
    background-color: #d8f0e1;
    border-color: #8dc7a4;
}


/* ============================================================
   21. ΚΟΥΜΠΙΑ ΚΕΙΜΕΝΟΥ
   ============================================================ */

.audio-check__text-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 36px;
    max-width: 100%;

    padding: 7px 6px;

    border: 0;
    border-radius: 8px;

    background: transparent;
    color: #476b96;

    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.5;

    text-align: center;

    text-decoration: underline;
    text-underline-offset: 3px;

    white-space: normal;
    overflow-wrap: anywhere;

    cursor: pointer;

    transition:
        color 180ms ease,
        background-color 180ms ease;
}

.audio-check__card > .audio-check__text-button {
    margin-top: 10px;
}

.audio-check__text-button:hover:not(:disabled) {
    color: #1e4e8e;

    background-color:
        rgba(37, 99, 235, 0.055);
}


/* ============================================================
   22. ΑΠΕΝΕΡΓΟΠΟΙΗΜΕΝΑ ΚΟΥΜΠΙΑ
   ============================================================ */

.audio-check__button:disabled,
.audio-check__text-button:disabled {
    opacity: 0.45;

    cursor: not-allowed;

    box-shadow: none;
    transform: none;
}


/* ============================================================
   23. ΠΡΟΣΒΑΣΙΜΟΤΗΤΑ ΚΟΥΜΠΙΩΝ
   ============================================================ */

.audio-check__button:focus-visible,
.audio-check__text-button:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.45);
    outline-offset: 3px;
}


/* ============================================================
   24. ΠΕΡΙΟΧΗ ΜΗΝΥΜΑΤΩΝ
   ============================================================ */

.audio-check__feedback {
    width: 100%;
    max-width: 800px;

    margin: 20px auto 0;
}


/* ============================================================
   25. ΑΡΧΙΚΟ ΜΗΝΥΜΑ / RESET

   Απαλό γαλάζιο φόντο.
   Σκούρα μπορντό γράμματα.

   Εμφανίζεται όταν:
   data-audio-state="idle"

   Δεν χρησιμοποιείται για Success.
   ============================================================ */

.audio-check .audio-check__status {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 56px;

    margin: 0;
    padding: 14px 19px;

    border: 1px solid #c9dcf7;
    border-radius: 13px;

    background-color: #eef5ff;
    color: #7b244b;

    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1.65;

    text-align: center;
    overflow-wrap: anywhere;

    box-shadow:
        0 3px 12px rgba(37, 99, 235, 0.04);

    transition:
        background-color 200ms ease,
        border-color 200ms ease,
        color 200ms ease;
}


/* ============================================================
   26. ΑΝΑΜΟΝΗ ΑΔΕΙΑΣ ΜΙΚΡΟΦΩΝΟΥ
   ============================================================ */

.audio-check[data-audio-state="permission"]
.audio-check__status {
    background-color: #eef5ff;
    border-color: #c9dcf7;
    color: #345e9a;
}


/* ============================================================
   27. ΕΝΕΡΓΗ ΗΧΟΓΡΑΦΗΣΗ
   ============================================================ */

.audio-check[data-audio-state="recording"]
.audio-check__status {
    background-color: #fff7eb;
    border-color: #f4d8b1;
    color: #965016;
}


/* ============================================================
   28. ΠΡΟΕΤΟΙΜΑΣΙΑ ΗΧΟΓΡΑΦΗΣΗΣ
   ============================================================ */

.audio-check[data-audio-state="preparing"]
.audio-check__status {
    background-color: #eef5ff;
    border-color: #c9dcf7;
    color: #345e9a;
}


/* ============================================================
   29. ΗΧΟΓΡΑΦΗΣΗ ΕΤΟΙΜΗ
   ============================================================ */

.audio-check[data-audio-state="ready"]
.audio-check__status {
    background-color: #eef8ff;
    border-color: #c5e5fa;
    color: #285d88;
}


/* ============================================================
   30. ΑΝΑΠΑΡΑΓΩΓΗ ΗΧΟΥ
   ============================================================ */

.audio-check[data-audio-state="playing"]
.audio-check__status {
    background-color: #eef8ff;
    border-color: #c5e5fa;
    color: #285d88;
}


/* ============================================================
   31. ΟΛΟΚΛΗΡΩΣΗ ΑΚΡΟΑΣΗΣ
   ============================================================ */

.audio-check[data-audio-state="listened"]
.audio-check__status {
    background-color: #eef8ff;
    border-color: #c5e5fa;
    color: #285d88;
}


/* ============================================================
   32. SUCCESS — ΠΡΑΣΙΝΟ ΜΗΝΥΜΑ

   Ενεργοποιείται μετά το Approve.

   Το JavaScript ορίζει:
   data-audio-result="success"

   Το εργαλείο παραμένει λειτουργικά idle,
   αλλά το μήνυμα γίνεται πράσινο.

   Ο κανόνας έχει μεγαλύτερη εξειδίκευση
   από το βασικό μήνυμα.
   ============================================================ */

.audio-check[data-audio-result="success"]
.audio-check__status,

.audio-check[data-audio-state="approved"]
.audio-check__status {
    background-color: #eaf8ef;
    border-color: #b8e3c7;
    color: #17643b;

    font-weight: 650;

    box-shadow:
        0 4px 15px rgba(31, 139, 78, 0.055);
}


/* ============================================================
   33. ERROR — ΚΟΚΚΙΝΟ ΜΗΝΥΜΑ
   ============================================================ */

.audio-check[data-audio-state="error"]
.audio-check__status {
    background-color: #fff2f1;
    border-color: #f1c5c2;
    color: #a33d38;
}


/* ============================================================
   34. ΠΛΑΙΣΙΟ ΒΟΗΘΕΙΑΣ
   ============================================================ */

.audio-check__help:not([hidden]) {
    display: block;

    margin-top: 11px;
    padding: 14px 17px;

    border: 1px solid #dce7f5;
    border-left: 3px solid #6b9ed8;
    border-radius: 11px;

    background-color: #f8fbff;
    color: #425a74;

    font-size: 0.83rem;
    line-height: 1.7;

    text-align: left;
    overflow-wrap: anywhere;
}

.audio-check__help[hidden] {
    display: none !important;
}


/* ============================================================
   35. RECORD AGAIN / CANCEL
   ============================================================ */

.audio-check__feedback-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 8px 14px;

    margin-top: 10px;
}

.audio-check__feedback-actions
.audio-check__text-button {
    min-height: 36px;

    padding: 7px 11px;

    border-radius: 8px;

    font-size: 0.8rem;
}

.audio-check__feedback-actions
.audio-check__text-button:hover:not(:disabled) {
    background-color:
        rgba(37, 99, 235, 0.065);
}


/* ============================================================
   36. ΕΝΕΡΓΗ ΗΧΟΓΡΑΦΗΣΗ — CARD HIGHLIGHT
   ============================================================ */

.audio-check[data-audio-state="recording"]
.audio-check__card--record {
    border-color: #90b3eb;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.06),
        var(--audio-shadow);
}


/* ============================================================
   37. ΕΝΕΡΓΗ ΑΝΑΠΑΡΑΓΩΓΗ — CARD HIGHLIGHT
   ============================================================ */

.audio-check[data-audio-state="playing"]
.audio-check__card--listen {
    border-color: #9acdb0;

    box-shadow:
        0 0 0 3px rgba(23, 115, 72, 0.055),
        var(--audio-shadow);
}


/* ============================================================
   38. ΣΗΜΕΙΩΣΕΙΣ ΑΣΦΑΛΕΙΑΣ
   ============================================================ */

.audio-check__notes {
    display: flex;
    flex-wrap: wrap;

    gap: 14px 26px;

    margin-top: 22px;
    padding-top: 18px;

    border-top: 1px solid var(--audio-border);
}

.audio-check__note {
    flex: 1 1 280px;

    min-width: 0;

    color: var(--audio-text);

    font-size: 0.8rem;
    line-height: 1.7;

    overflow-wrap: anywhere;
}

.audio-check__note p {
    margin: 0;
}

.audio-check__note p + p {
    margin-top: 7px;
}


/* ============================================================
   39. ΜΗΝΥΜΑ ΧΩΡΙΣ JAVASCRIPT
   ============================================================ */

.audio-check__notice {
    margin: 15px 0 0;
    padding: 13px 17px;

    border: 1px solid #f1c5c2;
    border-radius: 11px;

    background-color: #fff2f1;
    color: #a33d38;

    font-size: 0.85rem;
    line-height: 1.65;
}


/* ============================================================
   40. TABLET — ΕΩΣ 900px
   ============================================================ */

@media (max-width: 900px) {

    .audio-check__container {
        max-width: 780px;
    }

    .audio-check__cards {
        gap: 15px;
    }

    .audio-check__card {
        padding: 22px 20px;
    }

    .audio-check__actions {
        gap: 8px;
    }

    .audio-check__button {
        min-height: 42px;
        padding: 10px 14px;
    }
}


/* ============================================================
   41. MOBILE — ΕΩΣ 700px
   ============================================================ */

@media (max-width: 700px) {

    .audio-check {
        margin-top: -45px;

        padding:
            115px
            16px
            48px;

        clip-path: polygon(
            0 28px,
            15% 18px,
            35% 24px,
            50% 23px,
            65% 17px,
            85% 20px,
            100% 28px,
            100% 100%,
            0 100%
        );
    }

    .audio-check__container {
        max-width: 100%;
    }

    .audio-check__header {
        margin-bottom: 25px;
    }

    .audio-check__title {
        font-size: clamp(1.75rem, 6.5vw, 2.25rem);
    }

    .audio-check__description {
        margin-top: 12px;
        font-size: 0.92rem;
    }

    .audio-check__cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .audio-check__card {
        padding: 22px 20px;
        border-radius: 17px;
    }

    .audio-check__icon {
        width: 50px;
        height: 50px;
        margin-bottom: 12px;
    }

    .audio-check__card-title {
        font-size: 1.2rem;
    }

    .audio-check__card-description {
        font-size: 0.86rem;
    }

    .audio-check__microphone {
        margin-bottom: 14px;
    }

    .audio-check__microphone-select {
        min-height: 45px;
        font-size: 0.86rem;
    }

    .audio-check__activity {
        height: 44px;
        margin-bottom: 14px;
    }

    .audio-check__feedback {
        margin-top: 17px;
    }

    .audio-check .audio-check__status {
        min-height: 54px;

        padding: 13px 15px;

        font-size: 0.84rem;
        border-radius: 12px;
    }

    .audio-check__notes {
        flex-direction: column;

        gap: 13px;

        margin-top: 19px;
        padding-top: 16px;
    }

    .audio-check__note {
        flex: auto;
    }
}


/* ============================================================
   42. MOBILE — ΟΜΑΛΗ ΚΥΜΑΤΙΣΤΗ ΚΑΜΠΥΛΗ
   ============================================================ */

@supports (clip-path: shape(from 0 0, line to 100% 0, close)) {

    @media (max-width: 700px) {

        .audio-check {
            clip-path: shape(
                from 0% 28px,

                curve to 50% 23px
                    with 17% 10px / 33% 42px,

                curve to 100% 28px
                    with 67% 8px / 83% 42px,

                line to 100% 100%,
                line to 0% 100%,
                close
            );
        }
    }
}


/* ============================================================
   43. ΠΟΛΥ ΜΙΚΡΕΣ ΟΘΟΝΕΣ — ΕΩΣ 380px
   ============================================================ */

@media (max-width: 380px) {

    .audio-check__card {
        padding: 19px 16px;
    }

    .audio-check__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .audio-check__button {
        width: 100%;
    }

    .audio-check__feedback-actions {
        gap: 6px;
    }
}


/* ============================================================
   44. ACCESSIBILITY — REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .audio-check__card,
    .audio-check__button,
    .audio-check__text-button,
    .audio-check__microphone-select,
    .audio-check__status {
        transition: none;
    }

    .audio-check__activity span {
        animation: none !important;
    }
}


/* ============================================================
   END — TURNONLEARNING SECTION 3
   ============================================================ */