a,
a:hover,
a:focus,
a:active {
    text-decoration: none !important;
}

/* =========================================================
   CUSTOMER LOGIN PAGE
   ========================================================= */

.login-outer {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(91, 60, 196, 0.1),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(18, 97, 189, 0.1),
            transparent 30%
        ),
        #f5f7fb;
    box-sizing: border-box;
}

.login-card {
    width: 100%;
    max-width: 1050px;
    min-height: 600px;
    display: grid;
    grid-template-columns: 48% 52%;
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 70px rgba(30, 42, 70, 0.15);
    position: relative;
}

/* =========================================================
   LEFT PANEL
   ========================================================= */

.login-left {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 65px 60px;
    overflow: hidden;

    background: linear-gradient(145deg, #0b4ea2 0%, #1261bd 48%, #0876d1 100%);
    color: #ffffff;
}

.login-left::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    top: -130px;
    right: -100px;
    background: rgba(255, 255, 255, 0.08);
}

.login-left::after {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    bottom: -120px;
    left: -100px;
    background: rgba(255, 255, 255, 0.07);
}

/* =========================================================
   LOGO
   ========================================================= */

.brand-logo {
    position: relative;
    z-index: 2;
    margin-bottom: 45px;
}

.brand-logo img {
    display: block;
    max-width: 190px;
    max-height: 75px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* =========================================================
   LEFT CONTENT
   ========================================================= */

.login-left h1 {
    position: relative;
    z-index: 2;

    margin: 0 0 8px;

    font-size: 48px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: 2px;

    color: #ffffff;
}

.login-left h2 {
    position: relative;
    z-index: 2;

    margin: 0 0 22px;

    font-size: 27px;
    line-height: 1.3;
    font-weight: 700;

    color: #ffffff;
}

.login-left p {
    position: relative;
    z-index: 2;

    max-width: 400px;
    margin: 0;

    font-size: 15px;
    line-height: 1.8;
    font-weight: 400;

    color: rgba(255, 255, 255, 0.88);
}

/* =========================================================
   RIGHT PANEL
   ========================================================= */

.login-right {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 65px 70px;

    background: #ffffff;
}

.login-right h3 {
    margin: 0 0 8px;

    color: #202438;

    font-size: 34px;
    line-height: 1.25;
    font-weight: 750;
}

.login-right .subtitle {
    margin: 0 0 32px;

    color: #7d8395;

    font-size: 14px;
    line-height: 1.6;
}

/* =========================================================
   ERROR MESSAGE
   ========================================================= */

.login-right .alert {
    border: 0;
    border-radius: 10px;

    padding: 12px 15px;
    margin-bottom: 20px;

    font-size: 13px;
    line-height: 1.5;
}

/* =========================================================
   INPUT WRAPPER
   ========================================================= */

.input-wrap {
    position: relative;

    width: 100%;
    height: 58px;

    margin-bottom: 18px;
}

.input-wrap > i {
    position: absolute;

    left: 19px;
    top: 50%;

    transform: translateY(-50%);

    z-index: 2;

    font-size: 17px;

    color: #7c8498;

    pointer-events: none;
}

/* =========================================================
   INPUT
   ========================================================= */

.input-wrap input {
    width: 100%;
    height: 100%;

    box-sizing: border-box;

    padding: 0 52px;

    border: 1px solid #e2e6ef;
    border-radius: 12px;

    outline: none;

    background: #f9fafc;

    color: #25293a;

    font-size: 14px;
    font-weight: 500;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.input-wrap input::placeholder {
    color: #9aa1b2;
    font-weight: 400;
}

.input-wrap input:hover {
    border-color: #cdd3df;
}

.input-wrap input:focus {
    border-color: #1261bd;

    background: #ffffff;

    box-shadow: 0 0 0 4px rgba(18, 97, 189, 0.09);
}

/* =========================================================
   PASSWORD SHOW/HIDE
   ========================================================= */

.toggle-show {
    position: absolute;

    right: 17px;
    top: 50%;

    transform: translateY(-50%);

    z-index: 3;

    cursor: pointer;

    color: #1261bd;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.7px;

    user-select: none;

    transition: color 0.2s ease;
}

.toggle-show:hover {
    color: #0b4ea2;
}

/* =========================================================
   FORM ROW
   ========================================================= */

.form-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin: 5px 0 25px;

    font-size: 13px;
}

.form-row-between label {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin: 0;

    color: #777f92;

    font-size: 13px;

    cursor: pointer;
}

.form-row-between input[type="checkbox"] {
    width: 15px;
    height: 15px;

    margin: 0;

    accent-color: #1261bd;

    cursor: pointer;
}

/* =========================================================
   SIGN IN BUTTON
   ========================================================= */

.btn-signin {
    width: 100%;
    height: 56px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 12px;

    outline: none;

    cursor: pointer;

    background: linear-gradient(135deg, #0b4ea2 0%, #1261bd 50%, #0876d1 100%);

    color: #ffffff;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 1px;

    box-shadow: 0 10px 25px rgba(18, 97, 189, 0.24);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}

.btn-signin:hover {
    transform: translateY(-2px);

    box-shadow: 0 14px 30px rgba(18, 97, 189, 0.3);
}

.btn-signin:active {
    transform: translateY(0);
}

.btn-signin:focus {
    outline: none;

    box-shadow:
        0 0 0 4px rgba(18, 97, 189, 0.12),
        0 10px 25px rgba(18, 97, 189, 0.24);
}

/* =========================================================
   RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 900px) {
    .login-card {
        max-width: 760px;
        grid-template-columns: 1fr;
    }

    .login-left {
        min-height: 300px;
        padding: 45px 50px;
    }

    .brand-logo {
        margin-bottom: 25px;
    }

    .login-left h1 {
        font-size: 38px;
    }

    .login-left h2 {
        font-size: 23px;
    }

    .login-left p {
        max-width: 600px;
    }

    .login-right {
        padding: 50px;
    }
}

/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 576px) {
    .login-outer {
        min-height: 100vh;
        padding: 20px 14px;
    }

    .login-card {
        min-height: auto;
        border-radius: 18px;
    }

    .login-left {
        min-height: 260px;
        padding: 35px 28px;
    }

    .brand-logo {
        margin-bottom: 25px;
    }

    .brand-logo img {
        max-width: 150px;
        max-height: 60px;
    }

    .login-left h1 {
        font-size: 32px;
    }

    .login-left h2 {
        font-size: 21px;
        margin-bottom: 14px;
    }

    .login-left p {
        font-size: 13px;
        line-height: 1.6;
    }

    .login-right {
        padding: 38px 25px 40px;
    }

    .login-right h3 {
        font-size: 28px;
    }

    .login-right .subtitle {
        margin-bottom: 25px;
    }

    .input-wrap {
        height: 54px;
    }

    .btn-signin {
        height: 54px;
    }
}

/* =========================================================
   CUSTOMER PANEL - SIDEBAR
   ========================================================= */

:root {
    --primary: #5b3cc4;
    --primary-dark: #39218c;
    --secondary: #7c4dff;
    --blue: #4f7cff;
    --green: #18b981;
}

/* =========================================================
   SIDEBAR MAIN
   ========================================================= */

#sidebar.sidebar {
    /* position: fixed; */

    background: linear-gradient(
        180deg,
        #39218c 0%,
        #5b3cc4 48%,
        #7c4dff 100%
    ) !important;

    min-height: 100vh;

    border: 0 !important;

    box-shadow: 8px 0 35px rgba(57, 33, 140, 0.16);

    overflow: hidden;

    z-index: 1000;
}

/* =========================================================
   SIDEBAR DECORATIVE GLOW
   ========================================================= */

#sidebar.sidebar::before {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    top: -130px;
    left: -120px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.08);

    pointer-events: none;
}

#sidebar.sidebar::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -130px;
    bottom: 80px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.07);

    pointer-events: none;
}



/* =========================================================
   NAVIGATION WRAPPER
   ========================================================= */

#sidebar .nav {
    position: relative;

    z-index: 2;

    /* padding: 18px 12px 25px; */
}

/* =========================================================
   NAV ITEM
   ========================================================= */

/* #sidebar .nav-item {
    margin-bottom: 6px;
} */

/* =========================================================
   NAV LINK
   ========================================================= */

#sidebar .nav-link {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 50px;

    padding: 11px 14px;

    border-radius: 13px;

    color: rgba(255, 255, 255, 0.88) !important;

    background: transparent !important;

    transition: all 0.25s ease;
}
linear-gradient(rgb(57, 33, 140) 0%, rgb(91, 60, 196) 48%, rgb(124, 77, 255) 100%) !important;

/* =========================================================
   MENU TITLE
   ========================================================= */

#sidebar .menu-title {
    color: inherit !important;

    font-size: 13px;

    font-weight: 500;

    letter-spacing: 0.15px;

    white-space: nowrap;
}

/* =========================================================
   MENU ICON
   ========================================================= */

#sidebar .menu-icon {
    width: 24px;

    margin-left: auto;

    color: rgba(255, 255, 255, 0.85) !important;

    font-size: 20px;

    transition: all 0.25s ease;
}

/* =========================================================
   HOVER
   ========================================================= */

#sidebar .nav-link:hover {
    color: #0c0c0c !important;

    background: rgba(255, 255, 255, 0.12) !important;

    transform: translateX(3px);

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

#sidebar .nav-link:hover .menu-icon {
    color: #ffffff !important;

    transform: scale(1.08);
}

/* =========================================================
   ACTIVE MENU
   ========================================================= */

/* #sidebar .nav-item.active > .nav-link,
#sidebar .nav-link.active {

    color: #050505 !important;

    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.25),
        rgba(255, 255, 255, 0.10)
    ) !important;

    box-shadow:
        0 8px 22px rgba(38, 20, 100, 0.18),
        inset 4px 0 0 #ffffff;

    transform: none;
} */

#sidebar .nav-item.active > .nav-link .menu-title,
#sidebar .nav-link.active .menu-title {
    color: #0c0c0c !important;

    font-weight: 600;
}

#sidebar .nav-item.active > .nav-link .menu-icon,
#sidebar .nav-link.active .menu-icon {
    color: #0a0a0a !important;
}

/* =========================================================
   ACTIVE LEFT INDICATOR
   ========================================================= */

#sidebar .nav-item.active > .nav-link::before,
#sidebar .nav-link.active::before {
    content: "";

    position: absolute;

    left: 0;

    top: 12px;
    bottom: 12px;

    width: 4px;

    border-radius: 0 5px 5px 0;

    background: #ffffff;
}

/* =========================================================
   FOCUS
   ========================================================= */

#sidebar .nav-link:focus {
    outline: none;

    box-shadow: none;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 991px) {
    #sidebar.sidebar {
        box-shadow: 5px 0 25px rgba(57, 33, 140, 0.22);
    }

    #sidebar .nav {
        padding: 15px 10px;
    }

    #sidebar .nav-link {
        min-height: 48px;

        padding: 10px 13px;
    }
}

/* =========================================================
   SCROLLBAR
   ========================================================= */

#sidebar::-webkit-scrollbar {
    width: 5px;
}

#sidebar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
}

#sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);

    border-radius: 10px;
}

#sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
}
/* =========================================================
       CUSTOMER DASHBOARD
       Premium Real Estate Gradient UI
    ========================================================= */

.customer-dashboard {
    --primary: #5b3cc4;
    --primary-dark: #39218c;
    --secondary: #7c4dff;
    --blue: #4f7cff;
    --green: #18b981;
    --orange: #ff9f43;
    --red: #ef5350;
    --text: #25213a;
    --muted: #8b879d;
    --border: #ece9f5;
    --soft-bg: #f7f5fc;

    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--text);
    padding: 4px 4px 35px;
}

/* =========================
       HERO
    ========================= */

.cp-hero {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 30px 32px;
    min-height: 185px;
    color: #fff;
    background:
        radial-gradient(
            circle at 88% 15%,
            rgba(255, 255, 255, 0.24),
            transparent 22%
        ),
        radial-gradient(
            circle at 70% 110%,
            rgba(0, 0, 0, 0.18),
            transparent 28%
        ),
        linear-gradient(135deg, #3b238f 0%, #6544d9 48%, #4b7df5 100%);
    box-shadow: 0 18px 40px rgba(79, 61, 174, 0.22);
    margin-bottom: 24px;
}

.cp-hero::before {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    right: -75px;
    top: -100px;
    background: rgba(255, 255, 255, 0.1);
}

.cp-hero::after {
    content: "";
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    right: 180px;
    bottom: -90px;
    background: rgba(255, 255, 255, 0.08);
}

.cp-hero-content {
    position: relative;
    z-index: 2;
}

.cp-welcome-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 7px 12px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.16);
    margin-bottom: 12px;
}

.cp-hero h2 {
    margin: 0 0 7px;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 800;
}

.cp-hero p {
    margin: 0;
    font-size: 13px;
    opacity: 0.82;
}

.cp-date-box {
    position: absolute;
    z-index: 3;
    right: 28px;
    top: 28px;
    padding: 10px 15px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(8px);
    font-size: 12px;
}

.cp-date-box i {
    margin-right: 6px;
}

/* =========================
       SUMMARY CARDS
    ========================= */

.cp-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 24px;
}

.cp-summary-card {
    position: relative;
    overflow: hidden;
    min-height: 145px;
    border-radius: 20px;
    padding: 20px;
    color: #fff;
    box-shadow: 0 14px 32px rgba(50, 40, 100, 0.12);
}

.cp-summary-card::before {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    right: -30px;
    top: -35px;
    background: rgba(255, 255, 255, 0.12);
}

.cp-summary-card::after {
    content: "";
    position: absolute;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    right: 35px;
    bottom: -50px;
    background: rgba(255, 255, 255, 0.08);
}

.cp-card-purple {
    background: linear-gradient(135deg, #4421a8, #7957e8);
}

.cp-card-blue {
    background: linear-gradient(135deg, #2864d7, #55a0ff);
}

.cp-card-green {
    background: linear-gradient(135deg, #0a9d76, #36d19e);
}

.cp-card-orange {
    background: linear-gradient(135deg, #ed7b23, #ffb347);
}

.cp-summary-top {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 17px;
}

.cp-summary-title {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.88;
}

.cp-summary-icon {
    width: 39px;
    height: 39px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.13);
    font-size: 17px;
}

.cp-summary-value {
    position: relative;
    z-index: 2;
    font-size: 23px;
    font-weight: 800;
    margin-bottom: 5px;
}

.cp-summary-sub {
    position: relative;
    z-index: 2;
    font-size: 10px;
    opacity: 0.75;
}

/* =========================
       SECTION GRID
    ========================= */

.cp-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.85fr);
    gap: 20px;
    margin-bottom: 20px;
}

.cp-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 10px 28px rgba(46, 37, 87, 0.06);
    overflow: hidden;
}

.cp-card-header {
    padding: 19px 21px;
    border-bottom: 1px solid #f0edf6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cp-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cp-card-title-icon {
    width: 37px;
    height: 37px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #5732c7, #7957e8);
    font-size: 15px;
}

.cp-card-title h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
}

.cp-card-title span {
    display: block;
    font-size: 10px;
    color: var(--muted);
    margin-top: 2px;
}

.cp-view-link {
    font-size: 10px;
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
}

/* =========================
       PLOT CARD
    ========================= */

.cp-plot-body {
    padding: 21px;
}

.cp-project-strip {
    border-radius: 16px;
    padding: 18px;
    color: #fff;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(255, 255, 255, 0.18),
            transparent 20%
        ),
        linear-gradient(135deg, #39208f, #7051df);
    margin-bottom: 18px;
}

.cp-project-name {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    opacity: 0.75;
    margin-bottom: 4px;
}

.cp-plot-number {
    font-size: 22px;
    font-weight: 800;
}

.cp-plot-type {
    font-size: 10px;
    opacity: 0.75;
    margin-top: 3px;
}

.cp-plot-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px;
}

.cp-detail {
    padding: 13px;
    border-radius: 13px;
    background: #faf9fd;
    border: 1px solid #efecf5;
}

.cp-detail-label {
    display: block;
    font-size: 9px;
    color: var(--muted);
    margin-bottom: 5px;
}

.cp-detail-value {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
}

.cp-plot-actions {
    display: flex;
    gap: 10px;
    margin-top: 17px;
}

.cp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 15px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
    border: 0;
}

.cp-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, #4b29b1, #7556e4);
    box-shadow: 0 7px 15px rgba(83, 52, 190, 0.2);
}

.cp-btn-light {
    color: var(--primary);
    background: #f2effc;
}

/* =========================
       STATUS CARD
    ========================= */

.cp-status-body {
    padding: 21px;
}

.cp-status-circle {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    margin: 3px auto 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: conic-gradient(#27c996 0deg 280deg, #e9f8f2 280deg 360deg);
}

.cp-status-circle::after {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background: #fff;
}

.cp-status-circle i {
    position: relative;
    z-index: 2;
    color: #1ab886;
    font-size: 25px;
}

.cp-status-name {
    text-align: center;
    font-size: 16px;
    font-weight: 800;
}

.cp-status-caption {
    text-align: center;
    font-size: 10px;
    color: var(--muted);
    margin: 4px 0 18px;
}

.cp-status-info {
    border-top: 1px solid #f0edf6;
    padding-top: 14px;
}

.cp-status-row {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    font-size: 10px;
}

.cp-status-row span:first-child {
    color: var(--muted);
}

.cp-status-row strong {
    font-weight: 700;
}

/* =========================
       PAYMENT OVERVIEW
    ========================= */

.cp-payment-layout {
    padding: 21px;
}

.cp-payment-top {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 10px;
}

.cp-paid-value {
    font-size: 24px;
    font-weight: 800;
}

.cp-paid-value span {
    font-size: 10px;
    font-weight: 500;
    color: var(--muted);
}

.cp-percent {
    font-size: 12px;
    color: var(--primary);
    font-weight: 800;
}

.cp-progress {
    height: 10px;
    background: #eeeaf7;
    border-radius: 30px;
    overflow: hidden;
    margin-bottom: 18px;
}

.cp-progress-bar {
    width: 36%;
    height: 100%;
    border-radius: 30px;
    background: linear-gradient(90deg, #4d2db7, #7b5aed);
}

.cp-payment-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.cp-payment-stat {
    padding: 13px;
    border-radius: 12px;
    background: #faf9fd;
}

.cp-payment-stat small {
    display: block;
    color: var(--muted);
    font-size: 9px;
    margin-bottom: 5px;
}

.cp-payment-stat strong {
    font-size: 12px;
}

/* =========================
       EMI CARD
    ========================= */

.cp-emi-card {
    background:
        radial-gradient(
            circle at 95% 0%,
            rgba(255, 255, 255, 0.22),
            transparent 27%
        ),
        linear-gradient(135deg, #4724a9, #7658e6);
    color: #fff;
    border: none;
}

.cp-emi-card .cp-card-header {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

.cp-emi-card .cp-card-title span {
    color: rgba(255, 255, 255, 0.62);
}

.cp-emi-card .cp-card-title h4 {
    color: #fff;
}

.cp-emi-card .cp-card-title-icon {
    background: rgba(255, 255, 255, 0.14);
}

.cp-emi-body {
    padding: 21px;
}

.cp-emi-label {
    font-size: 10px;
    opacity: 0.7;
    margin-bottom: 5px;
}

.cp-emi-amount {
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 4px;
}

.cp-emi-date {
    font-size: 10px;
    opacity: 0.72;
    margin-bottom: 18px;
}

.cp-countdown {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

.cp-count-box {
    padding: 11px 5px;
    text-align: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cp-count-box strong {
    display: block;
    font-size: 17px;
}

.cp-count-box span {
    font-size: 8px;
    opacity: 0.65;
    text-transform: uppercase;
}

.cp-emi-btn {
    display: block;
    text-align: center;
    color: #4b2aac;
    background: #fff;
    padding: 10px;
    border-radius: 10px;
    margin-top: 15px;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}

/* =========================
       LOWER GRID
    ========================= */

.cp-lower-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    gap: 20px;
}

/* =========================
       RECENT PAYMENT
    ========================= */

.cp-list {
    padding: 7px 20px 12px;
}

.cp-list-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 0;
    border-bottom: 1px solid #f0edf5;
}

.cp-list-item:last-child {
    border-bottom: 0;
}

.cp-list-icon {
    width: 35px;
    height: 35px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #16ae81, #43d3a6);
    font-size: 12px;
}

.cp-list-content {
    flex: 1;
}

.cp-list-content strong {
    display: block;
    font-size: 11px;
}

.cp-list-content span {
    font-size: 9px;
    color: var(--muted);
}

.cp-list-amount {
    font-size: 11px;
    font-weight: 800;
    color: #149b73;
}

/* =========================
       INSTALLMENTS
    ========================= */

.cp-installments {
    padding: 6px 20px 15px;
}

.cp-installment-row {
    display: grid;
    grid-template-columns: 1fr 75px 65px;
    align-items: center;
    gap: 8px;
    padding: 11px 0;
    border-bottom: 1px solid #f0edf5;
}

.cp-installment-row:last-child {
    border-bottom: 0;
}

.cp-installment-name {
    font-size: 10px;
    font-weight: 700;
}

.cp-installment-date {
    font-size: 8px;
    color: var(--muted);
    margin-top: 2px;
}

.cp-installment-amount {
    font-size: 10px;
    font-weight: 700;
    text-align: right;
}

.cp-badge {
    display: inline-block;
    text-align: center;
    padding: 5px 7px;
    border-radius: 20px;
    font-size: 8px;
    font-weight: 700;
}

.cp-paid {
    color: #0b956d;
    background: #e8faf3;
}

.cp-pending {
    color: #db7c15;
    background: #fff4e5;
}

.cp-upcoming {
    color: #4c68ce;
    background: #edf1ff;
}

/* =========================
       NOTIFICATIONS
    ========================= */

.cp-notification {
    padding: 7px 20px 15px;
}

.cp-notify-item {
    display: flex;
    gap: 11px;
    padding: 12px 0;
    border-bottom: 1px solid #f0edf5;
}

.cp-notify-item:last-child {
    border-bottom: 0;
}

.cp-notify-icon {
    flex: 0 0 33px;
    height: 33px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.cp-notify-purple {
    color: #6545ce;
    background: #eeeafd;
}

.cp-notify-green {
    color: #0b9b72;
    background: #e6faf3;
}

.cp-notify-orange {
    color: #d98016;
    background: #fff3df;
}

.cp-notify-content strong {
    display: block;
    font-size: 10px;
    margin-bottom: 3px;
}

.cp-notify-content span {
    display: block;
    font-size: 8px;
    color: var(--muted);
    line-height: 1.4;
}

/* =========================
       RESPONSIVE
    ========================= */

@media (max-width: 1200px) {
    .cp-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cp-lower-grid {
        grid-template-columns: 1fr 1fr;
    }

    .cp-lower-grid .cp-card:last-child {
        grid-column: span 2;
    }
}

@media (max-width: 900px) {
    .cp-main-grid {
        grid-template-columns: 1fr;
    }

    .cp-lower-grid {
        grid-template-columns: 1fr;
    }

    .cp-lower-grid .cp-card:last-child {
        grid-column: auto;
    }
}

@media (max-width: 650px) {
    .customer-dashboard {
        padding: 0;
    }

    .cp-hero {
        padding: 24px 20px;
        border-radius: 18px;
    }

    .cp-hero h2 {
        font-size: 22px;
        padding-right: 80px;
    }

    .cp-date-box {
        top: 20px;
        right: 18px;
        font-size: 9px;
        padding: 7px 9px;
    }

    .cp-summary-grid {
        grid-template-columns: 1fr;
    }

    .cp-plot-details {
        grid-template-columns: 1fr 1fr;
    }

    .cp-payment-stats {
        grid-template-columns: 1fr;
    }
}
/*
        |--------------------------------------------------------------------------
        | Booked Plot Summary
        |--------------------------------------------------------------------------
        */

.cp-booked-summary-card {
    background: #ffffff;
    border: 1px solid #e9eaf2;
    border-radius: 16px;
    padding: 18px 22px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 4px 18px rgba(31, 41, 55, 0.05);
}

.cp-booked-summary-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cp-booked-summary-icon {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0ebff;
    color: #5b3cc4;
    font-size: 24px;
    flex-shrink: 0;
}

.cp-booked-summary-left h4 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    color: #252336;
}

.cp-booked-summary-left span {
    display: block;
    font-size: 13px;
    color: #85859a;
}

.cp-booked-summary-right {
    text-align: right;
}

.cp-booked-summary-right span {
    display: block;
    font-size: 12px;
    color: #88889b;
    margin-bottom: 3px;
}

.cp-booked-summary-right strong {
    font-size: 22px;
    font-weight: 800;
    color: #5b3cc4;
}

/*
        |--------------------------------------------------------------------------
        | Main Booking Card
        |--------------------------------------------------------------------------
        */

.cp-booked-plot-card {
    background: #ffffff;
    border: 1px solid #e7e8f0;
    border-radius: 18px;
    margin-bottom: 24px;
    overflow: hidden;
    box-shadow: 0 5px 24px rgba(31, 41, 55, 0.055);
}

/*
        |--------------------------------------------------------------------------
        | Card Header
        |--------------------------------------------------------------------------
        */

.cp-booked-plot-header {
    padding: 20px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid #eeeef3;
}

.cp-booked-plot-title {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.cp-booked-plot-title-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: #f0ebff;
    color: #5b3cc4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.cp-booked-project-name {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 800;
    color: #29273a;
}

.cp-booked-project-meta {
    margin-top: 4px;
    font-size: 12px;
    color: #8b8a9b;
}

.cp-booked-project-meta span {
    margin: 0 4px;
}

/*
        |--------------------------------------------------------------------------
        | Status
        |--------------------------------------------------------------------------
        */

.cp-plot-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.cp-plot-status-booked {
    background: #edf5ff;
    color: #2774d8;
}

.cp-plot-status-active {
    background: #eaf9f1;
    color: #22965a;
}

.cp-plot-status-completed {
    background: #eeeafb;
    color: #5b3cc4;
}

.cp-plot-status-cancelled {
    background: #fff0f0;
    color: #d64545;
}

.cp-plot-status-pending {
    background: #fff7e9;
    color: #c98219;
}

/*
        |--------------------------------------------------------------------------
        | Plot Strip
        |--------------------------------------------------------------------------
        */

.cp-booked-plot-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #faf9ff;
    border-bottom: 1px solid #ededf4;
}

.cp-booked-plot-strip-item {
    padding: 18px 20px;
    border-right: 1px solid #ededf4;
}

.cp-booked-plot-strip-item:last-child {
    border-right: 0;
}

.cp-booked-plot-strip-item span {
    display: block;
    font-size: 11px;
    color: #9291a2;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.35px;
}

.cp-booked-plot-strip-item strong {
    display: block;
    color: #29273a;
    font-size: 14px;
    font-weight: 700;
}

/*
        |--------------------------------------------------------------------------
        | Section
        |--------------------------------------------------------------------------
        */

.cp-booked-section {
    padding: 22px;
    border-bottom: 1px solid #eeeef3;
}

.cp-booked-section-heading {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 18px;
}

.cp-booked-section-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #f3f0ff;
    color: #5b3cc4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.cp-booked-section-heading h4 {
    margin: 0 0 3px;
    font-size: 15px;
    font-weight: 750;
    color: #2c2a3b;
}

.cp-booked-section-heading span {
    display: block;
    font-size: 12px;
    color: #9291a2;
}

/*
        |--------------------------------------------------------------------------
        | Detail Grid
        |--------------------------------------------------------------------------
        */

.cp-booked-details-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: #eeeef3;
    border: 1px solid #eeeef3;
    border-radius: 12px;
    overflow: hidden;
}

.cp-booked-detail-item {
    background: #ffffff;
    padding: 15px 16px;
}

.cp-booked-detail-item span {
    display: block;
    color: #8d8c9d;
    font-size: 11px;
    margin-bottom: 6px;
}

.cp-booked-detail-item strong {
    display: block;
    color: #303043;
    font-size: 13px;
    font-weight: 700;
}

/*
        |--------------------------------------------------------------------------
        | Finance Grid
        |--------------------------------------------------------------------------
        */

.cp-booked-finance-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.cp-booked-finance-item {
    padding: 17px;
    background: #fafaff;
    border: 1px solid #ececf4;
    border-radius: 12px;
}

.cp-booked-finance-item span {
    display: block;
    font-size: 11px;
    color: #8c8b9c;
    margin-bottom: 7px;
}

.cp-booked-finance-item strong {
    display: block;
    font-size: 16px;
    color: #2e2d3e;
    font-weight: 800;
}

.cp-booked-finance-item.cp-finance-highlight {
    background: #f5f1ff;
    border-color: #e3dafc;
}

.cp-booked-finance-item.cp-finance-highlight strong {
    color: #5b3cc4;
}

/*
        |--------------------------------------------------------------------------
        | Media
        |--------------------------------------------------------------------------
        */

.cp-booked-plot-media {
    display: flex;
    gap: 20px;
    padding: 22px;
    border-bottom: 1px solid #eeeef3;
}

.cp-booked-media-image {
    width: 180px;
    height: 125px;
    border-radius: 12px;
    overflow: hidden;
    background: #f4f4f7;
    flex-shrink: 0;
}

.cp-booked-media-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cp-booked-media-content {
    flex: 1;
}

.cp-booked-media-content .cp-booked-section-heading {
    margin-bottom: 10px;
}

.cp-booked-media-content p {
    margin: 0;
    color: #858496;
    font-size: 13px;
    line-height: 1.6;
}

/*
        |--------------------------------------------------------------------------
        | Footer
        |--------------------------------------------------------------------------
        */

.cp-booked-plot-footer {
    padding: 17px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: #fcfcfe;
}

.cp-booked-footer-info span {
    display: block;
    font-size: 11px;
    color: #9291a2;
    margin-bottom: 4px;
}

.cp-booked-footer-info strong {
    font-size: 13px;
    color: #303043;
}

.cp-booked-footer-info strong.cp-plot-status-booked {
    color: #2774d8;
}

.cp-booked-footer-info strong.cp-plot-status-active {
    color: #22965a;
}

.cp-booked-footer-info strong.cp-plot-status-completed {
    color: #5b3cc4;
}

.cp-booked-footer-info strong.cp-plot-status-cancelled {
    color: #d64545;
}

.cp-booked-footer-info strong.cp-plot-status-pending {
    color: #c98219;
}

.cp-booked-footer-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

/*
        |--------------------------------------------------------------------------
        | Empty State
        |--------------------------------------------------------------------------
        */

.cp-empty-state {
    padding: 60px 25px;
    text-align: center;
}

.cp-empty-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 18px;
    border-radius: 18px;
    background: #f1edff;
    color: #5b3cc4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
}

.cp-empty-state h3 {
    margin: 0 0 8px;
    color: #2c2a3b;
    font-size: 19px;
    font-weight: 800;
}

.cp-empty-state p {
    max-width: 480px;
    margin: 0 auto;
    color: #89889a;
    font-size: 13px;
    line-height: 1.6;
}

/*
        |--------------------------------------------------------------------------
        | Responsive
        |--------------------------------------------------------------------------
        */

@media (max-width: 1100px) {
    .cp-booked-details-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .cp-booked-finance-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 800px) {
    .cp-booked-summary-card {
        align-items: flex-start;
    }

    .cp-booked-plot-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .cp-booked-plot-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .cp-booked-plot-strip-item:nth-child(2) {
        border-right: 0;
    }

    .cp-booked-details-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cp-booked-plot-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .cp-booked-footer-actions {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .cp-booked-summary-card {
        flex-direction: column;
    }

    .cp-booked-summary-right {
        width: 100%;
        text-align: left;
    }

    .cp-booked-plot-header {
        padding: 16px;
    }

    .cp-booked-plot-strip {
        grid-template-columns: 1fr;
    }

    .cp-booked-plot-strip-item {
        border-right: 0;
        border-bottom: 1px solid #ededf4;
    }

    .cp-booked-plot-strip-item:last-child {
        border-bottom: 0;
    }

    .cp-booked-section {
        padding: 17px;
    }

    .cp-booked-details-grid,
    .cp-booked-finance-grid {
        grid-template-columns: 1fr;
    }

    .cp-booked-plot-media {
        flex-direction: column;
        padding: 17px;
    }

    .cp-booked-media-image {
        width: 100%;
        height: 180px;
    }

    .cp-booked-plot-footer {
        padding: 17px;
    }

    .cp-booked-footer-actions {
        flex-direction: column;
    }

    .cp-booked-footer-actions .cp-btn {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   EMI PAYMENT PAGE
========================================================= */

.emi-payment-page {
    --ep-primary: #5b3cc4;
    --ep-primary-dark: #39218c;
    --ep-secondary: #0876d1;
    --ep-green: #16a34a;
    --ep-orange: #f59e0b;
    --ep-red: #dc2626;
    --ep-text: #172033;
    --ep-muted: #718096;
    --ep-border: #e8ebf2;
    --ep-bg: #f6f8fc;
    --ep-white: #ffffff;

    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 28px 30px 60px;
    color: var(--ep-text);
}

/* =========================================================
   HERO
========================================================= */

.ep-new-hero {
    position: relative;
    overflow: hidden;

    min-height: 245px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 42px 46px;

    border-radius: 28px;

    background: linear-gradient(135deg, #0b4ea2 0%, #1261bd 48%, #0876d1 100%);

    box-shadow: 0 20px 45px rgba(20, 70, 130, 0.18);

    margin-bottom: 25px;
}

.ep-hero-left {
    position: relative;
    z-index: 3;

    max-width: 760px;
}

.ep-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;

    color: rgba(255, 255, 255, 0.82);

    margin-bottom: 14px;
}

.ep-eyebrow-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #fff;

    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.12);
}

.ep-new-hero h1 {
    margin: 0;

    color: #fff;

    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -1.5px;
}

.ep-new-hero h1 span {
    display: block;
    color: #dbeafe;
}

.ep-new-hero p {
    max-width: 660px;

    margin: 17px 0 0;

    color: rgba(255, 255, 255, 0.82);

    font-size: 15px;
    line-height: 1.7;
}

.ep-hero-right {
    position: relative;
    z-index: 3;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.ep-date-chip,
.ep-customer-chip {
    display: flex;
    align-items: center;
    gap: 9px;

    padding: 11px 16px;

    border-radius: 14px;

    background: rgba(255, 255, 255, 0.13);

    border: 1px solid rgba(255, 255, 255, 0.16);

    color: #fff;

    backdrop-filter: blur(10px);

    font-size: 13px;
    font-weight: 700;
}

.ep-customer-avatar {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #fff;
    color: var(--ep-primary);

    font-weight: 800;
}

.ep-hero-orb {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    background: rgba(255, 255, 255, 0.07);
}

.ep-orb-one {
    width: 280px;
    height: 280px;

    right: -90px;
    top: -130px;
}

.ep-orb-two {
    width: 190px;
    height: 190px;

    right: 280px;
    bottom: -130px;
}

/* =========================================================
   OVERVIEW
========================================================= */

.ep-overview-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        repeat(3, minmax(0, 1fr));

    gap: 17px;

    margin-bottom: 20px;
}

.ep-overview-card {
    position: relative;

    min-height: 155px;

    padding: 23px;

    background: #fff;

    border: 1px solid var(--ep-border);

    border-radius: 20px;

    box-shadow: 0 8px 28px rgba(20, 32, 55, 0.045);

    overflow: hidden;
}

.ep-card-main {
    background: linear-gradient(145deg, #fff, #f8f6ff);

    border-color: #e4def8;
}

.ep-card-label {
    color: #7b8496;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1px;
    text-transform: uppercase;
}

.ep-card-value {
    margin-top: 9px;

    color: #172033;

    font-size: 27px;
    font-weight: 800;

    letter-spacing: -0.7px;
}

.ep-card-caption {
    margin-top: 6px;

    color: #929aaa;

    font-size: 12px;
}

.ep-card-icon {
    position: absolute;

    right: 20px;
    bottom: 18px;

    width: 43px;
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: #eeeaff;

    color: var(--ep-primary);

    font-size: 22px;
}

.ep-small-line {
    position: absolute;

    left: 23px;
    right: 23px;
    bottom: 0;

    height: 3px;

    border-radius: 10px 10px 0 0;
}

.ep-line-green {
    background: var(--ep-green);
}

.ep-line-purple {
    background: var(--ep-primary);
}

.ep-line-orange {
    background: var(--ep-orange);
}

.ep-value-orange {
    color: #d97706;
}

/* =========================================================
   INSIGHT GRID
========================================================= */

.ep-insight-grid {
    display: grid;

    grid-template-columns: 1.35fr 1fr;

    gap: 20px;

    margin-bottom: 42px;
}

.ep-progress-card,
.ep-next-card {
    background: #fff;

    border: 1px solid var(--ep-border);

    border-radius: 22px;

    box-shadow: 0 8px 28px rgba(20, 32, 55, 0.045);
}

.ep-progress-card {
    padding: 27px;
}

.ep-card-heading-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.ep-overline {
    display: block;

    color: #8a93a5;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.5px;
}

.ep-card-heading-row h2,
.ep-next-top h2 {
    margin: 6px 0 0;

    font-size: 23px;
    font-weight: 800;

    letter-spacing: -0.5px;
}

.ep-percent {
    color: var(--ep-primary);

    font-size: 20px;
    font-weight: 800;
}

.ep-progress-body {
    display: flex;
    align-items: center;

    gap: 35px;

    margin-top: 27px;
}

.ep-progress-ring {
    --progress: 0%;

    flex: 0 0 135px;

    width: 135px;
    height: 135px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: conic-gradient(var(--ep-primary) var(--progress), #ebeaf3 0);
}

.ep-progress-ring-inner {
    width: 105px;
    height: 105px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    border-radius: 50%;

    background: #fff;
}

.ep-progress-ring-inner strong {
    font-size: 24px;
    font-weight: 800;
}

.ep-progress-ring-inner span {
    margin-top: 2px;

    color: #929aaa;

    font-size: 11px;
}

.ep-progress-details {
    flex: 1;
}

.ep-stat-line {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 8px 0;

    border-bottom: 1px solid #f0f1f5;
}

.ep-stat-line:last-of-type {
    border-bottom: 0;
}

.ep-stat-line span {
    color: #778094;
    font-size: 13px;
}

.ep-stat-line strong {
    color: #20283a;
    font-size: 14px;
}

.ep-green-text {
    color: var(--ep-green) !important;
}

.ep-orange-text {
    color: #d97706 !important;
}

.ep-purple-text {
    color: var(--ep-primary) !important;
}

.ep-progress-bar,
.ep-plan-track {
    overflow: hidden;

    width: 100%;

    height: 7px;

    border-radius: 20px;

    background: #eeedf4;
}

.ep-progress-bar {
    margin-top: 13px;
}

.ep-progress-bar span,
.ep-plan-track span {
    display: block;

    height: 100%;

    border-radius: inherit;

    background: linear-gradient(90deg, #39218c, #6c4ed8);
}

/* =========================================================
   NEXT EMI
========================================================= */

.ep-next-card {
    padding: 27px;

    background: linear-gradient(145deg, #fff, #f8f7ff);
}

.ep-next-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.ep-next-calendar {
    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 15px;

    background: #eeeaff;

    color: var(--ep-primary);

    font-size: 24px;
}

.ep-next-date {
    display: flex;
    flex-direction: column;

    gap: 4px;

    margin-top: 28px;

    padding: 17px 18px;

    border-radius: 15px;

    background: #f6f5fb;
}

.ep-next-date span {
    color: #8b93a3;

    font-size: 11px;
    font-weight: 700;

    text-transform: uppercase;
}

.ep-next-date strong {
    color: #262d3e;

    font-size: 17px;
}

.ep-next-footer {
    display: flex;
    justify-content: space-between;

    margin-top: 18px;

    color: #6f788b;

    font-size: 12px;
}

.ep-next-footer span:first-child {
    color: var(--ep-primary);

    font-weight: 700;
}

.ep-no-next {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 45px;

    color: #7d8798;

    font-size: 14px;
}

/* =========================================================
   SECTION TITLE
========================================================= */

.ep-section-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    margin: 0 2px 16px;
}

.ep-section-title > div:first-child > span {
    color: #8b94a5;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.5px;
}

.ep-section-title h2 {
    margin: 5px 0 0;

    color: #182033;

    font-size: 25px;
    font-weight: 800;

    letter-spacing: -0.6px;
}

.ep-section-count {
    padding: 8px 12px;

    border-radius: 10px;

    background: #f1effa;

    color: var(--ep-primary);

    font-size: 11px;
    font-weight: 800;
}

/* =========================================================
   BOOKING
========================================================= */

.ep-booking {
    margin-bottom: 36px;

    background: #fff;

    border: 1px solid var(--ep-border);

    border-radius: 24px;

    box-shadow: 0 9px 32px rgba(20, 32, 55, 0.05);

    overflow: hidden;
}

.ep-booking-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 24px 26px;

    border-bottom: 1px solid #edf0f4;
}

.ep-booking-property {
    display: flex;
    align-items: center;

    gap: 14px;
}

.ep-property-mark {
    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 15px;

    background: #eeeaff;

    color: var(--ep-primary);

    font-size: 24px;
}

.ep-booking-property span {
    color: #7f8899;

    font-size: 12px;
    font-weight: 700;
}

.ep-booking-property h3 {
    margin: 4px 0 0;

    font-size: 21px;
    font-weight: 800;
}

.ep-booking-status span {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 8px 12px;

    border-radius: 20px;

    font-size: 11px;
    font-weight: 800;
}

.ep-booking-status i {
    font-size: 7px;
}

.status-active {
    color: #15803d;
    background: #ecfdf3;
}

.status-completed {
    color: #2563eb;
    background: #eff6ff;
}

.status-pending {
    color: #b45309;
    background: #fff7ed;
}

.status-cancelled {
    color: #b91c1c;
    background: #fef2f2;
}

/* =========================================================
   BOOKING META
========================================================= */

.ep-booking-meta-row {
    display: grid;

    grid-template-columns: repeat(5, 1fr);

    border-bottom: 1px solid #edf0f4;
}

.ep-booking-meta-row > div {
    padding: 17px 20px;

    border-right: 1px solid #edf0f4;
}

.ep-booking-meta-row > div:last-child {
    border-right: 0;
}

.ep-booking-meta-row span,
.ep-financial-strip span,
.ep-plan-heading span,
.ep-booking-next span {
    display: block;

    color: #929aaa;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.1px;

    text-transform: uppercase;
}

.ep-booking-meta-row strong {
    display: block;

    margin-top: 6px;

    color: #252d3e;

    font-size: 13px;
}

/* =========================================================
   FINANCIAL STRIP
========================================================= */

.ep-financial-strip {
    display: grid;

    grid-template-columns: repeat(6, 1fr);

    background: #fbfcfe;

    border-bottom: 1px solid #edf0f4;
}

.ep-financial-strip > div {
    padding: 18px 20px;

    border-right: 1px solid #edf0f4;
}

.ep-financial-strip > div:last-child {
    border-right: 0;
}

.ep-financial-strip strong {
    display: block;

    margin-top: 7px;

    color: #20283a;

    font-size: 15px;
}

/* =========================================================
   EMI PLAN
========================================================= */

.ep-plan-section {
    padding: 23px 26px 19px;
}

.ep-plan-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    margin-bottom: 11px;
}

.ep-plan-heading strong {
    display: block;

    margin-top: 5px;

    color: #252d3e;

    font-size: 14px;
}

.ep-plan-heading > span:last-child {
    color: var(--ep-primary);

    font-size: 15px;
    font-weight: 800;
}

.ep-plan-footer {
    display: flex;
    justify-content: space-between;

    margin-top: 9px;

    color: #7f899b;

    font-size: 11px;
}

/* =========================================================
   INSTALLMENT DOTS
========================================================= */

.ep-installment-visual {
    display: flex;
    align-items: flex-start;

    gap: 13px;

    padding: 19px 26px 22px;

    border-top: 1px solid #edf0f4;

    overflow-x: auto;
}

.ep-installment-dot {
    flex: 0 0 25px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 5px;
}

.ep-installment-dot span {
    width: 13px;
    height: 13px;

    border-radius: 50%;

    background: #e6e8ee;

    border: 3px solid #fff;

    box-shadow: 0 0 0 1px #dfe2e9;
}

.ep-installment-dot small {
    color: #8c95a6;

    font-size: 8px;
    font-weight: 700;
}

.dot-paid span {
    background: var(--ep-green);
    box-shadow: 0 0 0 1px var(--ep-green);
}

.dot-current span {
    background: var(--ep-primary);
    box-shadow: 0 0 0 4px #eae6ff;
}

.ep-more-installments {
    color: #7c8495;

    font-size: 11px;
    font-weight: 700;

    padding-top: 1px;
}

/* =========================================================
   NEXT BOOKING EMI
========================================================= */

.ep-booking-next {
    display: flex;
    align-items: center;
    gap: 14px;

    margin: 0 26px 25px;

    padding: 15px 17px;

    border-radius: 15px;

    background: #f7f5ff;

    border: 1px solid #e9e4ff;
}

.ep-booking-next-icon {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background: #e7e1ff;

    color: var(--ep-primary);
}

.ep-booking-next strong {
    display: block;

    margin-top: 4px;

    color: #252d3e;

    font-size: 15px;
}

.ep-booking-next-date {
    margin-left: auto;

    text-align: right;
}

/* =========================================================
   SCHEDULE
========================================================= */

.ep-schedule-card {
    margin-bottom: 40px;

    background: #fff;

    border: 1px solid var(--ep-border);

    border-radius: 22px;

    box-shadow: 0 8px 28px rgba(20, 32, 55, 0.045);

    overflow: hidden;
}

.ep-schedule-row {
    display: grid;

    grid-template-columns:
        48px
        minmax(180px, 1.6fr)
        minmax(130px, 0.8fr)
        minmax(120px, 0.7fr)
        105px;

    align-items: center;

    gap: 12px;

    min-height: 82px;

    padding: 13px 22px;

    border-bottom: 1px solid #edf0f4;
}

.ep-schedule-row:last-child {
    border-bottom: 0;
}

.ep-schedule-marker {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    font-size: 17px;
}

.marker-paid {
    background: #ecfdf3;
    color: var(--ep-green);
}

.marker-overdue {
    background: #fef2f2;
    color: var(--ep-red);
}

.marker-upcoming {
    background: #f1effa;
    color: var(--ep-primary);
}

.ep-schedule-info strong {
    display: block;

    color: #252d3e;

    font-size: 13px;
}

.ep-schedule-info strong span {
    color: #8c95a6;
}

.ep-schedule-info small {
    display: block;

    margin-top: 4px;

    color: #9aa2b1;

    font-size: 10px;
}

.ep-schedule-date span {
    display: block;

    color: #969eae;

    font-size: 9px;
    font-weight: 800;
}

.ep-schedule-date strong {
    display: block;

    margin-top: 4px;

    color: #333b4c;

    font-size: 12px;
}

.ep-schedule-amount {
    color: #222a3b;

    font-size: 14px;
    font-weight: 800;
}

.ep-status {
    display: inline-flex;

    padding: 7px 10px;

    border-radius: 20px;

    font-size: 10px;
    font-weight: 800;
}

.status-paid {
    color: #15803d;
    background: #ecfdf3;
}

.status-overdue {
    color: #b91c1c;
    background: #fef2f2;
}

.status-today {
    color: #b45309;
    background: #fff7ed;
}

.status-upcoming {
    color: #2563eb;
    background: #eff6ff;
}

/* =========================================================
   PAYMENT HISTORY
========================================================= */

.ep-payment-card {
    margin-bottom: 30px;

    background: #fff;

    border: 1px solid var(--ep-border);

    border-radius: 22px;

    box-shadow: 0 8px 28px rgba(20, 32, 55, 0.045);

    overflow: hidden;
}

.ep-payment-row {
    display: grid;

    grid-template-columns:
        90px
        minmax(250px, 1.8fr)
        130px
        145px
        145px;

    align-items: center;

    gap: 15px;

    min-height: 84px;

    padding: 13px 22px;

    border-bottom: 1px solid #edf0f4;
}

.ep-payment-row:last-child {
    border-bottom: 0;
}

.ep-payment-date strong {
    display: block;

    color: #222a3b;

    font-size: 15px;
}

.ep-payment-date span {
    display: block;

    margin-top: 3px;

    color: #999fad;

    font-size: 10px;
}

.ep-payment-description {
    display: flex;
    align-items: center;

    gap: 12px;
}

.ep-payment-symbol {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background: #ecfdf3;

    color: var(--ep-green);
}

.ep-payment-description strong {
    display: block;

    color: #293143;

    font-size: 13px;
}

.ep-payment-description span {
    display: block;

    margin-top: 4px;

    color: #969eae;

    font-size: 10px;
}

.ep-payment-mode span {
    display: block;

    color: #969eae;

    font-size: 9px;
    font-weight: 800;
}

.ep-payment-mode strong {
    display: block;

    margin-top: 4px;

    color: #333b4c;

    font-size: 12px;
}

.ep-payment-amount {
    color: var(--ep-green);

    font-size: 15px;
    font-weight: 800;
}

.ep-receipt-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 8px 11px;

    border-radius: 9px;

    background: #f4f2fc;

    color: var(--ep-primary);

    font-size: 10px;
    font-weight: 800;
}

.ep-receipt-disabled {
    cursor: default;
}

/* =========================================================
   EMPTY STATES
========================================================= */

.ep-empty-state {
    text-align: center;

    padding: 55px 25px;

    background: #fff;

    border: 1px solid var(--ep-border);

    border-radius: 22px;

    margin-bottom: 40px;
}

.ep-empty-icon {
    width: 65px;
    height: 65px;

    margin: 0 auto 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 18px;

    background: #f0edff;

    color: var(--ep-primary);

    font-size: 30px;
}

.ep-empty-state h3 {
    margin: 0;

    font-size: 19px;
}

.ep-empty-state p {
    max-width: 500px;

    margin: 8px auto 0;

    color: #8c95a5;

    font-size: 13px;
    line-height: 1.6;
}

.ep-empty-history {
    min-height: 120px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    color: #8d96a6;

    font-size: 13px;
}

.ep-empty-history i {
    color: #a29bbf;

    font-size: 22px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1200px) {
    .ep-overview-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ep-insight-grid {
        grid-template-columns: 1fr;
    }

    .ep-financial-strip {
        grid-template-columns: repeat(3, 1fr);
    }

    .ep-financial-strip > div:nth-child(3n) {
        border-right: 0;
    }

    .ep-booking-meta-row {
        grid-template-columns: repeat(3, 1fr);
    }

    .ep-booking-meta-row > div:nth-child(3n) {
        border-right: 0;
    }

    .ep-schedule-row {
        grid-template-columns:
            45px
            1.5fr
            1fr
            1fr
            100px;
    }

    .ep-payment-row {
        grid-template-columns:
            80px
            1.5fr
            110px
            120px
            120px;
    }
}

@media (max-width: 900px) {
    .emi-payment-page {
        padding: 20px 18px 50px;
    }

    .ep-new-hero {
        padding: 32px;
        align-items: flex-start;
        flex-direction: column;
        gap: 25px;
    }

    .ep-hero-right {
        align-items: flex-start;
    }

    .ep-overview-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ep-booking-meta-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .ep-booking-meta-row > div:nth-child(2n) {
        border-right: 0;
    }

    .ep-financial-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .ep-financial-strip > div:nth-child(2n) {
        border-right: 0;
    }

    .ep-schedule-row {
        grid-template-columns:
            45px
            1fr
            1fr;
    }

    .ep-schedule-amount,
    .ep-schedule-row > div:last-child {
        grid-column: span 1;
    }

    .ep-payment-row {
        grid-template-columns: 80px 1fr 120px;
    }

    .ep-payment-mode {
        display: none;
    }

    .ep-payment-receipt {
        text-align: right;
    }
}

@media (max-width: 650px) {
    .emi-payment-page {
        padding: 15px 12px 40px;
    }

    .ep-new-hero {
        min-height: auto;

        padding: 27px 23px;

        border-radius: 22px;
    }

    .ep-new-hero h1 {
        font-size: 30px;
    }

    .ep-new-hero p {
        font-size: 13px;
    }

    .ep-overview-grid {
        grid-template-columns: 1fr;
    }

    .ep-progress-card,
    .ep-next-card {
        padding: 21px;
    }

    .ep-progress-body {
        gap: 20px;
        flex-direction: column;
        align-items: flex-start;
    }

    .ep-progress-ring {
        margin: 0 auto;
    }

    .ep-progress-details {
        width: 100%;
    }

    .ep-section-title {
        align-items: flex-start;
        gap: 12px;
        flex-direction: column;
    }

    .ep-booking-top {
        padding: 20px;

        align-items: flex-start;
        gap: 15px;

        flex-direction: column;
    }

    .ep-booking-meta-row {
        grid-template-columns: 1fr;
    }

    .ep-booking-meta-row > div {
        border-right: 0;
        border-bottom: 1px solid #edf0f4;
    }

    .ep-financial-strip {
        grid-template-columns: 1fr 1fr;
    }

    .ep-financial-strip > div {
        border-bottom: 1px solid #edf0f4;
    }

    .ep-plan-section {
        padding: 20px;
    }

    .ep-installment-visual {
        padding-left: 20px;
        padding-right: 20px;
    }

    .ep-booking-next {
        margin-left: 20px;
        margin-right: 20px;
    }

    .ep-schedule-row {
        grid-template-columns: 42px 1fr;
        gap: 10px;

        padding: 16px;
    }

    .ep-schedule-date,
    .ep-schedule-amount,
    .ep-schedule-row > div:last-child {
        grid-column: 2;
    }

    .ep-payment-row {
        grid-template-columns: 65px 1fr;
        gap: 12px;

        padding: 16px;
    }

    .ep-payment-amount,
    .ep-payment-receipt {
        grid-column: 2;
    }

    .ep-payment-receipt {
        text-align: left;
    }

    .ep-payment-description {
        min-width: 0;
    }

    .ep-payment-description strong,
    .ep-payment-description span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 430px) {
    .ep-financial-strip {
        grid-template-columns: 1fr;
    }

    .ep-financial-strip > div {
        border-right: 0;
    }

    .ep-card-value {
        font-size: 23px;
    }

    .ep-booking-property h3 {
        font-size: 18px;
    }

    .ep-next-top h2 {
        font-size: 21px;
    }
}
.ep-payment-receipt {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.ep-receipt-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-width: 108px;
    height: 38px;
    padding: 0 13px;

    border: 1px solid #d9e2f0;
    border-radius: 9px;

    background: #ffffff;
    color: #315b91;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
    text-decoration: none;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.ep-receipt-link i {
    font-size: 17px;
    line-height: 1;
}

.ep-receipt-link:hover {
    background: #f3f7fc;
    border-color: #b9cbe2;
    color: #174d87;

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(30, 70, 110, 0.08);
}

.ep-receipt-link:active {
    transform: translateY(0);
}

.ep-receipt-link span {
    white-space: nowrap;
}

/* =========================================================
   PAYMENT HISTORY
   UNIQUE TRANSACTION LEDGER DESIGN
========================================================= */

.payment-history-page {
    width: 100%;
    padding: 30px 32px 55px;
    background: #f6f8fb;
}

/* =========================================================
   PAGE HEADER
========================================================= */

.ph-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 8px 2px 30px;
}

.ph-header-left {
    display: flex;
    align-items: center;
    gap: 18px;
}

.ph-header-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: #172b4d;
    color: #fff;
    font-size: 25px;
    box-shadow: 0 10px 22px rgba(23, 43, 77, 0.15);
}

.ph-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: #8a95a7;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.ph-breadcrumb i {
    font-size: 12px;
}

.ph-page-header h1 {
    margin: 0;
    color: #172033;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 800;
}

.ph-page-header p {
    margin: 7px 0 0;
    color: #7d8798;
    font-size: 12px;
    line-height: 1.6;
}

.ph-header-right {
    display: flex;
    align-items: center;
}

.ph-current-date {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid #e2e7ef;
    border-radius: 10px;
    background: #fff;
    color: #647086;
    font-size: 11px;
    font-weight: 700;
}

.ph-current-date i {
    color: #66758b;
    font-size: 16px;
}

/* =========================================================
   FINANCE AREA
========================================================= */

.ph-finance-layout {
    display: grid;
    grid-template-columns: 1.65fr 1fr 1fr 1fr;
    gap: 15px;
}

/* =========================================================
   TOTAL CARD
========================================================= */

.ph-total-card {
    min-height: 158px;
    padding: 23px 25px;
    border-radius: 18px;
    background: #172b4d;
    color: #fff;
    box-shadow: 0 12px 28px rgba(23, 43, 77, 0.14);
}

.ph-total-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ph-total-top > span {
    color: rgba(255, 255, 255, 0.65);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.ph-total-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 19px;
}

.ph-total-amount {
    margin-top: 13px;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.ph-total-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 15px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ph-total-bottom span {
    display: flex;
    align-items: center;
    gap: 5px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 9px;
}

.ph-total-bottom span i {
    color: #59d79a;
    font-size: 13px;
}

.ph-total-bottom strong {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.85);
}

/* =========================================================
   STAT CARDS
========================================================= */

.ph-stat-card {
    min-height: 158px;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 23px 20px;
    border: 1px solid #e5eaf1;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(30, 48, 76, 0.04);
}

.ph-stat-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-size: 18px;
}

.ph-icon-green {
    background: #eaf8f0;
    color: #1b9c60;
}

.ph-icon-orange {
    background: #fff3e4;
    color: #d88927;
}

.ph-icon-purple {
    background: #f1edff;
    color: #7052ca;
}

.ph-stat-card span {
    display: block;
    margin-top: 2px;
    color: #929cad;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

.ph-stat-card strong {
    display: block;
    margin-top: 9px;
    color: #1b263b;
    font-size: 20px;
    font-weight: 800;
}

.ph-stat-card small {
    display: block;
    margin-top: 4px;
    color: #a0a8b6;
    font-size: 9px;
}

/* =========================================================
   LEDGER HEADER
========================================================= */

.ph-ledger-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin: 38px 0 15px;
}

.ph-ledger-overline {
    color: #8b96a8;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.ph-ledger-header h2 {
    margin: 5px 0 0;
    color: #1b263b;
    font-size: 24px;
    font-weight: 800;
}

.ph-ledger-count {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 13px;
    border: 1px solid #e1e6ed;
    border-radius: 9px;
    background: #fff;
    color: #6d788b;
    font-size: 10px;
    font-weight: 700;
}

.ph-ledger-count i {
    font-size: 15px;
}

/* =========================================================
   LEDGER
========================================================= */

.ph-ledger {
    overflow: hidden;
    border: 1px solid #e3e8ef;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 7px 24px rgba(31, 48, 78, 0.05);
}

.ph-ledger-columns,
.ph-transaction-row {
    display: grid;
    grid-template-columns:
        105px
        minmax(210px, 1.65fr)
        minmax(145px, 1fr)
        120px
        135px
        110px
        110px;
    align-items: center;
    gap: 18px;
}

.ph-ledger-columns {
    min-height: 48px;
    padding: 0 20px;
    background: #f8f9fb;
    border-bottom: 1px solid #e8ecf1;
    color: #929baa;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

/* =========================================================
   TRANSACTION ROW
========================================================= */

.ph-transaction-row {
    min-height: 92px;
    padding: 15px 20px;
    border-bottom: 1px solid #edf0f4;
    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.ph-transaction-row:last-child {
    border-bottom: 0;
}

.ph-transaction-row:hover {
    background: #fbfcfe;
}

/* =========================================================
   DATE
========================================================= */

.ph-date-cell strong {
    display: block;
    color: #27334a;
    font-size: 13px;
    font-weight: 800;
}

.ph-date-cell span {
    display: block;
    margin-top: 4px;
    color: #9aa3b2;
    font-size: 9px;
}

/* =========================================================
   PAYMENT
========================================================= */

.ph-payment-cell {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.ph-payment-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #edf8f2;
    color: #15965b;
    font-size: 17px;
}

.ph-payment-info {
    min-width: 0;
}

.ph-payment-info strong {
    display: block;
    color: #27334a;
    font-size: 12px;
    font-weight: 800;
}

.ph-payment-info span {
    display: block;
    margin-top: 3px;
    color: #909aaa;
    font-size: 9px;
}

.ph-payment-info span b {
    color: #667286;
    font-weight: 700;
}

.ph-payment-info small {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 3px;
    color: #a0a8b5;
    font-size: 8px;
}

.ph-payment-info small i {
    font-size: 11px;
}

/* =========================================================
   TRANSACTION REFERENCE
========================================================= */

.ph-transaction-cell span {
    display: block;
    color: #a0a8b6;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.ph-transaction-cell strong {
    display: block;
    max-width: 150px;
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #4b586e;
    font-size: 10px;
    font-weight: 700;
}

.ph-transaction-cell .ph-muted {
    color: #b1b7c2;
    font-weight: 500;
}

/* =========================================================
   PAYMENT MODE
========================================================= */

.ph-mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border: 1px solid #e5e9ef;
    border-radius: 8px;
    background: #fafbfd;
    color: #58657a;
    font-size: 9px;
    font-weight: 800;
}

.ph-mode-badge i {
    color: #718096;
    font-size: 13px;
}

.ph-mode-cell small {
    display: block;
    margin-top: 4px;
    color: #a0a8b6;
    font-size: 8px;
}

/* =========================================================
   AMOUNT
========================================================= */

.ph-amount-cell span {
    display: block;
    color: #a0a8b6;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.ph-amount-cell strong {
    display: block;
    margin-top: 4px;
    color: #15945a;
    font-size: 13px;
    font-weight: 800;
}

.ph-amount-cell small {
    display: block;
    margin-top: 3px;
    color: #c28b45;
    font-size: 7px;
}

/* =========================================================
   STATUS
========================================================= */

.ph-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 8px;
    font-size: 8px;
    font-weight: 800;
}

.ph-status-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.ph-status-approved {
    background: #eaf8f0;
    color: #168752;
}

.ph-status-approved .ph-status-dot {
    background: #1ca967;
}

.ph-status-pending {
    background: #fff4df;
    color: #b87918;
}

.ph-status-pending .ph-status-dot {
    background: #e4a23b;
}

.ph-status-rejected {
    background: #fff0f0;
    color: #c23f3f;
}

.ph-status-rejected .ph-status-dot {
    background: #d44d4d;
}

.ph-status-default {
    background: #f0f2f5;
    color: #697588;
}

.ph-status-default .ph-status-dot {
    background: #8b95a5;
}

/* =========================================================
   DOWNLOAD
========================================================= */

.ph-download-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid #dce3eb;
    border-radius: 8px;
    background: #fff;
    color: #59677c;
    font-size: 9px;
    font-weight: 800;
    cursor: default;
    opacity: 0.68;
}

.ph-download-button i {
    font-size: 14px;
}

/* =========================================================
   EMPTY
========================================================= */

.ph-empty {
    padding: 75px 20px;
    text-align: center;
}

.ph-empty-illustration {
    width: 70px;
    height: 70px;
    margin: 0 auto 17px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    background: #f1f4f8;
    color: #8994a5;
    font-size: 29px;
}

.ph-empty h3 {
    margin: 0;
    color: #29364c;
    font-size: 18px;
    font-weight: 800;
}

.ph-empty p {
    max-width: 420px;
    margin: 8px auto 0;
    color: #939cab;
    font-size: 11px;
    line-height: 1.7;
}

/* =========================================================
   PAGINATION
========================================================= */

.ph-pagination-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
}

.ph-pagination-info {
    color: #8c96a6;
    font-size: 10px;
}

.ph-pagination-info strong {
    color: #58667a;
}

.ph-pagination nav {
    display: flex;
    align-items: center;
}

.ph-pagination nav > div:first-child {
    display: none;
}

.ph-pagination nav > div:last-child {
    display: flex;
    align-items: center;
}

.ph-pagination a,
.ph-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    margin-left: 5px;
    padding: 0 8px;
    border: 1px solid #dfe5ec;
    border-radius: 8px;
    background: #fff;
    color: #667387;
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
}

.ph-pagination span[aria-current="page"] {
    border-color: #172b4d;
    background: #172b4d;
    color: #fff;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1350px) {
    .ph-finance-layout {
        grid-template-columns: 1.5fr 1fr 1fr;
    }

    .ph-stat-card:last-child {
        grid-column: span 1;
    }

    .ph-ledger {
        overflow-x: auto;
    }

    .ph-ledger-columns,
    .ph-transaction-row {
        min-width: 1100px;
    }
}

@media (max-width: 900px) {
    .payment-history-page {
        padding: 22px 18px 40px;
    }

    .ph-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .ph-finance-layout {
        grid-template-columns: 1fr 1fr;
    }

    .ph-total-card {
        grid-column: span 2;
    }
}

@media (max-width: 600px) {
    .ph-page-header {
        padding-bottom: 22px;
    }

    .ph-header-left {
        align-items: flex-start;
    }

    .ph-header-icon {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        font-size: 21px;
    }

    .ph-page-header h1 {
        font-size: 25px;
    }

    .ph-page-header p {
        font-size: 11px;
    }

    .ph-finance-layout {
        grid-template-columns: 1fr;
    }

    .ph-total-card {
        grid-column: auto;
    }

    .ph-ledger-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .ph-pagination-wrapper {
        align-items: flex-start;
        flex-direction: column;
    }
}
.ph-download-button {
    text-decoration: none !important;
}

.ph-download-button:hover,
.ph-download-button:focus,
.ph-download-button:active {
    text-decoration: none !important;
}

/* =========================================================
   INSTALLMENT SCHEDULE PAGE
   ========================================================= */

.re-installment-section {
    width: 100%;
    margin-top: 24px;
}

.re-installment-card {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e8edf5;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(24, 39, 75, 0.05);
}

/* =========================================================
   HEADER
   ========================================================= */

.re-installment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    border-bottom: 1px solid #edf0f5;
}

.re-installment-heading {
    display: flex;
    align-items: center;
    gap: 14px;
}

.re-installment-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(135deg, #0b4ea2 0%, #1261bd 45%, #0876d1 100%);

    color: #ffffff;
    font-size: 20px;
}

.re-installment-title h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #172033;
}

.re-installment-title p {
    margin: 4px 0 0;
    font-size: 13px;
    color: #7a8496;
}

.re-installment-date {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 13px;
    background: #f5f8fd;
    border: 1px solid #e7edf6;
    border-radius: 9px;
    color: #596579;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* =========================================================
   SUMMARY
   ========================================================= */

.re-installment-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding: 20px 24px;
    background: #f8faff;
    border-bottom: 1px solid #edf0f5;
}

.re-installment-stat {
    background: #ffffff;
    border: 1px solid #e9edf4;
    border-radius: 12px;
    padding: 15px 16px;
}

.re-installment-stat-label {
    display: block;
    margin-bottom: 6px;
    color: #7b8495;
    font-size: 12px;
    font-weight: 500;
}

.re-installment-stat-value {
    display: block;
    color: #172033;
    font-size: 18px;
    font-weight: 700;
}

/* =========================================================
   BOOKING BLOCK
   ========================================================= */

.re-installment-booking {
    border-bottom: 1px solid #edf0f4;
}

.re-installment-booking:last-child {
    border-bottom: 0;
}

.re-installment-booking-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    background: #ffffff;
}

.re-installment-booking-info {
    display: flex;
    align-items: center;
    gap: 13px;
}

.re-installment-project-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 11px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #eef5ff;
    color: #1261bd;
    font-size: 19px;
}

.re-installment-booking-label {
    display: block;
    margin-bottom: 3px;

    color: #8a94a6;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.7px;
}

.re-installment-booking-title {
    margin: 0;
    color: #172033;
    font-size: 16px;
    font-weight: 700;
}

.re-installment-booking-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 5px;
}

.re-installment-booking-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    color: #7a8496;
    font-size: 11px;
}

.re-installment-booking-meta i {
    color: #1261bd;
    font-size: 13px;
}

.re-installment-booking-total {
    text-align: right;
}

.re-installment-booking-total span {
    display: block;
    margin-bottom: 3px;

    color: #8a94a6;
    font-size: 11px;
}

.re-installment-booking-total strong {
    color: #172033;
    font-size: 17px;
    font-weight: 700;
}

/* =========================================================
   TABLE
   ========================================================= */

.re-installment-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.re-installment-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.re-installment-table thead th {
    padding: 13px 20px;

    background: #f8f9fc;
    border-top: 1px solid #edf0f4;
    border-bottom: 1px solid #e7ebf2;

    color: #667085;
    font-size: 11px;
    font-weight: 700;
    text-align: left;

    white-space: nowrap;
}

.re-installment-table tbody td {
    padding: 16px 20px;

    border-bottom: 1px solid #edf0f4;

    color: #30394b;
    font-size: 13px;
    vertical-align: middle;
}

.re-installment-table tbody tr:last-child td {
    border-bottom: 0;
}

.re-installment-table tbody tr {
    transition: background 0.2s ease;
}

.re-installment-table tbody tr:hover {
    background: #fafcff;
}

/* =========================================================
   INSTALLMENT NUMBER
   ========================================================= */

.re-installment-number {
    display: flex;
    align-items: center;
    gap: 10px;
}

.re-installment-number-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: #eef5ff;
    color: #1261bd;

    font-size: 12px;
    font-weight: 700;
}

.re-installment-number-text {
    color: #20283a;
    font-weight: 600;
}

/* =========================================================
   DATE
   ========================================================= */

.re-installment-date-cell {
    color: #4f596b;
    white-space: nowrap;
}

.re-installment-date-main {
    display: block;
    color: #30394b;
    font-weight: 600;
}

.re-installment-date-day {
    display: block;
    margin-top: 2px;
    color: #9099a9;
    font-size: 11px;
}

/* =========================================================
   AMOUNT
   ========================================================= */

.re-installment-amount {
    color: #172033;
    font-weight: 700;
    white-space: nowrap;
}

/* =========================================================
   STATUS
   ========================================================= */

.re-installment-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 6px 11px;

    border-radius: 20px;

    font-size: 11px;
    font-weight: 700;
    line-height: 1;

    white-space: nowrap;
}

.re-installment-status i {
    font-size: 13px;
}

.re-installment-status.paid {
    color: #16834b;
    background: #eaf8f0;
}

.re-installment-status.pending {
    color: #c47a00;
    background: #fff5df;
}

.re-installment-status.upcoming {
    color: #1261bd;
    background: #eaf3ff;
}

.re-installment-status.overdue {
    color: #d13b3b;
    background: #fff0f0;
}

.re-installment-status.today {
    color: #a35d00;
    background: #fff3dc;
}

/* =========================================================
   RECEIPT
   ========================================================= */

.re-installment-receipt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    min-width: 34px;
    height: 34px;
    padding: 0 10px;

    border-radius: 9px;

    background: #f1f6ff;
    color: #1261bd;

    text-decoration: none;

    font-size: 11px;
    font-weight: 600;

    transition: all 0.2s ease;
}

.re-installment-receipt:hover {
    background: #1261bd;
    color: #ffffff;
}

.re-installment-receipt.disabled {
    background: #f3f4f6;
    color: #a0a7b4;
    pointer-events: none;
}

/* =========================================================
   BOOKING FOOTER
   ========================================================= */

.re-installment-booking-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 35px;

    padding: 14px 24px;

    background: #fafbfc;
    border-top: 1px solid #edf0f4;
}

.re-installment-footer-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.re-installment-footer-item span {
    color: #7b8495;
    font-size: 12px;
}

.re-installment-footer-item strong {
    color: #172033;
    font-size: 13px;
}

.re-installment-footer-item strong.paid {
    color: #16834b;
}

/* =========================================================
   EMPTY
   ========================================================= */

.re-installment-empty {
    padding: 55px 20px;
    text-align: center;
}

.re-installment-empty-icon {
    width: 58px;
    height: 58px;

    margin: 0 auto 14px;

    border-radius: 15px;

    background: #f1f5fa;
    color: #8b95a7;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 23px;
}

.re-installment-empty h4 {
    margin: 0 0 6px;

    color: #30394b;
    font-size: 16px;
    font-weight: 700;
}

.re-installment-empty p {
    margin: 0;

    color: #8a93a3;
    font-size: 13px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
    .re-installment-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .re-installment-header {
        padding: 18px;
    }

    .re-installment-header,
    .re-installment-booking-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .re-installment-date {
        align-self: flex-start;
    }

    .re-installment-summary {
        padding: 16px;
        gap: 10px;
    }

    .re-installment-stat {
        padding: 13px;
    }

    .re-installment-stat-value {
        font-size: 16px;
    }

    .re-installment-booking-header {
        padding: 18px;
    }

    .re-installment-booking-total {
        text-align: left;
    }

    .re-installment-table thead th,
    .re-installment-table tbody td {
        padding: 13px 15px;
    }

    .re-installment-booking-footer {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 15px 25px;
        padding: 14px 18px;
    }
}

@media (max-width: 520px) {
    .re-installment-summary {
        grid-template-columns: 1fr;
    }

    .re-installment-heading {
        gap: 10px;
    }

    .re-installment-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 17px;
    }

    .re-installment-title h3 {
        font-size: 16px;
    }

    .re-installment-title p {
        font-size: 12px;
    }

    .re-installment-booking-info {
        align-items: flex-start;
    }

    .re-installment-booking-meta {
        gap: 8px;
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Support */
.support-page {
    padding: 25px;
}

.support-header {
    margin-bottom: 25px;
}

.support-header h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #222;
}

.support-header p {
    margin: 7px 0 0;
    color: #777;
    font-size: 14px;
}

.support-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 20px;
}

.support-card {
    background: #fff;
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
    margin-bottom: 20px;
}

.support-card h4 {
    margin: 0 0 5px;
    font-size: 18px;
    font-weight: 700;
    color: #222;
}

.support-card-subtitle {
    color: #888;
    font-size: 13px;
    margin-bottom: 18px;
}

.support-sections {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.support-section-item {
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 16px;
    transition: 0.2s;
    cursor: pointer;
}

.support-section-item:hover {
    border-color: #5b3cc4;
    transform: translateY(-2px);
}

.support-section-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(91, 60, 196, 0.1);
    color: #5b3cc4;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    font-size: 18px;
}

.support-section-item strong {
    display: block;
    font-size: 14px;
    color: #333;
}

.support-section-item span {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #888;
}

.support-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.support-action {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 10px;
    text-decoration: none;
    color: #333;
    transition: 0.2s;
}

.support-action:hover {
    border-color: #5b3cc4;
    color: #5b3cc4;
}

.support-action i {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f1ff;
    color: #5b3cc4;
}

.support-action strong {
    display: block;
    font-size: 13px;
}

.support-action span {
    display: block;
    font-size: 11px;
    color: #888;
    margin-top: 3px;
}

.support-empty {
    text-align: center;
    padding: 30px 10px;
    color: #999;
    font-size: 13px;
}

.support-table-wrapper {
    overflow-x: auto;
}

.support-table {
    width: 100%;
    border-collapse: collapse;
}

.support-table th {
    text-align: left;
    font-size: 12px;
    color: #777;
    padding: 12px;
    border-bottom: 1px solid #eee;
    white-space: nowrap;
}

.support-table td {
    padding: 14px 12px;
    font-size: 13px;
    border-bottom: 1px solid #f1f1f1;
    color: #444;
    vertical-align: middle;
}

.ticket-status {
    display: inline-flex;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: #f3f3f3;
    color: #666;
}

.query-message {
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.support-pagination {
    margin-top: 15px;
}

@media (max-width: 991px) {
    .support-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .support-page {
        padding: 15px;
    }

    .support-sections,
    .support-actions {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   SUPPORT TICKET PAGE
   ========================================================= */

.support-ticket-card {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px;
    background: #ffffff;
    border: 1px solid #e8e8ef;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(35, 25, 80, 0.06);
}

/* =========================================================
   HEADER
   ========================================================= */

.support-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 22px;
    margin-bottom: 24px;
    border-bottom: 1px solid #eeeef3;
}

.support-card-header h3 {
    margin: 0 0 7px;
    font-size: 22px;
    line-height: 1.35;
    font-weight: 700;
    color: #25213d;
}

.support-card-header p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #7c7a89;
}

/* =========================================================
   ALERTS
   ========================================================= */

.support-alert {
    width: 100%;
    padding: 13px 16px;
    margin-bottom: 22px;
    border-radius: 9px;
    font-size: 13px;
    line-height: 1.5;
}

.support-alert.success {
    background: #edf9f1;
    border: 1px solid #ccebd6;
    color: #267443;
}

.support-alert.error {
    background: #fff1f1;
    border: 1px solid #f3cccc;
    color: #c03939;
}

.support-alert.error div + div {
    margin-top: 4px;
}

/* =========================================================
   FORM GRID
   ========================================================= */

.support-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 20px;
}

.support-form-group {
    min-width: 0;
}

.support-form-group.full-width {
    grid-column: 1 / -1;
}

/* =========================================================
   LABEL
   ========================================================= */

.support-form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #363346;
}

.support-form-group label span {
    color: #e74c3c;
    margin-left: 2px;
}

.support-form-group label small {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 400;
    color: #9997a5;
}

/* =========================================================
   INPUT / SELECT / TEXTAREA
   ========================================================= */

.support-form-group input[type="text"],
.support-form-group input[type="file"],
.support-form-group select,
.support-form-group textarea {
    width: 100%;
    border: 1px solid #dedde7;
    border-radius: 9px;
    background: #ffffff;
    color: #302d40;
    font-family: inherit;
    font-size: 13px;
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.support-form-group input[type="text"],
.support-form-group select {
    height: 46px;
    padding: 0 14px;
}

.support-form-group textarea {
    min-height: 145px;
    padding: 13px 14px;
    resize: vertical;
    line-height: 1.6;
}

.support-form-group input[type="file"] {
    min-height: 46px;
    padding: 10px 12px;
    cursor: pointer;
}

/* =========================================================
   PLACEHOLDER
   ========================================================= */

.support-form-group input::placeholder,
.support-form-group textarea::placeholder {
    color: #aaa8b5;
}

/* =========================================================
   FOCUS
   ========================================================= */

.support-form-group input[type="text"]:focus,
.support-form-group select:focus,
.support-form-group textarea:focus,
.support-form-group input[type="file"]:focus {
    border-color: #5b3cc4;
    box-shadow: 0 0 0 3px rgba(91, 60, 196, 0.1);
}

/* =========================================================
   SELECT
   ========================================================= */

.support-form-group select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image:
        linear-gradient(45deg, transparent 50%, #777 50%),
        linear-gradient(135deg, #777 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 20px,
        calc(100% - 13px) 20px;
    background-size:
        5px 5px,
        5px 5px;
    background-repeat: no-repeat;
    padding-right: 40px;
}

/* =========================================================
   FILE INPUT
   ========================================================= */

.support-form-group input[type="file"] {
    background: #fafafe;
    color: #696777;
}

.support-form-group input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 7px 13px;
    border: 0;
    border-radius: 6px;
    background: #f0edfb;
    color: #5b3cc4;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* =========================================================
   FORM FOOTER
   ========================================================= */

.support-form-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 25px;
    padding-top: 22px;
    border-top: 1px solid #eeeef3;
}

/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

.support-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-width: 155px;
    height: 44px;
    padding: 0 20px;

    border: 0;
    border-radius: 8px;

    background: linear-gradient(135deg, #5b3cc4 0%, #39218c 100%);

    color: #ffffff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    box-shadow: 0 6px 15px rgba(91, 60, 196, 0.2);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}

.support-submit-btn i {
    font-size: 17px;
}

.support-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 9px 20px rgba(91, 60, 196, 0.28);
}

.support-submit-btn:active {
    transform: translateY(0);
}

.support-submit-btn:focus {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(91, 60, 196, 0.12),
        0 7px 17px rgba(91, 60, 196, 0.2);
}

/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 768px) {
    .support-ticket-card {
        padding: 22px;
        border-radius: 13px;
    }

    .support-card-header {
        padding-bottom: 18px;
        margin-bottom: 20px;
    }

    .support-card-header h3 {
        font-size: 19px;
    }

    .support-form-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .support-form-group.full-width {
        grid-column: auto;
    }

    .support-form-footer {
        justify-content: stretch;
    }

    .support-submit-btn {
        width: 100%;
    }
}

/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 480px) {
    .support-ticket-card {
        padding: 17px;
        border-radius: 11px;
    }

    .support-card-header {
        margin-bottom: 18px;
        padding-bottom: 16px;
    }

    .support-card-header h3 {
        font-size: 17px;
    }

    .support-card-header p {
        font-size: 12px;
    }

    .support-form-group label {
        font-size: 12px;
    }

    .support-form-group input[type="text"],
    .support-form-group select {
        height: 43px;
        font-size: 12px;
    }

    .support-form-group textarea {
        min-height: 125px;
        font-size: 12px;
    }

    .support-form-footer {
        margin-top: 20px;
        padding-top: 18px;
    }

    .support-submit-btn {
        height: 43px;
        font-size: 12px;
    }
}

/* =========================================================
   SUPPORT TICKET DETAILS
   ========================================================= */

.support-ticket-details-page {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

/* =========================================================
   HEADER
   ========================================================= */

.support-details-header {
    margin-bottom: 24px;
}

.support-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;

    color: #5b3cc4;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.support-back-link:hover {
    color: #39218c;
}

.support-back-link i {
    font-size: 16px;
}

.support-details-header h2 {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 700;
    color: #25213d;
}

.support-details-header p {
    margin: 0;
    color: #858291;
    font-size: 13px;
}

/* =========================================================
   GRID
   ========================================================= */

.support-ticket-details-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 22px;
}

/* =========================================================
   CARD
   ========================================================= */

.support-detail-card {
    background: #ffffff;
    border: 1px solid #e9e7ef;
    border-radius: 15px;
    padding: 22px;
    margin-bottom: 22px;
    box-shadow: 0 7px 25px rgba(35, 25, 80, 0.05);
}

/* =========================================================
   TICKET HEADER
   ========================================================= */

.support-detail-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #eeeef3;
}

.support-detail-label {
    display: block;
    margin-bottom: 4px;
    color: #94919f;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.support-detail-card-header h3 {
    margin: 0;
    color: #29263b;
    font-size: 20px;
    font-weight: 700;
}

/* =========================================================
   STATUS
   ========================================================= */

.support-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 70px;
    padding: 6px 12px;

    border-radius: 20px;

    font-size: 11px;
    font-weight: 600;
}

.support-status.open {
    background: #eaf8ef;
    color: #27834a;
}

.support-status.closed {
    background: #f1f1f4;
    color: #777582;
}

.support-status.pending {
    background: #fff5e6;
    color: #b87916;
}

/* =========================================================
   META
   ========================================================= */

.support-ticket-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    padding-top: 20px;
}

.support-meta-item span {
    display: block;
    margin-bottom: 5px;
    color: #9996a4;
    font-size: 11px;
}

.support-meta-item strong {
    display: block;
    color: #373345;
    font-size: 12px;
    font-weight: 600;
}

/* =========================================================
   CONVERSATION HEADER
   ========================================================= */

.support-conversation-header {
    padding-bottom: 17px;
    border-bottom: 1px solid #eeeef3;
}

.support-conversation-header h3 {
    margin: 0 0 5px;
    color: #302d40;
    font-size: 16px;
    font-weight: 700;
}

.support-conversation-header p {
    margin: 0;
    color: #92909c;
    font-size: 12px;
}

/* =========================================================
   CONVERSATION
   ========================================================= */

.support-conversation {
    padding-top: 20px;
}

/* =========================================================
   MESSAGE
   ========================================================= */

.support-message {
    display: flex;
    margin-bottom: 18px;
}

.support-message.customer {
    justify-content: flex-end;
}

.support-message.agent {
    justify-content: flex-start;
}

.support-message-content {
    width: auto;
    max-width: 78%;
    padding: 13px 15px;
    border-radius: 11px;
}

.support-message.customer .support-message-content {
    background: #f1edfc;
    border: 1px solid #e4ddf8;
}

.support-message.agent .support-message-content {
    background: #f7f7f9;
    border: 1px solid #e8e7ec;
}

/* =========================================================
   MESSAGE TOP
   ========================================================= */

.support-message-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 8px;
}

.support-message-top strong {
    color: #383444;
    font-size: 12px;
}

.support-message-top span {
    color: #9996a4;
    font-size: 10px;
    white-space: nowrap;
}

/* =========================================================
   MESSAGE TEXT
   ========================================================= */

.support-message-text {
    color: #5f5c69;
    font-size: 12px;
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
}

/* =========================================================
   ATTACHMENT
   ========================================================= */

.support-attachment {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    margin-top: 10px;
    padding: 6px 9px;

    border-radius: 6px;
    background: #ffffff;

    color: #5b3cc4;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}

.support-attachment:hover {
    background: #f8f6ff;
}

.support-attachment i {
    font-size: 15px;
}

/* =========================================================
   SIDE TITLE
   ========================================================= */

.support-side-title {
    margin: 0 0 15px;
    color: #302d40;
    font-size: 15px;
    font-weight: 700;
}

.support-side-text {
    margin: 0 0 17px;
    color: #85828f;
    font-size: 12px;
    line-height: 1.6;
}

/* =========================================================
   SUMMARY
   ========================================================= */

.support-summary-list {
    display: flex;
    flex-direction: column;
}

.support-summary-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    padding: 12px 0;
    border-bottom: 1px solid #eeeef3;
}

.support-summary-list > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.support-summary-list span {
    color: #92909d;
    font-size: 11px;
}

.support-summary-list strong {
    color: #373345;
    font-size: 11px;
    text-align: right;
}

/* =========================================================
   CONTACT BUTTONS
   ========================================================= */

.support-contact-actions {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.support-contact-btn {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 11px 13px;

    border: 1px solid #e5e2ef;
    border-radius: 8px;

    color: #5b3cc4;
    background: #faf9fe;

    font-size: 12px;
    font-weight: 600;
    text-decoration: none;

    transition: all 0.2s ease;
}

.support-contact-btn:hover {
    background: #f4f0ff;
    border-color: #d9d0f2;
}

.support-contact-btn i {
    font-size: 17px;
}

.support-contact-btn.whatsapp {
    color: #27834a;
}

.support-contact-btn.whatsapp:hover {
    background: #effaf3;
    border-color: #cdebd6;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
    .support-ticket-details-grid {
        grid-template-columns: 1fr;
    }

    .support-ticket-meta {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 650px) {
    .support-ticket-details-page {
        padding: 0 5px;
    }

    .support-detail-card {
        padding: 17px;
        border-radius: 12px;
    }

    .support-ticket-meta {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .support-detail-card-header h3 {
        font-size: 17px;
    }

    .support-message-content {
        max-width: 90%;
    }

    .support-message-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }
}

@media (max-width: 480px) {
    .support-details-header h2 {
        font-size: 20px;
    }

    .support-details-header p {
        font-size: 12px;
    }

    .support-detail-card {
        padding: 15px;
    }

    .support-message-content {
        max-width: 94%;
        padding: 11px 12px;
    }
}
.support-ticket-link {
    color: #5b3cc4;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
}

.support-ticket-link:hover {
    color: #39218c;
    text-decoration: underline;
}

/* =========================================================
   CUSTOMER TICKET REPLY
   ========================================================= */

.support-reply-box {
    margin-top: 20px;
    padding: 22px;
    background: #fff;
    border: 1px solid #e9e9ef;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}

.support-reply-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.support-reply-header h4 {
    margin: 0 0 5px;
    font-size: 17px;
    font-weight: 700;
    color: #252525;
}

.support-reply-header p {
    margin: 0;
    font-size: 13px;
    color: #777;
}

.support-reply-form-group {
    margin-bottom: 18px;
}

.support-reply-form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.support-reply-form-group label span {
    color: #e53935;
}

.support-reply-form-group label small {
    margin-left: 8px;
    font-size: 11px;
    font-weight: 400;
    color: #999;
}

.support-reply-form-group textarea {
    width: 100%;
    min-height: 120px;
    padding: 13px 14px;
    border: 1px solid #ddd;
    border-radius: 9px;
    background: #fff;
    color: #333;
    font-size: 13px;
    line-height: 1.6;
    resize: vertical;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.support-reply-form-group textarea:focus {
    border-color: #5b3cc4;
    box-shadow: 0 0 0 3px rgba(91, 60, 196, 0.08);
}

.support-reply-form-group input[type="file"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 9px;
    background: #fafafa;
    font-size: 12px;
    color: #666;
    box-sizing: border-box;
}

.support-reply-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 5px;
}

.support-reply-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 20px;
    border: 0;
    border-radius: 8px;
    background: #5b3cc4;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.support-reply-btn:hover {
    background: #39218c;
    transform: translateY(-1px);
}

.support-ticket-closed-message {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    background: #f8f8f8;
    color: #777;
}

.support-ticket-closed-message > i {
    font-size: 23px;
    color: #999;
}

.support-ticket-closed-message strong {
    display: block;
    margin-bottom: 3px;
    font-size: 13px;
    color: #555;
}

.support-ticket-closed-message span {
    display: block;
    font-size: 12px;
    color: #888;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {
    .support-reply-box {
        padding: 16px;
    }

    .support-reply-footer {
        justify-content: stretch;
    }

    .support-reply-btn {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   GENERAL QUERY FORM
   ========================================================= */

.support-query-form {
    margin-top: 20px;
}

/* FORM GROUP */

.support-form-group {
    margin-bottom: 18px;
}

.support-form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.support-form-group label span {
    color: #e53935;
    margin-left: 2px;
}

/* INPUT + TEXTAREA */

.support-form-group input,
.support-form-group textarea {
    width: 100%;
    display: block;

    padding: 12px 14px;

    border: 1px solid #e2e2e8;
    border-radius: 9px;

    background: #fff;

    color: #333;
    font-size: 13px;
    font-family: inherit;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

/* INPUT */

.support-form-group input {
    height: 45px;
}

/* TEXTAREA */

.support-form-group textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.6;
}

/* PLACEHOLDER */

.support-form-group input::placeholder,
.support-form-group textarea::placeholder {
    color: #aaa;
}

/* FOCUS */

.support-form-group input:focus,
.support-form-group textarea:focus {
    border-color: #5b3cc4;

    box-shadow: 0 0 0 3px rgba(91, 60, 196, 0.08);

    background: #fff;
}

/* =========================================================
   QUERY FORM FOOTER
   ========================================================= */

.support-query-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    margin-top: 6px;
}

/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

.support-query-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 42px;
    padding: 0 18px;

    border: none;
    border-radius: 8px;

    background: linear-gradient(135deg, #5b3cc4 0%, #39218c 100%);

    color: #fff;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    box-shadow: 0 5px 14px rgba(91, 60, 196, 0.18);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}

.support-query-btn i {
    font-size: 17px;
}

/* HOVER */

.support-query-btn:hover {
    transform: translateY(-1px);

    box-shadow: 0 7px 18px rgba(91, 60, 196, 0.25);
}

/* ACTIVE */

.support-query-btn:active {
    transform: translateY(0);
}

/* =========================================================
   SUPPORT ALERTS
   ========================================================= */

.support-alert {
    padding: 12px 15px;

    margin-bottom: 20px;

    border-radius: 8px;

    font-size: 13px;
    line-height: 1.5;
}

/* SUCCESS */

.support-alert.success {
    background: #eefaf2;
    border: 1px solid #ccebd6;
    color: #217a3b;
}

/* ERROR */

.support-alert.error {
    background: #fff1f1;
    border: 1px solid #f2cccc;
    color: #c62828;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 576px) {
    .support-query-footer {
        justify-content: stretch;
    }

    .support-query-btn {
        width: 100%;
    }

    .support-form-group input,
    .support-form-group textarea {
        font-size: 13px;
    }
}

/* =========================================================
   CUSTOMER PROFILE PAGE
   ========================================================= */

.profile-page {
    width: 100%;
    padding: 24px;
    box-sizing: border-box;
}

/* =========================================================
   HEADER
   ========================================================= */

.profile-header {
    margin-bottom: 22px;
}

.profile-header h2 {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 700;
    color: #252525;
}

.profile-header p {
    margin: 0;
    font-size: 13px;
    color: #777;
}

/* =========================================================
   ALERTS
   ========================================================= */

.profile-alert {
    padding: 12px 15px;
    border-radius: 8px;
    margin-bottom: 18px;
    font-size: 13px;
    line-height: 1.5;
}

.profile-alert-success {
    background: #ecfdf3;
    color: #16794c;
    border: 1px solid #c8f0da;
}

.profile-alert-error {
    background: #fff1f2;
    color: #b42318;
    border: 1px solid #ffd5d9;
}

.profile-alert-error ul {
    margin: 0;
    padding-left: 18px;
}

/* =========================================================
   MAIN PROFILE CARD
   ========================================================= */

.profile-card {
    width: 100%;
    background: #fff;
    border: 1px solid #ececf1;
    border-radius: 14px;
    padding: 24px;
    box-sizing: border-box;
    box-shadow: 0 3px 14px rgba(30, 30, 50, 0.04);
    margin-bottom: 20px;
}

/* =========================================================
   PROFILE IMAGE
   ========================================================= */

.profile-image-section {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid #eeeeef;
}

.profile-image-wrapper {
    width: 92px;
    height: 92px;
    min-width: 92px;
    border-radius: 50%;
    overflow: hidden;
    background: #f3f0ff;
    border: 3px solid #eee9ff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5b3cc4;
    font-size: 42px;
}

.profile-image-content h4 {
    margin: 0 0 5px;
    font-size: 16px;
    font-weight: 700;
    color: #292929;
}

.profile-image-content p {
    margin: 0 0 12px;
    font-size: 12px;
    color: #888;
}

.profile-image-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    background: #f3f0ff;
    color: #5b3cc4;
    border: 1px solid #e5defc;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.profile-image-btn:hover {
    background: #5b3cc4;
    color: #fff;
    border-color: #5b3cc4;
}

/* =========================================================
   SECTION
   ========================================================= */

.profile-section {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid #eeeeef;
}

.profile-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
}

.profile-section-heading h4 {
    margin: 0 0 5px;
    font-size: 16px;
    font-weight: 700;
    color: #292929;
}

.profile-section-heading span {
    font-size: 12px;
    color: #888;
}

/* =========================================================
   FORM GRID
   ========================================================= */

.profile-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.profile-form-group {
    min-width: 0;
}

.profile-form-group.profile-full-width {
    grid-column: 1 / -1;
}

/* =========================================================
   LABEL
   ========================================================= */

.profile-form-group label {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 600;
    color: #454545;
}

/* =========================================================
   INPUTS
   ========================================================= */

.profile-form-group input,
.profile-form-group textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #dedee5;
    background: #fff;
    border-radius: 8px;
    padding: 11px 13px;
    font-family: inherit;
    font-size: 13px;
    color: #333;
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.profile-form-group input {
    height: 42px;
}

.profile-form-group textarea {
    min-height: 90px;
    resize: vertical;
    line-height: 1.5;
}

.profile-form-group input:focus,
.profile-form-group textarea:focus {
    border-color: #5b3cc4;
    box-shadow: 0 0 0 3px rgba(91, 60, 196, 0.08);
}

.profile-form-group input[readonly] {
    background: #f7f7f9;
    color: #777;
    cursor: not-allowed;
}

.profile-form-group small {
    display: block;
    margin-top: 5px;
    font-size: 10px;
    color: #999;
}

/* =========================================================
   KYC STATUS
   ========================================================= */

.profile-kyc-status {
    display: flex;
    align-items: center;
}

.kyc-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.kyc-approved {
    color: #137333;
    background: #eaf7ee;
    border: 1px solid #ccebd6;
}

.kyc-pending {
    color: #9a6700;
    background: #fff8df;
    border: 1px solid #f2df9c;
}

.kyc-rejected {
    color: #b42318;
    background: #fff0f0;
    border: 1px solid #f4cccc;
}

/* =========================================================
   FORM FOOTER
   ========================================================= */

.profile-form-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 2px;
}

/* =========================================================
   SAVE BUTTON
   ========================================================= */

.profile-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 140px;
    height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background: #5b3cc4;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.profile-save-btn:hover {
    background: #39218c;
    transform: translateY(-1px);
}

.profile-save-btn:active {
    transform: translateY(0);
}

/* =========================================================
   PASSWORD CARD
   ========================================================= */

.profile-password-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.profile-password-card .profile-section-heading {
    margin-bottom: 0;
}

.profile-password-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    background: #f3f0ff;
    color: #5b3cc4;
    border: 1px solid #e4ddff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: all 0.2s ease;
}

.profile-password-btn:hover {
    background: #5b3cc4;
    color: #fff;
    border-color: #5b3cc4;
}

/* =========================================================
   GLOBAL PROFILE LINKS
   ========================================================= */

.profile-page a {
    text-decoration: none;
}

/* =========================================================
   RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 768px) {
    .profile-page {
        padding: 18px;
    }

    .profile-card {
        padding: 20px;
    }

    .profile-form-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .profile-form-group.profile-full-width {
        grid-column: auto;
    }

    .profile-section-heading {
        flex-direction: column;
        gap: 5px;
    }

    .profile-password-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-password-btn {
        width: 100%;
    }
}

/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 480px) {
    .profile-page {
        padding: 14px;
    }

    .profile-header h2 {
        font-size: 21px;
    }

    .profile-header p {
        font-size: 12px;
    }

    .profile-card {
        padding: 16px;
        border-radius: 11px;
    }

    .profile-image-section {
        align-items: flex-start;
        gap: 14px;
    }

    .profile-image-wrapper {
        width: 72px;
        height: 72px;
        min-width: 72px;
    }

    .profile-image-placeholder {
        font-size: 32px;
    }

    .profile-image-content h4 {
        font-size: 14px;
    }

    .profile-image-content p {
        font-size: 10px;
    }

    .profile-image-btn {
        font-size: 11px;
        padding: 7px 10px;
    }

    .profile-form-group input {
        height: 40px;
    }

    .profile-form-group input,
    .profile-form-group textarea {
        font-size: 12px;
    }

    .profile-form-footer {
        justify-content: stretch;
    }

    .profile-save-btn {
        width: 100%;
    }

    .profile-alert {
        font-size: 12px;
    }
}

/* =========================================================
   PASSWORD & SECURITY CARD
   ========================================================= */

.profile-password-card {
    margin-top: 24px;
}

.profile-password-card .profile-section-heading {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 0 !important;
}

/* Change Password Button */

.profile-change-password-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    height: 40px;
    padding: 0 17px;

    border: 0;
    border-radius: 8px;

    background: linear-gradient(135deg, #5b3cc4 0%, #39218c 100%);

    color: #fff;

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s ease;
}

.profile-change-password-btn:hover {
    transform: translateY(-1px);

    box-shadow: 0 6px 16px rgba(57, 33, 140, 0.22);
}

.profile-change-password-btn i {
    font-size: 16px;
}

/* =========================================================
   MODAL
   ========================================================= */

.profile-password-modal {
    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 20px;

    visibility: hidden;
    opacity: 0;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

.profile-password-modal.active {
    visibility: visible;
    opacity: 1;
}

/* Overlay */

.profile-password-modal-overlay {
    position: absolute;

    inset: 0;

    background: rgba(18, 13, 35, 0.58);

    backdrop-filter: blur(3px);
}

/* Modal Box */

.profile-password-modal-box {
    position: relative;

    width: 100%;
    max-width: 500px;

    max-height: calc(100vh - 40px);

    overflow-y: auto;

    background: #fff;

    border-radius: 14px;

    box-shadow: 0 20px 60px rgba(35, 20, 75, 0.25);

    transform: translateY(15px) scale(0.98);

    transition: transform 0.25s ease;
}

.profile-password-modal.active .profile-password-modal-box {
    transform: translateY(0) scale(1);
}

/* =========================================================
   MODAL HEADER
   ========================================================= */

.profile-password-modal-header {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    padding: 25px 28px 18px;
}

.profile-password-modal-header h2 {
    margin: 0 0 5px;

    font-size: 25px;
    line-height: 1.25;

    font-weight: 700;

    color: #1f1b2d;
}

.profile-password-modal-header p {
    margin: 0;

    font-size: 12px;

    color: #888;

    line-height: 1.5;
}

/* Close */

.profile-password-close {
    flex: 0 0 auto;

    width: 36px;
    height: 36px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 0;

    background: transparent;

    color: #777;

    font-size: 24px;

    border-radius: 7px;

    cursor: pointer;

    transition: all 0.2s ease;
}

.profile-password-close:hover {
    background: #f5f2fc;

    color: #5b3cc4;
}

/* =========================================================
   FORM
   ========================================================= */

.profile-password-modal-form {
    padding: 0 28px 26px;
}

/* Field */

.profile-password-field {
    margin-top: 16px;
}

.profile-password-field label {
    display: block;

    margin-bottom: 7px;

    font-size: 12px;

    font-weight: 600;

    color: #555;
}

/* Input Wrapper */

.profile-password-input {
    position: relative;
}

/* Input */

.profile-password-input input {
    width: 100%;

    height: 46px;

    padding: 0 44px 0 13px;

    box-sizing: border-box;

    border: 1px solid #ddd;

    border-radius: 7px;

    background: #fff;

    color: #333;

    font-size: 12px;

    outline: none;

    transition: all 0.2s ease;
}

.profile-password-input input::placeholder {
    color: #aaa;
}

.profile-password-input input:focus {
    border-color: #5b3cc4;

    box-shadow: 0 0 0 3px rgba(91, 60, 196, 0.08);
}

/* Eye Button */

.profile-password-input button {
    position: absolute;

    top: 50%;
    right: 0;

    transform: translateY(-50%);

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 0;

    background: transparent;

    color: #777;

    font-size: 17px;

    cursor: pointer;
}

.profile-password-input button:hover {
    color: #5b3cc4;
}

/* =========================================================
   PASSWORD RULES
   ========================================================= */

.profile-password-rules {
    margin-top: 20px;

    padding: 13px 14px;

    border-radius: 8px;

    background: #f7f5ff;

    color: #777;

    font-size: 11px;

    line-height: 1.7;
}

.profile-password-rules-title {
    margin-bottom: 2px;

    font-size: 11px;

    font-weight: 600;

    color: #4b3a86;
}

.profile-password-rules div:not(.profile-password-rules-title) {
    display: flex;

    align-items: center;

    gap: 5px;
}

.profile-password-rules i {
    color: #5b3cc4;

    font-size: 14px;
}

/* =========================================================
   ACTION BUTTONS
   ========================================================= */

.profile-password-modal-actions {
    display: flex;

    justify-content: flex-end;

    gap: 10px;

    margin-top: 22px;
}

/* Cancel */

.profile-password-cancel-btn {
    min-width: 110px;

    height: 42px;

    padding: 0 18px;

    border: 1px solid #bbb;

    border-radius: 8px;

    background: #fff;

    color: #555;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s ease;
}

.profile-password-cancel-btn:hover {
    border-color: #5b3cc4;

    color: #5b3cc4;

    background: #faf9ff;
}

/* Save */

.profile-password-save-btn {
    min-width: 140px;

    height: 42px;

    padding: 0 18px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    border: 0;

    border-radius: 8px;

    background: linear-gradient(135deg, #5b3cc4 0%, #39218c 100%);

    color: #fff;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s ease;
}

.profile-password-save-btn:hover {
    transform: translateY(-1px);

    box-shadow: 0 6px 16px rgba(57, 33, 140, 0.22);
}

/* =========================================================
   BODY LOCK
   ========================================================= */

body.password-modal-open {
    overflow: hidden;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 600px) {
    .profile-password-card .profile-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-change-password-btn {
        width: 100%;
    }

    .profile-password-modal {
        padding: 12px;
    }

    .profile-password-modal-box {
        max-height: calc(100vh - 24px);

        border-radius: 12px;
    }

    .profile-password-modal-header {
        padding: 20px 18px 15px;
    }

    .profile-password-modal-header h2 {
        font-size: 22px;
    }

    .profile-password-modal-form {
        padding: 0 18px 20px;
    }

    .profile-password-modal-actions {
        flex-direction: column-reverse;
    }

    .profile-password-cancel-btn,
    .profile-password-save-btn {
        width: 100%;
    }
}

/* =========================================================
   CUSTOMER DOCUMENTS MODULE
   ========================================================= */

.cp-documents-header {
    padding: 22px 24px;
    border-bottom: 1px solid #edf0f5;
}

/* =========================================================
   DOCUMENT ITEM
   ========================================================= */

.cp-document-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
    margin: 0;
    border-bottom: 1px solid #edf0f5;
    background: #ffffff;
    transition: all 0.25s ease;
}

.cp-document-item:last-child {
    border-bottom: none;
}

.cp-document-item:hover {
    background: #fafbff;
    transform: translateX(2px);
}

/* =========================================================
   DOCUMENT ICON
   ========================================================= */

.cp-document-icon {
    width: 54px;
    min-width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eef4ff 0%, #e7efff 100%);
    color: #1769e0;
    font-size: 27px;
    box-shadow: 0 5px 15px rgba(23, 105, 224, 0.08);
}

/* =========================================================
   DOCUMENT CONTENT
   ========================================================= */

.cp-document-content {
    flex: 1;
    min-width: 0;
}

.cp-document-content h4 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: #202938;
    line-height: 1.4;
    word-break: break-word;
}

.cp-document-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.cp-document-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #7b8494;
    font-weight: 500;
}

.cp-document-meta i {
    font-size: 15px;
    color: #8a94a6;
}

/* =========================================================
   DOCUMENT STATUS
   ========================================================= */

.cp-document-status {
    flex-shrink: 0;
}

.cp-document-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.cp-document-badge i {
    font-size: 14px;
}

.cp-document-approved {
    color: #16824a;
    background: #e9f8f0;
}

.cp-document-rejected {
    color: #c63838;
    background: #fff0f0;
}

.cp-document-pending {
    color: #a66a00;
    background: #fff7df;
}

/* =========================================================
   DOCUMENT ACTIONS
   ========================================================= */

.cp-document-action {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.cp-document-action .cp-btn {
    min-height: 38px;
    padding: 8px 13px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.cp-document-action .cp-btn i {
    font-size: 16px;
}

/* Primary button */

.cp-document-action .cp-btn-primary {
    background: #1769e0;
    color: #ffffff;
    border: 1px solid #1769e0;
}

.cp-document-action .cp-btn-primary:hover {
    background: #1258bf;
    border-color: #1258bf;
    color: #ffffff;
    box-shadow: 0 5px 12px rgba(23, 105, 224, 0.18);
    transform: translateY(-1px);
}

/* Light button */

.cp-document-action .cp-btn-light {
    background: #f4f6fa;
    color: #455066;
    border: 1px solid #e4e8ef;
}

.cp-document-action .cp-btn-light:hover {
    background: #e9edf4;
    color: #202938;
    border-color: #d8dee8;
    transform: translateY(-1px);
}

/* =========================================================
   NO FILE
   ========================================================= */

.cp-document-no-file {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #f5f5f5;
    color: #9299a5;
    font-size: 12px;
    font-weight: 600;
}

/* =========================================================
   EMPTY STATE
   ========================================================= */

.cp-empty-state {
    padding: 65px 25px;
    text-align: center;
}

.cp-empty-icon {
    width: 75px;
    height: 75px;
    margin: 0 auto 20px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f4fb;
    color: #1769e0;
    font-size: 36px;
}

.cp-empty-state h3 {
    margin: 0 0 8px;
    color: #252d3a;
    font-size: 20px;
    font-weight: 700;
}

.cp-empty-state p {
    max-width: 460px;
    margin: 0 auto;
    color: #858e9e;
    font-size: 14px;
    line-height: 1.7;
}

/* =========================================================
   PAGINATION
   ========================================================= */

.cp-document-pagination {
    padding: 18px 24px;
    border-top: 1px solid #edf0f5;
    display: flex;
    justify-content: flex-end;
}

.cp-document-pagination .pagination {
    margin: 0;
    gap: 5px;
}

.cp-document-pagination .page-item .page-link {
    border: 1px solid #e3e7ee;
    border-radius: 7px;
    color: #5d6675;
    font-size: 13px;
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
}

.cp-document-pagination .page-item.active .page-link {
    background: #1769e0;
    border-color: #1769e0;
    color: #ffffff;
}

.cp-document-pagination .page-item .page-link:hover {
    background: #f0f5ff;
    border-color: #cbdcff;
    color: #1769e0;
}

.cp-document-pagination .page-item.disabled .page-link {
    background: #f7f8fa;
    color: #b0b5be;
}

/* =========================================================
   DOCUMENT CARD
   ========================================================= */

.cp-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e9edf3;
    box-shadow: 0 7px 25px rgba(25, 45, 80, 0.06);
    overflow: hidden;
}

/* =========================================================
   RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 991px) {
    .cp-document-item {
        flex-wrap: wrap;
        gap: 14px;
    }

    .cp-document-content {
        flex: 1;
        min-width: calc(100% - 75px);
    }

    .cp-document-status {
        margin-left: 68px;
    }

    .cp-document-action {
        margin-left: auto;
    }
}

/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 767px) {
    .cp-documents-header {
        padding: 18px;
    }

    .cp-document-item {
        padding: 18px;
        display: grid;
        grid-template-columns: 50px 1fr;
        gap: 14px;
    }

    .cp-document-icon {
        width: 50px;
        min-width: 50px;
        height: 50px;
        font-size: 24px;
        grid-row: span 2;
    }

    .cp-document-content {
        min-width: 0;
    }

    .cp-document-content h4 {
        font-size: 15px;
        margin-bottom: 7px;
    }

    .cp-document-meta {
        gap: 6px 12px;
    }

    .cp-document-meta span {
        font-size: 11px;
    }

    .cp-document-status {
        margin-left: 0;
    }

    .cp-document-action {
        grid-column: 2;
        margin-left: 0;
        width: 100%;
    }

    .cp-document-action .cp-btn {
        flex: 1;
    }

    .cp-document-pagination {
        padding: 15px;
        justify-content: center;
        overflow-x: auto;
    }
}

/* =========================================================
   RESPONSIVE - SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {
    .cp-document-item {
        grid-template-columns: 45px 1fr;
        padding: 15px;
    }

    .cp-document-icon {
        width: 45px;
        min-width: 45px;
        height: 45px;
        border-radius: 11px;
        font-size: 21px;
    }

    .cp-document-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .cp-document-status {
        width: 100%;
    }

    .cp-document-badge {
        font-size: 10px;
    }

    .cp-document-action {
        flex-direction: column;
    }

    .cp-document-action .cp-btn {
        width: 100%;
    }

    .cp-empty-state {
        padding: 50px 20px;
    }
}