/*
========================================
GLOBAL
========================================
*/

body {

    margin: 0;
    padding: 0;

    font-family: 'Poppins', sans-serif;

    background:
    linear-gradient(
        135deg,
        #f1f5f9,
        #dbeafe
    );
}

/*
========================================
MAIN WRAPPER
========================================
*/

.lcit-main-wrapper {

    padding: 25px;
}

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

.lcit-header {

    position: relative;

    overflow: hidden;

    text-align: center;

    padding: 55px 25px;

    border-radius: 30px;

    margin-bottom: 35px;

    background:
    linear-gradient(
        135deg,
        #ffb347,
        #ff9800,
        #ff6a00
    );

    box-shadow:
    0 15px 40px rgba(255,140,0,0.35);
}

.lcit-header-overlay {

    position: absolute;

    inset: 0;

    background:
    linear-gradient(
        rgba(255,255,255,0.2),
        rgba(0,0,0,0.1)
    );
}

.lcit-header h1 {

    position: relative;

    z-index: 2;

    margin: 0;

    font-size: 44px;

    font-weight: 900;

    color: #111827;

    letter-spacing: 2px;

    text-transform: uppercase;

    text-shadow:
    0 3px 10px rgba(255,255,255,0.3);
}

.lcit-header p {

    position: relative;

    z-index: 2;

    margin-top: 12px;

    font-size: 20px;

    color: #1f2937;

    font-weight: 600;
}

/*
========================================
LOGIN
========================================
*/

.lcit-login-container {

    display: flex;

    justify-content: center;

    align-items: center;
}

.lcit-login-box {

    width: 100%;

    max-width: 520px;

    padding: 45px;

    border-radius: 30px;

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

    backdrop-filter: blur(18px);

    box-shadow:
    0 15px 35px rgba(0,0,0,0.12);
}

.lcit-login-box h2 {

    text-align: center;

    margin-bottom: 30px;

    font-size: 36px;

    font-weight: 900;

    color: #111827;
}

.lcit-login-box form {

    display: grid;

    gap: 20px;
}

.lcit-login-box input,
.lcit-login-box select {

    width: 100%;

    padding: 18px;

    border-radius: 18px;

    border: 1px solid #d1d5db;

    font-size: 16px;

    outline: none;

    transition: 0.3s;
}

.lcit-login-box input:focus,
.lcit-login-box select:focus {

    border-color: #ff9800;

    box-shadow:
    0 0 15px rgba(255,152,0,0.3);
}

/*
========================================
BUTTON
========================================
*/

.lcit-login-box button {

    padding: 18px;

    border: none;

    border-radius: 18px;

    background:
    linear-gradient(
        135deg,
        #ff9800,
        #ff6a00
    );

    color: white;

    font-size: 18px;

    font-weight: 700;

    cursor: pointer;

    transition: 0.35s;

    box-shadow:
    0 10px 25px rgba(255,106,0,0.35);
}

.lcit-login-box button:hover {

    transform:
    translateY(-5px);

    box-shadow:
    0 18px 35px rgba(255,106,0,0.4);
}

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

.lcit-error {

    padding: 18px;

    border-radius: 16px;

    margin-bottom: 25px;

    text-align: center;

    background:
    linear-gradient(
        135deg,
        #ef4444,
        #dc2626
    );

    color: white;

    font-weight: 700;
}

/*
========================================
DASHBOARD
========================================
*/

.lcit-dashboard {

    padding: 10px;
}

/*
========================================
PROFILE LAYOUT
========================================
*/

.lcit-profile-layout {

    display: grid;

    grid-template-columns:
    260px 1fr 260px;

    gap: 35px;

    align-items: center;

    background:
    linear-gradient(
        135deg,
        #0f172a,
        #1e293b
    );

    border-radius: 35px;

    padding: 40px;

    box-shadow:
    0 15px 40px rgba(0,0,0,0.25);

    margin-bottom: 40px;
}

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

.lcit-left-panel {

    text-align: center;
}

/*
========================================
PHOTO FRAME
========================================
*/

.lcit-photo-frame {

    width: 240px;

    height: 300px;

    margin: auto;

    border-radius: 28px;

    overflow: hidden;

    position: relative;

    background:
    linear-gradient(
        135deg,
        #ff9800,
        #ffd54f,
        #ff6a00
    );

    padding: 4px;

    box-sizing: border-box;

    box-shadow:
    0 15px 35px rgba(255,152,0,0.35);
}

.lcit-photo-frame img {

    position: absolute;

    top: 4px;

    left: 4px;

    width: calc(100% - 8px);

    height: calc(100% - 8px);

    object-fit: cover;

    object-position: center top;

    border-radius: 24px;

    display: block;

    background: #ffffff;
}

/*
========================================
SIGNATURE
========================================
*/

.lcit-signature {

    margin-top: 18px;
}

.lcit-signature img {

    width: 190px;

    max-width: 100%;

    background: white;

    padding: 10px;

    border-radius: 14px;
}

/*
========================================
CENTER PANEL
========================================
*/

.lcit-center-panel {

    color: white;
}

.lcit-center-panel h2 {

    font-size: 40px;

    font-weight: 900;

    color: #ffcc33;

    margin-bottom: 28px;
}

/*
========================================
INFO BOX
========================================
*/

.lcit-info-box {

    padding: 18px 22px;

    border-radius: 18px;

    margin-bottom: 20px;

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

    backdrop-filter: blur(12px);

    border:
    1px solid rgba(255,255,255,0.08);
}

.lcit-info-box h3 {

    margin-bottom: 8px;

    color: #ffb347;

    font-size: 18px;
}

.lcit-info-box p {

    margin: 0;

    font-size: 17px;

    color: white;
}

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

.lcit-right-panel {

    display: flex;

    flex-direction: column;

    gap: 18px;
}

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

.lcit-right-panel a {

    padding: 18px;

    border-radius: 18px;

    text-decoration: none;

    text-align: center;

    font-size: 16px;

    font-weight: 700;

    color: white;

    transition: 0.35s;

    background:
    linear-gradient(
        135deg,
        #ff9800,
        #ff6a00
    );

    box-shadow:
    0 10px 25px rgba(255,106,0,0.3);
}

.lcit-right-panel a:hover {

    transform:
    translateY(-5px);

    box-shadow:
    0 18px 35px rgba(255,106,0,0.35);
}

/*
========================================
LOGOUT
========================================
*/

.lcit-logout-download {

    background:
    linear-gradient(
        135deg,
        #ef4444,
        #dc2626
    ) !important;
}

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

.lcit-grid {

    display: grid;

    grid-template-columns:
    repeat(auto-fit, minmax(280px,1fr));

    gap: 25px;
}

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

.lcit-card {

    padding: 28px;

    border-radius: 24px;

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

    backdrop-filter: blur(15px);

    box-shadow:
    0 10px 25px rgba(0,0,0,0.08);

    transition: 0.35s;
}

.lcit-card:hover {

    transform:
    translateY(-5px);

    box-shadow:
    0 18px 30px rgba(255,152,0,0.18);
}

.lcit-card h3 {

    margin-bottom: 14px;

    color: #ff6a00;

    font-size: 22px;

    font-weight: 800;
}

.lcit-card p {

    margin: 0;

    color: #374151;

    line-height: 1.7;
}

/*
========================================
FULL CARD
========================================
*/

.lcit-full-card {

    grid-column: 1 / -1;
}

/*
========================================
PROGRESS BAR
========================================
*/

.lcit-progress-wrap {

    width: 100%;

    height: 18px;

    border-radius: 50px;

    overflow: hidden;

    background: #e5e7eb;

    margin-bottom: 15px;
}

.lcit-progress-bar {

    height: 100%;

    border-radius: 50px;

    background:
    linear-gradient(
        135deg,
        #22c55e,
        #16a34a
    );

    box-shadow:
    0 5px 15px rgba(34,197,94,0.3);
}

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

.lcit-status-badge {

    display: inline-block;

    padding: 12px 22px;

    border-radius: 50px;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

    color: white;

    font-weight: 700;

    box-shadow:
    0 8px 18px rgba(37,99,235,0.25);
}

/*
========================================
FEE BOX
========================================
*/

.lcit-fee-box {

    font-size: 34px;

    font-weight: 900;

    color: #ff6a00;

    margin-bottom: 10px;
}

/*
========================================
ACHIEVEMENT
========================================
*/

.lcit-achievement-number {

    width: 90px;

    height: 90px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    margin: auto;

    font-size: 32px;

    font-weight: 900;

    color: white;

    background:
    linear-gradient(
        135deg,
        #f59e0b,
        #d97706
    );

    box-shadow:
    0 10px 25px rgba(245,158,11,0.35);
}

/*
========================================
ADMIN
========================================
*/

.lcit-admin-wrap {

    padding: 30px;
}

.lcit-glass-card {

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

    padding: 35px;

    border-radius: 30px;

    margin-bottom: 35px;

    box-shadow:
    0 15px 35px rgba(0,0,0,0.08);
}

.lcit-form {

    display: grid;

    gap: 18px;
}

.lcit-form input,
.lcit-form select,
.lcit-form textarea {

    width: 100%;

    padding: 16px;

    border-radius: 16px;

    border: 1px solid #d1d5db;

    font-size: 16px;

    outline: none;
}

.lcit-form textarea {

    min-height: 120px;
}

.lcit-form button {

    padding: 18px;

    border: none;

    border-radius: 18px;

    background:
    linear-gradient(
        135deg,
        #ff9800,
        #ff6a00
    );

    color: white;

    font-size: 18px;

    font-weight: 700;

    cursor: pointer;
}

/*
========================================
COURSE FLEX
========================================
*/

.lcit-course-flex {

    display: flex;

    gap: 15px;

    align-items: center;
}

.lcit-course-flex select {

    flex: 1;
}

.lcit-add-course-btn {

    padding: 16px 22px;

    border-radius: 14px;

    text-decoration: none;

    color: white;

    font-weight: 700;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );
}

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

.widefat {

    border-radius: 20px;

    overflow: hidden;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.08);
}

.widefat thead {

    background:
    linear-gradient(
        135deg,
        #ff9800,
        #ff6a00
    );

    color: white;
}

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

@media(max-width:992px) {

    .lcit-profile-layout {

        grid-template-columns: 1fr;

        text-align: center;
    }

    .lcit-right-panel {

        width: 100%;
    }
}

@media(max-width:768px) {

    .lcit-main-wrapper {

        padding: 15px;
    }

    .lcit-header h1 {

        font-size: 28px;
    }

    .lcit-header p {

        font-size: 16px;
    }

    .lcit-login-box {

        padding: 30px 20px;
    }

    .lcit-photo-frame {

        width: 180px;

        height: 230px;
    }

    .lcit-center-panel h2 {

        font-size: 30px;
    }

    .lcit-course-flex {

        flex-direction: column;
    }

    .lcit-add-course-btn {

        width: 100%;

        text-align: center;
    }
}