.tpsa-analytics-wrapper {
    width: 100%;
    height: 200px;
    background-color: #814bfe;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    margin-bottom: 30px;
    padding: 10px;
}

.tpsa-analytics-wrapper h1 {
    color: #fff;
    font-size: 48px;
    margin: 0;
}

/* Main container for the plugin overview and other elements */
.plugin-overview {
    margin: 30px auto;
    padding: 30px;
    background-color: #ece6f9;
    border-radius: 8px;
    max-width: 900px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Feature section layout */
.feature-section {
    max-width: 100%;
    margin-bottom: 40px;
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.feature-section:last-child {
    margin-bottom: 0;
}

/* Feature title (Heading) */
.feature-title {
    font-size: 26px;
    color: #1d2327;
    margin-bottom: 25px !important;
    font-family: 'Arial', sans-serif;
    font-weight: 600;
}

/* Paragraph for descriptions */
.feature-description {
    font-size: 16px;
    color: #5f5f68;
    line-height: 1.6;
    margin-bottom: 20px;
    font-family: 'Roboto', sans-serif;
}

/* Modern gradient button */
.configure-button {
    display: inline-block;
    background: linear-gradient(90deg, #814bfe, #9c5bff);
    color: white;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

/* Button hover effect */
.configure-button:hover {
    color: #fff;
    background: linear-gradient(90deg, #9c5bff, #814bfe);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Analytics section styles */
.tpsa-login-attempts-analytics {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 30px;
    /* flex-wrap: wrap; */
}

.tpsa-login-attempts-analytics-item {
    width: 30%;
    background: linear-gradient(145deg,
            #e1c5ff,
            #c3a7f3);
    /* Soft gradient background */
    border-radius: 10px;
    padding: 20px;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.tpsa-login-attempts-analytics-item:hover {
    transform: translateY(-4px);
}

.tpsa-login-attempts-analytics-item p {
    display: block;
    font-size: 56px;
    margin-top: 0;
    margin-bottom: 30px;
    color: #5f5f68;
    font-weight: 500;
}

.tpsa-login-attempts-analytics-item p sub {
    font-size: 12px;
}

.tpsa-login-attempts-analytics-item h2 {
    color: #fff;
    margin-bottom: 0;
    padding-bottom: 0;
    border: none;
}

/* Color scheme adjustments for each analytics item */
.tpsa-login-attempts-analytics-item:first-child {
    background: linear-gradient(145deg,
            #c8f4c3,
            #a8e1a3);
    /* Soft green gradient */
}

.tpsa-login-attempts-analytics-item:first-child h2 {
    color: #446d36;
}

.tpsa-login-attempts-analytics-item:nth-child(2) {
    background: linear-gradient(145deg,
            #ffecb3,
            #ffdf80);
    /* Soft yellow gradient */
}

.tpsa-login-attempts-analytics-item:nth-child(2) h2 {
    color: #804e02;
}

.tpsa-login-attempts-analytics-item:last-child {
    background: linear-gradient(145deg,
            #ffb3d9,
            #ff80b3);
    /* Soft pink gradient */
}

.tpsa-login-attempts-analytics-item:last-child h2 {
    color: #cc3300;
}

.tpsa-login-attempts-analytics-item .tp-details {
    display: flex;
    margin-top: 20px;
}

.tpsa-login-attempts-analytics-item .tp-details a {
    color: #7b6f7c;
    text-decoration: none;
    font-weight: 500;
    padding: 5px 10px;
    border: 1px solid #7b6f7c;
    border-radius: 4px;
}

.tpsa-login-attempts-analytics-item .tp-details a:hover {
    color: #814bfe;
    background-color: #fff;
    text-decoration: underline;
}

/**adfbdadfbdfbdafbadfbadf**/
/* Main container with custom gradient background */
.section-container {
    background: linear-gradient(225deg,
            hsla(356, 68%, 91%, 0.7) 0%,
            hsla(297, 99%, 66%, 0.7) 0%,
            hsla(242, 100%, 65%, 0.7) 100%);
    /* Your gradient */
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    /* Soft shadow for depth */
    margin: 30px 0;
    overflow: hidden;
    transition: transform 0.3s ease-in-out;
    padding: 40px 30px;
}

.section-container:hover {
    transform: scale(1.03);
}

.section-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
}

.left-side {
    max-width: 60%;
    padding-right: 20px;
}

.tp-cutomize-your-login .section-title {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
    color: #fff !important;
}

.section-description {
    font-size: 16px;
    line-height: 1.7;
    color: #2f2f2f;
    margin-bottom: 30px;
    font-family: 'Roboto', sans-serif;
}

.right-side {
    max-width: 35%;
    text-align: right;
}

.section-container .configure-button {
    display: inline-block;
    background: linear-gradient(145deg, #f8a5c2, #ff6f61);
    color: white;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border: none;
}

.section-container .configure-button:hover {
    background: linear-gradient(145deg, #ff6f61, #f8a5c2);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

@media screen and (min-width: 1300px) {
    .plugin-overview {
        max-width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
    }

    .feature-section {
        max-width: 43%;
        margin-bottom: 15px;
    }
}

.loading-placeholder {
    display: inline-block;
    font-weight: bold;
    color: #aaa;
    animation: colorPulse 1.5s infinite;
    font-size: 20px;
}

@keyframes colorPulse {
    0% {
        color: #ccc;
    }

    50% {
        color: #888;
    }

    100% {
        color: #ccc;
    }
}



/* Dashboard design for chart */
.tpsa-activity-wrapper {
    display: grid;
    /* Two equal columns that collapse to one when there is not room for both.
       A plain flex row let each card shrink below its chart's usable width,
       which is what squeezed the donut. */
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    align-items: start;
    gap: 20px;
}

/* Charts must never force the grid track wider than the column. */
.tpsa-activity-wrapper > * {
    min-width: 0;
}

@media (max-width: 782px) {
    .tpsa-activity-wrapper {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.fs-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.06);
    width: 100%;
    margin-bottom: 20px;
    /* A grid item defaults to min-width:auto, so an oversized child (the chart
       canvas, which ApexCharts gives an inline pixel width) stretches the whole
       track and the card ends up overlapping its neighbour. These two lines are
       what keep each card inside its own column. */
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.fs-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.fs-title {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

.fs-sub {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}

.fs-actions {
    display: flex;
    gap: 8px;
}

.fs-btn {
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.fs-btn:hover {
    background: #f9fafb;
}

.fs-chart-wrap {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    /* Reserve the chart's height so the absolutely-positioned centre label has
       a stable box to sit in, and so the card does not jump while ApexCharts
       measures itself. */
    height: 320px;
}

.fs-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    text-align: center;
}

/*
 * Keep every line inside the donut hole.
 *
 * The hole is 68% of the donut diameter, and the donut is sized to the shorter
 * side of the wrapper. Capping the text block well inside that radius stops
 * "Total" and "Features in plugin" from running under the ring, which is what
 * made the circle look broken.
 */
.fs-center > * {
    max-width: 60%;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.fs-center-title {
    font-size: 12px;
    color: #6b7280;
    font-weight: 600;
}

.fs-center-value {
    font-size: 28px;
    font-weight: 800;
    color: #111827;
    margin-top: 2px;
}

.fs-center-sub {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 2px;
}

/* --- Responsive ------------------------------------------------------- */
@media (max-width: 1200px) {
    .fs-chart-wrap { height: 280px; }
    .fs-center-value { font-size: 26px; }
}

@media (max-width: 782px) {
    .fs-chart-wrap { height: 240px; }
    .fs-center-value { font-size: 22px; }
    .fs-center-title { font-size: 11px; }
    .fs-center-sub { font-size: 10px; }
}

@media (max-width: 480px) {
    .fs-chart-wrap { height: 200px; }
    .fs-center-value { font-size: 20px; }
    /* The donut hole is proportionally smaller here, so hide the least
       important line rather than let it collide with the ring. */
    .fs-center-sub { display: none; }
}

.fs-footer {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .fs-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .fs-footer { gap: 8px; }
    .fs-pill { font-size: 11px; }
}

.fs-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 6px 10px;
}

.fs-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.fs-green {
    background: #22c55e;
}

.fs-gray {
    background: #64748b;
}
/* ApexCharts writes an inline width on its own wrapper from a measurement taken
   before the grid has settled. Clamp it so a stale measurement can never spill
   the card over the column beside it. */
.fs-chart-wrap .apexcharts-canvas,
.fs-chart-wrap > div {
    max-width: 100% !important;
}

.fs-chart-wrap svg {
    max-width: 100%;
}