/* ===== MODAL ===== */
    .modal-content {
        background: #0f0a14;
        border-radius: 18px;
        border: 1px solid rgba(224, 64, 200, 0.2);
        color: #fff;
        padding: 10px;
    }

    .modal-ui#Upgradeplanmodal .modal-dialog {
        max-width: 600px;
    }

    .modal-title-custom {
        font-size: 24px;
        margin-bottom: 15px;
        color: #fff;
    }

    .modal-ui .plan-toggle.mb-3 {
        margin-bottom: 2rem !important;
    }

    .modal-ui .modal-footer-custom.mt-3 {
        margin-top: 2rem !important;
    }

    /* ===== TOGGLE ===== */
    .plan-toggle {
        display: flex;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 100px;
        padding: 4px;
        gap: 4px;
    }

    .plan-toggle .nav-link {
        flex: 1;
        text-align: center;
        padding: 8px;
        border-radius: 100px;
        cursor: pointer;
        font-size: 13px;
        color: #aaa;
        transition: 0.3s;
    }

    .plan-toggle .nav-link.active {
        color: #fff;
    }

    .plan-toggle .premium-tab.active {
        background: linear-gradient(135deg, #b826a0, #e040c8);
    }

    .plan-toggle .platinum-tab.active {
        background: linear-gradient(135deg, #9a7830, #c9a84c);
    }

    /* ===== CARD ===== */
    .calendar-card {
        background: #160d1e;
        border-radius: 12px;
        padding: 15px;
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* ================= DATEPICKER ================= */

    .upgrade-plan-calendar .datepicker {
        background: transparent !important;
        border: none !important;
        padding: 5px;
        width: 100%;
    }

    .upgrade-plan-calendar .datepicker-dropdown {
        background: transparent !important;
    }

    /* HEADER */
    .upgrade-plan-calendar .datepicker .datepicker-switch {
        color: #fff;
        font-weight: 600;
        font-size: 14px;
    }

    .upgrade-plan-calendar .datepicker .prev,
    .upgrade-plan-calendar .datepicker .next {
        color: #aaa;
        font-size: 16px;
    }

    .upgrade-plan-calendar .datepicker .prev:hover,
    .upgrade-plan-calendar .datepicker .next:hover {
        color: #e040c8;
    }

    /* ===== TABLE ===== */
    .upgrade-plan-calendar .datepicker table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 6px;
    }

    /* DAY NAMES */
    .upgrade-plan-calendar .datepicker th {
        color: #6f5b86;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-weight: 600;
        padding: 6px 0;
        border: none;
    }

    /* ===== DATE CELLS ===== */
    .upgrade-plan-calendar .datepicker td {
        width: 36px;
        height: 36px;
        text-align: center;
        font-size: 13px;
        color: #fff;
        /* enabled dates white */
        cursor: pointer;
        border: none;
        border-radius: 8px;
        transition: all 0.2s ease;
        background: transparent;
    }

    /* ===== ENABLED DATES BORDER ===== */
    .upgrade-plan-calendar .datepicker td.old,
    .upgrade-plan-calendar .datepicker td.new {
        cursor: pointer !important;
    }

    .upgrade-plan-calendar .datepicker td.day:not(.disabled) {
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15) !important;
    }

    /* HOVER */
    .upgrade-plan-calendar .datepicker td.day:hover {
        background: rgba(224, 64, 200, 0.15);
        color: #fff;
        box-shadow: inset 0 0 0 1px rgba(224, 64, 200, 0.4);
    }

    /* ===== TODAY ===== */
    .upgrade-plan-calendar .datepicker td.today {
        background: rgba(224, 64, 200, 0.08) !important;
        color: #e040c8 !important;
        font-weight: 600 !important;
        box-shadow: inset 0 0 0 1.5px #e040c8;
    }

    /* ===== TODAY - PLATINUM ===== */
    .platinum-mode .upgrade-plan-calendar .datepicker td.today {
        background: rgba(201, 168, 76, 0.08) !important;
        color: #c9a84c !important;
        box-shadow: inset 0 0 0 1.5px #c9a84c;
    }

    /* ===== SELECTED PREMIUM ===== */
    .upgrade-plan-calendar .datepicker td.active,
    .upgrade-plan-calendar .datepicker td.active:hover {
        background: linear-gradient(135deg, #b826a0, #e040c8) !important;
        color: #fff !important;
        font-weight: 600;
        box-shadow: 0 0 0 3px #160d1e;
    }

    /* ===== SELECTED PLATINUM ===== */
    .platinum-mode .upgrade-plan-calendar .datepicker td.active {
        background: linear-gradient(135deg, #9a7830, #c9a84c) !important;
        box-shadow: 0 0 0 3px #160d1e;
        color: #fff !important;
    }

    .premium-mode .upgrade-plan-calendar .datepicker td.active {
        background: linear-gradient(135deg, #b826a0, #e040c8) !important;
        box-shadow: 0 0 0 3px #160d1e;
        color: #fff !important;
    }

    /* ===== PLATINUM ENABLED BORDER ===== */
    .platinum-mode .upgrade-plan-calendar .datepicker td.day:not(.disabled) {
        box-shadow: inset 0 0 0 1px rgba(201, 168, 76, 0.25) !important;
    }

    /* ===== DISABLED ===== */
    .upgrade-plan-calendar .datepicker td.old,
    .upgrade-plan-calendar .datepicker td.new,
    .upgrade-plan-calendar .datepicker td.disabled,
    .upgrade-plan-calendar .datepicker td.disabled:hover {
        color: rgba(255, 255, 255, 0.3) !important;
        background: transparent !important;
        cursor: not-allowed;
        box-shadow: none !important;
    }

    /* REMOVE DEFAULT BG */
    .upgrade-plan-calendar .datepicker table tr td,
    .upgrade-plan-calendar .datepicker table tr th {
        background: transparent !important;
    }

    /* ===== SELECTED COUNT CARD ===== */
    .selected-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;

        margin: 15px auto 5px;
        padding: 10px 18px;

        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(224, 64, 200, 0.2);
        border-radius: 50px;

        font-size: 13px;
        font-weight: 500;
        color: #cfcfcf;

        backdrop-filter: blur(8px);
    }

    /* NUMBER */
    .selected-count span {
        font-size: 16px;
        font-weight: 700;
        color: #e040c8;
    }

    /* HOVER EFFECT */
    .selected-count:hover {
        border-color: rgba(224, 64, 200, 0.5);
        background: rgba(224, 64, 200, 0.08);
        transform: translateY(-1px);
        transition: 0.3s;
    }

    /* PLATINUM MODE */
    .platinum-mode .selected-count span {
        color: #c9a84c;
    }

    .platinum-mode .selected-count:hover {
        border-color: rgba(201, 168, 76, 0.5);
        background: rgba(201, 168, 76, 0.08);
    }

    /* ===== BUTTON ===== */
    .btn-save {
        width: 100%;
        padding: 12px;
        border-radius: 10px;
        border: none;
        font-weight: 600;
        letter-spacing: 1px;
        cursor: pointer;
    }

    .btn-save-premium {
        background: linear-gradient(135deg, #b826a0, #e040c8);
        color: #fff;
    }

    .btn-save-platinum {
        background: linear-gradient(135deg, #9a7830, #c9a84c);
        color: #fff;
    }