/* GreatQuick Topups - product description show more.

   The description column is clamped and faded, with a toggle below it. On
   desktop and tablet the clamp height is measured from the collapsed FAQ
   accordion beside it so both columns end level; the JS writes that value
   into --gqtu-desc-clamp. The value declared here is the first-paint
   fallback and the mobile height, where the two columns stack and there is
   nothing to line up against.

   Collapsed is the default state so it holds from first paint with no flash.
   The max-height transition is withheld until .is-ready so the measured
   value does not animate in on load. */

.gqtu-desc {
    --gqtu-desc-clamp: 280px;
    --gqtu-desc-fade: 88px;
    position: relative;
    overflow: hidden;
    max-height: var(--gqtu-desc-clamp);
}

.gqtu-desc.is-ready {
    transition: max-height 360ms ease;
}

.gqtu-desc.is-open {
    max-height: var(--gqtu-desc-full, none);
}

/* Content shorter than the clamp: drop the whole mechanism rather than fade
   a line that was never cut off. */
.gqtu-desc.gqtu-desc--fits {
    max-height: none;
}

.gqtu-desc.gqtu-desc--fits .gqtu-desc__fade {
    display: none;
}

/* Sits over the last visible line and dissolves it into the page. Pointer
   events stay off so selecting text through the fade still works. */
.gqtu-desc__fade {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: var(--gqtu-desc-fade);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 45%, #FFFFFF 100%);
    opacity: 1;
    pointer-events: none;
    transition: opacity 200ms ease;
}

.gqtu-desc.is-open .gqtu-desc__fade {
    opacity: 0;
}

/* Class doubled to beat .elementor-kit-15 button (0,1,1) on specificity
   rather than reaching for !important. */
.gqtu-desc__toggle.gqtu-desc__toggle {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: auto;
    margin: 14px 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--gqtu-btn-bg-hover);
    font-family: var(--gqtu-font);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-align: left;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    transition: color var(--gqtu-transition);
}

.gqtu-desc__toggle.gqtu-desc__toggle:hover,
.gqtu-desc__toggle.gqtu-desc__toggle:focus,
.gqtu-desc__toggle.gqtu-desc__toggle:active {
    background: none;
    box-shadow: none;
    outline: none;
    color: var(--gqtu-btn-bg);
}

/* Keyboard focus only. A mouse click leaves the button focused, which in
   Chrome kept a persistent ring sitting under the label, so the script drops
   focus after a pointer activation and this ring is reached by tabbing. */
.gqtu-desc__toggle.gqtu-desc__toggle:focus-visible {
    outline: 2px solid var(--gqtu-btn-bg-hover);
    outline-offset: 3px;
}

.gqtu-desc__toggle[hidden] {
    display: none;
}

.gqtu-desc__chevron {
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    transition: transform 240ms ease;
}

.gqtu-desc__toggle[aria-expanded="true"] .gqtu-desc__chevron {
    transform: rotate(180deg);
}

/* Stacked layout: no FAQ column alongside, so the clamp is a fixed height
   chosen to show roughly the same amount of copy as the desktop state. */
@media (max-width: 767px) {
    .gqtu-desc {
        --gqtu-desc-clamp: 280px;
        --gqtu-desc-fade: 72px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gqtu-desc.is-ready,
    .gqtu-desc__fade,
    .gqtu-desc__chevron {
        transition: none;
    }
}