/* css/hunter/mobile-tabs.css */

/* =========================
   Other tabs mobile game treatment
   - each tab keeps its own page type instead of copying the base lobby
   - rank: exam board / partner: room / explore: map / archive: handbook
========================= */
@media (max-width: 768px) {
    .hunter-page .hunter-game-view:not([data-hunter-view="base"]) {
        position: relative;
        min-height: 100%;
        padding: 10px;
        border-radius: 20px;
        box-sizing: border-box;
        overflow: hidden auto;
        overscroll-behavior: contain;
    }

    .hunter-page .hunter-game-view:not([data-hunter-view="base"])::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -2;
        pointer-events: none;
        background:
            radial-gradient(circle at 20% 18%, rgba(251, 191, 36, .18), transparent 30%),
            radial-gradient(circle at 88% 78%, rgba(146, 64, 14, .18), transparent 34%),
            linear-gradient(180deg, rgba(255, 248, 225, .82), rgba(77, 35, 14, .22));
    }

    .hunter-page .hunter-tab-scene-title {
        position: relative;
        overflow: hidden;
        margin: 0 0 10px;
        padding: 12px 14px;
        border-radius: 20px;
        background:
            linear-gradient(135deg, rgba(17, 24, 39, .9), rgba(67, 32, 13, .86)),
            radial-gradient(circle at top right, rgba(251, 191, 36, .2), transparent 36%);
        border: 1px solid rgba(251, 191, 36, .42);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .16),
            0 10px 20px rgba(35, 18, 8, .2);
    }

    .hunter-page .hunter-tab-scene-title::after {
        content: "";
        position: absolute;
        right: -18px;
        top: -30px;
        width: 120px;
        height: 120px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(251, 191, 36, .2), transparent 62%);
        pointer-events: none;
    }

    .hunter-page .hunter-tab-scene-title span {
        display: block;
        color: #fbbf24;
        font-size: 10px;
        font-weight: 950;
        letter-spacing: .16em;
    }

    .hunter-page .hunter-tab-scene-title strong {
        display: block;
        margin-top: 3px;
        color: #fff7ed;
        font-size: 21px;
        font-weight: 950;
        line-height: 1.1;
        letter-spacing: .02em;
        text-shadow: 0 2px 0 rgba(120, 53, 15, .7);
    }

    .hunter-page .hunter-tab-scene-title small {
        display: block;
        margin-top: 5px;
        color: rgba(255, 247, 237, .78);
        font-size: 11px;
        font-weight: 800;
        line-height: 1.35;
    }

    /* 職階：考核證書 / 公會晉升板 */
    .hunter-page .hunter-rank-room {
        background:
            linear-gradient(180deg, rgba(255, 251, 235, .76), rgba(255, 237, 213, .62)),
            repeating-linear-gradient(90deg, rgba(146, 64, 14, .08) 0 1px, transparent 1px 34px);
    }

    .hunter-page .hunter-rank-room .glove-collection-header {
        margin: 0 0 8px;
        padding: 10px 12px;
        border-radius: 18px;
        background: rgba(255, 251, 235, .78);
        border: 1px solid rgba(245, 196, 92, .55);
        box-shadow: 0 8px 16px rgba(35, 18, 8, .1);
        backdrop-filter: blur(8px);
    }

    .hunter-page .hunter-rank-room .glove-collection-header h3 {
        font-size: 15px;
    }

    .hunter-page .hunter-rank-room .glove-collection-header span {
        padding: 4px 8px;
        border-radius: 999px;
        background: rgba(17, 24, 39, .9);
        color: #fde68a;
        font-size: 10px;
        font-weight: 950;
    }

    .hunter-page .hunter-rank-room #hunterRankGoalPanel {
        margin: 0 0 8px;
        padding: 12px;
        border-radius: 18px;
        background:
            radial-gradient(circle at top right, rgba(251, 191, 36, .18), transparent 34%),
            rgba(255, 251, 235, .86);
        border: 1px solid rgba(245, 196, 92, .55);
        color: #4a1f0f;
        font-size: 12px;
        font-weight: 850;
        line-height: 1.55;
        box-shadow: 0 8px 16px rgba(35, 18, 8, .1);
    }

    .hunter-page .hunter-rank-room .hunter-compact-details {
        margin: 8px 0;
        border-radius: 18px;
        background: rgba(255, 251, 235, .82);
        border: 1px solid rgba(245, 196, 92, .5);
        box-shadow: 0 8px 16px rgba(35, 18, 8, .08);
        backdrop-filter: blur(8px);
    }

    .hunter-page .hunter-rank-room .hunter-compact-details summary {
        padding: 11px 12px;
        color: #4a1f0f;
        font-size: 12px;
        font-weight: 950;
    }

    .hunter-page .hunter-rank-room .hunter-rank-benefit-card,
    .hunter-page .hunter-rank-room .hunter-rank-catalog-card {
        border-radius: 14px;
    }

    .hunter-page .hunter-rank-room .glove-preview-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .hunter-page .hunter-rank-room .glove-preview-item {
        min-height: 108px;
        padding: 9px 6px;
        border-radius: 14px;
        background: rgba(255, 255, 255, .62);
    }

    .hunter-page .hunter-rank-room .glove-preview-item img,
    .hunter-page .hunter-rank-room .glove-lock-icon {
        width: 56px;
        height: 56px;
    }

    /* 夥伴：柴元寶房間 */
    .hunter-page .hunter-partner-room {
        background:
            radial-gradient(circle at 50% 18%, rgba(255, 255, 255, .26), transparent 28%),
            linear-gradient(180deg, rgba(255, 244, 214, .76), rgba(92, 48, 22, .24));
    }

    .hunter-page .hunter-partner-room .hunter-pet-card-featured {
        position: relative;
        display: grid;
        grid-template-columns: 116px minmax(0, 1fr);
        gap: 12px;
        align-items: center;
        margin: 0 0 10px;
        padding: 14px;
        border-radius: 24px;
        background:
            radial-gradient(ellipse at 50% 88%, rgba(251, 191, 36, .28), transparent 44%),
            linear-gradient(180deg, rgba(255, 251, 235, .86), rgba(255, 247, 237, .7));
        border: 1px solid rgba(245, 196, 92, .62);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .9),
            0 12px 22px rgba(35, 18, 8, .14);
        backdrop-filter: blur(8px);
    }

    .hunter-page .hunter-partner-room .hunter-pet-card-featured .hunter-pet-image {
        width: 106px;
        height: 106px;
        padding: 8px;
        border-radius: 24px;
        background:
            radial-gradient(circle at 50% 70%, rgba(251, 191, 36, .32), transparent 48%),
            rgba(255, 255, 255, .72);
        border-color: rgba(245, 196, 92, .52);
    }

    .hunter-page .hunter-partner-room .hunter-pet-name-row {
        gap: 6px;
    }

    .hunter-page .hunter-partner-room .hunter-pet-name {
        font-size: 18px;
        color: #4a1f0f;
    }

    .hunter-page .hunter-partner-room .hunter-pet-stage-badge {
        font-size: 9px;
    }

    .hunter-page .hunter-partner-room .hunter-pet-desc {
        margin-bottom: 8px;
        color: #6b2d12;
        font-size: 11px;
        line-height: 1.5;
    }

    .hunter-page .hunter-partner-room .hunter-pet-action-row {
        display: grid;
        gap: 6px;
    }

    .hunter-page .hunter-partner-room .hunter-pet-skill-btn {
        width: 100%;
        padding: 10px 12px;
        border-radius: 16px;
        font-size: 12px;
        box-shadow: 0 8px 16px rgba(22, 163, 74, .22);
    }

    .hunter-page .hunter-partner-room .hunter-pet-skill-status,
    .hunter-page .hunter-partner-room .hunter-pet-skill-result {
        color: #4a1f0f;
        font-size: 11px;
        line-height: 1.45;
    }

    .hunter-page .hunter-partner-room .hunter-partner-header,
    .hunter-page .hunter-partner-room .hunter-partner-chain {
        margin: 0 0 10px;
        border-radius: 20px;
        background: rgba(255, 251, 235, .78);
        border: 1px solid rgba(245, 196, 92, .52);
        box-shadow: 0 8px 16px rgba(35, 18, 8, .1);
        backdrop-filter: blur(8px);
    }

    .hunter-page .hunter-partner-room .hunter-partner-header {
        padding: 10px 12px;
    }

    .hunter-page .hunter-partner-room .hunter-partner-header h3 {
        font-size: 15px;
    }

    .hunter-page .hunter-partner-room .hunter-partner-chain {
        padding: 12px;
    }

    /* 探索：地圖 / 節點 */
    .hunter-page .hunter-explore-room {
        background:
            radial-gradient(circle at 24% 24%, rgba(34, 197, 94, .1), transparent 24%),
            radial-gradient(circle at 84% 74%, rgba(59, 130, 246, .12), transparent 28%),
            linear-gradient(180deg, rgba(43, 29, 16, .66), rgba(115, 62, 22, .36));
    }

    .hunter-page .hunter-explore-room .hunter-subtab-bar {
        position: sticky;
        top: 0;
        z-index: 4;
        margin: 0 0 10px;
        padding: 5px;
        border-radius: 18px;
        background: rgba(17, 24, 39, .72);
        border: 1px solid rgba(251, 191, 36, .28);
        backdrop-filter: blur(10px);
    }

    .hunter-page .hunter-explore-room .hunter-subtab-btn {
        border-radius: 14px;
        padding: 9px 8px;
        color: rgba(255, 247, 237, .82);
        font-size: 12px;
        font-weight: 950;
    }

    .hunter-page .hunter-explore-room .hunter-subtab-btn.active {
        background: linear-gradient(180deg, #fef3c7, #f59e0b);
        color: #431407;
        box-shadow: 0 6px 12px rgba(245, 158, 11, .24);
    }

    .hunter-page .hunter-explore-room .hunter-mine-card,
    .hunter-page .hunter-explore-room .hunter-memory-game-card {
        margin: 0 0 10px;
        border-radius: 24px;
        background:
            radial-gradient(circle at top right, rgba(251, 191, 36, .18), transparent 36%),
            linear-gradient(180deg, rgba(17, 24, 39, .94), rgba(67, 32, 13, .9));
        border: 1px solid rgba(251, 191, 36, .36);
        box-shadow: 0 14px 28px rgba(0, 0, 0, .28);
    }

    .hunter-page .hunter-explore-room .hunter-mine-card h2,
    .hunter-page .hunter-explore-room .hunter-memory-header h3 {
        color: #fff7ed;
    }

    .hunter-page .hunter-explore-room .hunter-mine-card p,
    .hunter-page .hunter-explore-room .hunter-memory-desc {
        color: rgba(255, 247, 237, .72);
        font-size: 12px;
    }

    .hunter-page .hunter-explore-room .hunter-mine-ore-stage {
        transform: scale(.86);
        transform-origin: center;
        margin: -8px 0;
    }

    .hunter-page .hunter-explore-room .hunter-mine-action-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .hunter-page .hunter-explore-room .hunter-mine-cost {
        grid-column: 1 / -1;
        justify-self: center;
        color: #fde68a;
        font-size: 11px;
    }

    .hunter-page .hunter-explore-room .hunter-mine-result,
    .hunter-page .hunter-explore-room .hunter-mine-log-card,
    .hunter-page .hunter-explore-room .hunter-mine-pool-card {
        border-radius: 18px;
        background: rgba(255, 251, 235, .84);
        border-color: rgba(245, 196, 92, .52);
        color: #4a1f0f;
        box-shadow: 0 8px 16px rgba(35, 18, 8, .12);
    }

    .hunter-page .hunter-explore-room .hunter-mine-log-card {
        padding: 12px;
    }

    .hunter-page .hunter-explore-room .hunter-memory-board {
        gap: 6px;
    }

    .hunter-page .hunter-explore-room .hunter-memory-card-tile {
        border-radius: 12px;
    }

    /* 檔案：獵人手冊 */
    .hunter-page .hunter-archive-book {
        background:
            linear-gradient(90deg, rgba(120, 53, 15, .09) 1px, transparent 1px) 0 0 / 28px 28px,
            linear-gradient(180deg, rgba(255, 248, 225, .86), rgba(255, 237, 213, .64));
    }

    .hunter-page .hunter-archive-book .hunter-archive-shell {
        display: grid;
        gap: 10px;
    }

    .hunter-page .hunter-archive-book .hunter-achievement-card {
        padding: 14px;
        border-radius: 22px;
        background:
            radial-gradient(circle at top right, rgba(251, 191, 36, .2), transparent 36%),
            linear-gradient(180deg, rgba(17, 24, 39, .94), rgba(67, 32, 13, .88));
        border: 1px solid rgba(251, 191, 36, .36);
        box-shadow: 0 12px 22px rgba(35, 18, 8, .2);
    }

    .hunter-page .hunter-archive-book .hunter-achievement-header {
        display: grid;
        gap: 8px;
    }

    .hunter-page .hunter-archive-book .hunter-achievement-header h3 {
        font-size: 18px;
    }

    .hunter-page .hunter-archive-book .hunter-achievement-desc {
        font-size: 12px;
    }

    .hunter-page .hunter-archive-book .hunter-achievement-count {
        justify-self: start;
    }

    .hunter-page .hunter-archive-book .hunter-lore-card {
        margin: 0;
        border-radius: 18px;
        background:
            linear-gradient(180deg, rgba(255, 251, 235, .9), rgba(255, 247, 237, .78));
        border: 1px solid rgba(245, 196, 92, .55);
        box-shadow: 0 8px 16px rgba(35, 18, 8, .08);
        backdrop-filter: blur(8px);
    }

    .hunter-page .hunter-archive-book .hunter-lore-card summary {
        padding: 11px 12px;
        color: #4a1f0f;
        font-size: 12px;
    }

    .hunter-page .hunter-archive-book .hunter-lore-content {
        padding: 0 12px 12px;
    }

    .hunter-page .hunter-archive-book .hunter-lore-content p {
        color: #5b250f;
        font-size: 12px;
        line-height: 1.65;
    }
}

@media (max-width: 420px) {
    .hunter-page .hunter-tab-scene-title {
        padding: 10px 12px;
        border-radius: 18px;
    }

    .hunter-page .hunter-tab-scene-title strong {
        font-size: 18px;
    }

    .hunter-page .hunter-tab-scene-title small {
        font-size: 10px;
    }

    .hunter-page .hunter-partner-room .hunter-pet-card-featured {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
    }

    .hunter-page .hunter-partner-room .hunter-pet-card-featured .hunter-pet-image {
        width: 88px;
        height: 88px;
    }

    .hunter-page .hunter-partner-room .hunter-pet-name {
        font-size: 16px;
    }

    .hunter-page .hunter-partner-room .hunter-pet-skill-btn {
        padding: 9px 10px;
        font-size: 11px;
    }

    .hunter-page .hunter-explore-room .hunter-mine-action-row {
        grid-template-columns: 1fr;
    }

    .hunter-page .hunter-rank-room .glove-preview-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================
   Other tabs mobile polish v2
   - one scroll container only: hunter-game-views scrolls, tab views do not create nested scroll traps
   - fix pale-on-pale contrast from generated cards
   - use darker game-scene backgrounds until real background art exists
========================= */
@media (max-width: 768px) {
    .hunter-page .hunter-game-views:not(:has(.hunter-game-view[data-hunter-view="base"].active)) {
        height: calc(100dvh - 176px);
        min-height: 0;
        max-height: none;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 8px;
    }

    .hunter-page .hunter-game-view:not([data-hunter-view="base"]) {
        position: relative;
        min-height: auto;
        padding: 10px 10px 14px;
        overflow: visible !important;
        isolation: isolate;
        color: #4a1f0f;
        background:
            radial-gradient(circle at 18% 18%, rgba(255, 229, 162, .20), transparent 24%),
            radial-gradient(circle at 84% 74%, rgba(248, 180, 74, .14), transparent 30%),
            linear-gradient(180deg, rgba(56, 31, 17, .94), rgba(94, 50, 22, .88) 46%, rgba(43, 22, 11, .96));
    }

    .hunter-page .hunter-game-view:not([data-hunter-view="base"])::before {
        z-index: -1;
        background:
            linear-gradient(90deg, rgba(255, 231, 170, .06) 1px, transparent 1px) 0 0 / 28px 28px,
            linear-gradient(180deg, rgba(255, 251, 235, .10), transparent 36%),
            radial-gradient(ellipse at 50% 110%, rgba(20, 10, 5, .42), transparent 52%);
    }

    .hunter-page .hunter-game-view:not([data-hunter-view="base"])::after {
        content: "";
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 10px;
        z-index: -1;
        height: 96px;
        border-radius: 999px;
        background: radial-gradient(ellipse at center, rgba(0, 0, 0, .20), transparent 68%);
        pointer-events: none;
    }

    .hunter-page .hunter-tab-scene-title {
        background:
            radial-gradient(circle at 88% 20%, rgba(251, 191, 36, .20), transparent 36%),
            linear-gradient(135deg, rgba(25, 18, 15, .96), rgba(73, 38, 19, .94));
        border-color: rgba(245, 196, 92, .62);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .14),
            0 10px 22px rgba(12, 8, 5, .26);
    }

    .hunter-page .hunter-tab-scene-title strong {
        color: #fff7db;
    }

    .hunter-page .hunter-tab-scene-title small {
        color: rgba(255, 247, 219, .84);
    }

    /* 職階：暗色考核板，避免 DB 產生的白字落在淡底上 */
    .hunter-page .hunter-rank-room {
        background:
            radial-gradient(circle at 50% 12%, rgba(251, 191, 36, .16), transparent 26%),
            linear-gradient(180deg, rgba(57, 35, 20, .94), rgba(92, 48, 22, .88) 48%, rgba(41, 23, 13, .96));
    }

    .hunter-page .hunter-rank-room .glove-collection-header,
    .hunter-page .hunter-rank-room .hunter-compact-details {
        background: rgba(255, 246, 223, .88);
        border-color: rgba(245, 196, 92, .70);
        color: #4a1f0f;
    }

    .hunter-page .hunter-rank-room #hunterRankGoalPanel {
        background:
            radial-gradient(circle at 82% 16%, rgba(251, 191, 36, .18), transparent 34%),
            linear-gradient(135deg, rgba(24, 18, 18, .96), rgba(76, 42, 24, .94));
        border-color: rgba(245, 196, 92, .62);
        color: #fff7db;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .12),
            0 14px 30px rgba(20, 10, 5, .28);
    }

    .hunter-page .hunter-rank-room #hunterRankGoalPanel .hunter-rank-goal-kicker,
    .hunter-page .hunter-rank-room #hunterRankGoalPanel .hunter-rank-goal-card span {
        color: #facc15;
    }

    .hunter-page .hunter-rank-room #hunterRankGoalPanel h3,
    .hunter-page .hunter-rank-room #hunterRankGoalPanel .hunter-rank-goal-card strong {
        color: #fff7db;
        text-shadow: 0 2px 0 rgba(0, 0, 0, .24);
    }

    .hunter-page .hunter-rank-room #hunterRankGoalPanel p,
    .hunter-page .hunter-rank-room #hunterRankGoalPanel .hunter-rank-goal-card em {
        color: rgba(255, 247, 219, .78);
    }

    .hunter-page .hunter-rank-room #hunterRankGoalPanel .hunter-rank-goal-card {
        background: rgba(255, 251, 235, .08);
        border-color: rgba(255, 224, 138, .20);
    }

    .hunter-page .hunter-rank-room #hunterRankGoalPanel .hunter-rank-goal-card.is-current {
        background: rgba(37, 99, 235, .22);
        border-color: rgba(147, 197, 253, .58);
    }

    .hunter-page .hunter-rank-room #hunterRankGoalPanel .hunter-rank-goal-card.is-next {
        background: rgba(245, 158, 11, .20);
        border-color: rgba(251, 191, 36, .62);
    }

    /* 夥伴：暖色房間，但內容維持深字 */
    .hunter-page .hunter-partner-room {
        background:
            radial-gradient(circle at 50% 18%, rgba(255, 244, 214, .26), transparent 28%),
            radial-gradient(ellipse at 50% 100%, rgba(19, 10, 6, .30), transparent 48%),
            linear-gradient(180deg, rgba(84, 49, 24, .92), rgba(112, 64, 27, .82) 52%, rgba(48, 26, 13, .96));
    }

    .hunter-page .hunter-partner-room .hunter-pet-card-featured,
    .hunter-page .hunter-partner-room .hunter-partner-header,
    .hunter-page .hunter-partner-room .hunter-partner-chain {
        background: rgba(255, 246, 223, .88);
        border-color: rgba(245, 196, 92, .72);
        color: #4a1f0f;
    }

    /* 探索：黑市頁整體暗化，原石紀錄不要變成淡底白字 */
    .hunter-page .hunter-explore-room {
        background:
            radial-gradient(circle at 28% 22%, rgba(34, 197, 94, .12), transparent 24%),
            radial-gradient(circle at 84% 76%, rgba(59, 130, 246, .14), transparent 30%),
            linear-gradient(180deg, rgba(30, 21, 16, .98), rgba(74, 38, 20, .94) 48%, rgba(24, 14, 10, .98));
    }

    .hunter-page .hunter-explore-room .hunter-mine-log-card {
        background:
            radial-gradient(circle at top right, rgba(251, 191, 36, .14), transparent 34%),
            linear-gradient(180deg, rgba(31, 23, 18, .94), rgba(73, 40, 22, .92));
        border-color: rgba(245, 196, 92, .56);
        color: #fff7db;
        box-shadow: 0 14px 28px rgba(0, 0, 0, .26);
    }

    .hunter-page .hunter-explore-room .hunter-mine-log-list {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .hunter-page .hunter-explore-room .hunter-mine-log-kicker,
    .hunter-page .hunter-explore-room .hunter-mine-log-count,
    .hunter-page .hunter-explore-room .hunter-mine-log-reward span {
        color: #ffe2a1;
    }

    .hunter-page .hunter-explore-room .hunter-mine-log-head h3,
    .hunter-page .hunter-explore-room .hunter-mine-log-main strong {
        color: #fff7db;
    }

    .hunter-page .hunter-explore-room .hunter-mine-log-time,
    .hunter-page .hunter-explore-room .hunter-mine-log-main span,
    .hunter-page .hunter-explore-room .hunter-mine-log-empty {
        color: rgba(255, 247, 219, .74);
    }

    .hunter-page .hunter-explore-room .hunter-mine-log-item,
    .hunter-page .hunter-explore-room .hunter-mine-log-empty {
        background: rgba(255, 251, 235, .07);
        border-color: rgba(255, 224, 138, .18);
    }

    .hunter-page .hunter-explore-room .hunter-mine-result,
    .hunter-page .hunter-explore-room .hunter-mine-pool-card {
        background: rgba(255, 246, 223, .90);
        color: #4a1f0f;
        border-color: rgba(245, 196, 92, .72);
    }

    /* 檔案：手冊維持紙面，但外層用暗場景承接 */
    .hunter-page .hunter-archive-book {
        background:
            radial-gradient(circle at 50% 10%, rgba(251, 191, 36, .12), transparent 28%),
            linear-gradient(180deg, rgba(62, 39, 22, .94), rgba(97, 55, 24, .86) 48%, rgba(45, 25, 13, .96));
    }

    .hunter-page .hunter-archive-book .hunter-lore-card,
    .hunter-page .hunter-archive-book .hunter-disclaimer-card {
        background: rgba(255, 246, 223, .90);
        border-color: rgba(245, 196, 92, .70);
        color: #4a1f0f;
    }
}

@media (max-width: 420px) {
    .hunter-page .hunter-game-views:not(:has(.hunter-game-view[data-hunter-view="base"].active)) {
        height: calc(100dvh - 166px);
        padding: 7px;
    }

    .hunter-page .hunter-game-view:not([data-hunter-view="base"]) {
        padding: 8px 8px 12px;
    }
}