/* =========================================================
   ROVEN - WITHDRAW PAGE
   File: withdraw.css
   Theme: Clean light crypto-finance interface
   ========================================================= */


/* =========================================================
   1. ROOT VARIABLES
   ========================================================= */

:root {
    --primary-yellow: #F0B90B;
    --primary-yellow-hover: #DFAE00;

    --background: #FFFFFF;
    --secondary-background: #F5F5F5;
    --card-background: #FFFFFF;

    --main-text: #181A20;
    --secondary-text: #707A8A;
    --muted-text: #929AA5;

    --border-color: #EAECEF;

    --success: #0ECB81;
    --success-soft: rgba(14, 203, 129, 0.09);

    --danger: #F6465D;
    --danger-soft: rgba(246, 70, 93, 0.08);

    --warning-soft: rgba(240, 185, 11, 0.10);

    --whatsapp: #25D366;
    --whatsapp-soft: rgba(37, 211, 102, 0.08);

    --shadow-soft:
        0 4px 18px rgba(24, 26, 32, 0.05);

    --shadow-medium:
        0 8px 30px rgba(24, 26, 32, 0.08);

    --radius-small: 8px;
    --radius-medium: 10px;
    --radius-large: 12px;
    --radius-xl: 14px;

    --header-height: 62px;
    --bottom-nav-height: 72px;
}


/* =========================================================
   2. GLOBAL RESET
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    width: 100%;
    min-height: 100%;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    min-width: 320px;
    min-height: 100vh;

    background: var(--background);

    color: var(--main-text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 15px;
    line-height: 1.5;

    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    border: none;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
    text-decoration: none;
}

input {
    min-width: 0;
}


/* =========================================================
   3. PAGE LAYOUT
   ========================================================= */

.withdraw-page {
    background: var(--background);
}

.withdraw-container {
    width: 100%;
    max-width: 720px;

    margin-left: auto;
    margin-right: auto;

    padding-left: 18px;
    padding-right: 18px;
}

.withdraw-main {
    padding-top: 20px;
    padding-bottom:
        calc(
            var(--bottom-nav-height)
            + env(safe-area-inset-bottom)
            + 28px
        );
}


/* =========================================================
   4. PAGE LOADING
   ========================================================= */

.page-loading {
    position: fixed;
    inset: 0;
    z-index: 5000;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 16px;

    padding: 24px;

    background: rgba(255, 255, 255, 0.96);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.page-loading[hidden] {
    display: none;
}

.page-loading__spinner {
    width: 38px;
    height: 38px;

    border: 3px solid var(--border-color);
    border-top-color: var(--primary-yellow);

    border-radius: 50%;

    animation: rovenSpin 0.75s linear infinite;
}

.page-loading__text {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 2px;

    text-align: center;
}

.page-loading__text strong {
    color: var(--main-text);

    font-size: 15px;
    font-weight: 600;
}

.page-loading__text span {
    color: var(--secondary-text);

    font-size: 13px;
}

@keyframes rovenSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   5. ALERT
   ========================================================= */

.withdraw-alert {
    position: fixed;

    top:
        calc(
            var(--header-height)
            + env(safe-area-inset-top)
            + 10px
        );

    left: 50%;

    z-index: 4000;

    width: calc(100% - 32px);
    max-width: 560px;

    transform: translateX(-50%);

    padding: 12px 14px;

    border: 1px solid var(--border-color);
    border-radius: var(--radius-medium);

    background: var(--card-background);

    color: var(--main-text);

    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;

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

    animation: alertSlide 0.25s ease;
}

.withdraw-alert[hidden] {
    display: none;
}

.withdraw-alert.is-success {
    border-color: rgba(14, 203, 129, 0.20);

    background: #F3FCF8;

    color: #087A51;
}

.withdraw-alert.is-error {
    border-color: rgba(246, 70, 93, 0.20);

    background: #FFF6F7;

    color: #C42F44;
}

.withdraw-alert.is-warning {
    border-color: rgba(240, 185, 11, 0.28);

    background: #FFFBEF;

    color: #7A6100;
}

@keyframes alertSlide {
    from {
        opacity: 0;

        transform:
            translateX(-50%)
            translateY(-10px);
    }

    to {
        opacity: 1;

        transform:
            translateX(-50%)
            translateY(0);
    }
}


/* =========================================================
   6. HEADER
   ========================================================= */

.withdraw-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    min-height:
        calc(
            var(--header-height)
            + env(safe-area-inset-top)
        );

    padding-top: env(safe-area-inset-top);

    background: rgba(255, 255, 255, 0.97);

    border-bottom: 1px solid var(--border-color);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.withdraw-header__inner {
    height: var(--header-height);

    display: grid;
    grid-template-columns: 42px 1fr 42px;
    align-items: center;

    gap: 10px;
}

.back-button,
.wallet-shortcut {
    width: 40px;
    height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    color: var(--main-text);

    transition:
        background-color 0.2s ease,
        transform 0.15s ease;
}

.back-button:hover,
.wallet-shortcut:hover {
    background: var(--secondary-background);
}

.back-button:active,
.wallet-shortcut:active {
    transform: scale(0.95);
}

.back-button svg,
.wallet-shortcut svg {
    width: 22px;
    height: 22px;
}

.header-title {
    min-width: 0;

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

    line-height: 1.2;
}

.header-title strong {
    max-width: 100%;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 17px;
    font-weight: 600;

    color: var(--main-text);
}

.header-title span {
    margin-top: 3px;

    color: var(--secondary-text);

    font-size: 11px;
    font-weight: 500;
}


/* =========================================================
   7. SECTION BASE
   ========================================================= */

.balance-section,
.period-section,
.policy-section,
.withdraw-form-section,
.information-section {
    width: 100%;
}

.period-section,
.policy-section,
.withdraw-form-section,
.information-section {
    margin-top: 30px;
}

.section-label {
    display: block;

    margin-bottom: 5px;

    color: var(--secondary-text);

    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.section-heading h2,
.period-heading h2 {
    color: var(--main-text);

    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
}


/* =========================================================
   8. BALANCE SECTION
   ========================================================= */

.balance-section {
    padding-top: 6px;
    padding-bottom: 25px;

    border-bottom: 1px solid var(--border-color);
}

.balance-value {
    display: flex;
    align-items: baseline;

    gap: 4px;

    margin-top: 3px;

    color: var(--main-text);
}

.balance-value span {
    font-size: 23px;
    font-weight: 500;
}

.balance-value strong {
    font-size: clamp(32px, 9vw, 42px);
    font-weight: 650;

    letter-spacing: -1.2px;
    line-height: 1.15;

    overflow-wrap: anywhere;
}

.balance-status {
    margin-top: 7px;

    color: var(--secondary-text);

    font-size: 13px;
}


/* =========================================================
   9. 45 DAY PERIOD
   ========================================================= */

.period-section {
    padding-bottom: 27px;

    border-bottom: 1px solid var(--border-color);
}

.period-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;
}

.period-heading > div {
    min-width: 0;
}

.period-badge {
    flex: 0 0 auto;

    min-height: 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 5px 10px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.period-badge--loading {
    background: var(--secondary-background);

    color: var(--secondary-text);
}

.period-badge--active {
    background: var(--danger-soft);

    color: var(--danger);
}

.period-badge--completed {
    background: var(--success-soft);

    color: var(--success);
}

.period-info {
    margin-top: 20px;
}

.period-row {
    min-height: 40px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    padding: 8px 0;

    border-bottom: 1px solid #F2F3F5;
}

.period-row:last-child {
    border-bottom: none;
}

.period-row span {
    flex: 1 1 auto;

    color: var(--secondary-text);

    font-size: 13px;
}

.period-row strong {
    flex: 0 0 auto;

    max-width: 58%;

    text-align: right;

    color: var(--main-text);

    font-size: 13px;
    font-weight: 600;

    overflow-wrap: anywhere;
}

.period-progress {
    margin-top: 18px;
}

.period-progress__track {
    width: 100%;
    height: 7px;

    overflow: hidden;

    border-radius: 999px;

    background: var(--secondary-background);
}

.period-progress__bar {
    width: 0%;
    height: 100%;

    border-radius: inherit;

    background: var(--primary-yellow);

    transition: width 0.5s ease;
}

.period-progress__labels {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 7px;

    color: var(--secondary-text);

    font-size: 10px;
    font-weight: 500;
}


/* =========================================================
   10. POLICY
   ========================================================= */

.policy-section {
    padding-bottom: 28px;

    border-bottom: 1px solid var(--border-color);
}

.policy-box {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-top: 18px;

    padding: 15px;

    border: 1px solid var(--border-color);
    border-radius: var(--radius-large);

    background: var(--secondary-background);
}

.policy-box--loading {
    background: var(--secondary-background);
}

.policy-box--early {
    border-color: rgba(246, 70, 93, 0.16);

    background: var(--danger-soft);
}

.policy-box--completed {
    border-color: rgba(14, 203, 129, 0.17);

    background: var(--success-soft);
}

.policy-icon {
    flex: 0 0 40px;

    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--card-background);

    color: var(--main-text);
}

.policy-icon svg {
    width: 22px;
    height: 22px;
}

.policy-copy {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 11px;
}

.policy-copy strong {
    flex: 0 0 auto;

    color: var(--main-text);

    font-size: 24px;
    font-weight: 650;
    line-height: 1;
}

.policy-copy span {
    color: var(--secondary-text);

    font-size: 12px;
    line-height: 1.45;
}

.policy-note {
    margin-top: 15px;

    padding-left: 12px;

    border-left: 3px solid var(--primary-yellow);
}

.policy-note strong {
    color: var(--main-text);

    font-size: 13px;
    font-weight: 600;
}

.policy-note p {
    margin-top: 3px;

    color: var(--secondary-text);

    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   11. WITHDRAW FORM
   ========================================================= */

.withdraw-form-section {
    padding-bottom: 28px;

    border-bottom: 1px solid var(--border-color);
}

.withdraw-form {
    margin-top: 21px;
}

.form-group {
    width: 100%;

    margin-bottom: 21px;
}

.form-group label {
    display: block;

    margin-bottom: 8px;

    color: var(--main-text);

    font-size: 13px;
    font-weight: 550;
}


/* =========================================================
   12. AMOUNT INPUT
   ========================================================= */

.amount-input-wrap {
    min-height: 54px;

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;

    gap: 6px;

    padding-left: 14px;
    padding-right: 8px;

    border: 1px solid var(--border-color);
    border-radius: var(--radius-medium);

    background: var(--background);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.amount-input-wrap:focus-within {
    border-color: var(--primary-yellow);

    box-shadow:
        0 0 0 3px rgba(240, 185, 11, 0.09);
}

.amount-currency {
    color: var(--main-text);

    font-size: 18px;
    font-weight: 600;
}

.amount-input-wrap input {
    width: 100%;

    padding: 14px 4px;

    border: none;
    outline: none;

    background: transparent;

    color: var(--main-text);

    font-size: 18px;
    font-weight: 600;
}

.amount-input-wrap input::placeholder {
    color: #B7BDC6;

    font-weight: 500;
}

.amount-input-wrap input::-webkit-outer-spin-button,
.amount-input-wrap input::-webkit-inner-spin-button {
    margin: 0;

    -webkit-appearance: none;
}

.amount-input-wrap input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.max-button {
    height: 38px;

    padding: 0 11px;

    border-radius: 8px;

    background: rgba(240, 185, 11, 0.12);

    color: #A17C00;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        transform 0.15s ease;
}

.max-button:hover {
    background: rgba(240, 185, 11, 0.18);
}

.max-button:active {
    transform: scale(0.96);
}


/* =========================================================
   13. TEXT INPUT
   ========================================================= */

.text-input-wrap {
    width: 100%;
}

.text-input-wrap input {
    width: 100%;
    min-height: 54px;

    padding: 13px 14px;

    border: 1px solid var(--border-color);
    border-radius: var(--radius-medium);
    outline: none;

    background: var(--background);

    color: var(--main-text);

    font-size: 14px;
    line-height: 1.4;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.text-input-wrap input:focus {
    border-color: var(--primary-yellow);

    box-shadow:
        0 0 0 3px rgba(240, 185, 11, 0.09);
}

.text-input-wrap input::placeholder {
    color: #AEB4BC;
}


/* =========================================================
   14. INPUT ERROR + HELP
   ========================================================= */

.form-error {
    margin-top: 7px;

    color: var(--danger);

    font-size: 11px;
    line-height: 1.45;
}

.form-error[hidden] {
    display: none;
}

.form-help {
    margin-top: 7px;

    color: var(--secondary-text);

    font-size: 11px;
    line-height: 1.5;
}


/* =========================================================
   15. NETWORK DISPLAY
   ========================================================= */

.network-display {
    min-height: 58px;

    display: grid;
    grid-template-columns: 38px 1fr 28px;
    align-items: center;

    gap: 11px;

    padding: 10px 12px;

    border: 1px solid var(--border-color);
    border-radius: var(--radius-medium);

    background: var(--background);
}

.network-icon {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--secondary-background);

    color: var(--main-text);

    font-size: 17px;
    font-weight: 700;
}

.network-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;

    line-height: 1.25;
}

.network-copy strong {
    color: var(--main-text);

    font-size: 13px;
    font-weight: 600;
}

.network-copy span {
    margin-top: 3px;

    color: var(--secondary-text);

    font-size: 11px;
}

.network-check {
    width: 25px;
    height: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--success-soft);

    color: var(--success);
}

.network-check svg {
    width: 17px;
    height: 17px;
}


/* =========================================================
   16. WITHDRAW SUMMARY
   ========================================================= */

.withdraw-summary {
    margin-top: 5px;
    margin-bottom: 20px;

    padding: 15px;

    border: 1px solid var(--border-color);
    border-radius: var(--radius-large);

    background: var(--secondary-background);
}

.summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 5px 0;
}

.summary-row span {
    min-width: 0;

    color: var(--secondary-text);

    font-size: 12px;
}

.summary-row strong {
    flex: 0 0 auto;

    color: var(--main-text);

    font-size: 13px;
    font-weight: 600;

    text-align: right;
}

.summary-deduction {
    color: var(--danger) !important;
}

.summary-divider {
    height: 1px;

    margin: 10px 0;

    background: var(--border-color);
}

.summary-row--final span {
    color: var(--main-text);

    font-size: 13px;
    font-weight: 550;
}

.summary-row--final strong {
    color: var(--success);

    font-size: 18px;
    font-weight: 650;
}


/* =========================================================
   17. WHATSAPP NOTICE
   ========================================================= */

.whatsapp-notice {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    margin-bottom: 20px;

    padding: 14px;

    border: 1px solid rgba(37, 211, 102, 0.16);
    border-radius: var(--radius-large);

    background: var(--whatsapp-soft);
}

.whatsapp-notice__icon {
    flex: 0 0 34px;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #FFFFFF;

    color: #1AA951;
}

.whatsapp-notice__icon svg {
    width: 20px;
    height: 20px;
}

.whatsapp-notice > div:last-child {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.whatsapp-notice strong {
    color: var(--main-text);

    font-size: 12px;
    font-weight: 600;
}

.whatsapp-notice span {
    margin-top: 3px;

    color: var(--secondary-text);

    font-size: 11px;
    line-height: 1.5;
}


/* =========================================================
   18. SUBMIT BUTTON
   ========================================================= */

.submit-button {
    width: 100%;
    min-height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 12px 16px;

    border: none;
    border-radius: var(--radius-medium);

    background: var(--primary-yellow);

    color: #181A20;

    font-size: 14px;
    font-weight: 650;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        transform 0.15s ease,
        opacity 0.2s ease;

    -webkit-user-select: none;
    user-select: none;
}

.submit-button:hover:not(:disabled) {
    background: var(--primary-yellow-hover);
}

.submit-button:active:not(:disabled) {
    transform: scale(0.99);
}

.submit-button:disabled {
    cursor: not-allowed;

    background: #EAECEF;

    color: #AEB4BC;
}

.submit-button__loader {
    width: 18px;
    height: 18px;

    border: 2px solid rgba(24, 26, 32, 0.2);
    border-top-color: #181A20;

    border-radius: 50%;

    animation: rovenSpin 0.75s linear infinite;
}

.submit-button__loader[hidden] {
    display: none;
}

.submit-note {
    margin-top: 10px;

    text-align: center;

    color: var(--secondary-text);

    font-size: 10px;
    line-height: 1.55;
}


/* =========================================================
   19. INFORMATION SECTION
   ========================================================= */

.information-section {
    padding-bottom: 10px;
}

.information-list {
    margin-top: 18px;
}

.information-item {
    display: grid;
    grid-template-columns: 28px 1fr;

    gap: 11px;

    padding: 13px 0;

    border-bottom: 1px solid #F1F2F4;
}

.information-item:last-child {
    border-bottom: none;
}

.information-number {
    width: 27px;
    height: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--secondary-background);

    color: var(--main-text);

    font-size: 11px;
    font-weight: 650;
}

.information-item div {
    min-width: 0;
}

.information-item strong {
    display: block;

    color: var(--main-text);

    font-size: 13px;
    font-weight: 600;
}

.information-item p {
    margin-top: 3px;

    color: var(--secondary-text);

    font-size: 11px;
    line-height: 1.55;
}


/* =========================================================
   20. BOTTOM NAVIGATION
   ========================================================= */

.bottom-navigation {
    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 1500;

    min-height:
        calc(
            var(--bottom-nav-height)
            + env(safe-area-inset-bottom)
        );

    padding:
        8px
        8px
        calc(
            7px
            + env(safe-area-inset-bottom)
        );

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;

    background: rgba(255, 255, 255, 0.98);

    border-top: 1px solid var(--border-color);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.bottom-navigation__item {
    min-width: 0;
    min-height: 54px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 3px;

    border-radius: 10px;

    color: var(--secondary-text);

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        transform 0.15s ease;
}

.bottom-navigation__item:active {
    transform: scale(0.96);
}

.bottom-navigation__item svg {
    width: 22px;
    height: 22px;
}

.bottom-navigation__item span {
    max-width: 100%;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 10px;
    font-weight: 550;
}

.bottom-navigation__item--active {
    color: var(--main-text);
}

.bottom-navigation__item--active svg {
    color: var(--primary-yellow);
}


/* =========================================================
   21. MODAL
   ========================================================= */

.modal {
    position: fixed;
    inset: 0;

    z-index: 6000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 22px;
}

.modal[hidden] {
    display: none;
}

.modal__backdrop {
    position: absolute;
    inset: 0;

    background: rgba(24, 26, 32, 0.48);

    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.modal__content {
    position: relative;
    z-index: 1;

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

    padding: 25px 20px 20px;

    border-radius: var(--radius-xl);

    background: var(--background);

    text-align: center;

    box-shadow:
        0 20px 55px rgba(24, 26, 32, 0.20);

    animation: modalOpen 0.22s ease;
}

@keyframes modalOpen {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }

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

.modal__icon {
    width: 48px;
    height: 48px;

    margin: 0 auto 13px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--warning-soft);

    color: #A17C00;
}

.modal__icon svg {
    width: 25px;
    height: 25px;
}

.modal__content h3 {
    color: var(--main-text);

    font-size: 18px;
    font-weight: 650;
}

.modal__content p {
    margin-top: 7px;

    color: var(--secondary-text);

    font-size: 12px;
    line-height: 1.6;
}

.modal__button {
    width: 100%;
    min-height: 48px;

    margin-top: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 11px 15px;

    border-radius: var(--radius-medium);

    background: var(--primary-yellow);

    color: var(--main-text);

    font-size: 13px;
    font-weight: 650;

    transition:
        background-color 0.2s ease,
        transform 0.15s ease;
}

.modal__button:hover {
    background: var(--primary-yellow-hover);
}

.modal__button:active {
    transform: scale(0.98);
}


/* =========================================================
   22. DISABLED / ERROR STATES
   ========================================================= */

input.is-invalid {
    border-color: var(--danger) !important;

    box-shadow:
        0 0 0 3px rgba(246, 70, 93, 0.07) !important;
}

.amount-input-wrap.is-invalid {
    border-color: var(--danger) !important;

    box-shadow:
        0 0 0 3px rgba(246, 70, 93, 0.07) !important;
}


/* =========================================================
   23. ACCESSIBILITY
   ========================================================= */

button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 2px solid var(--primary-yellow);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }
}


/* =========================================================
   24. MOBILE - 320px TO 374px
   ========================================================= */

@media (max-width: 374px) {

    .withdraw-container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .withdraw-header__inner {
        grid-template-columns: 38px 1fr 38px;
    }

    .back-button,
    .wallet-shortcut {
        width: 38px;
        height: 38px;
    }

    .header-title strong {
        font-size: 16px;
    }

    .balance-value strong {
        font-size: 31px;
    }

    .period-heading {
        gap: 8px;
    }

    .period-badge {
        padding-left: 8px;
        padding-right: 8px;

        font-size: 10px;
    }

    .policy-box {
        align-items: flex-start;
    }

    .policy-copy {
        align-items: flex-start;
        flex-direction: column;

        gap: 4px;
    }

    .policy-copy strong {
        font-size: 22px;
    }

    .network-display {
        grid-template-columns: 36px 1fr 25px;
    }

    .network-icon {
        width: 36px;
        height: 36px;
    }

    .bottom-navigation {
        padding-left: 4px;
        padding-right: 4px;
    }

    .bottom-navigation__item span {
        font-size: 9px;
    }
}


/* =========================================================
   25. TABLET
   ========================================================= */

@media (min-width: 600px) {

    .withdraw-container {
        padding-left: 26px;
        padding-right: 26px;
    }

    .withdraw-main {
        padding-top: 28px;
    }

    .balance-section {
        padding-top: 10px;
        padding-bottom: 30px;
    }

    .period-section,
    .policy-section,
    .withdraw-form-section,
    .information-section {
        margin-top: 34px;
    }

    .balance-value strong {
        font-size: 44px;
    }

    .section-heading h2,
    .period-heading h2 {
        font-size: 19px;
    }

    .withdraw-summary {
        padding: 17px;
    }

    .submit-button {
        min-height: 54px;
    }
}


/* =========================================================
   26. DESKTOP
   ========================================================= */

@media (min-width: 900px) {

    body {
        background: var(--secondary-background);
    }

    .withdraw-header {
        background: rgba(255, 255, 255, 0.98);
    }

    .withdraw-main {
        max-width: 760px;

        margin-left: auto;
        margin-right: auto;

        background: var(--background);

        border-left: 1px solid var(--border-color);
        border-right: 1px solid var(--border-color);
    }

    .bottom-navigation {
        max-width: 760px;

        left: 50%;
        right: auto;

        width: 100%;

        transform: translateX(-50%);

        border-left: 1px solid var(--border-color);
        border-right: 1px solid var(--border-color);
    }
}


/* =========================================================
   27. SAFE AREA SUPPORT
   ========================================================= */

@supports (
    padding-bottom: env(safe-area-inset-bottom)
) {

    .withdraw-header {
        padding-top: env(safe-area-inset-top);
    }

    .bottom-navigation {
        padding-bottom:
            calc(
                7px
                + env(safe-area-inset-bottom)
            );
    }
}


/* =========================================================
   END OF WITHDRAW.CSS
   ========================================================= */
/* Recorded history and account checks, Phase 3. */
.withdraw-history-button,.withdraw-contact-link{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 14px;border:1px solid #d8dee7;border-radius:9px;background:#fff;color:#181b21;font:inherit;font-size:13px;text-decoration:none;cursor:pointer}
.withdraw-history-button:disabled,.submit-button:disabled,.max-button:disabled{opacity:.5;cursor:not-allowed}
.withdraw-history-button:focus-visible,.withdraw-contact-link:focus-visible{outline:3px solid #285caa;outline-offset:3px}
.recorded-withdrawal{padding:18px 0;border-bottom:1px solid #e2e6ec;overflow-wrap:anywhere}.recorded-withdrawal p{font-size:13px;line-height:1.6;color:#667080;margin:7px 0}.withdraw-hash{font-family:ui-monospace,monospace}.withdraw-history-pages{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px}.withdraw-history-pages span{font-size:12px;text-align:center;color:#667080}#withdrawHistory{padding-top:15px;font-size:14px;line-height:1.6}#availableBalance{overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.balance-value{min-width:0;flex-wrap:wrap}
[hidden]{display:none!important}