/*
 * CODSHIPX_READINESS_SAFE_LIQUID_R7R3R1
 *
 * Visual-only hardening for the already-working R7-R2 React bundle.
 * No JS, API, scoring, KYC, PRO or Farder behavior is changed here.
 */

/* ---------------------------------------------------------
   Result card layout
--------------------------------------------------------- */

.relative.grid:has(.cx-readiness-liquid-gauge) {
    grid-template-columns: 190px minmax(0, 1fr) !important;
    gap: 38px !important;
    align-items: center !important;
}

.flex:has(> .cx-readiness-liquid-gauge) {
    justify-content: flex-start !important;
    align-items: center !important;
}


/* ---------------------------------------------------------
   Liquid score gauge
--------------------------------------------------------- */

.cx-readiness-liquid-gauge {
    position: relative !important;

    width: 190px !important;
    height: 190px !important;

    min-width: 190px !important;
    min-height: 190px !important;

    flex: 0 0 190px !important;

    border-radius: 9999px !important;
    overflow: hidden !important;

    isolation: isolate;

    box-shadow:
        inset 0 0 34px rgba(0, 0, 0, .30),
        0 14px 40px rgba(34, 197, 94, .09) !important;
}


/*
 * R7-R2 inline calculation becomes 100% for a 90/90 score.
 * Limit liquid body to 94% so the moving water surface stays visible.
 */
.cx-readiness-liquid-gauge
> .absolute.left-0.right-0.bottom-0 {
    max-height: 94% !important;

    transition:
        height 1.55s cubic-bezier(.16, 1, .3, 1) !important;
}


/* ---------------------------------------------------------
   Water surface waves
--------------------------------------------------------- */

.cx-readiness-liquid-wave-one,
.cx-readiness-liquid-wave-two {
    position: absolute !important;

    left: 50% !important;

    aspect-ratio: 1 / 1 !important;

    transform-origin: center !important;

    pointer-events: none !important;
}

.cx-readiness-liquid-wave-one {
    top: -50px !important;

    width: 260% !important;

    border-radius: 43% !important;
}

.cx-readiness-liquid-wave-two {
    top: -40px !important;

    width: 230% !important;

    border-radius: 46% !important;
}


/* ---------------------------------------------------------
   Result CTA buttons

   R7-R2 already emits these class tokens into the DOM,
   but the Tailwind build did not contain the arbitrary rules.
   We enforce the dimensions with ordinary CSS instead.
--------------------------------------------------------- */

button[class*="min-h-[56px]"] {
    width: 100% !important;

    min-height: 60px !important;

    padding: 0 28px !important;

    border-radius: 16px !important;

    font-size: 16px !important;
    line-height: 1.2 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    cursor: pointer !important;

    transition:
        transform .18s ease,
        filter .18s ease,
        box-shadow .18s ease !important;
}

button[class*="min-h-[56px]"]:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.04);
}

button[class*="min-h-[56px]"]:active {
    transform: scale(.985) !important;
}


/* ---------------------------------------------------------
   Tablet
--------------------------------------------------------- */

@media (max-width: 1023px) {

    .relative.grid:has(.cx-readiness-liquid-gauge) {
        grid-template-columns: 1fr !important;

        gap: 28px !important;
    }

    .flex:has(> .cx-readiness-liquid-gauge) {
        justify-content: center !important;
    }
}


/* ---------------------------------------------------------
   Mobile
--------------------------------------------------------- */

@media (max-width: 640px) {

    .relative.grid:has(.cx-readiness-liquid-gauge) {
        gap: 22px !important;
    }

    .cx-readiness-liquid-gauge {
        width: 164px !important;
        height: 164px !important;

        min-width: 164px !important;
        min-height: 164px !important;

        flex-basis: 164px !important;
    }

    /*
     * Result CTA parent.
     * Only applies to the grid which contains our enlarged result buttons.
     */
    .grid:has(
        > button[class*="min-h-[56px]"]
    ) {
        grid-template-columns: 1fr !important;

        gap: 10px !important;
    }

    button[class*="min-h-[56px]"] {
        min-height: 56px !important;

        padding: 0 18px !important;

        border-radius: 14px !important;

        font-size: 15px !important;
    }
}


/* ---------------------------------------------------------
   Reduced motion accessibility
--------------------------------------------------------- */

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

    .cx-readiness-liquid-gauge,
    .cx-readiness-liquid-wave-one,
    .cx-readiness-liquid-wave-two,
    .cx-readiness-liquid-glow {
        animation: none !important;
    }

    button[class*="min-h-[56px]"] {
        transition: none !important;
    }
}

/* CODSHIPX_READINESS_LIQUID_TEXT_WHITE_R1 */
/* Safe, CSS-only: force gauge text to white */
.cx-readiness-liquid-gauge,
.cx-readiness-liquid-gauge *,
.readiness-liquid-gauge,
.readiness-liquid-gauge *,
.cx-liquid-gauge,
.cx-liquid-gauge *,
[data-cx-readiness-gauge],
[data-cx-readiness-gauge] * {
  color: #ffffff !important;
}

.cx-readiness-liquid-gauge .cx-score-label,
.cx-readiness-liquid-gauge .cx-score-value,
.cx-readiness-liquid-gauge .cx-score-subtext,
.cx-readiness-liquid-gauge .cx-score-max,
.readiness-liquid-gauge .cx-score-label,
.readiness-liquid-gauge .cx-score-value,
.readiness-liquid-gauge .cx-score-subtext,
.readiness-liquid-gauge .cx-score-max,
.cx-liquid-gauge .cx-score-label,
.cx-liquid-gauge .cx-score-value,
.cx-liquid-gauge .cx-score-subtext,
.cx-liquid-gauge .cx-score-max,
[data-cx-readiness-gauge] .cx-score-label,
[data-cx-readiness-gauge] .cx-score-value,
[data-cx-readiness-gauge] .cx-score-subtext,
[data-cx-readiness-gauge] .cx-score-max {
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.28) !important;
  -webkit-text-fill-color: #ffffff !important;
}