/* Final mobile alignment layer for creation forms. */

.creation-page .creation-form-card,
.creation-page .creation-form-card > .card-body,
.creation-page .creation-form-card > .card-footer,
.content > .container-fluid.py-3 > .card,
.content > .container-fluid.py-3 > .card > .card-body,
.content > .container-fluid.py-3 > .card > .card-footer,
.content > .container-fluid.pedidos-page.py-3 > .card,
.content > .container-fluid.pedidos-page.py-3 > .card > .card-body,
.content > .container-fluid.pedidos-page.py-3 > .card > .card-footer {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.creation-page .creation-form-card > .card-body,
.content > .container-fluid.py-3 > .card > .card-body,
.content > .container-fluid.pedidos-page.py-3 > .card > .card-body {
    padding: 0 !important;
}

.creation-page .card-body > form > .d-flex.justify-content-end,
.content > .container-fluid.py-3 .card-body > form > .d-flex.justify-content-end,
.content > .container-fluid.pedidos-page.py-3 .card-body > form > .d-flex.justify-content-end,
.creation-page .card-footer,
.content > .container-fluid.py-3 > .card > .card-footer,
.content > .container-fluid.pedidos-page.py-3 > .card > .card-footer {
    align-items: center;
    gap: var(--spacing-12) !important;
}

.creation-page .card-body > form > .d-flex.justify-content-end .btn,
.content > .container-fluid.py-3 .card-body > form > .d-flex.justify-content-end .btn,
.content > .container-fluid.pedidos-page.py-3 .card-body > form > .d-flex.justify-content-end .btn,
.creation-page .card-footer .btn,
.content > .container-fluid.py-3 > .card > .card-footer .btn,
.content > .container-fluid.pedidos-page.py-3 > .card > .card-footer .btn {
    border-radius: var(--radius-md) !important;
    font-size: 1rem;
    font-weight: 500;
    min-height: 3.05rem;
    padding: .7rem 1.15rem !important;
}

.creation-page .btn-primary,
.content > .container-fluid.py-3 .btn-primary,
.content > .container-fluid.pedidos-page.py-3 .btn-primary,
.content > .container-fluid.pedidos-page.py-3 .btn-warning {
    box-shadow: 0 0 0 1px rgba(0, 162, 232, .22), 0 12px 26px rgba(0, 162, 232, .18) !important;
    min-width: 10rem;
}

:root {
    --competition-parejas-text: #FACC15;
    --competition-parejas-bg: #EAB30824;
    --competition-copa-text: #ED2121;
    --competition-copa-bg: #8F23233D;
    --competition-liga-text: #10DF34;
    --competition-liga-bg: #1781463D;
}

.competition-selector-page {
    max-width: 1120px !important;
}

.competition-selector-question {
    color: var(--color-cool-gray);
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: var(--spacing-20);
}

.competition-selector-grid {
    display: grid;
    gap: var(--spacing-16);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.competition-selector-option {
    align-items: flex-start;
    background: #121212;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-lg);
    color: var(--color-off-white);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-14);
    min-height: 10.5rem;
    padding: var(--spacing-20);
    text-align: left;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
    width: 100%;
}

.competition-selector-option:hover,
.competition-selector-option:focus-visible {
    background: #15181d;
    border-color: rgba(255, 255, 255, .18);
    outline: none;
    transform: translateY(-1px);
}

.competition-selector-option i {
    align-items: center;
    border-radius: var(--radius-md);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.55rem;
    height: 3rem;
    justify-content: center;
    width: 3rem;
}

.competition-selector-option strong,
.competition-selector-option small {
    display: block;
}

.competition-selector-option strong {
    color: var(--color-off-white);
    font-size: 1.22rem;
    line-height: 1.15;
}

.competition-selector-option small {
    color: var(--color-muted-slate);
    font-size: .95rem;
    margin-top: .35rem;
}

.competition-selector-option-parejas i {
    background: var(--competition-parejas-bg);
    color: var(--competition-parejas-text);
}

.competition-selector-option-liga i {
    background: var(--competition-liga-bg);
    color: var(--competition-liga-text);
}

.competition-selector-option-copa i {
    background: var(--competition-copa-bg);
    color: var(--competition-copa-text);
}

@media (max-width: 767.98px) {
    .creation-page,
    .content > .container-fluid.py-3,
    .content > .container-fluid.pedidos-page.py-3 {
        margin-inline: var(--spacing-12) !important;
        max-width: none !important;
        padding-inline: 0 !important;
        width: auto !important;
    }

    .creation-page .card-body > form > .d-flex.justify-content-end,
    .content > .container-fluid.py-3 .card-body > form > .d-flex.justify-content-end,
    .content > .container-fluid.pedidos-page.py-3 .card-body > form > .d-flex.justify-content-end,
    .creation-page .card-footer,
    .content > .container-fluid.py-3 > .card > .card-footer,
    .content > .container-fluid.pedidos-page.py-3 > .card > .card-footer {
        padding: var(--spacing-16) var(--spacing-20) 0 !important;
    }

    .competition-selector-page {
        padding-top: .15rem !important;
    }

    .competition-selector-question {
        margin-bottom: var(--spacing-16);
        padding-inline: .1rem;
    }

    .competition-selector-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-12);
    }

    .competition-selector-option {
        align-items: center;
        flex-direction: row;
        gap: 1.05rem;
        min-height: 5.9rem;
        padding: 1.05rem 1.35rem !important;
    }

    .competition-selector-option i {
        height: 2.85rem;
        margin-left: 0;
        width: 2.85rem;
    }

    .competition-selector-option span {
        min-width: 0;
        padding-right: .25rem;
    }
}

@media (max-width: 374.98px) {
    .creation-page,
    .content > .container-fluid.py-3,
    .content > .container-fluid.pedidos-page.py-3 {
        margin-inline: var(--spacing-8) !important;
    }

    .creation-page .btn-primary,
    .content > .container-fluid.py-3 .btn-primary,
    .content > .container-fluid.pedidos-page.py-3 .btn-primary,
    .content > .container-fluid.pedidos-page.py-3 .btn-warning {
        min-width: 8.5rem;
    }
}