/* Feature page polish layer
   Loaded last. Keeps the new feature pages visually aligned with the HarfHesab design system. */

/* Shared Manage shell tightening for Blog + Payment gateways */
.manage-blog-page,
.gateway-page,
.user-support-page {
    --feature-card-radius: 1.55rem;
    --feature-card-border: rgba(229, 231, 235, .92);
    --feature-card-bg: rgba(255, 255, 255, .96);
    --feature-shadow: 0 14px 38px rgba(15, 23, 42, .07);
    --feature-shadow-hover: 0 20px 52px rgba(15, 23, 42, .10);
}

.manage-blog-page,
.gateway-page {
    padding-block: var(--space-6) var(--space-12) !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(1, 41, 24, .08), transparent 28rem),
        radial-gradient(circle at 95% 10%, rgba(1, 41, 24, .07), transparent 24rem),
        linear-gradient(180deg, #fff 0%, var(--color-bg) 44%, #fff 100%) !important;
}

.manage-blog-page .admin-pro-main,
.gateway-page .admin-pro-main {
    gap: var(--space-5) !important;
}

.manage-blog-page .admin-pro-hero,
.gateway-page .gateway-hero,
.user-support-page .support-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(1, 41, 24, .13) !important;
    border-radius: var(--feature-card-radius) !important;
    background:
        radial-gradient(circle at top right, rgba(1, 41, 24, .14), transparent 22rem),
        radial-gradient(circle at bottom left, rgba(1, 41, 24, .10), transparent 20rem),
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.95)) !important;
    box-shadow: var(--feature-shadow) !important;
}

.manage-blog-page .admin-pro-hero::after,
.gateway-page .gateway-hero::after,
.user-support-page .support-hero::after {
    content: "";
    position: absolute;
    inset-block-start: -4.5rem;
    inset-inline-start: -3.5rem;
    width: 13rem;
    height: 13rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(1, 41, 24, .12), rgba(1, 41, 24, .10));
    pointer-events: none;
}

.manage-blog-page .admin-pro-hero > *,
.gateway-page .gateway-hero > *,
.user-support-page .support-hero > * {
    position: relative;
    z-index: 1;
}

.manage-blog-page .admin-pro-hero h1,
.gateway-page .gateway-hero h1,
.user-support-page .support-hero h1 {
    margin-bottom: .35rem !important;
    color: var(--color-text);
    font-weight: 950;
}

.manage-blog-page .admin-pro-hero p,
.gateway-page .gateway-hero p,
.user-support-page .support-hero p {
    max-width: 52rem;
    margin: 0 !important;
    color: var(--color-muted);
    font-size: .94rem;
    font-weight: 750;
    line-height: 1.95;
}

.blog-admin-hero__actions,
.gateway-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    align-items: center;
    justify-content: flex-end;
}

/* KPI cards */
.manage-blog-page .admin-kpi-grid,
.gateway-page .gateway-metrics,
.user-support-page .support-stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4) !important;
    margin: 0 !important;
}

.manage-blog-page .admin-kpi-card,
.gateway-page .gateway-metric-card,
.user-support-page .support-stat-card {
    position: relative;
    display: grid !important;
    gap: .28rem;
    overflow: hidden;
    border: 1px solid var(--feature-card-border) !important;
    border-radius: 1.35rem !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.78)),
        #fff !important;
    box-shadow: var(--feature-shadow) !important;
    padding: var(--space-4) !important;
}

.manage-blog-page .admin-kpi-card::before,
.gateway-page .gateway-metric-card::before,
.user-support-page .support-stat-card::before {
    content: "";
    position: absolute;
    inset-block: .85rem;
    inset-inline-start: .85rem;
    width: .28rem;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--color-primary), var(--color-secondary));
}

.manage-blog-page .admin-kpi-card span,
.gateway-page .gateway-metric-card small,
.user-support-page .support-stat-card span {
    color: var(--color-muted) !important;
    font-size: .78rem !important;
    font-weight: 950 !important;
}

.manage-blog-page .admin-kpi-card strong,
.gateway-page .gateway-metric-card strong,
.user-support-page .support-stat-card strong {
    max-width: 100% !important;
    overflow: hidden;
    color: var(--color-text) !important;
    font-size: clamp(1.15rem, 2vw, 1.5rem) !important;
    font-weight: 950 !important;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.manage-blog-page .admin-kpi-card small,
.gateway-page .gateway-metric-card__icon,
.user-support-page .support-stat-card small {
    color: var(--color-soft);
    font-size: .74rem;
    font-weight: 850;
}

.gateway-page .gateway-metric-card {
    grid-template-columns: 2.55rem minmax(0, 1fr) !important;
    align-items: center;
}

.gateway-page .gateway-metric-card::before {
    display: none;
}

.gateway-page .gateway-metric-card__icon {
    width: 2.55rem !important;
    height: 2.55rem !important;
    border-radius: .92rem !important;
}

.user-support-page .support-stat-card.is-warning::before { background: var(--color-warning); }
.user-support-page .support-stat-card.is-success::before { background: var(--color-success); }
.user-support-page .support-stat-card.is-muted::before { background: var(--color-soft); }

/* Blog admin page */
.manage-blog-page .blog-admin-toolbar,
.manage-blog-page .manage-card,
.gateway-page .gateway-list-panel,
.gateway-page .gateway-editor-panel,
.user-support-page .support-card {
    border: 1px solid var(--feature-card-border) !important;
    border-radius: var(--feature-card-radius) !important;
    background: var(--feature-card-bg) !important;
    box-shadow: var(--feature-shadow) !important;
}

.manage-blog-page .blog-admin-toolbar {
    align-items: end;
    margin: 0 !important;
    padding: var(--space-5) !important;
}

.manage-blog-page .blog-admin-toolbar label,
.manage-blog-page .manage-form-grid label,
.manage-blog-page .manage-upload-box,
.gateway-page .gateway-form-grid label,
.gateway-page .gateway-field-full,
.user-support-page .support-form label {
    color: var(--color-text) !important;
    font-size: .84rem !important;
    font-weight: 950 !important;
}

.manage-blog-page input,
.manage-blog-page textarea,
.manage-blog-page select,
.gateway-page input,
.gateway-page textarea,
.gateway-page select,
.user-support-page input,
.user-support-page textarea,
.user-support-page select {
    min-height: 2.8rem;
    border-radius: 1rem !important;
    border-color: rgba(209, 213, 219, .9) !important;
    background: rgba(255, 255, 255, .94) !important;
    font-size: .88rem;
    font-weight: 750;
}

.manage-blog-page input:focus,
.manage-blog-page textarea:focus,
.manage-blog-page select:focus,
.gateway-page input:focus,
.gateway-page textarea:focus,
.gateway-page select:focus,
.user-support-page input:focus,
.user-support-page textarea:focus,
.user-support-page select:focus {
    border-color: rgba(1, 41, 24, .62) !important;
    box-shadow: 0 0 0 4px rgba(1, 41, 24, .10) !important;
}

.manage-blog-page .manage-blog-grid {
    gap: var(--space-5) !important;
    align-items: start !important;
}

.manage-blog-page .manage-card {
    padding: var(--space-5) !important;
}

.manage-blog-page .manage-section-head,
.gateway-page .gateway-panel-head,
.gateway-page .gateway-editor-head,
.user-support-page .support-card__head,
.user-support-page .ticket-detail-head {
    border-bottom: 1px solid rgba(229, 231, 235, .84);
    margin-bottom: var(--space-4) !important;
    padding-bottom: var(--space-4);
}

.manage-blog-page .manage-section-head h2,
.gateway-page .gateway-panel-head h2,
.gateway-page .gateway-editor-head h2,
.user-support-page .support-card__head h2,
.user-support-page .ticket-detail-head h2 {
    margin: 0 !important;
    color: var(--color-text);
    font-size: 1.08rem;
    font-weight: 950;
}

.manage-blog-page .blog-admin-item,
.user-support-page .ticket-row,
.gateway-page .gateway-card {
    border: 1px solid var(--color-border) !important;
    border-radius: 1.2rem !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.72)),
        #fff !important;
    box-shadow: var(--shadow-xs) !important;
    transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base), opacity var(--transition-base) !important;
}

.manage-blog-page .blog-admin-item:hover,
.manage-blog-page .blog-admin-item.is-selected,
.user-support-page .ticket-row:hover,
.user-support-page .ticket-row.is-active,
.gateway-page .gateway-card:hover {
    border-color: rgba(1, 41, 24, .28) !important;
    box-shadow: var(--feature-shadow-hover) !important;
    transform: translateY(-2px) !important;
}

.manage-blog-page .blog-admin-item.is-selected,
.user-support-page .ticket-row.is-active {
    background:
        radial-gradient(circle at top right, rgba(1, 41, 24, .11), transparent 14rem),
        linear-gradient(180deg, rgba(239,246,255,.9), #fff) !important;
}

.manage-blog-page .blog-admin-item__image {
    min-height: 8rem !important;
    border-radius: 1rem !important;
}

.manage-blog-page .blog-admin-item__image img {
    min-height: 8rem !important;
}

.manage-blog-page .blog-admin-item__actions,
.gateway-page .gateway-card__actions {
    display: grid !important;
    gap: .5rem !important;
}

.manage-blog-page .manage-small-button,
.gateway-page .gateway-card__actions .btn {
    min-height: 2.25rem !important;
    border-radius: 999px !important;
    font-size: .78rem !important;
}

.manage-blog-page .blog-preview-card,
.gateway-page .gateway-live-preview,
.gateway-page .gateway-required-fields,
.user-support-page .support-file-box {
    border: 1px solid rgba(1, 41, 24, .16) !important;
    border-radius: 1.2rem !important;
    background:
        radial-gradient(circle at top right, rgba(1, 41, 24, .09), transparent 14rem),
        var(--color-primary-50) !important;
}

.manage-blog-page .blog-cover-upload input[type="file"],
.gateway-page .gateway-upload-card input[type="file"],
.user-support-page .support-file-box input[type="file"] {
    cursor: pointer;
    border: 1px dashed rgba(1, 41, 24, .28) !important;
    background: #fff !important;
}

.manage-blog-page .blog-comments-admin-card {
    grid-column: 1 / -1;
}

.manage-blog-page .blog-comment-admin-item {
    border-radius: 1.2rem !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.72)),
        #fff !important;
}

/* Payment gateways page */
.gateway-page .gateway-board {
    grid-template-columns: minmax(19rem, .78fr) minmax(0, 1.5fr) !important;
    gap: var(--space-5) !important;
}

.gateway-page .gateway-list-panel,
.gateway-page .gateway-editor-panel {
    padding: var(--space-5) !important;
}

.gateway-page .gateway-list-panel {
    top: calc(var(--header-height) + 1rem) !important;
}

.gateway-page .gateway-card {
    grid-template-columns: 3.9rem minmax(0, 1fr) !important;
    gap: .9rem !important;
    padding: var(--space-3) !important;
}

.gateway-page .gateway-card__logo,
.gateway-page .gateway-live-preview__logo {
    border-radius: 1rem !important;
    background: #fff !important;
}

.gateway-page .gateway-card__head {
    gap: .6rem !important;
}

.gateway-page .gateway-card p {
    color: var(--color-muted) !important;
    font-size: .82rem !important;
    line-height: 1.8 !important;
}

.gateway-page .gateway-card code {
    border-radius: .8rem;
    background: var(--color-surface-soft);
    padding: .35rem .55rem;
}

.gateway-page .gateway-form-section {
    border: 1px solid rgba(229, 231, 235, .92) !important;
    border-radius: 1.25rem !important;
    background:
        linear-gradient(180deg, rgba(248,250,252,.72), rgba(255,255,255,.98)),
        #fff !important;
    padding: var(--space-4) !important;
}

.gateway-page .gateway-form-actions {
    border-radius: 1.15rem !important;
}

/* User support page */
.user-support-page {
    padding-block: var(--space-6) var(--space-12) !important;
    background:
        radial-gradient(circle at top right, rgba(1,41,24,.08), transparent 30rem),
        linear-gradient(180deg, #fff 0%, var(--color-bg) 48%, #fff 100%) !important;
}

.user-support-page .support-shell {
    align-items: start !important;
    gap: var(--space-5) !important;
}

.user-support-page .support-sidebar {
    overflow: hidden;
    border: 1px solid var(--feature-card-border) !important;
    border-radius: var(--feature-card-radius) !important;
    background:
        radial-gradient(circle at top right, rgba(1,41,24,.11), transparent 14rem),
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.92)) !important;
    box-shadow: var(--feature-shadow) !important;
    padding: .9rem !important;
}

.user-support-page .support-sidebar strong {
    display: block;
    border-bottom: 1px solid rgba(229,231,235,.86);
    margin-bottom: .55rem;
    padding: .25rem .25rem .95rem;
    color: var(--color-text);
    font-size: .96rem;
    font-weight: 950;
}

.user-support-page .support-sidebar a,
.user-support-page .support-sidebar button {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    gap: .6rem;
    border: 1px solid transparent !important;
    border-radius: 1rem !important;
    padding: .65rem .75rem !important;
    color: var(--color-muted) !important;
    font-size: .86rem;
    font-weight: 950 !important;
}

.user-support-page .support-sidebar a::before,
.user-support-page .support-sidebar button::before {
    content: "";
    width: .5rem;
    height: .5rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: currentColor;
    opacity: .52;
}

.user-support-page .support-sidebar a:hover,
.user-support-page .support-sidebar button:hover,
.user-support-page .support-sidebar .is-active,
.user-support-page .support-sidebar a.active {
    border-color: rgba(1,41,24,.18) !important;
    background: linear-gradient(135deg, rgba(1,41,24,.12), rgba(1,41,24,.09)), #fff !important;
    color: var(--color-primary) !important;
    box-shadow: var(--shadow-xs);
}

.user-support-page .support-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5) !important;
    padding: clamp(1.15rem, 3vw, 1.65rem) !important;
}

.user-support-page .support-grid {
    grid-template-columns: minmax(18rem, .82fr) minmax(0, 1.38fr) !important;
    align-items: start !important;
    gap: var(--space-5) !important;
}

.user-support-page .support-card {
    padding: var(--space-5) !important;
}

.user-support-page .support-card--list {
    position: sticky;
    top: calc(var(--header-height) + 1rem);
}

.user-support-page .ticket-list {
    gap: .75rem !important;
}

.user-support-page .ticket-row {
    grid-template-columns: .75rem minmax(0, 1fr) auto !important;
    padding: .9rem !important;
}

.user-support-page .ticket-row__status {
    width: .42rem !important;
    height: 2.6rem !important;
}

.user-support-page .ticket-row__content strong {
    font-size: .94rem !important;
    font-weight: 950;
}

.user-support-page .ticket-thread {
    border: 1px solid rgba(229,231,235,.9);
    border-radius: 1.2rem;
    background: linear-gradient(180deg, rgba(248,250,252,.84), rgba(255,255,255,.96));
    max-height: 42rem !important;
    padding: var(--space-4) !important;
}

.user-support-page .ticket-message {
    border-radius: 1.2rem !important;
    box-shadow: var(--shadow-xs);
}

.user-support-page .ticket-message--admin {
    margin-inline-start: 0 !important;
    margin-inline-end: auto !important;
    border-color: rgba(1,41,24,.22) !important;
    background:
        radial-gradient(circle at top right, rgba(1,41,24,.10), transparent 12rem),
        #fff !important;
}

.user-support-page .ticket-message--user {
    margin-inline-start: auto !important;
    margin-inline-end: 0 !important;
    background: #fff !important;
}

.user-support-page .support-form--reply {
    border-top: 1px solid rgba(229,231,235,.88) !important;
}

.user-support-page .support-empty,
.user-support-page .manage-empty,
.user-support-page .support-closed-note {
    border-radius: 1.2rem !important;
}

@media (min-width: 1180px) {
    .manage-blog-page .manage-blog-grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(22rem, .9fr) !important;
    }

    .manage-blog-page .blog-list-card,
    .gateway-page .gateway-list-panel,
    .user-support-page .support-card--list {
        max-height: calc(100dvh - var(--header-height) - 2rem);
        overflow: auto;
        scrollbar-width: thin;
    }

    .manage-blog-page .blog-admin-item__actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .gateway-page .gateway-card__actions {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1179.98px) {
    .gateway-page .gateway-board,
    .user-support-page .support-grid {
        grid-template-columns: 1fr !important;
    }

    .gateway-page .gateway-list-panel,
    .user-support-page .support-card--list {
        position: static !important;
        max-height: none !important;
    }

    .gateway-page .gateway-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 768px) and (max-width: 1179.98px) {
    .manage-blog-page .admin-kpi-grid,
    .gateway-page .gateway-metrics,
    .user-support-page .support-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .user-support-page .support-shell {
        grid-template-columns: 15rem minmax(0, 1fr) !important;
    }
}

@media (max-width: 767.98px) {
    .manage-blog-page,
    .gateway-page,
    .user-support-page {
        padding-block: var(--space-4) var(--space-10) !important;
    }

    .manage-blog-page .admin-pro-hero,
    .gateway-page .gateway-hero,
    .user-support-page .support-hero,
    .manage-blog-page .manage-section-head,
    .gateway-page .gateway-panel-head,
    .gateway-page .gateway-editor-head,
    .user-support-page .support-card__head,
    .user-support-page .ticket-detail-head {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .blog-admin-hero__actions,
    .gateway-hero__actions,
    .gateway-page .gateway-form-actions,
    .manage-blog-page .manage-form-actions,
    .manage-blog-page .blog-admin-item__actions,
    .manage-blog-page .blog-comment-admin-item__actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100%;
    }

    .blog-admin-hero__actions .btn,
    .gateway-hero__actions .btn,
    .gateway-page .gateway-form-actions .btn,
    .manage-blog-page .manage-form-actions .btn,
    .manage-blog-page .manage-small-button,
    .user-support-page .support-hero .btn,
    .user-support-page .support-form .btn {
        width: 100% !important;
    }

    .manage-blog-page .admin-kpi-grid,
    .gateway-page .gateway-metrics,
    .user-support-page .support-stats,
    .gateway-page .gateway-list,
    .gateway-page .gateway-form-grid,
    .gateway-page .gateway-toggle-row,
    .user-support-page .support-form__row {
        grid-template-columns: 1fr !important;
    }

    .manage-blog-page .blog-admin-toolbar {
        grid-template-columns: 1fr !important;
    }

    .gateway-page .gateway-card,
    .user-support-page .ticket-row {
        grid-template-columns: 3.5rem minmax(0, 1fr) !important;
    }

    .gateway-page .gateway-card__actions,
    .user-support-page .ticket-row .badge {
        grid-column: 1 / -1 !important;
    }

    .user-support-page .support-sidebar {
        display: grid !important;
        position: static !important;
        gap: .35rem;
    }

    .user-support-page .support-sidebar strong {
        margin-bottom: .35rem;
    }

    .user-support-page .support-grid {
        grid-template-columns: 1fr !important;
    }

    .user-support-page .ticket-thread {
        max-height: none !important;
        padding: var(--space-3) !important;
    }

    .user-support-page .ticket-message {
        max-width: 100% !important;
    }
}