/*
Theme Name: Elahera Limited
Theme URI: https://elahera.co.uk/
Author: Elahera Care Team
Author URI: https://elahera.co.uk/
Description: Custom, high-performance WordPress theme for Elahera Limited domiciliary care services in Hackney and London.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: elahera
*/

/* @tailwind base;
@tailwind components;
@tailwind utilities; */


/* =========================================================
   Legal Pages
   Privacy Policy / Cookie Policy / Terms & Conditions
   ========================================================= */

.legal-page-content {
    color: rgba(20, 45, 45, 0.78);
    font-size: 1rem;
    line-height: 1.8;
}

.legal-page-content p {
    margin-bottom: 1.25rem;
}

.legal-page-content h2 {
    color: #123f3f;
    font-family: inherit;
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 800;
    margin-top: 2.75rem;
    margin-bottom: 1rem;
}

.legal-page-content h3 {
    color: #123f3f;
    font-family: inherit;
    font-size: 1.2rem;
    line-height: 1.4;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.legal-page-content > h2:first-child,
.legal-page-content > h3:first-child {
    margin-top: 0;
}

.legal-page-content ul,
.legal-page-content ol {
    margin: 1rem 0 1.5rem 1.5rem;
    padding-left: 1rem;
}

.legal-page-content ul {
    list-style-type: disc;
}

.legal-page-content ol {
    list-style-type: decimal;
}

.legal-page-content li {
    margin-bottom: 0.5rem;
    padding-left: 0.25rem;
}

.legal-page-content a {
    color: #168c8c;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
}

.legal-page-content a:hover {
    color: #123f3f;
}

.legal-page-content strong {
    color: #123f3f;
    font-weight: 700;
}

.legal-page-content hr {
    border: 0;
    border-top: 1px solid rgba(22, 140, 140, 0.12);
    margin: 2.5rem 0;
}

.legal-page-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
}

.legal-page-content th,
.legal-page-content td {
    border: 1px solid rgba(22, 140, 140, 0.15);
    padding: 0.75rem 1rem;
    text-align: left;
}

.legal-page-content th {
    background: #f5f0e8;
    color: #123f3f;
    font-weight: 700;
}

.legal-page-content blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid #168c8c;
    background: #f5f0e8;
    border-radius: 0 0.75rem 0.75rem 0;
}

@media (max-width: 768px) {

    .legal-page-content {
        font-size: 0.95rem;
        line-height: 1.75;
    }

    .legal-page-content h2 {
        font-size: 1.3rem;
        margin-top: 2.25rem;
    }

    .legal-page-content h3 {
        font-size: 1.1rem;
    }

    .legal-page-content ul,
    .legal-page-content ol {
        margin-left: 1rem;
        padding-left: 0.75rem;
    }

    .legal-page-content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* =========================================================
   CF7 - Care Enquiry Form
   ========================================================= */

.wpcf7,
.wpcf7 form {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* CF7 generated wrappers */
.wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* Prevent CF7 controls from overflowing their grid columns */
.wpcf7-form-control {
    box-sizing: border-box;
}

/* Inputs, selects and textarea */
.wpcf7 form input[type="text"],
.wpcf7 form input[type="email"],
.wpcf7 form input[type="tel"],
.wpcf7 form select,
.wpcf7 form textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Input heights */
.wpcf7 form input[type="text"],
.wpcf7 form input[type="email"],
.wpcf7 form input[type="tel"],
.wpcf7 form select {
    min-height: 50px;
}

/* Select fields */
.wpcf7 form select {
    min-width: 0 !important;
    padding-left: 0.75rem !important;
    padding-right: 1.5rem !important;
}

/* Care Type specifically */
.wpcf7 form select.care-type-select {
    min-width: 0 !important;
    width: 100% !important;
}

/* Textarea */
.wpcf7 form textarea {
    min-height: 72px;
    resize: none;
}

/* Make grid columns shrink correctly */
.wpcf7 form .grid > div {
    min-width: 0;
}

/* Acceptance / privacy checkbox */
.wpcf7 form .wpcf7-acceptance {
    display: block;
    width: 100%;
}

.wpcf7 form .wpcf7-acceptance .wpcf7-list-item {
    margin: 0;
}

.wpcf7 form .wpcf7-acceptance label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.wpcf7 form .wpcf7-acceptance input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 0.2rem;
}

/* Submit button */
.wpcf7 form input[type="submit"] {
    width: 100%;
    min-height: 56px;
    border: 0;
    cursor: pointer;
    box-sizing: border-box;
}

/* Validation */
.wpcf7 form .wpcf7-not-valid-tip {
    font-size: 0.75rem;
    line-height: 1.3;
    margin-top: 0.35rem;
}

/* Response message */
.wpcf7 form .wpcf7-response-output {
    margin: 1rem 0 0;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
}

/* Hide CF7 spinner */
.wpcf7 form .wpcf7-spinner {
    display: none;
}

/* Mobile */
@media (max-width: 767px) {
    .wpcf7 form .grid {
        width: 100%;
    }
}

/* =========================================================
   CF7 - Care Enquiry Success Animation
   ========================================================= */

.elahera-success {
    width: 100%;
    text-align: center;
    padding: 2rem 1rem 1rem;
    box-sizing: border-box;

    opacity: 0;
    transform: translateY(10px);
}

.elahera-success.show {
    animation: elahera-success-content 500ms ease-out forwards;
}

/* =========================================================
   Success Icon
   ========================================================= */

.elahera-success-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 1.25rem;
}

.elahera-success-icon svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Circle */

.elahera-success-circle {
    fill: none;
    stroke: #168c8c;
    stroke-width: 5;

    stroke-dasharray: 277;
    stroke-dashoffset: 277;

    transform-origin: center;
    transform: rotate(-90deg);

    animation:
        elahera-circle-draw 700ms
        cubic-bezier(0.65, 0, 0.35, 1)
        forwards;
}

/* Check */

.elahera-success-check {
    fill: none;
    stroke: #168c8c;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;

    stroke-dasharray: 70;
    stroke-dashoffset: 70;

    animation:
        elahera-check-draw 450ms
        cubic-bezier(0.65, 0, 0.35, 1)
        550ms
        forwards;
}

/* =========================================================
   Text
   ========================================================= */

.elahera-success-title {
    margin: 0 0 0.5rem;

    color: #123f3f;

    font-family: inherit;
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 800;

    opacity: 0;
    transform: translateY(8px);

    animation:
        elahera-success-text 450ms
        ease-out
        850ms
        forwards;
}

.elahera-success-text {
    max-width: 420px;
    margin: 0 auto;

    color: rgba(20, 45, 45, 0.65);

    font-size: 1rem;
    line-height: 1.6;

    opacity: 0;
    transform: translateY(8px);

    animation:
        elahera-success-text 450ms
        ease-out
        950ms
        forwards;
}

/* =========================================================
   Animations
   ========================================================= */

@keyframes elahera-circle-draw {

    0% {
        stroke-dashoffset: 277;
        transform: rotate(-90deg) scale(0.8);
        opacity: 0;
    }

    60% {
        opacity: 1;
    }

    100% {
        stroke-dashoffset: 0;
        transform: rotate(-90deg) scale(1);
        opacity: 1;
    }
}

@keyframes elahera-check-draw {

    0% {
        stroke-dashoffset: 70;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes elahera-success-content {

    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes elahera-success-text {

    0% {
        opacity: 0;
        transform: translateY(8px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   Reduced Motion
   ========================================================= */

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

    .elahera-success,
    .elahera-success-circle,
    .elahera-success-check,
    .elahera-success-title,
    .elahera-success-text {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        stroke-dashoffset: 0 !important;
    }
}

/* =========================================================
   Job Application - Consent Controlled Submit Button
   ========================================================= */

#application-form .job-submit {
    width: 100%;
    min-height: 56px;
    border: 0;
    border-radius: 0.75rem;
    box-sizing: border-box;
    cursor: pointer;

    background: #f3d18f;
    color: #ffffff;

    font-weight: 700;
    font-size: 1rem;

    box-shadow: none;

    opacity: 0.7;

    transition:
        background-color 0.25s ease,
        opacity 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}


/* Active state after consent is checked */
#application-form .job-submit:not(:disabled) {
    background: #f2ad20;
    opacity: 1;
    cursor: pointer;

    box-shadow:
        0 10px 24px rgba(242, 173, 32, 0.25);
}


/* Hover only when active */
#application-form .job-submit:not(:disabled):hover {
    background: #e9a313;
    transform: translateY(-1px);

    box-shadow:
        0 12px 28px rgba(242, 173, 32, 0.30);
}


/* Disabled state */
#application-form .job-submit:disabled {
    background: #f3d18f;
    opacity: 0.7;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* =========================================================
   LEGAL PAGES
   Privacy Policy / Cookie Policy / Terms & Conditions
   ========================================================= */

.legal-page-content {
    color: rgba(20, 45, 45, 0.78);
    font-size: 1rem;
    line-height: 1.8;
}

.legal-page-content p {
    margin-bottom: 1.25rem;
}

.legal-page-content h2 {
    color: #123f3f;
    font-family: inherit;
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 800;
    margin-top: 2.75rem;
    margin-bottom: 1rem;
}

.legal-page-content h3 {
    color: #123f3f;
    font-family: inherit;
    font-size: 1.2rem;
    line-height: 1.4;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.legal-page-content > h2:first-child,
.legal-page-content > h3:first-child {
    margin-top: 0;
}

.legal-page-content ul,
.legal-page-content ol {
    margin: 1rem 0 1.5rem 1.5rem;
    padding-left: 1rem;
}

.legal-page-content ul {
    list-style-type: disc;
}

.legal-page-content ol {
    list-style-type: decimal;
}

.legal-page-content li {
    margin-bottom: 0.5rem;
    padding-left: 0.25rem;
}

.legal-page-content a {
    color: #168c8c;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
}

.legal-page-content a:hover {
    color: #123f3f;
}

.legal-page-content strong {
    color: #123f3f;
    font-weight: 700;
}

.legal-page-content hr {
    border: 0;
    border-top: 1px solid rgba(22, 140, 140, 0.12);
    margin: 2.5rem 0;
}

.legal-page-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
}

.legal-page-content th,
.legal-page-content td {
    border: 1px solid rgba(22, 140, 140, 0.15);
    padding: 0.75rem 1rem;
    text-align: left;
}

.legal-page-content th {
    background: #f5f0e8;
    color: #123f3f;
    font-weight: 700;
}

.legal-page-content blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid #168c8c;
    background: #f5f0e8;
    border-radius: 0 0.75rem 0.75rem 0;
}


/* =========================================================
   LEGAL PAGES - MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .legal-page-content {
        font-size: 0.95rem;
        line-height: 1.75;
    }

    .legal-page-content h2 {
        font-size: 1.3rem;
        margin-top: 2.25rem;
    }

    .legal-page-content h3 {
        font-size: 1.1rem;
    }

    .legal-page-content ul,
    .legal-page-content ol {
        margin-left: 1rem;
        padding-left: 0.75rem;
    }

    .legal-page-content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}


/* =========================================================
   CF7 - GENERAL FORM STYLING
   ========================================================= */

.wpcf7,
.wpcf7 form {
    width: 100%;
    margin: 0;
    padding: 0;
}


/* CF7 generated wrappers */

.wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}


/* Prevent CF7 controls from overflowing */

.wpcf7-form-control {
    box-sizing: border-box;
}


/* =========================================================
   INPUTS / SELECTS / TEXTAREA
   ========================================================= */

.wpcf7 form input[type="text"],
.wpcf7 form input[type="email"],
.wpcf7 form input[type="tel"],
.wpcf7 form select,
.wpcf7 form textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}


/* Input heights */

.wpcf7 form input[type="text"],
.wpcf7 form input[type="email"],
.wpcf7 form input[type="tel"],
.wpcf7 form select {
    min-height: 50px;
}


/* Select fields */

.wpcf7 form select {
    min-width: 0 !important;
    padding-left: 0.75rem !important;
    padding-right: 1.5rem !important;
}


/* Care Type specifically */

.wpcf7 form select.care-type-select {
    min-width: 0 !important;
    width: 100% !important;
}


/* Textarea */

.wpcf7 form textarea {
    min-height: 72px;
    resize: none;
}


/* Make grid columns shrink correctly */

.wpcf7 form .grid > div {
    min-width: 0;
}


/* =========================================================
   ACCEPTANCE / PRIVACY CHECKBOX
   ========================================================= */

.wpcf7 form .wpcf7-acceptance {
    display: block;
    width: 100%;
}

.wpcf7 form .wpcf7-acceptance .wpcf7-list-item {
    margin: 0;
}

.wpcf7 form .wpcf7-acceptance label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.wpcf7 form .wpcf7-acceptance input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 0.2rem;
}


/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

.wpcf7 form input[type="submit"] {
    width: 100%;
    min-height: 56px;
    border: 0;
    cursor: pointer;
    box-sizing: border-box;
}


/* =========================================================
   VALIDATION
   ========================================================= */

.wpcf7 form .wpcf7-not-valid-tip {
    font-size: 0.75rem;
    line-height: 1.3;
    margin-top: 0.35rem;
}


/* =========================================================
   CF7 RESPONSE MESSAGE
   ========================================================= */

.wpcf7 form .wpcf7-response-output {
    margin: 1rem 0 0;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
}


/* Hide CF7 spinner */

.wpcf7 form .wpcf7-spinner {
    display: none;
}


/* =========================================================
   CF7 MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .wpcf7 form .grid {
        width: 100%;
    }
}


/* =========================================================
   CARE ENQUIRY - SUCCESS ANIMATION
   =========================================================
   
   This is intentionally kept compatible with the
   existing working Care Enquiry JavaScript.
   ========================================================= */

.elahera-success {
    width: 100%;
    text-align: center;
    padding: 2rem 1rem 1rem;
    box-sizing: border-box;

    opacity: 0;
    transform: translateY(10px);
}

.elahera-success.show {
    animation:
        elahera-success-content
        500ms
        ease-out
        forwards;
}


/* =========================================================
   SUCCESS ICON
   ========================================================= */

.elahera-success-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 1.25rem;
}

.elahera-success-icon svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}


/* =========================================================
   SUCCESS CIRCLE
   ========================================================= */

.elahera-success-circle {
    fill: none;

    stroke: #168c8c;

    stroke-width: 5;

    stroke-dasharray: 277;
    stroke-dashoffset: 277;

    transform-origin: center;
    transform: rotate(-90deg);

    animation:
        elahera-circle-draw
        700ms
        cubic-bezier(0.65, 0, 0.35, 1)
        forwards;
}


/* =========================================================
   SUCCESS CHECK
   ========================================================= */

.elahera-success-check {
    fill: none;

    stroke: #168c8c;

    stroke-width: 6;

    stroke-linecap: round;
    stroke-linejoin: round;

    stroke-dasharray: 70;
    stroke-dashoffset: 70;

    animation:
        elahera-check-draw
        450ms
        cubic-bezier(0.65, 0, 0.35, 1)
        550ms
        forwards;
}


/* =========================================================
   SUCCESS TITLE
   ========================================================= */

.elahera-success-title {
    margin: 0 0 0.5rem;

    color: #123f3f;

    font-family: inherit;

    font-size: 1.5rem;
    line-height: 1.3;

    font-weight: 800;

    opacity: 0;
    transform: translateY(8px);

    animation:
        elahera-success-text
        450ms
        ease-out
        850ms
        forwards;
}


/* =========================================================
   SUCCESS DESCRIPTION
   ========================================================= */

.elahera-success-text {
    max-width: 420px;

    margin: 0 auto;

    color: rgba(20, 45, 45, 0.65);

    font-size: 1rem;
    line-height: 1.6;

    opacity: 0;
    transform: translateY(8px);

    animation:
        elahera-success-text
        450ms
        ease-out
        950ms
        forwards;
}


/* =========================================================
   CARE SUCCESS ANIMATIONS
   ========================================================= */

@keyframes elahera-circle-draw {

    0% {
        stroke-dashoffset: 277;
        transform: rotate(-90deg) scale(0.8);
        opacity: 0;
    }

    60% {
        opacity: 1;
    }

    100% {
        stroke-dashoffset: 0;
        transform: rotate(-90deg) scale(1);
        opacity: 1;
    }
}


@keyframes elahera-check-draw {

    0% {
        stroke-dashoffset: 70;
    }

    100% {
        stroke-dashoffset: 0;
    }
}


@keyframes elahera-success-content {

    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes elahera-success-text {

    0% {
        opacity: 0;
        transform: translateY(8px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   JOB APPLICATION - CONSENT CONTROLLED SUBMIT BUTTON
   ========================================================= */

#application-form .job-submit {
    width: 100%;

    min-height: 56px;

    border: 0;

    border-radius: 0.75rem;

    box-sizing: border-box;

    cursor: pointer;

    background: #f3d18f;

    color: #ffffff;

    font-weight: 700;

    font-size: 1rem;

    box-shadow: none;

    opacity: 0.7;

    transition:
        background-color 0.25s ease,
        opacity 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}


/* Active state after consent is checked */

#application-form .job-submit:not(:disabled) {

    background: #f2ad20;

    opacity: 1;

    cursor: pointer;

    box-shadow:
        0 10px 24px rgba(242, 173, 32, 0.25);
}


/* Hover only when active */

#application-form .job-submit:not(:disabled):hover {

    background: #e9a313;

    transform: translateY(-1px);

    box-shadow:
        0 12px 28px rgba(242, 173, 32, 0.30);
}


/* Disabled state */

#application-form .job-submit:disabled {

    background: #f3d18f;

    opacity: 0.7;

    cursor: not-allowed;

    box-shadow: none;

    transform: none;
}


/* =========================================================
   JOB APPLICATION SUCCESS SCREEN
   =========================================================
   
   IMPORTANT:
   This is intentionally separate from .elahera-success.
   
   The Job Application success element is STATIC HTML
   inside page-join-our-team.php.
   
   JavaScript only adds:
   
       .is-visible
       .show
   
   after CF7 successfully sends the application.
   ========================================================= */

.job-application-success {

    display: none;

    width: 100%;

    text-align: center;

    padding: 3rem 1rem;

    box-sizing: border-box;
}


/* Show the success container */

.job-application-success.is-visible {

    display: block;
}


/* =========================================================
   JOB SUCCESS ICON
   ========================================================= */

.job-application-success .elahera-success-icon {

    width: 90px;

    height: 90px;

    margin: 0 auto 1.25rem;

    opacity: 0;

    transform: translateY(10px);
}


/* Icon entrance */

.job-application-success.show
.elahera-success-icon {

    animation:
        elahera-job-success-content
        500ms
        ease-out
        forwards;
}


/* SVG */

.job-application-success
.elahera-success-icon svg {

    width: 100%;

    height: 100%;

    overflow: visible;
}


/* =========================================================
   JOB SUCCESS CIRCLE
   ========================================================= */

.job-application-success
.elahera-success-circle {

    fill: none;

    stroke: #168c8c;

    stroke-width: 5;

    stroke-dasharray: 277;

    stroke-dashoffset: 277;

    transform-origin: center;

    transform: rotate(-90deg);
}


/* Circle animation */

.job-application-success.show
.elahera-success-circle {

    animation:
        elahera-job-circle-draw
        700ms
        cubic-bezier(0.65, 0, 0.35, 1)
        forwards;
}


/* =========================================================
   JOB SUCCESS CHECK
   ========================================================= */

.job-application-success
.elahera-success-check {

    fill: none;

    stroke: #168c8c;

    stroke-width: 6;

    stroke-linecap: round;

    stroke-linejoin: round;

    stroke-dasharray: 70;

    stroke-dashoffset: 70;
}


/* Check animation */

.job-application-success.show
.elahera-success-check {

    animation:
        elahera-job-check-draw
        450ms
        cubic-bezier(0.65, 0, 0.35, 1)
        550ms
        forwards;
}


/* =========================================================
   JOB SUCCESS TITLE
   ========================================================= */

.job-application-success
.elahera-success-title {

    margin: 0 0 0.5rem;

    color: #123f3f;

    font-family: inherit;

    font-size: 1.5rem;

    line-height: 1.3;

    font-weight: 800;

    opacity: 0;

    transform: translateY(8px);
}


/* Title animation */

.job-application-success.show
.elahera-success-title {

    animation:
        elahera-job-success-text
        450ms
        ease-out
        850ms
        forwards;
}


/* =========================================================
   JOB SUCCESS DESCRIPTION
   ========================================================= */

.job-application-success
.elahera-success-text {

    max-width: 420px;

    margin: 0 auto;

    color: rgba(20, 45, 45, 0.65);

    font-size: 1rem;

    line-height: 1.6;

    opacity: 0;

    transform: translateY(8px);
}


/* Text animation */

.job-application-success.show
.elahera-success-text {

    animation:
        elahera-job-success-text
        450ms
        ease-out
        950ms
        forwards;
}


/* =========================================================
   JOB APPLICATION SUCCESS ANIMATIONS
   ========================================================= */

@keyframes elahera-job-circle-draw {

    0% {

        stroke-dashoffset: 277;

        transform:
            rotate(-90deg)
            scale(0.8);

        opacity: 0;
    }

    60% {

        opacity: 1;
    }

    100% {

        stroke-dashoffset: 0;

        transform:
            rotate(-90deg)
            scale(1);

        opacity: 1;
    }
}


@keyframes elahera-job-check-draw {

    0% {

        stroke-dashoffset: 70;
    }

    100% {

        stroke-dashoffset: 0;
    }
}


@keyframes elahera-job-success-content {

    0% {

        opacity: 0;

        transform:
            translateY(10px);
    }

    100% {

        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes elahera-job-success-text {

    0% {

        opacity: 0;

        transform:
            translateY(8px);
    }

    100% {

        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    /* Care Enquiry */

    .elahera-success,
    .elahera-success-circle,
    .elahera-success-check,
    .elahera-success-title,
    .elahera-success-text {

        animation: none !important;

        opacity: 1 !important;

        transform: none !important;

        stroke-dashoffset: 0 !important;
    }


    /* Job Application */

    .job-application-success,
    .job-application-success
    .elahera-success-icon,
    .job-application-success
    .elahera-success-circle,
    .job-application-success
    .elahera-success-check,
    .job-application-success
    .elahera-success-title,
    .job-application-success
    .elahera-success-text {

        animation: none !important;

        opacity: 1 !important;

        transform: none !important;

        stroke-dashoffset: 0 !important;
    }
}


/* =========================================================
   JOB APPLICATION - MOBILE SUCCESS SCREEN
   ========================================================= */

@media (max-width: 767px) {

    .job-application-success {

        padding:
            2.5rem
            0.75rem
            2rem;
    }


    .job-application-success
    .elahera-success-icon {

        width: 78px;

        height: 78px;

        margin-bottom: 1rem;
    }


    .job-application-success
    .elahera-success-title {

        font-size: 1.3rem;
    }


    .job-application-success
    .elahera-success-text {

        font-size: 0.95rem;

        line-height: 1.55;

        max-width: 340px;
    }
}
    padding: 2rem 1rem 1rem;
    box-sizing: border-box;

    opacity: 0;
    transform: translateY(10px);
}

.elahera-success.show {
    animation: elahera-success-content 500ms ease-out forwards;
}


/* =========================================================
   Success Icon
   ========================================================= */

.elahera-success-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 1.25rem;
}

.elahera-success-icon svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}


/* =========================================================
   Circle
   ========================================================= */

.elahera-success-circle {
    fill: none;
    stroke: #168c8c;
    stroke-width: 5;

    stroke-dasharray: 277;
    stroke-dashoffset: 277;

    transform-origin: center;
    transform: rotate(-90deg);

    animation:
        elahera-circle-draw 700ms
        cubic-bezier(0.65, 0, 0.35, 1)
        forwards;
}


/* =========================================================
   Check
   ========================================================= */

.elahera-success-check {
    fill: none;
    stroke: #168c8c;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;

    stroke-dasharray: 70;
    stroke-dashoffset: 70;

    animation:
        elahera-check-draw 450ms
        cubic-bezier(0.65, 0, 0.35, 1)
        550ms
        forwards;
}


/* =========================================================
   Success Title
   ========================================================= */

.elahera-success-title {
    margin: 0 0 0.5rem;

    color: #123f3f;

    font-family: inherit;
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 800;

    opacity: 0;
    transform: translateY(8px);

    animation:
        elahera-success-text 450ms
        ease-out
        850ms
        forwards;
}


/* =========================================================
   Success Description
   ========================================================= */

.elahera-success-text {
    max-width: 420px;
    margin: 0 auto;

    color: rgba(20, 45, 45, 0.65);

    font-size: 1rem;
    line-height: 1.6;

    opacity: 0;
    transform: translateY(8px);

    animation:
        elahera-success-text 450ms
        ease-out
        950ms
        forwards;
}


/* =========================================================
   Animations
   ========================================================= */

@keyframes elahera-circle-draw {

    0% {
        stroke-dashoffset: 277;
        transform: rotate(-90deg) scale(0.8);
        opacity: 0;
    }

    60% {
        opacity: 1;
    }

    100% {
        stroke-dashoffset: 0;
        transform: rotate(-90deg) scale(1);
        opacity: 1;
    }
}


@keyframes elahera-check-draw {

    0% {
        stroke-dashoffset: 70;
    }

    100% {
        stroke-dashoffset: 0;
    }
}


@keyframes elahera-success-content {

    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes elahera-success-text {

    0% {
        opacity: 0;
        transform: translateY(8px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   Reduced Motion
   ========================================================= */

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

    .elahera-success,
    .elahera-success-circle,
    .elahera-success-check,
    .elahera-success-title,
    .elahera-success-text {

        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        stroke-dashoffset: 0 !important;
    }
}
/* =========================================================
   JOB APPLICATION SUCCESS - INITIAL STATE
   ========================================================= */

#job-application-success {
    display: none !important;
    width: 100%;
    text-align: center;
    padding: 3rem 1rem;
    box-sizing: border-box;
}


/* =========================================================
   JOB APPLICATION SUCCESS - VISIBLE STATE
   ========================================================= */

#job-application-success.show {
    display: block !important;
}


/* =========================================================
   SUCCESS ICON
   ========================================================= */

#job-application-success .elahera-success-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 1.25rem;

    opacity: 0;
    transform: translateY(10px);
}


#job-application-success.show
.elahera-success-icon {
    animation:
        elahera-job-success-content
        500ms
        ease-out
        forwards;
}


/* =========================================================
   SUCCESS CIRCLE
   ========================================================= */

#job-application-success .elahera-success-circle {
    fill: none;
    stroke: #168c8c;
    stroke-width: 5;

    stroke-dasharray: 277;
    stroke-dashoffset: 277;

    transform-origin: center;
    transform: rotate(-90deg);
}


#job-application-success.show
.elahera-success-circle {
    animation:
        elahera-job-circle-draw
        700ms
        cubic-bezier(0.65, 0, 0.35, 1)
        forwards;
}


/* =========================================================
   SUCCESS CHECK
   ========================================================= */

#job-application-success .elahera-success-check {
    fill: none;
    stroke: #168c8c;
    stroke-width: 6;

    stroke-linecap: round;
    stroke-linejoin: round;

    stroke-dasharray: 70;
    stroke-dashoffset: 70;
}


#job-application-success.show
.elahera-success-check {
    animation:
        elahera-job-check-draw
        450ms
        cubic-bezier(0.65, 0, 0.35, 1)
        550ms
        forwards;
}


/* =========================================================
   SUCCESS TITLE
   ========================================================= */

#job-application-success .elahera-success-title {
    margin: 0 0 0.5rem;

    color: #123f3f;

    font-family: inherit;

    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 800;

    opacity: 0;
    transform: translateY(8px);
}


#job-application-success.show
.elahera-success-title {
    animation:
        elahera-job-success-text
        450ms
        ease-out
        850ms
        forwards;
}


/* =========================================================
   SUCCESS DESCRIPTION
   ========================================================= */

#job-application-success .elahera-success-text {
    max-width: 420px;
    margin: 0 auto;

    color: rgba(20, 45, 45, 0.65);

    font-size: 1rem;
    line-height: 1.6;

    opacity: 0;
    transform: translateY(8px);
}


#job-application-success.show
.elahera-success-text {
    animation:
        elahera-job-success-text
        450ms
        ease-out
        950ms
        forwards;
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes elahera-job-circle-draw {

    from {
        stroke-dashoffset: 277;
    }

    to {
        stroke-dashoffset: 0;
    }

}


@keyframes elahera-job-check-draw {

    from {
        stroke-dashoffset: 70;
    }

    to {
        stroke-dashoffset: 0;
    }

}


@keyframes elahera-job-success-content {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes elahera-job-success-text {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}