/*
 * WAWA Tarot Theme
 * Dark purple / neon cyan styling to match the current site.
 * Typography scales smoothly from 20px on desktop to 14px on mobile.
 */

#tarot_card {
    --WAWA-tarot-purple: #8b2cff;
    --WAWA-tarot-purple-dark: #3d007d;
    --WAWA-tarot-cyan: #00eaff;
    --WAWA-tarot-bg: #090312;
    --WAWA-tarot-panel: rgba(19, 3, 43, 0.92);
    --WAWA-tarot-panel-soft: rgba(15, 5, 33, 0.88);
    --WAWA-tarot-text: #f3edff;
    --WAWA-tarot-muted: #cbbbe8;

    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: clamp(12px, 1.8vw, 26px);
    box-sizing: border-box;
    color: var(--WAWA-tarot-text) !important;
    font-family: 'Prompt', sans-serif !important;
    font-size: clamp(14px, calc(11.77px + 0.5714vw), 20px) !important;
    line-height: 1.7;
    background:
        radial-gradient(circle at top, rgba(139, 44, 255, 0.18), transparent 42%),
        linear-gradient(180deg, rgba(12, 3, 25, 0.96), rgba(5, 2, 12, 0.98));
    border: 1px solid rgba(139, 44, 255, 0.72);
    border-radius: 24px;
    box-shadow:
        0 0 18px rgba(139, 44, 255, 0.28),
        inset 0 0 28px rgba(139, 44, 255, 0.08);
    overflow: hidden;
}

#tarot_card,
#tarot_card * {
    box-sizing: border-box;
}

/* Keep all visible plugin text in the same responsive scale. */
#tarot_card p,
#tarot_card span,
#tarot_card div,
#tarot_card a,
#tarot_card td,
#tarot_card th,
#tarot_card button,
#tarot_card input,
#tarot_card select,
#tarot_card textarea {
    font-size: inherit !important;
}

/* Neutralize Bootstrap-style white boxes so they blend into the site. */
#tarot_card .box,
#tarot_card .box-info,
#tarot_card .box-body,
#tarot_card .row,
#tarot_card [class*="col-"] {
    background: transparent !important;
    color: var(--WAWA-tarot-text) !important;
    border: 0;
    box-shadow: none;
}

#tarot_card > .col-md-12,
#tarot_card .box-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Banner */
#tarot_card img[src*="banner"] {
    display: block;
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    margin: 0 auto 20px;
    border: 1px solid rgba(139, 44, 255, 0.75);
    border-radius: 18px;
    box-shadow: 0 0 22px rgba(139, 44, 255, 0.34);
}

/* Tarot card backs */
#tarot_card .yipsi_basic {
    width: clamp(48px, 6vw, 90px) !important;
    height: auto !important;
    margin: clamp(2px, 0.42vw, 6px) !important;
    border-radius: 9px;
    border: 1px solid rgba(139, 44, 255, 0.88);
    box-shadow: 0 0 8px rgba(139, 44, 255, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

#tarot_card .yipsi_basic:hover {
    transform: translateY(-3px) scale(1.04);
    border-color: var(--WAWA-tarot-cyan);
    box-shadow:
        0 0 10px rgba(0, 234, 255, 0.65),
        0 0 20px rgba(139, 44, 255, 0.55);
}

/* Result card */
#tarot_card center > img:not(.yipsi_basic) {
    width: clamp(120px, 13vw, 180px) !important;
    max-width: 100%;
    height: auto !important;
    border-radius: 12px;
    border: 1px solid rgba(139, 44, 255, 0.9);
    box-shadow:
        0 0 12px rgba(139, 44, 255, 0.5),
        0 0 24px rgba(0, 234, 255, 0.15);
}

/* Results table */
#tarot_card table,
#tarot_card .table {
    width: 100% !important;
    max-width: 100%;
    margin: 18px 0 !important;
    color: var(--WAWA-tarot-text) !important;
    background: rgba(11, 2, 26, 0.92) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid rgba(139, 44, 255, 0.78) !important;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 0 18px rgba(139, 44, 255, 0.22);
    table-layout: fixed;
}

#tarot_card table td,
#tarot_card table th,
#tarot_card .table td,
#tarot_card .table th {
    padding: clamp(9px, 1vw, 15px) !important;
    color: var(--WAWA-tarot-text) !important;
    background: rgba(18, 5, 39, 0.92) !important;
    border-color: rgba(139, 44, 255, 0.28) !important;
    vertical-align: top;
    overflow-wrap: anywhere;
}

/* Override the old red inline gradients in the first column. */
#tarot_card table td:first-child,
#tarot_card .table td:first-child {
    width: 28% !important;
    min-width: 110px;
    color: #ffffff !important;
    font-weight: 600;
    background: linear-gradient(135deg, #4b08a5 0%, #8b2cff 58%, #00cde8 140%) !important;
    border-right: 1px solid rgba(0, 234, 255, 0.25) !important;
}

#tarot_card a {
    color: var(--WAWA-tarot-cyan) !important;
}

@media (max-width: 767px) {
    #tarot_card {
        font-size: 14px !important;
        padding: 12px;
        border-radius: 18px;
    }

    #tarot_card img[src*="banner"] {
        margin-bottom: 14px;
        border-radius: 12px;
    }

    #tarot_card .yipsi_basic {
        width: clamp(42px, 12vw, 58px) !important;
        margin: 2px !important;
    }

    #tarot_card table td:first-child,
    #tarot_card .table td:first-child {
        width: 34% !important;
        min-width: 0;
    }
}

/* =========================================================
 * WAWA Monthly Tarot ([mon_tarot])
 * Keep the 78-card chooser visually consistent with the
 * other tarot shortcodes while making the layout responsive.
 * ======================================================= */
#tarot_card.WAWA-mon-tarot .WAWA-mon-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: clamp(4px, 0.6vw, 9px);
    align-items: center;
    justify-items: center;
    margin: 0 auto clamp(16px, 2vw, 24px);
}

#tarot_card.WAWA-mon-tarot .WAWA-mon-card {
    display: block;
    width: clamp(48px, 6vw, 90px) !important;
    max-width: 100%;
    height: auto !important;
    margin: 0 !important;
    cursor: pointer;
    user-select: none;
    -webkit-user-drag: none;
}

#tarot_card.WAWA-mon-tarot .WAWA-mon-card.WAWA-mon-selected {
    border-color: var(--WAWA-tarot-cyan) !important;
    box-shadow:
        0 0 12px rgba(0, 234, 255, 0.82),
        0 0 24px rgba(139, 44, 255, 0.72) !important;
    transform: translateY(-2px) scale(1.035);
}

#tarot_card.WAWA-mon-tarot .WAWA-mon-form {
    margin: 0;
}

#tarot_card.WAWA-mon-tarot .WAWA-mon-submit-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#tarot_card.WAWA-mon-tarot .WAWA-mon-submit {
    min-width: 150px;
    padding: 10px 26px !important;
    color: #ffffff !important;
    font-weight: 700;
    border: 1px solid rgba(0, 234, 255, 0.72) !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #8b2cff 0%, #4b08e8 72%, #2b00a5 100%) !important;
    box-shadow:
        0 0 10px rgba(139, 44, 255, 0.58),
        inset 0 -2px 0 rgba(0, 234, 255, 0.20) !important;
    cursor: pointer;
}

#tarot_card.WAWA-mon-tarot .WAWA-mon-submit:hover {
    border-color: var(--WAWA-tarot-cyan) !important;
    box-shadow:
        0 0 12px rgba(0, 234, 255, 0.58),
        0 0 22px rgba(139, 44, 255, 0.58) !important;
    transform: translateY(-1px);
}

#tarot_card.WAWA-mon-tarot .WAWA-mon-result-card {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 18px;
}

#tarot_card.WAWA-mon-tarot .WAWA-mon-result-table td:first-child {
    width: 100% !important;
    min-width: 0 !important;
    border-right: 0 !important;
}

#tarot_card.WAWA-mon-tarot .WAWA-mon-result-table tr:not(:first-child) td {
    color: var(--WAWA-tarot-text) !important;
    font-weight: 400;
    background: rgba(18, 5, 39, 0.92) !important;
}

#tarot_card.WAWA-mon-tarot .WAWA-mon-position-title {
    color: #ffffff !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #4b08a5 0%, #8b2cff 58%, #00cde8 140%) !important;
}

#tarot_card.WAWA-mon-tarot .WAWA-mon-divider {
    border: 0;
    border-top: 1px solid rgba(139, 44, 255, 0.30);
    margin: 18px 0;
}

@media (max-width: 1024px) {
    #tarot_card.WAWA-mon-tarot .WAWA-mon-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    #tarot_card.WAWA-mon-tarot .WAWA-mon-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 5px;
    }

    #tarot_card.WAWA-mon-tarot .WAWA-mon-card {
        width: clamp(42px, 12vw, 58px) !important;
    }

    #tarot_card.WAWA-mon-tarot .WAWA-mon-submit {
        min-width: 130px;
        padding: 9px 20px !important;
    }

    #tarot_card.WAWA-mon-tarot .WAWA-mon-result-card {
        padding-top: 0;
        padding-bottom: 8px;
    }
}

@media (max-width: 359px) {
    #tarot_card.WAWA-mon-tarot .WAWA-mon-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}