@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Press Start 2P', monospace !important;
}

html, body {
    height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #111827; /* same as bg-gray-900 */
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

.rtg-loading-progress {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem auto;
}

.rtg-loading-progress circle:last-child {
    animation: rtg-loading-spin 0.9s linear infinite;
    stroke-dasharray: 140%, 500%;
}

.rtg-loading-compact .rtg-loading-progress {
    width: 3rem;
    height: 3rem;
}

.rtg-startup-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    color: #fff;
    background: rgba(17, 24, 39, 0.92);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.rtg-startup-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.rtg-startup-overlay.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.rtg-startup-overlay-panel {
    width: min(24rem, 100%);
    padding: 2rem 1.25rem;
    border: 1px solid #4b5563;
    border-radius: 0.5rem;
    background: #1f2937;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    text-align: center;
}

.rtg-startup-overlay-spinner {
    width: 5rem;
    height: 5rem;
    margin: 0 auto 1rem auto;
}

.rtg-startup-overlay-spinner circle:last-child {
    animation: rtg-loading-spin 0.9s linear infinite;
    stroke: #22c55e;
    stroke-dasharray: 140%, 500%;
}

.rtg-startup-overlay-title {
    color: #86efac;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.6;
}

.rtg-startup-overlay-message {
    margin-top: 0.75rem;
    color: #d1d5db;
    font-size: 0.7rem;
    line-height: 1.7;
}

@keyframes rtg-loading-spin {
    from {
        transform: rotate(-90deg);
    }

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

code {
    color: #c02d76;
}


.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.button-link {
    text-decoration: unset;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.title {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 0.625rem;
}

.title.title-secondary {
    padding-top: 0.313rem;
    padding-bottom: 0;
    color: var(--bs-secondary-color);
}

.title-header-text {
    font-size: 2.5rem;
    line-height: 3rem;
    font-weight: 600;
    letter-spacing: 0rem;
    color:white;
}

.title-content-text {
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 2.5rem;
    letter-spacing: 0rem;
    color: #D1D5DB;
}
label {
    color:white !important;
}
.info-message {
    color: #D1D5DB;
}
.links-container {
    color: #D1D5DB;

}
    .links-container a {
        color: #f6e05e !important; /* Tailwind’s yellow-400, or pick your hex */
        font-weight: 600; /* optional — makes them pop */
        text-decoration: none; /* optional: remove underline */
    }

        .links-container a:hover {
            color: #f6e05e !important; /* lighter yellow on hover */
            text-decoration: underline; /* optional hover style */
        }

.main-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.block-content {
    width: 31.25rem;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    max-width: 100%;
}

.or {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.5rem 0;
}

.or .or-line {
    border-bottom: 1px solid #94a3b8;
    width: 100%;
    opacity: 0.55;
}

.or .or-text {
    padding: 0 0.625rem 0px 0.625rem;
    font-size: 0.75rem;
    line-height: 1.125rem;
    color: #d1d5db;
    opacity: 1;
}

.links-area {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding-top: 0.625rem;
}

.links-container {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    align-items: center;
}

    .links-container .dot {
        height: 0.3125rem;
        width: 0.3125rem;
        margin: 0 0.1875rem;
        border-radius: 50%;
        background-color: var(--bs-body-color);
        opacity: 0.7;
    }

.manage-layout {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.info-message::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.15;
    background: var(--bs-primary);
    z-index: -1;
}

.info-message {
    padding: 0.625rem 1rem 0.625rem 1rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .info-message.info-panel {
        margin-bottom: 0.625rem;
    }

.manage-content {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.large-input {
    height: 4.3125rem;
    font-size: 1.875rem;
}

.title-content-text-secondary {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.button-group {
    display: flex;
    flex-direction: row;
    gap: 0.625rem;
}

.w-100 {
    width: 100%;
}

.manage-layout {
    width: min(56rem, calc(100% - 2rem));
    margin: 0 auto;
    padding: 2rem 0 3rem;
}

.manage-layout > .title {
    align-items: center;
    text-align: center;
    margin-bottom: 0.5rem;
}

.manage-layout .title-header-text {
    font-size: 1.5rem;
    line-height: 1.8;
    color: #f9fafb;
}

.manage-layout .title-content-text {
    font-size: 0.85rem;
    line-height: 1.8;
    color: #9ca3af;
}

.manage-layout .block-content {
    width: min(40rem, 100%);
    margin: 1rem auto 0;
    padding: 1.25rem;
    border: 1px solid #374151;
    border-radius: 0.5rem;
    background: #1f2937;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.25);
}

.manage-layout .title-content-text-secondary {
    color: #34d399;
    font-size: 1rem;
    line-height: 1.7;
}

.manage-layout label {
    color: #e5e7eb !important;
    font-size: 0.72rem;
    line-height: 1.6;
}

.manage-layout input {
    max-width: 100%;
}

.alert {
    margin: 0 0 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid #4b5563;
    border-radius: 0.45rem;
    background: #111827;
    color: #e5e7eb;
    font-size: 0.72rem;
    line-height: 1.7;
}

.alert-success {
    border-color: #10b981;
    background: #052e2b;
    color: #bbf7d0;
}

.alert-danger {
    border-color: #ef4444;
    background: #450a0a;
    color: #fecaca;
}

.alert-warning {
    border-color: #facc15;
    background: #422006;
    color: #fef3c7;
}

.account-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.account-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.account-field label {
    color: #e5e7eb !important;
    font-size: 0.72rem;
    line-height: 1.6;
}

.account-input {
    width: 100%;
    min-height: 2.5rem;
    border: 1px solid #4b5563;
    border-radius: 0.35rem;
    background: #111827;
    color: #f9fafb;
    padding: 0.65rem 0.75rem;
    font-size: 0.72rem;
    line-height: 1.6;
}

.account-input:disabled {
    color: #9ca3af;
    background: #1f2937;
}

.account-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #e5e7eb;
    font-size: 0.72rem;
    line-height: 1.6;
}

.account-checkbox input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: #10b981;
}

.account-helper-text {
    margin: 0;
    color: #d1d5db;
    font-size: 0.72rem;
    line-height: 1.8;
}

.account-profile-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
}

.account-profile-list div,
.account-action-panel {
    padding: 1rem;
    border: 1px solid #374151;
    border-radius: 0.5rem;
    background: #111827;
}

.account-profile-list dt,
.account-action-panel h2 {
    margin: 0 0 0.35rem;
    color: #facc15;
    font-size: 0.72rem;
    line-height: 1.6;
}

.account-profile-list dd,
.account-action-panel p {
    margin: 0;
    color: #d1d5db;
    font-size: 0.7rem;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.account-privacy {
    width: min(48rem, 100%) !important;
}

.account-action-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
}

.account-action-panel.danger {
    border-color: #7f1d1d;
}

.account-action-status {
    min-height: 1.4rem;
    padding-top: 0.5rem;
    color: #86efac !important;
}

.rtg-account-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 13rem;
    min-height: 2.5rem;
    border: 1px solid #7c3aed !important;
    border-radius: 0.35rem !important;
    background: #6d28d9 !important;
    color: #ffffff !important;
    font-size: 0.7rem !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    cursor: pointer;
}

.rtg-account-button.secondary {
    border-color: #10b981 !important;
    background: #065f46 !important;
}

.rtg-account-button.w-100 {
    width: 100%;
}

.rtg-account-button.danger {
    border-color: #ef4444 !important;
    background: #991b1b !important;
}

.google-provider-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-width: 13rem;
    min-height: 2.5rem;
    border: 1px solid #dadce0 !important;
    border-radius: 0.25rem !important;
    background: #ffffff !important;
    color: #3c4043 !important;
    font-family: Roboto, Arial, sans-serif;
    font-size: 0.875rem !important;
    font-weight: 500;
    line-height: 1.25rem !important;
    text-decoration: none !important;
    cursor: pointer;
}

.google-provider-button:hover {
    background: #f8fafd !important;
    border-color: #d2e3fc !important;
}

.google-provider-button:focus-visible {
    outline: 2px solid #4285f4;
    outline-offset: 2px;
}

.google-provider-logo {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

.account-tabs {
    display: flex;
    width: 100%;
    overflow-x: auto;
    border-bottom: 1px solid #374151;
    background: #111827;
}

.account-tab {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 3px solid transparent;
    color: #d1d5db !important;
    white-space: nowrap;
    text-decoration: none !important;
    font-size: 0.7rem;
}

.account-tab:hover {
    background: #1f2937;
    color: #ffffff !important;
}

.account-tab.active {
    border-bottom-color: #34d399;
    color: #86efac !important;
    background: #1f2937;
}

@media (max-width: 768px) {
    .manage-layout {
        width: min(100%, calc(100% - 1rem));
        padding-top: 1rem;
    }

    .manage-layout .title-header-text {
        font-size: 1rem;
    }

    .manage-layout .title-content-text {
        font-size: 0.68rem;
    }

    .manage-layout .block-content {
        padding: 1rem;
    }

    .account-action-panel {
        grid-template-columns: 1fr;
    }

    .rtg-account-button {
        width: 100%;
        min-width: 0;
    }
}

.confirm-button {
    margin-top: 0.3125rem;
}

.display-desktop {
    display: block;
}

.display-mobile {
    display: none;
}

.icon-external-provider {
    width: 1rem;
    height: 1rem;
}

.icon-google {
    background-image: url("/images/account/providers/google-logo.svg")
}

.icon-facebook {
    background-image: url("/images/account/providers/facebook-logo.svg")
}

.icon-microsoft {
    background-image: url("/images/account/providers/microsoft-logo.svg")
}

.icon-twitter {
    background-image: url("/images/account/providers/x-logo.svg")
}

@media (max-width: 768px) {
    .display-desktop {
        display: none;
    }

    .display-mobile {
        display: block;
    }
}

.tile {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0.25rem;
    border: 2px solid #444; /* default border */
    background-color: #111; /* default background */
    font-family: 'Press Start 2P', monospace;
    color: #fff;
    user-select: none;
}

@keyframes pop {
    0% {
        transform: scale(0.8);
    }

    100% {
        transform: scale(1);
    }
}

.tile.correct {
    animation: pop 0.25s ease-out;
    background-color: #b59f3b !important;
    border-color: #f3c623 !important;
}

.tile.wrong {
    animation: shake 0.3s ease-in-out;
    background-color: #541212 !important;
    border-color: #a00 !important;
}

@keyframes shake {
    0%,100% {
        transform: translateX(0);
    }

    25%,75% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(5px);
    }
}

.shake {
    animation: shake 0.3s ease-in-out;
    border-color: #a00 !important;
}

/* ↓ put this after your existing .tile rule */
@media (max-width: 430px) { /* anything iPhone-sized */
    .tile {
        width: 1.2rem; /* 22 px */
        height: 1.2rem;
        margin: 0px; /* keep a small gap */
        font-size: 0.85rem; /* letter still readable */
    }
}