/* ========================================
   My Points Component Styles
   BEM methodology, colors/spacing per Assets/design/mis-puntos-design-spec.md
   ======================================== */

:root {
    --points-green: var(--brand-color, #4F8421);
    --points-green-chip-bg: color-mix(in srgb, var(--brand-color, #4F8421) 18%, white);
    --points-green-chip-fg: var(--brand-color-dark-20, #3B6519);
    --points-red: #CC0000;
    --points-red-chip-bg: #FBE3E3;
    --points-yellow: #E0A800;
    --points-yellow-ink: #946F00;
    --points-yellow-chip-bg: color-mix(in srgb, #E0A800 15%, white);
    --points-surface: #FFFFFF;
    --points-surface-sunken: #F7F7F5;
    --points-border: #E2E2E2;
    --points-text-heading: #252525;
    --points-text-body: #222222;
    --points-text-muted: #6B6B6B;
    --points-text-disabled: #C9C9C9;
    --points-radius: 8px;
    --points-radius-sm: 4px;
    --points-radius-pill: 999px;
}

@keyframes points-shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

.my-points {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--points-surface-sunken);
    font-family: Roboto, Helvetica, Arial, sans-serif;
    color: var(--points-text-body);
    overflow: hidden;
}

/* ---------- Header ---------- */

.my-points__header {
    background: var(--points-green);
    color: #FFFFFF;
    padding: 20px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.my-points__header-eyebrow {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.my-points__header-icon {
    font-size: 13px;
}

.my-points__balance-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.my-points__balance {
    flex: 1 1 200px;
    min-width: 150px;
    font-size: 56px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}

.my-points__skeleton--balance {
    flex: 1 1 200px;
}

.my-points__stats {
    flex: 1 1 320px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.my-points__stat {
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .30);
    border-radius: var(--points-radius);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.my-points__stat-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #EAF7DE;
}

.my-points__stat-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.my-points__expiry-list {
    border-top: 1px solid rgba(255, 255, 255, .28);
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.my-points__expiry-item {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
    font-size: 13.5px;
}

/* ---------- Skeletons ---------- */

.my-points__skeleton {
    border-radius: var(--points-radius-sm);
    background: linear-gradient(90deg, rgba(255, 255, 255, .18) 25%, rgba(255, 255, 255, .34) 37%, rgba(255, 255, 255, .18) 63%);
    background-size: 300% 100%;
    animation: points-shimmer 1.4s ease infinite;
    display: block;
}

.my-points__skeleton--balance {
    height: 52px;
    width: 180px;
}

.my-points__skeleton--stat {
    height: 22px;
}

.my-points__skeleton--month {
    height: 12px;
    width: 120px;
    background: linear-gradient(90deg, #EDEDED 25%, #E0E0E0 37%, #EDEDED 63%);
    background-size: 300% 100%;
    margin-bottom: 12px;
}

.my-points__skeleton--line60,
.my-points__skeleton--line40,
.my-points__skeleton--line55,
.my-points__skeleton--line35,
.my-points__skeleton--chip,
.my-points__skeleton--amount {
    background: linear-gradient(90deg, #EDEDED 25%, #E0E0E0 37%, #EDEDED 63%);
    background-size: 300% 100%;
}

.my-points__skeleton--line60 {
    height: 15px;
    width: 60%;
}

.my-points__skeleton--line40 {
    height: 11px;
    width: 40%;
}

.my-points__skeleton--line55 {
    height: 15px;
    width: 55%;
}

.my-points__skeleton--line35 {
    height: 11px;
    width: 35%;
}

.my-points__skeleton--chip {
    height: 20px;
    width: 96px;
    border-radius: var(--points-radius-pill);
}

.my-points__skeleton--amount {
    height: 26px;
    width: 84px;
    border-radius: var(--points-radius-sm);
    flex: 0 0 auto;
}

/* ---------- Tabs ---------- */

.my-points__tabs-bar {
    background: var(--points-surface);
    border-bottom: 1px solid var(--points-border);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
}

.my-points__tabs {
    flex: 1 1 auto;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px 0;
}

.my-points__tabs::-webkit-scrollbar {
    display: none;
}

.my-points__tab {
    border: none;
    border-radius: var(--points-radius-pill);
    padding: 8px 15px;
    font-size: 13.5px;
    font-family: inherit;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    background: transparent;
    color: #3B3B3B;
    transition: background-color .12s ease, color .12s ease;
}

.my-points__tab--active {
    background: var(--points-green);
    color: #FFFFFF;
    font-weight: 700;
}

.my-points__calendar-button {
    border: 1px solid var(--points-border);
    background: var(--points-surface);
    color: #3B3B3B;
    border-radius: var(--points-radius-sm);
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.my-points__calendar-button--active {
    border-color: var(--points-green);
    background: var(--points-green-chip-bg);
    color: var(--points-green-chip-fg);
}

/* ---------- Range chip ---------- */

.my-points__range-chip-bar {
    background: var(--points-surface);
    border-bottom: 1px solid var(--points-border);
    padding: 0 12px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.my-points__range-chip-hint {
    font-size: 12px;
    color: var(--points-text-muted);
}

.my-points__range-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--points-green-chip-bg);
    color: var(--points-green-chip-fg);
    border-radius: var(--points-radius-pill);
    padding: 5px 6px 5px 12px;
    font-size: 12.5px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.my-points__range-chip-close {
    border: none;
    background: var(--points-green-chip-fg);
    color: #FFFFFF;
    width: 18px;
    height: 18px;
    border-radius: var(--points-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

/* ---------- Search ---------- */

.my-points__search {
    background: var(--points-surface);
    border-bottom: 1px solid var(--points-border);
    padding: 12px 16px;
    position: relative;
    display: flex;
    align-items: center;
}

.my-points__search-icon {
    position: absolute;
    left: 28px;
    display: flex;
    color: var(--points-text-muted);
    pointer-events: none;
}

.my-points__search-input {
    width: 100%;
    padding: 10px 38px;
    background: #F2F2F2;
    border: none;
    border-radius: var(--points-radius-sm);
    margin: 0;
    font-size: 14px;
    font-family: inherit;
    color: var(--points-text-body);
}

.my-points__search-input:focus {
    outline: 2px solid var(--points-green);
    outline-offset: -1px;
}

.my-points__search-clear {
    position: absolute;
    right: 26px;
    border: none;
    background: #DDDDDD;
    color: #444444;
    width: 20px;
    height: 20px;
    border-radius: var(--points-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

/* ---------- Content area ---------- */

.my-points__content {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px;
}

.my-points__loading {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.my-points__skeleton-card {
    background: var(--points-surface);
    border: 1px solid var(--points-border);
    border-radius: var(--points-radius);
    padding: 16px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.my-points__skeleton-card-lines {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* ---------- States (empty / error) ---------- */

.my-points__state {
    background: var(--points-surface);
    border: 1px solid var(--points-border);
    border-radius: var(--points-radius);
    padding: 32px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

.my-points__state-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--points-radius-pill);
    background: #F2F2F2;
    color: #8A8A8A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.my-points__state-icon--error {
    width: 48px;
    height: 48px;
    background: var(--points-red-chip-bg);
    color: var(--points-red);
}

.my-points__state-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--points-text-heading);
}

.my-points__state-text {
    font-size: 14px;
    color: var(--points-text-muted);
    max-width: 34ch;
}

.my-points__state-action {
    margin-top: 4px;
    border: 2px solid var(--points-green);
    background: transparent;
    color: var(--points-green);
    border-radius: var(--points-radius-sm);
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

.my-points__state-action:hover {
    background: var(--points-green);
    color: #FFFFFF;
}

/* ---------- Movements list ---------- */

.my-points__list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.my-points__month-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.my-points__month-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--points-text-muted);
}

.my-points__movement {
    background: var(--points-surface);
    border: 1px solid var(--points-border);
    border-radius: var(--points-radius);
    box-shadow: 0 1px 2px rgba(38, 50, 56, .05);
    overflow: hidden;
}

.my-points__movement-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    cursor: pointer;
}

.my-points__movement-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    min-width: 0;
}

.my-points__movement-id-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.my-points__movement-id {
    font-size: 16px;
    font-weight: 700;
    color: var(--points-text-heading);
    letter-spacing: .01em;
}

.my-points__movement-caret {
    display: inline-flex;
    color: var(--points-text-muted);
    transition: transform .12s ease;
}

.my-points__movement-caret--open {
    transform: rotate(180deg);
}

.my-points__movement-date {
    font-size: 13px;
    color: var(--points-text-muted);
    font-variant-numeric: tabular-nums;
}

.my-points__movement-chip {
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: var(--points-radius-pill);
}

.my-points__movement-chip--accumulation {
    background: var(--points-green-chip-bg);
    color: var(--points-green-chip-fg);
}

.my-points__movement-chip--redemption {
    background: var(--points-red-chip-bg);
    color: var(--points-red);
}

.my-points__movement-chip--expiration {
    background: var(--points-yellow-chip-bg);
    color: var(--points-yellow-ink);
}

.my-points__movement-amount-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex: 0 0 auto;
}

.my-points__movement-amount {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}

.my-points__movement-amount--accumulation {
    color: var(--points-green);
}

.my-points__movement-amount--redemption {
    color: var(--points-red);
}

.my-points__movement-amount--expiration {
    color: var(--points-yellow-ink);
}

.my-points__movement-amount-label {
    font-size: 12px;
    color: var(--points-text-muted);
}

.my-points__detail {
    border-top: 1px solid var(--points-border);
    padding: 4px 16px 10px;
}

.my-points__detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px dashed var(--points-border);
}

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

.my-points__detail-name {
    font-size: 14px;
    color: var(--points-text-body);
}

.my-points__detail-name--unknown {
    color: var(--points-text-muted);
    font-style: italic;
}

.my-points__detail-value {
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.my-points__detail-value--accumulation {
    color: var(--points-green);
}

.my-points__detail-value--redemption {
    color: var(--points-red);
}

.my-points__detail-value--expiration {
    color: var(--points-yellow-ink);
}

/* ---------- Load more ---------- */

.my-points__load-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
}

.my-points__load-more-button {
    width: 100%;
    border: 2px solid var(--points-green);
    background: transparent;
    color: var(--points-green);
    border-radius: var(--points-radius-sm);
    padding: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

.my-points__load-more-button:hover {
    background: var(--points-green);
    color: #FFFFFF;
}

.my-points__load-more-count,
.my-points__load-more-text {
    font-size: 12px;
    color: var(--points-text-muted);
    text-align: center;
}

/* ---------- Providers ---------- */

.my-points__providers {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.my-points__providers-subtitle {
    font-size: 14px;
    color: var(--points-text-muted);
}

.my-points__providers-table-wrap {
    display: none;
    background: var(--points-surface);
    border: 1px solid var(--points-border);
    border-radius: var(--points-radius);
    overflow: hidden;
}

.my-points__providers-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.my-points__providers-th {
    text-align: right;
    padding: 12px 20px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--points-text-muted);
    background: var(--points-surface-sunken);
    border-bottom: 1px solid var(--points-border);
}

.my-points__providers-table thead th:first-child,
.my-points__providers-name {
    text-align: left;
}

.my-points__providers-th--acc {
    color: var(--points-green);
}

.my-points__providers-th--red {
    color: var(--points-red);
}

.my-points__providers-th--exp {
    color: var(--points-yellow-ink);
}

.my-points__providers-table tbody tr {
    border-bottom: 1px solid #F2F2F2;
}

.my-points__providers-name {
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 700;
    color: var(--points-text-heading);
}

.my-points__providers-acc,
.my-points__providers-red,
.my-points__providers-exp,
.my-points__providers-bal {
    text-align: right;
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 700;
}

.my-points__providers-acc {
    color: var(--points-green);
}

.my-points__providers-red {
    color: var(--points-red);
}

.my-points__providers-exp {
    color: var(--points-yellow-ink);
}

.my-points__providers-bal {
    font-size: 17px;
    color: var(--points-text-heading);
}

.my-points__providers-row--total {
    background: var(--points-green);
}

.my-points__providers-row--total th,
.my-points__providers-row--total td {
    color: #FFFFFF;
}

.my-points__providers-row--total .my-points__providers-name {
    font-size: 13px;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.my-points__provider-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.my-points__provider-card {
    background: var(--points-surface);
    border: 1px solid var(--points-border);
    border-radius: var(--points-radius);
    box-shadow: 0 1px 2px rgba(38, 50, 56, .05);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.my-points__provider-card--total {
    background: var(--points-green);
    color: #FFFFFF;
    border: none;
}

.my-points__provider-card-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.my-points__provider-card-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--points-text-heading);
}

.my-points__provider-card--total .my-points__provider-card-name {
    color: #FFFFFF;
    font-size: 13px;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.my-points__provider-card-balance-block {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.my-points__provider-card-balance {
    font-size: 22px;
    font-weight: 700;
    color: var(--points-text-heading);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.my-points__provider-card--total .my-points__provider-card-balance {
    color: #FFFFFF;
    font-size: 24px;
}

.my-points__provider-card-balance-label {
    font-size: 11px;
    color: var(--points-text-muted);
}

.my-points__provider-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    border-top: 1px dashed var(--points-border);
    padding-top: 10px;
}

.my-points__provider-card--total .my-points__provider-card-grid {
    border-top: 1px solid rgba(255, 255, 255, .3);
}

.my-points__provider-card-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.my-points__provider-card-metric-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--points-text-muted);
}

.my-points__provider-card--total .my-points__provider-card-metric-label {
    color: #EAF7DE;
}

.my-points__provider-card-metric-value {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--points-text-heading);
}

.my-points__provider-card-metric-value--acc {
    color: var(--points-green);
}

.my-points__provider-card-metric-value--red {
    color: var(--points-red);
}

.my-points__provider-card-metric-value--exp {
    color: var(--points-yellow-ink);
}

.my-points__provider-card--total .my-points__provider-card-metric-value {
    color: #FFFFFF;
}

/* Providers: table from tablet width up, stacked cards on mobile */
@media (min-width: 768px) {
    .my-points__providers-table-wrap {
        display: block;
    }

    .my-points__provider-cards {
        display: none;
    }
}

/* ---------- Calendar modal ---------- */

.my-points--calendar-open {
    min-height: 600px;
}

.my-points__calendar-overlay {
    position: absolute;
    inset: 0;
    background: rgba(38, 50, 56, .45);
    display: flex;
    /* align-items must stay flex-start: flexbox defaults to stretch, which would make
       the dialog stretch to fill this overlay's full height (the same tall, unclamped
       height that forces the static top below) and leave blank space under its content. */
    align-items: flex-start;
    justify-content: center;
    padding: 16px;
    z-index: 5;
}

.my-points__calendar-dialog {
    /* Static top instead of the overlay's `align-items: center`: `.my-points` has no
       clamped height, so a long movements list makes it grow tall, and centering the
       dialog inside that full height could place it far below the visible viewport.
       A fixed offset keeps it anchored near the calendar button that opens it. */
    position: relative;
    top: 64px;
    background: var(--points-surface);
    border-radius: var(--points-radius);
    box-shadow: 0 8px 24px rgba(38, 50, 56, .28);
    width: 100%;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.my-points__calendar-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--points-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.my-points__calendar-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--points-text-heading);
}

.my-points__calendar-close {
    border: none;
    background: transparent;
    color: var(--points-text-muted);
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
}

.my-points__calendar-fields {
    padding: 14px 16px;
    display: flex;
    gap: 10px;
}

.my-points__calendar-field {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.my-points__calendar-field-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--points-text-muted);
}

.my-points__calendar-field-value {
    border: 1px solid var(--points-border);
    border-radius: var(--points-radius-sm);
    padding: 9px 10px;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--points-text-body);
    background: var(--points-surface-sunken);
}

.my-points__calendar-nav {
    padding: 0 12px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.my-points__calendar-nav-button {
    border: 1px solid var(--points-border);
    background: var(--points-surface);
    border-radius: var(--points-radius-sm);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--points-text-heading);
    cursor: pointer;
    padding: 0;
}

.my-points__calendar-nav-button:disabled {
    background: var(--points-surface-sunken);
    color: var(--points-text-disabled);
    cursor: not-allowed;
}

.my-points__calendar-month-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--points-text-heading);
}

.my-points__calendar-grid {
    padding: 0 12px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.my-points__calendar-weekday {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #8A8A8A;
    padding: 4px 0;
}

.my-points__calendar-day {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    height: 34px;
    font-size: 13px;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    border-radius: var(--points-radius-sm);
    color: var(--points-text-body);
}

.my-points__calendar-day--empty {
    cursor: default;
}

.my-points__calendar-day--in-range {
    background: var(--points-green-chip-bg);
    color: var(--points-green-chip-fg);
}

.my-points__calendar-day--selected {
    background: var(--points-green);
    color: #FFFFFF;
    font-weight: 700;
    border-radius: var(--points-radius-pill);
}

.my-points__calendar-day--disabled {
    color: var(--points-text-disabled);
    cursor: not-allowed;
}

.my-points__calendar-hint {
    padding: 10px 16px 4px;
    font-size: 11.5px;
    color: #8A8A8A;
}

.my-points__calendar-footer {
    padding: 12px 16px 16px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    border-top: 1px solid var(--points-border);
    margin-top: 8px;
}

.my-points__calendar-cancel {
    border: 1px solid var(--points-border);
    background: var(--points-surface);
    color: #3B3B3B;
    border-radius: var(--points-radius-sm);
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.my-points__calendar-apply {
    border: none;
    background: var(--points-green);
    color: #FFFFFF;
    border-radius: var(--points-radius-sm);
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.my-points__calendar-apply:disabled {
    opacity: .5;
    cursor: not-allowed;
}