/* ------------------------------------------------------------------
 * Islam92 Pro: profile menu, plan page, payment + app popups
 * Light theme by default, dark theme under body.pb-theme-dark
 * ------------------------------------------------------------------ */

:root {
    --pro-accent: var(--theme-primary-color, #E91E63);
    --pro-gold: #f5a524;
    --pro-card: #ffffff;
    --pro-text: #212529;
    --pro-muted: #6c757d;
    --pro-line: rgba(0, 0, 0, .08);
    --pro-soft: #f3f4f6;
}
body.pb-theme-dark {
    --pro-card: #22272e;
    --pro-text: #f1f3f5;
    --pro-muted: #9aa4af;
    --pro-line: rgba(255, 255, 255, .09);
    --pro-soft: #2b313a;
}

/* ---------- Avatar ---------- */
.pro-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--pro-accent);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
}
.pro-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pro-avatar--lg { width: 52px; height: 52px; font-size: 20px; }
.pro-avatar--xl { width: 64px; height: 64px; font-size: 24px; }

/* ---------- Free / Pro badge ---------- */
.pro-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: var(--pro-soft);
    color: var(--pro-muted);
}
.pro-badge--pro { background: linear-gradient(135deg, #f7b733, #f5a524); color: #3b2600; }

/* ---------- Header profile menu ---------- */
.pro-menu .pro-menu__toggle {
    position: relative;
    display: inline-flex;
    padding: 2px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}
.pro-menu .pro-menu__toggle:focus-visible { outline: 2px solid var(--pro-accent); outline-offset: 2px; }
.pro-menu__toggle.is-pro { box-shadow: 0 0 0 2px var(--pro-gold); }
.pro-menu { position: relative; }
/* Float over the page (the navbar would otherwise push the menu into the layout) */
.navbar-nav .pro-menu .dropdown-menu,
.pro-menu .dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: auto;
    z-index: 1060;
    max-width: calc(100vw - 24px);
    width: 280px;
    padding: 8px;
    border: 1px solid var(--pro-line);
    border-radius: 14px;
    background: var(--pro-card);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
}
.pro-menu__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--pro-line);
}
.pro-menu__who { min-width: 0; }
.pro-menu__name {
    display: block;
    font-weight: 700;
    font-size: 15px;
    color: var(--pro-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pro-menu__email {
    display: block;
    font-size: 12px;
    color: var(--pro-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}
.pro-menu__until { display: block; font-size: 11px; color: var(--pro-muted); margin-top: 4px; }
.pro-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--pro-text);
}
.pro-menu .dropdown-item svg { flex: none; opacity: .75; }
.pro-menu .dropdown-item:hover,
.pro-menu .dropdown-item:focus { background: var(--pro-soft); color: var(--pro-text); }
.pro-menu .dropdown-item .pro-badge { margin-left: auto; }
.pro-menu .dropdown-item--danger,
.pro-menu .dropdown-item--danger:hover { color: #dc3545; }
.pro-menu .dropdown-divider { border-color: var(--pro-line); margin: 6px 0; }

/* ---------- Plan page ---------- */
.pro-plan { color: var(--pro-text); }
.pro-plan h1, .pro-plan h2, .pro-plan h3, .pro-plan h4, .pro-plan h5 { color: var(--pro-text); }
.pro-plan__intro { max-width: 640px; margin-bottom: 24px; }
.pro-plan__intro p { color: var(--pro-muted); margin: 0; }

.pro-box {
    background: var(--pro-card);
    border: 1px solid var(--pro-line);
    border-radius: 16px;
    padding: 20px;
}
.pro-status { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.pro-status__text { flex: 1; min-width: 200px; }
.pro-status__name { font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.pro-status__line { color: var(--pro-muted); font-size: 13px; margin: 4px 0 0; }

.pro-notice {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    border-color: var(--pro-accent);
}
.pro-notice p { flex: 1; min-width: 220px; margin: 0; }

.pro-packages {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.pro-pack { display: flex; flex-direction: column; position: relative; }
.pro-pack.is-current { border-color: var(--pro-gold); box-shadow: 0 0 0 1px var(--pro-gold); }
.pro-pack__tag {
    position: absolute;
    top: -10px;
    right: 14px;
}
.pro-pack__name { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.pro-pack__price { font-size: 28px; font-weight: 800; line-height: 1.1; color: var(--pro-text); }
.pro-pack__dur { color: var(--pro-muted); font-size: 13px; margin-bottom: 12px; }
.pro-pack__desc { color: var(--pro-muted); font-size: 13px; margin-bottom: 16px; flex: 1; white-space: pre-line; }

.pro-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 18px;
    border: 0;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    background: var(--pro-accent);
    color: #fff;
}
.pro-btn:hover { color: #fff; filter: brightness(1.06); }
.pro-btn--block { width: 100%; }
.pro-btn--ghost { background: var(--pro-soft); color: var(--pro-text); }
.pro-btn--ghost:hover { color: var(--pro-text); }
.pro-btn--wa { background: #25d366; color: #fff; }
.pro-btn--app { background: #111; color: #fff; }
body.pb-theme-dark .pro-btn--app { background: #fff; color: #111; }
.pro-btn[disabled] { opacity: .6; cursor: default; }

.pro-coupon { margin-bottom: 20px; }
.pro-coupon h5 { font-size: 16px; margin: 0 0 4px; }
.pro-coupon p { color: var(--pro-muted); font-size: 13px; margin: 0 0 12px; }
.pro-coupon__row { display: flex; gap: 10px; flex-wrap: wrap; }
.pro-coupon__row input {
    flex: 1;
    min-width: 180px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--pro-line);
    border-radius: 999px;
    background: var(--pro-soft);
    color: var(--pro-text);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.pro-coupon__row input:focus { outline: 2px solid var(--pro-accent); outline-offset: 1px; }

.pro-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pro-compare h5 { font-size: 15px; margin: 0 0 10px; }
.pro-compare ul { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.pro-compare li { display: flex; gap: 8px; padding: 4px 0; color: var(--pro-text); }
.pro-compare li.is-no { color: var(--pro-muted); }
@media (max-width: 575px) { .pro-compare { grid-template-columns: 1fr; } }

/* ---------- Popups ---------- */
.pro-modal .modal-content {
    border: 0;
    border-radius: 18px;
    background: var(--pro-card);
    color: var(--pro-text);
}
.pro-modal .modal-header { border-bottom: 1px solid var(--pro-line); }
.pro-modal .modal-title { color: var(--pro-text); font-weight: 700; }
.pro-modal .btn-close { filter: none; }
body.pb-theme-dark .pro-modal .btn-close { filter: invert(1); }
.pro-modal__lead { color: var(--pro-muted); font-size: 14px; }
.pro-pay__pack {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--pro-soft);
    margin-bottom: 16px;
    font-weight: 600;
}
.pro-pay__qr {
    display: block;
    width: 200px;
    max-width: 100%;
    margin: 0 auto 6px;
    padding: 8px;
    border-radius: 14px;
    background: #fff;
}
.pro-pay__qr-note { text-align: center; color: var(--pro-muted); font-size: 12px; margin-bottom: 16px; }
.pro-pay__rows { border: 1px solid var(--pro-line); border-radius: 12px; margin-bottom: 14px; }
.pro-pay__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--pro-line);
}
.pro-pay__row:last-child { border-bottom: 0; }
.pro-pay__label { width: 120px; flex: none; font-size: 12px; color: var(--pro-muted); }
.pro-pay__value { flex: 1; font-weight: 700; word-break: break-all; }
.pro-copy {
    flex: none;
    border: 0;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 12px;
    background: var(--pro-soft);
    color: var(--pro-text);
    cursor: pointer;
}
.pro-pay__steps { font-size: 13px; color: var(--pro-text); background: var(--pro-soft); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; white-space: pre-line; }
.pro-getapp__icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    margin: 4px auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pro-soft);
    color: var(--pro-accent);
}
.pro-getapp__actions { display: grid; gap: 10px; margin-top: 18px; }

.pb-btn-download.is-busy { opacity: .5; pointer-events: none; }


/* "App mein kholein" button on song pages (Android only) */
.pro-open-app {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--pro-accent, #e91e63);
    color: #fff !important;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none !important;
    box-shadow: 0 6px 18px rgba(233, 30, 99, .25);
}
.pro-open-app:active { transform: scale(.98); }