:root {
    --app-slate-50: #f8fafc;
    --app-slate-100: #f1f5f9;
    --app-slate-200: #e2e8f0;
    --app-slate-300: #cbd5e1;
    --app-slate-400: #94a3b8;
    --app-slate-500: #64748b;
    --app-slate-600: #475569;
    --app-slate-700: #334155;
    --app-slate-800: #1e293b;
    --app-slate-900: #0f172a;
    --app-slate-950: #020617;
    --app-sky-50: #f0f9ff;
    --app-sky-100: #e0f2fe;
    --app-sky-300: #7dd3fc;
    --app-sky-400: #38bdf8;
    --app-sky-500: #0ea5e9;
    --app-sky-600: #0284c7;
    --app-sky-700: #0369a1;
    --app-sky-900: #0c4a6e;
    --app-emerald-50: #ecfdf5;
    --app-emerald-200: #a7f3d0;
    --app-emerald-300: #6ee7b7;
    --app-emerald-700: #047857;
    --app-emerald-800: #065f46;
    --app-emerald-900: #064e3b;
    --app-amber-50: #fffbeb;
    --app-amber-200: #fde68a;
    --app-amber-300: #fcd34d;
    --app-amber-700: #b45309;
    --app-amber-800: #92400e;
    --app-amber-900: #78350f;
    --app-amber-950: #451a03;
    --app-red-50: #fef2f2;
    --app-red-200: #fecaca;
    --app-red-300: #fca5a5;
    --app-red-700: #b91c1c;
    --app-red-800: #991b1b;
    --app-red-900: #7f1d1d;
    --app-red-950: #450a0a;
    --app-radius: 1rem;
    --app-radius-sm: 0.75rem;
    --app-shadow: 0 1px 3px rgb(15 23 42 / 0.1), 0 1px 2px -1px rgb(15 23 42 / 0.1);
    --bs-body-font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
    --bs-body-color: var(--app-slate-950);
    --bs-body-bg: var(--app-slate-100);
    --bs-primary: var(--app-sky-700);
    --bs-primary-rgb: 3, 105, 161;
    --bs-secondary-color: var(--app-slate-600);
    --bs-border-color: var(--app-slate-200);
    --bs-border-radius: 0.75rem;
    --bs-border-radius-lg: 1rem;
}

html,
body {
    min-height: 100%;
}

body {
    color: var(--app-slate-950);
    font-family: var(--bs-body-font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none;
}

.fw-medium {
    font-weight: 500;
}

.fw-semibold {
    font-weight: 600;
}

.font-monospace {
    font-variant-ligatures: none;
}

.font-body {
    font-family: var(--bs-body-font-family);
}

.tabular-nums {
    font-variant-numeric: tabular-nums;
}

.tracking-wide {
    letter-spacing: 0.05em;
}

.tracking-widest {
    letter-spacing: 0.1em;
}

.pre-line {
    white-space: pre-line;
}

.break-anywhere {
    overflow-wrap: anywhere;
}

.text-muted-light {
    color: var(--app-slate-400) !important;
}

.text-muted-app {
    color: var(--app-slate-500) !important;
}

.text-secondary {
    color: var(--app-slate-600) !important;
}

.text-muted-strong {
    color: var(--app-slate-700) !important;
}

.text-brand {
    color: var(--app-sky-700) !important;
}

.text-brand-light {
    color: var(--app-sky-300) !important;
}

.text-success-strong {
    color: var(--app-emerald-700) !important;
}

.text-warning-strong {
    color: var(--app-amber-700) !important;
}

.app-container {
    width: min(100% - 3rem, 80rem);
    margin-inline: auto;
}

.content-width-md {
    width: 100%;
    max-width: 48rem;
    margin-inline: auto;
}

.content-width-lg {
    width: 100%;
    max-width: 56rem;
    margin-inline: auto;
}

.content-width-xl {
    width: 100%;
    max-width: 64rem;
    margin-inline: auto;
}

.content-width-2xl {
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
}

.page-kicker {
    margin: 0;
    color: var(--app-sky-700);
    font-size: 0.875rem;
    font-weight: 600;
}

.page-title {
    margin: 0.5rem 0 0;
    font-size: clamp(1.75rem, 4vw, 1.875rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.page-description {
    margin: 0.5rem 0 0;
    color: var(--app-slate-600);
}

.section-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.link-accent {
    color: var(--app-sky-700);
    font-size: 0.875rem;
    font-weight: 600;
}

.link-accent:hover,
.link-accent:focus-visible {
    color: var(--app-sky-900);
}

.product-name-link {
    color: var(--app-slate-950);
    font-weight: 600;
}

.product-name-link:hover,
.product-name-link:focus-visible {
    color: var(--app-sky-700);
}

.app-card,
.table-card,
.filter-panel {
    border: 1px solid var(--app-slate-200);
    border-radius: var(--app-radius);
    background: #fff;
    box-shadow: var(--app-shadow);
}

.app-card,
.filter-panel {
    padding: 1.5rem;
}

.table-card {
    overflow: hidden;
}

.card-heading {
    border-bottom: 1px solid var(--app-slate-200);
    padding: 1.25rem 1.5rem;
}

.stat-card {
    height: 100%;
    border: 1px solid var(--app-slate-200);
    border-radius: var(--app-radius);
    background: #fff;
    padding: 1.25rem;
    box-shadow: var(--app-shadow);
}

.stat-label {
    margin: 0;
    color: var(--app-slate-500);
    font-size: 0.875rem;
}

.stat-value {
    margin: 0.5rem 0 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.app-table {
    margin-bottom: 0;
    color: var(--app-slate-950);
    font-size: 0.875rem;
}

.app-table > :not(caption) > * > * {
    border-bottom-color: var(--app-slate-100);
    padding: 1rem 1.25rem;
    vertical-align: middle;
}

.app-table > thead > tr > th {
    border-bottom-color: var(--app-slate-200);
    background: var(--app-slate-50);
    color: var(--app-slate-500);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    white-space: nowrap;
}

.app-table > tbody > tr:last-child > * {
    border-bottom-width: 0;
}

.app-table.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: var(--app-slate-50);
}

.empty-state {
    padding-block: 3rem !important;
    color: var(--app-slate-500) !important;
    text-align: center;
}

.app-per-page-select {
    width: 9rem;
}

.app-min-product {
    min-width: 12rem;
}

.table-pagination {
    border-top: 1px solid var(--app-slate-200);
    padding: 1rem 1.25rem;
}

.pagination {
    --bs-pagination-color: var(--app-slate-700);
    --bs-pagination-hover-color: var(--app-sky-700);
    --bs-pagination-active-bg: var(--app-slate-950);
    --bs-pagination-active-border-color: var(--app-slate-950);
    --bs-pagination-border-color: var(--app-slate-200);
    --bs-pagination-border-radius: 0.625rem;
    margin-bottom: 0;
}

.pagination .page-link {
    font-size: 0.875rem;
    font-weight: 600;
}

.form-label,
.field-label {
    margin-bottom: 0.5rem;
    color: var(--app-slate-700);
    font-size: 0.875rem;
    font-weight: 600;
}

.form-control,
.form-select {
    min-height: 3rem;
    border-color: var(--app-slate-300);
    border-radius: var(--app-radius-sm);
    padding: 0.6875rem 1rem;
}

textarea.form-control {
    min-height: auto;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--app-sky-500);
    box-shadow: 0 0 0 0.25rem rgb(14 165 233 / 0.1);
}

.form-check-input:checked {
    border-color: var(--app-sky-600);
    background-color: var(--app-sky-600);
}

.form-text {
    margin-top: 0.375rem;
    color: var(--app-slate-500);
    font-size: 0.75rem;
}

.btn {
    border-radius: var(--app-radius-sm);
    padding: 0.6875rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.btn-sm {
    padding: 0.5rem 1rem;
}

.btn-dark {
    --bs-btn-bg: var(--app-slate-950);
    --bs-btn-border-color: var(--app-slate-950);
    --bs-btn-hover-bg: var(--app-slate-800);
    --bs-btn-hover-border-color: var(--app-slate-800);
}

.btn-primary {
    --bs-btn-bg: var(--app-sky-700);
    --bs-btn-border-color: var(--app-sky-700);
    --bs-btn-hover-bg: var(--app-sky-900);
    --bs-btn-hover-border-color: var(--app-sky-900);
}

.btn-sky {
    --bs-btn-color: var(--app-slate-950);
    --bs-btn-bg: var(--app-sky-400);
    --bs-btn-border-color: var(--app-sky-400);
    --bs-btn-hover-color: var(--app-slate-950);
    --bs-btn-hover-bg: var(--app-sky-300);
    --bs-btn-hover-border-color: var(--app-sky-300);
}

.btn-danger-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--app-red-800);
    --bs-btn-border-color: var(--app-red-800);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--app-red-900);
    --bs-btn-hover-border-color: var(--app-red-900);
}

.btn-warning-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--app-amber-900);
    --bs-btn-border-color: var(--app-amber-900);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--app-amber-950);
    --bs-btn-hover-border-color: var(--app-amber-950);
}

.status-badge {
    border-radius: 9999px;
    background: var(--app-slate-100);
    color: var(--app-slate-700);
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-badge--success {
    background: #d1fae5;
    color: var(--app-emerald-800);
}

.status-badge--warning {
    background: #fef3c7;
    color: var(--app-amber-800);
}

.status-badge--info {
    background: var(--app-sky-100);
    color: var(--app-sky-900);
}

.notice-success,
.notice-danger,
.notice-warning,
.notice-dark-success,
.notice-dark-danger {
    border: 1px solid;
    border-radius: var(--app-radius-sm);
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
}

.notice-success {
    border-color: var(--app-emerald-200);
    background: var(--app-emerald-50);
    color: var(--app-emerald-900);
}

.notice-danger {
    border-color: var(--app-red-200);
    background: var(--app-red-50);
    color: var(--app-red-900);
}

.notice-warning {
    border-color: var(--app-amber-200);
    background: var(--app-amber-50);
    color: var(--app-amber-950);
}

.notice-dark-success {
    border-color: rgb(52 211 153 / 0.3);
    background: rgb(52 211 153 / 0.1);
    color: #a7f3d0;
}

.notice-dark-danger {
    border-color: rgb(248 113 113 / 0.3);
    background: rgb(248 113 113 / 0.1);
    color: #fecaca;
}

.warning-panel,
.danger-panel {
    border: 1px solid;
    border-radius: var(--app-radius);
    padding: 1.5rem;
}

.warning-panel {
    border-color: var(--app-amber-200);
    background: var(--app-amber-50);
    color: var(--app-amber-950);
}

.danger-panel {
    border-color: var(--app-red-200);
    background: var(--app-red-50);
    color: var(--app-red-950);
}

.warning-panel .form-control,
.warning-panel .form-select {
    border-color: var(--app-amber-300);
}

.danger-panel .form-control,
.danger-panel .form-select {
    border-color: var(--app-red-300);
}

.definition-grid dt {
    color: var(--app-slate-500);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.definition-grid dd {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
}

.summary-box {
    border-radius: var(--app-radius-sm);
    background: var(--app-slate-50);
    padding: 1rem;
    font-size: 0.875rem;
}

.list-panel > * + * {
    border-top: 1px solid var(--app-slate-100);
}

.list-panel-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    color: inherit;
    font-size: 0.875rem;
}

.list-panel-link:hover {
    background: var(--app-slate-50);
}

.product-list-image,
.product-list-placeholder {
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    border-radius: 0.5rem;
}

.product-list-image {
    object-fit: cover;
}

.product-list-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--app-slate-100);
    color: var(--app-slate-500);
    font-weight: 700;
}

.product-detail-image {
    width: 150px;
    height: 150px;
    overflow: hidden;
    border: 1px solid var(--app-slate-200);
    border-radius: var(--app-radius-sm);
    background: var(--app-slate-50);
}

.product-detail-image img {
    width: 100%;
    height: 100%;
    padding: 0.5rem;
    object-fit: contain;
}

.generation-panel-column {
    width: 100%;
}

.logo-preview {
    display: flex;
    min-height: 7rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--app-slate-200);
    border-radius: var(--app-radius-sm);
    background: var(--app-slate-50);
    padding: 1.25rem;
}

.logo-preview img {
    max-width: 100%;
    max-height: 5rem;
    object-fit: contain;
}

.admin-body {
    min-height: 100vh;
    background: var(--app-slate-100);
}

.admin-shell {
    min-height: 100vh;
}

.admin-sidebar {
    background: var(--app-slate-950);
    color: #fff;
    padding: 1.5rem;
}

.admin-brand-row,
.admin-brand,
.admin-header,
.site-header,
.site-brand,
.site-actions {
    display: flex;
    align-items: center;
}

.admin-brand-row {
    justify-content: space-between;
    gap: 1rem;
}

.admin-brand {
    min-width: 0;
    gap: 0.75rem;
    color: #fff;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.admin-brand:hover,
.admin-brand:focus-visible {
    color: #fff;
}

.admin-brand-logo {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    background: #fff;
    padding: 0.375rem;
}

.admin-brand-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.admin-brand-logo--large {
    width: 2.75rem;
    height: 2.75rem;
}

.admin-brand-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.online-badge {
    border-radius: 9999px;
    background: rgb(52 211 153 / 0.15);
    color: var(--app-emerald-300);
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.admin-nav {
    margin-top: 2rem;
}

.admin-nav-label {
    margin: 1.75rem 0 0;
    padding-inline: 1rem;
    color: var(--app-slate-500);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.admin-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.25rem;
    border-radius: var(--app-radius-sm);
    padding: 0.75rem 1rem;
    color: var(--app-slate-300);
    font-size: 0.875rem;
    font-weight: 500;
}

.admin-nav-label + .admin-nav-link,
.admin-nav > .admin-nav-link:first-child {
    margin-top: 0.5rem;
}

.admin-nav-link:hover,
.admin-nav-link:focus-visible {
    background: rgb(255 255 255 / 0.05);
    color: #fff;
}

.admin-nav-link.active {
    background: rgb(255 255 255 / 0.1);
    color: #fff;
}

.admin-main-column {
    min-width: 0;
    background:
        radial-gradient(circle at 0 12%, rgb(254 240 138 / 0.24), transparent 27rem),
        linear-gradient(90deg, #fffdf5 0%, #fbfff4 100%);
}

.admin-header {
    justify-content: space-between;
    gap: 1.5rem;
    border-bottom: 1px solid var(--app-slate-200);
    background: #fff;
    padding: 1rem 1.5rem;
}

.admin-content {
    padding: 1.5rem;
}

.datatable-filter-grid {
    display: grid;
    gap: 1rem;
}

.datatable-filter-grid--products {
    grid-template-columns: minmax(0, 1fr);
}

.datatable-filter-grid--printable,
.datatable-filter-grid--verifications {
    grid-template-columns: minmax(0, 1fr);
}

.datatable-filter-range {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.datatable-filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.25rem;
    border-top: 1px solid var(--app-slate-200);
    padding-top: 1rem;
}

.datatable-filter-actions--left {
    justify-content: flex-start;
}

.datatable-filter-actions .btn-primary {
    min-width: 8.5rem;
}

.record-count {
    flex: 0 0 auto;
    color: var(--app-slate-700) !important;
    font-size: 0.875rem;
    font-weight: 600;
}

.datatable-card {
    padding-top: 0.25rem;
}

.datatable-card .dt-container {
    width: 100%;
}

.datatable-card .dt-layout-table {
    overflow-x: auto;
}

.datatable-card .dt-layout-table > .dt-layout-cell {
    min-width: 100%;
}

.datatable-card .table {
    margin-bottom: 0;
}

.datatable-card .page-link {
    color: var(--app-slate-700);
}

.datatable-card .active > .page-link {
    border-color: var(--app-slate-950);
    background: var(--app-slate-950);
    color: #fff;
}

.datatable-card table.dataTable > tbody > tr.child ul.dtr-details {
    width: min(100%, 34rem);
}

.datatable-card table.dataTable > tbody > tr.child span.dtr-title {
    min-width: 8rem;
}

.signed-in-label {
    margin: 0;
    color: var(--app-slate-500);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.signed-in-name {
    margin: 0;
    font-weight: 600;
}

.guest-body {
    min-height: 100vh;
    background: var(--app-slate-100);
}

.guest-shell {
    min-height: 100vh;
}

.guest-visual {
    display: none;
    background: var(--app-slate-950);
    color: #fff;
    padding: 3rem;
}

.guest-copy {
    max-width: 32rem;
}

.guest-copy h2 {
    margin: 0;
    font-size: 2.25rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.25;
}

.guest-form-column {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
}

.guest-form-wrap {
    width: 100%;
    max-width: 28rem;
}

.site-body {
    min-height: 100vh;
    background: var(--app-slate-950);
    color: #fff;
}

.site-shell {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    overflow: hidden;
}

.site-glow {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    left: 0;
    height: 24rem;
    background: radial-gradient(circle at top right, rgb(56 189 248 / 0.22), transparent 52%);
}

.site-header {
    width: min(100% - 3rem, 80rem);
    margin-inline: auto;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 1.5rem;
}

.site-brand {
    min-width: 0;
    gap: 0.75rem;
    color: #fff;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.site-brand:hover,
.site-brand:focus-visible {
    color: #fff;
}

.site-brand img {
    width: auto;
    max-width: 10rem;
    height: 2.5rem;
    object-fit: contain;
}

.site-brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-actions {
    flex: 0 0 auto;
    gap: 0.75rem;
}

.site-action-primary,
.site-action-secondary {
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    white-space: nowrap;
}

.site-action-primary {
    background: var(--app-sky-400);
    color: var(--app-slate-950);
    font-weight: 600;
}

.site-action-primary:hover {
    background: var(--app-sky-300);
    color: var(--app-slate-950);
}

.site-action-secondary {
    border: 1px solid rgb(255 255 255 / 0.15);
    color: var(--app-slate-200);
    font-weight: 500;
}

.site-action-secondary:hover {
    border-color: rgb(56 189 248 / 0.6);
    color: #fff;
}

.hero-section {
    width: min(100% - 3rem, 80rem);
    margin-inline: auto;
    padding-block: 5rem;
}

.hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
}

.hero-kicker {
    display: inline-flex;
    border: 1px solid rgb(56 189 248 / 0.2);
    border-radius: 9999px;
    background: rgb(56 189 248 / 0.1);
    color: var(--app-sky-300);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.hero-title {
    max-width: 48rem;
    margin: 0;
    font-size: clamp(3rem, 7vw, 4.5rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1;
    text-wrap: balance;
}

.hero-description {
    max-width: 42rem;
    margin: 1.5rem 0 0;
    color: var(--app-slate-300);
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.glass-card {
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 1.5rem;
    background: rgb(255 255 255 / 0.05);
    padding: 1.75rem;
    backdrop-filter: blur(12px);
}

.glass-card h2 {
    margin: 0.75rem 0 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.glass-card p:last-child {
    margin: 0.5rem 0 0;
    color: var(--app-slate-400);
    line-height: 1.75rem;
}

.frontend-violet {
    color: #c4b5fd !important;
}

.verification-wrap {
    width: min(100% - 3rem, 48rem);
    margin-inline: auto;
    padding-block: 4rem;
}

.verification-wrap--form {
    max-width: 42rem;
    padding-block: 5rem;
}

.verification-card {
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 1.5rem;
    background: rgb(255 255 255 / 0.05);
    padding: 2rem;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    backdrop-filter: blur(12px);
}

.verification-card--success {
    border-color: rgb(52 211 153 / 0.3);
    background: rgb(52 211 153 / 0.1);
    color: #6ee7b7;
}

.verification-card--info {
    border-color: rgb(56 189 248 / 0.3);
    background: rgb(56 189 248 / 0.1);
    color: var(--app-sky-300);
}

.verification-card--warning {
    border-color: rgb(251 191 36 / 0.3);
    background: rgb(251 191 36 / 0.1);
    color: #fcd34d;
}

.verification-card--danger {
    border-color: rgb(248 113 113 / 0.3);
    background: rgb(248 113 113 / 0.1);
    color: #fca5a5;
}

.verification-eyebrow {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.verification-title {
    margin: 0.75rem 0 0;
    color: #fff;
    font-size: 1.875rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.verification-message {
    margin: 1rem 0 0;
    color: var(--app-slate-200);
    line-height: 1.75rem;
}

.dark-form-control {
    border-color: rgb(255 255 255 / 0.15);
    background: var(--app-slate-900);
    color: #fff;
}

.dark-form-control:focus {
    border-color: var(--app-sky-400);
    background: var(--app-slate-900);
    color: #fff;
    box-shadow: 0 0 0 0.25rem rgb(56 189 248 / 0.1);
}

.dark-form-control::placeholder {
    color: var(--app-slate-500);
}

select.dark-form-control {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cbd5e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.verification-details {
    margin-top: 2rem;
    border-top: 1px solid rgb(255 255 255 / 0.1);
    padding-top: 2rem;
}

.verification-details dt {
    color: var(--app-slate-400);
    font-size: 0.875rem;
}

.verification-details dd {
    margin: 0.25rem 0 0;
    color: #fff;
    font-weight: 600;
}

.activity-assessment {
    margin-top: 2rem;
    border-radius: var(--app-radius);
    background: rgb(2 6 23 / 0.4);
    padding: 1.25rem;
    color: var(--app-slate-200);
}

.report-panel {
    margin-top: 2rem;
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: var(--app-radius);
    background: rgb(255 255 255 / 0.05);
    padding: 1.5rem;
}

.report-panel summary {
    color: #fff;
    cursor: pointer;
    font-weight: 600;
}

div.dt-container .dt-layout-row:not(.dt-layout-table) {
    margin: 0;
    padding: 1rem 1.5rem;
}

div.dt-container .dt-layout-row.dt-layout-table {
    margin: 0;
}

div.dt-container .dt-info,
div.dt-container .dt-length label {
    color: var(--app-slate-600);
    font-size: 0.875rem;
}

div.dt-container .dt-processing {
    border: 1px solid var(--app-slate-200);
    border-radius: 0.75rem;
    background: rgb(255 255 255 / 0.96);
    box-shadow: 0 0.75rem 2rem rgb(15 23 42 / 0.12);
    color: var(--app-slate-700);
}

@media (min-width: 64rem) {
    .admin-shell {
        display: grid;
        grid-template-columns: 17rem minmax(0, 1fr);
    }

    .admin-sidebar {
        min-height: 100vh;
    }

    .admin-brand-row {
        display: block;
    }

    .admin-brand-row .online-badge {
        display: inline-block;
        margin-top: 1rem;
    }

    .admin-header,
    .admin-content {
        padding-inline: 2.5rem;
    }

    .admin-content {
        padding-block: 2.5rem;
    }

    .datatable-filter-grid--products {
        grid-template-columns: minmax(20rem, 1fr) minmax(12rem, 15rem) auto;
    }

    .datatable-filter-grid--printable,
    .datatable-filter-grid--verifications {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .guest-shell {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .guest-visual {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .hero-section {
        padding-block: 8rem;
    }
}

@media (min-width: 80rem) {
    .generation-panel-column {
        width: 22rem;
    }
}

@media (max-width: 47.999rem) {
    .site-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .site-actions {
        width: 100%;
    }

    .site-action-primary,
    .site-action-secondary {
        flex: 1 1 0;
        text-align: center;
    }

    .app-card,
    .filter-panel,
    .verification-card {
        padding: 1.25rem;
    }

    .app-table > :not(caption) > * > * {
        padding: 0.875rem 1rem;
    }
}

@media (prefers-color-scheme: dark) {
    .guest-body {
        background: var(--app-slate-950);
        color: #fff;
    }

    .guest-form-column .form-control {
        border-color: var(--app-slate-700);
        background: var(--app-slate-900);
        color: #fff;
    }

    .guest-form-column .form-label,
    .guest-form-column .form-check-label {
        color: var(--app-slate-300);
    }

    .guest-form-column .text-secondary {
        color: var(--app-slate-400) !important;
    }

    .guest-form-column .link-accent,
    .guest-form-column .text-brand {
        color: var(--app-sky-300) !important;
    }
}

/* Plain-PHP templates reuse the existing visual system with descriptive aliases. */
.page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.page-heading h1 {
    margin: 0.5rem 0 0;
    font-size: clamp(1.75rem, 4vw, 1.875rem);
    font-weight: 600;
    letter-spacing: -0.025em;
}

.page-heading p:last-child {
    margin: 0.5rem 0 0;
    color: var(--app-slate-600);
}

.panel-card {
    overflow: hidden;
    border: 1px solid var(--app-slate-200);
    border-radius: var(--app-radius);
    background: #fff;
    box-shadow: var(--app-shadow);
}

.panel-card-header {
    border-bottom: 1px solid var(--app-slate-200);
    padding: 1.25rem 1.5rem;
}

.panel-card-header h2 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.panel-card .table > :not(caption) > * > * {
    border-bottom-color: var(--app-slate-100);
    padding: 1rem 1.25rem;
    vertical-align: middle;
}

.panel-card .table thead th {
    background: var(--app-slate-50);
    color: var(--app-slate-500);
    font-size: 0.75rem;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    white-space: nowrap;
}

.metric-card {
    height: 100%;
    border: 1px solid var(--app-slate-200);
    border-radius: var(--app-radius);
    background: #fff;
    padding: 1.25rem;
    box-shadow: var(--app-shadow);
}

.metric-card p {
    margin: 0;
    color: var(--app-slate-500);
    font-size: 0.875rem;
}

.metric-card strong {
    display: block;
    margin-top: 0.5rem;
    font-size: 1.5rem;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    border-bottom: 1px solid var(--app-slate-200);
    padding: 1.25rem;
}

.filter-bar .form-control {
    min-width: min(100%, 18rem);
    flex: 1 1 18rem;
}

.filter-bar .form-select {
    max-width: 14rem;
}

.status-pill {
    display: inline-flex;
    border-radius: 9999px;
    background: var(--app-slate-100);
    color: var(--app-slate-700);
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-active,
.status-ready,
.status-downloaded,
.status-completed,
.status-reviewed {
    background: #d1fae5;
    color: var(--app-emerald-800);
}

.status-pending,
.status-queued,
.status-processing,
.status-escalated {
    background: #fef3c7;
    color: var(--app-amber-800);
}

.status-blocked,
.status-voided,
.status-recalled,
.status-failed,
.status-dismissed {
    background: var(--app-red-50);
    color: var(--app-red-800);
}

.admin-guest-body {
    min-height: 100vh;
    background: var(--app-slate-100);
}

.admin-guest-shell {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 1.5rem;
}

.admin-login-card {
    width: min(100%, 28rem);
    border: 1px solid var(--app-slate-200);
    border-radius: var(--app-radius);
    background: #fff;
    padding: 2rem;
    box-shadow: var(--app-shadow);
}

@media (max-width: 48rem) {
    .page-heading {
        flex-direction: column;
    }
}

 /*New Style start FOR Frontend*/
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --bg: #fffdf5;
      --card: rgba(243,205,151,0.3);
      --border: rgba(59,42,26,0.15);
      --text: #4a3722;
      --muted: #8a7458;
      --primary: #F3CD97;
      --secondary: #FEF2A0;
      --success: #4d9a52;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: Inter, Arial, sans-serif;
      color: var(--text) !important;
      overflow-x: hidden;
      background:
        radial-gradient(
            ellipse at 0% 100%,
            rgba(224, 187, 91, 0.16) 0%,
            rgba(224, 187, 91, 0.06) 25%,
            transparent 50%
        ),
        radial-gradient(
            ellipse at 100% 100%,
            rgba(224, 187, 91, 0.16) 0%,
            rgba(224, 187, 91, 0.06) 25%,
            transparent 50%
        ),
        #fff !important;
    }
    .site-glow{
        background: none !important;
    }
    .verification-wrap{
        width: 100%;
        max-width: 100%;
    }
    .verification-title{
        color: #1a1a1a;
    }
    .site-brand img{
        width: 100%;
        height: auto;
        max-width: 15rem;
    }
    /* =========================
       HEADER MENU
    ========================== */
    .header{
        width: 100%;
        background: #fefefe;
        box-shadow: 0px 0px 10px 0px rgba(242,143,0,0.3);
        transition: background 0.35s ease, box-shadow 0.35s ease;
    }
    .header.scroll{
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        background: rgba(255,255,255,1);
        box-shadow: 0px 0px 10px 0px rgba(226,143,0,0.2);
        z-index: 9999;
    }
    .site-actions nav.main-menu{position: relative;}
    .site-actions nav ul.header-menu{
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      padding: 0;
      margin: 0;
    }
    .site-actions nav ul.header-menu li{
      margin: 0 10px;
      position: relative;
    }
    .site-actions nav ul.header-menu li a{
      font-size: 16px;
      font-weight: 600;
      color: #271700;
      border-bottom: 1px solid transparent;
      padding: 0 0 2px;
    }
     .site-actions nav ul.header-menu li a.site-action-primary{
        color: #fff;
     }
    .site-actions nav ul.header-menu li a:hover{
      color: #ad6600;
      border-color: #ad6600;
    }
    .site-actions nav ul.header-menu li a.dropmenu{

    }
    .site-actions nav ul.header-menu ul.submenu{
      display: none;
      width: 300px;
      gap: 14px;
      position: absolute;
      list-style: none;
      flex-direction: column;
      background: #fff;
      padding: 20px;
      left: 0;
      top: 40px;
      border-radius: 10px;
      z-index: 9;
      box-shadow: 2px 3px 10px 0px rgb(200,121,7,0.1)
    }
    .site-actions nav ul.header-menu ul.submenu.show{
      display: flex;
    }
    .header-menu li.open .dropmenu svg {
      transform: rotate(180deg);
      transition: transform 0.2s ease;
    }
    .hamburger {
        display: none;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 40px;
        height: 40px;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 1100;
        position: absolute;
        right: 27px;
        top: 15px;
      }
      .hamburger span {
        display: block;
        width: 100%;
        height: 2px;
        background: #271700;
        border-radius: 2px;
        transition: transform 0.35s ease, opacity 0.25s ease;
      }

      /* Morph into an X when open */

      .hamburger.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
      }

      .hamburger.active span:nth-child(2) {
        opacity: 0;
      }

      .hamburger.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
      }

      /* Dark overlay behind the drawer */

      .mobile-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        opacity: 0;
        transition: opacity 0.35s ease;
        z-index: 1000;
      }

      .mobile-overlay.active {
        display: block;
        opacity: 1;
      }

    /* =========================
       ANIMATED BACKGROUND
    ========================== */

    body::before {
      content: "";
      position: fixed;
      width: 500px;
      height: 500px;
      background: #fdf2e2;
      filter: blur(160px);
      opacity: 0.35;
      top: -150px;
      left: -150px;
      z-index: -2;
      animation: floatGlow 8s ease-in-out infinite alternate;
    }

    body::after {
      content: "";
      position: fixed;
      width: 450px;
      height: 450px;
      background: #fcf5c9;
      filter: blur(160px);
      opacity: 0.4;
      right: -150px;
      bottom: -100px;
      z-index: -2;
      animation: floatGlow 10s ease-in-out infinite alternate-reverse;
    }

    @keyframes floatGlow {
      from {
        transform: translate(0, 0) scale(1);
      }
      to {
        transform: translate(80px, 50px) scale(1.2);
      }
    }
    /* =========================
       HERO / BANNER
    ========================== */
    .hero {
      position: relative;
      padding: 40px 0 20px;
    }
    .tredmark{
        color: #2d2200;
        letter-spacing: 1px;
        text-transform: uppercase;
        margin: 30px 0;
        border-bottom: 2px solid #b09100;
        padding-bottom: 30px;
        font-weight: 600;
        font-size: 20px;
        text-align: center;
    }
    .banner-list{
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        list-style: none;
        font-size: 16px;
        font-weight: 600;
        text-align: center;
    }
    .banner-list li{
        width: 25%;
        display: flex;
        flex-direction: column;
        gap: 10px;
        font-weight: 600;
        text-align: center;
        color: #000;
        border-right: 1px solid #dedddd;
        padding: 0 10px;
        font-size: 14px;
        line-height: normal;
    }
    .banner-list li:last-child{
        border-right: none;
    }
    .banner-list li img{width: 70%; margin: auto;}
    .alter{font-size: 14px;}
    .verification-wrap--form{
        padding-block: 1rem;
    }
    .input-width{
        width: 60%;
    }
    .hero-content {
      /* entrance now handled by GSAP */
    }
    .hero .col-lg-3 img{width: 255px;}
    .badge {
      display: inline-block;
      padding: 8px 15px;
      border-radius: 30px;
      background: rgba(217,164,65,0.18);
      border: 1px solid rgba(217,164,65,0.4);
      color: #8a5e1f;
      font-size: 16px;
      margin-bottom: 20px;
    }

    .hero h1 {
      font-size: clamp(22px, 4vw, 68px);
      line-height: normal;
      font-weight: 700;
    }
    .hero h2 {
      font-size: clamp(32px, 6vw, 72px);
      font-weight: 700;
      margin: 1.5rem 0;
    }

    .gradient-text {
      background: linear-gradient(
        90deg,
        #8a5e1f,
        #D9A441,
        #E3A857,
        #8a5e1f
      );
      background-size: 300%;
      -webkit-background-clip: text;
      color: transparent;
      animation: gradientMove 5s linear infinite;
      display: block;
    }

    @keyframes gradientMove {
      0% {
        background-position: 0%;
      }
      100% {
        background-position: 300%;
      }
    }

    .hero p {
      color: #3a3b3f;
      margin: 20px 0;
      font-size: 17px;
    }
    .hero p.long{
        font-size: clamp(16px, 2vw, 26px);
        font-weight: 500;
        max-width: 550px;
    }
    .hero-buttons {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .btns {
      border: none;
      padding: 14px 23px;
      border-radius: 12px;
      cursor: pointer;
      font-weight: 700;
      transition: 0.3s;
      font-size: 0.875rem;
    }

    .btn-primary1 {
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      color: #4a3722;
      box-shadow: 0 10px 30px rgba(217,164,65,0.35);
    }

    .btn-primary1:hover {
      transform: translateY(-3px);
      box-shadow: 0 15px 40px rgba(217,164,65,0.5);
    }

    .btn-outline {
      color: var(--text);
      background: rgba(59,42,26,0.04);
      border: 1px solid var(--border);
    }

    .btn-outline:hover {
      background: rgba(59,42,26,0.08);
    }
    .btn-dark{
      background: linear-gradient(135deg, #271700, #000000);
      color: #ffffff;
      box-shadow: 0 10px 30px rgba(217,164,65,0.35);
    }
    .btn-dark:hover{
        transform: translateY(-3px);
        box-shadow: 0 15px 40px rgba(217,164,65,0.5);
    }
    .verification-wrap .btn-dark{
        background: linear-gradient(180deg, #f2d379, #e1b54a);
        color: #000;
        box-shadow: 0 10px 30px rgba(217, 164, 65, 0.35);
        border-radius: 8px;
        width: 39%;
    }
    .verification-wrap .btn-dark:hover{
        transform: translateX(1px);
    }
    /* =========================
       HERO GRAPHIC
    ========================== */

    .hero-graphic {
      position: relative;
      display: grid;
      place-items: center;
    }
    .tagline{
        position: relative;
        text-align: center;
        margin: 40px 0;
    }
    .tagline .container{
        overflow: hidden;
    }
    .tagline h5{
        position: relative;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #624324;
        display: inline-block;
        margin: 0;
    }
    .tagline h5:before{
        position: absolute;
        content: "";
        width: 100%;
        height: 2px;
        background-color: #624324;
        left: -104%;
        top: 50%;
        transform: translateY(-50%);
    }
    .tagline h5:after{
        position: absolute;
        content: "";
        width: 100%;
        height: 2px;
        background-color: #624324;
        right: -104%;
        top: 50%;
        transform: translateY(-50%);
    }
    .tagline p{
        color: #1a1a1a;
        margin: 8px 0 0;
    }
    /* =========================
       PRODUCTS
    ========================== */

    .products-section {
      max-width: 1300px;
      margin: auto;
      padding: 20px 15px;
    }

    .section-head {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 20px;
      margin-bottom: 35px;
    }

    .section-head h2 {
      font-size: 38px;
      font-weight: 600;
    }

    .section-head p {
      color: var(--muted);
      margin-top: 7px;
    }

    .product-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      perspective: 1200px;
    }

    .product-card {
      border: 1px solid rgba(255,183,0,0.5);
      background: rgba(255,255,237,0.8);
      border-radius: 15px;
      overflow: hidden;
      transition: border-color 0.4s, box-shadow 0.4s;
      transform-style: preserve-3d;
      will-change: transform;
    }

    .product-card:hover {
      background: rgba(255,255,255,0.9);
      box-shadow: 0 25px 60px rgba(74,55,34,0.15);
      border: 1px solid rgba(217,164,65,0.8);
    }

    .product-image {
      height: auto;
      display: grid;
      place-items: center;
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at center,
        rgba(217,164,65,0.28),
        transparent 65%);
      padding: 50px 0;
    }

    .product-image::after {
      content: "";
      position: absolute;
      width: 140px;
      height: 140px;
      border-radius: 50%;
      border: 1px solid rgba(59,42,26,0.15);
      animation: pulse 3s ease-in-out infinite;
    }

    @keyframes pulse {
      0%,100% {
        transform: scale(0.8);
        opacity: 0.3;
      }
      50% {
        transform: scale(1.3);
        opacity: 0.8;
      }
    }

    .product-icon {
      position: relative;
      z-index: 2;
      filter: drop-shadow(0 15px 20px rgba(0,0,0,0.3));
      will-change: transform;
      cursor: pointer;
    }
    .product-icon img{
        height: 220px;
        transform: scale(1.15);
    }
    .product-info {
      padding: 20px;
    }

    .category {
      color: var(--secondary);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .product-info h3 {
      margin: 0 0 15px;
      font-size: 20px;
      font-weight: 600;
      min-height: 50px;
    }

    .product-bottom {
        position: relative;
        margin-top: 18px;
        display: flex;
        gap: 10px;
    }

    .report-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-width: 47%;
      border: 1px solid rgba(217,164,65,0.9);
      background: rgba(217,164,65,0.15);
      color: var(--text);
      text-decoration: none;
      padding: 10px;
      border-radius: 10px;
      font-weight: 700;
      font-size: 15px;
      transition: 0.3s;
    }
    select.report-btn{
      outline: none;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 8px center;
      background-size: 16px;
    }
    .report-btn:hover {
      background-color: var(--secondary);
      border-color: var(--secondary);
      color: #4a3722;
      transform: translateY(-2px);
      box-shadow: 0 10px 25px rgba(217,164,65,0.45);
    }
    
    .product-modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.5);
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: 99999;
      align-items: center;
      justify-content: center;
    }

    .product-modal-overlay.active {
      display: flex;
      opacity: 1;
    }

    .product-modal {
      background: #FFF9D8;
      border-radius: 16px;
      padding: 30px;
      max-width: 450px;
      width: 90%;
      text-align: center;
      position: relative;
      transform: scale(0.9) translateY(20px);
      opacity: 0;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .product-modal-overlay.active .product-modal {
      transform: scale(1) translateY(0);
      opacity: 1;
    }

    .modal-close {
      position: absolute;
      top: 12px;
      right: 14px;
      background: none;
      border: none;
      font-size: 22px;
      cursor: pointer;
      color: #4a3722;
    }

    .modal-img {
      max-width: 250px;
      margin: 0 auto 20px;
      display: block;
    }

    .modal-name {
      margin-bottom: 8px;
    }

    /* =========================
       FEATURES
    ========================== */

    .features {
      max-width: 1300px;
      margin: auto;
      padding: 20px 15px 30px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 15px;
      perspective: 1200px;
    }

    .feature {
      position: relative;
      padding: 20px 15px;
      border: 1px solid #ecebe7;
      border-radius: 16px;
      background: #faf9f7;
      overflow: hidden;
      transform-style: preserve-3d;
      will-change: transform;
      transition: border-color 0.4s, box-shadow 0.4s;
    }

    .feature:hover {
      border-color: rgba(217,164,65,0.6);
      box-shadow: 0 25px 60px rgba(74,55,34,0.15);
    }

    /* Cursor-tracking spotlight glow */

    .feature::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(
        circle at var(--mx, 50%) var(--my, 50%),
        rgba(217,164,65,0.3),
        transparent 55%
      );
      opacity: 0;
      transition: opacity 0.4s;
      pointer-events: none;
    }

    .feature:hover::before {
      opacity: 1;
    }

    .feature > * {
      position: relative;
      z-index: 1;
    }

    .feature-icon-wrap {
      width: 65px;
      display: grid;
      place-items: center;
      margin-bottom: 20px;
      will-change: transform;
    }

    .feature-icon {
    }

    .feature h3 {
      margin-bottom: 10px;
      font-weight: 600;
      color: #060503;
    }

    .feature p {
      color: #444645;
      line-height: 1.6;
      font-size: 16px;
    }
    .feature a{
        color: #a0701b;
        display: inline-block;
        border-bottom: 1px solid #8f6f32;
        font-weight: 600;
    }
    .light-form-control{
        border-color: #cac5b9;
        background-color: #fff;
        color: #707c91;
        border-radius: 5px;
        font-size: 14px;
    }
    .light-form-control:focus {
        border-color: #989dab;
        background-color: #f7fbff;
        color: #000;
    }
    .input-width .light-form-control{
        background: #fff url('https://verifykama.com/images/verify.svg');
        padding: 10px 8px 10px 35px;
        background-size: 13px;
        background-repeat: no-repeat;
        background-position: 10px 48%;
    }
    .input-width .light-form-control:focus {
        background: #f7fbff url('https://verifykama.com/images/verify.svg');
        padding: 10px 8px 10px 35px;
        background-size: 13px;
        background-repeat: no-repeat;
        background-position: 10px 48%;
        color: #000;
    }

    .light-form-control::placeholder {
        color: #303030;
    }

    select.light-form-control {
        --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23525c6c' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }
    /* =========================
       FOOTER
    ========================== */

    footer {
      border-top: 1px solid var(--border);
      padding: 20px 15px;
      color: #000000;
      font-size: 13px;
      background-color: #e6b505;
    }

    .footer-inner {
      max-width: 1300px;
      margin: auto;
      display: flex;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
      align-items: center;
    }

    footer span {
      color: var(--text);
    }

    img, svg{max-width: 100%;}

    /* =========================
       RESULT PAGE
    ========================== */

    .product-gallery{
        margin-top: 0 !important;
        padding-block: 10px !important ;
    }
    .hero .verification-card{
        background: none !important;
        color: #1a1a1a !important;
        box-shadow: none;
        border: none;
        padding: 0 0 0 30px;
        border-left: 1px solid #dedddd;
        border-radius: 0px;
    }
    .verification-eyebrow{
        color: #1c9c01;
        letter-spacing: 1px;
        display: flex;
        gap: 8px;
        margin: 0 0 20px;
    }
    .verification-card .top-area{
        background-color: #fbfff2;
        border:1px solid #ffeeaf;
        padding: 20px;
        border-radius: 20px;
    }
    .verification-card .bottom-area{
        margin-top: 30px;
        background-color: #fff;
        border: 1px solid #e7ebf3;
        padding: 20px;
        border-radius: 20px;
    }
    .verification-title{
        color: #071d3c;
        margin: 0;
    }
    .verification-message{
        color: #5e6078;
        margin: 7px 0 0;
    }
    .product-gallery__title{
        color: #8e8e8e !important;
    }
    .verification-details dt{
        color: #8e8e8e !important;
    }
    .verification-details dd{
        color: #000 !important;
    }
    .verification-details{
        margin-top: 0px !important;
        margin-left: 0px;
        margin-right: 0px;
        padding-bottom: 2.2rem;
    }
    .details-set{
        display: flex;
        gap: 12px;
    }
    .details-set .icons{
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100%;
        background-color: #e7f0fd;
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.0.01);
    }
    .details-set .icons.yellow{
        background-color: #fdf4e3;
    }
    .details-set .icons.purple{
        background-color: #efeefd;
    }
    .details-set .icons.green{
        background-color: #e4f5eb;
    }
    .details-set .icons.red{
        background-color: #fbebf3;
    }
    .details-set.suspicious .icons{
        background-color: #ffc0b8;
    }
    .details-set.suspicious .icons svg{
        fill: #ff1d00;
    }
    .details-set.valid_repeat .icons{
        background-color: #faf7c6;
    }
    .details-set.valid_repeat .icons svg{
        fill: #ff8d00;
    }
    .details-set.valid_first .icons{
        background-color: #ddfef2;
    }
    .details-set.valid_first .icons svg{
        fill: #007e04;
    }
    .activity-assessment{
        background: #fef5e5;
        padding: 1.5rem;
        color: #001237;
        border: 1px solid #fde8ca;
    }
    .report-panel summary {
        color: #ffffff;
        cursor: pointer;
        font-weight: 600;
        background: #001ac3;
        max-width: 400px;
        text-align: center;
        padding: 15px;
        border-radius: 15px;
        font-size: 16px;
        box-shadow: 0px 0px 10px 0px rgb(0,20,255,0.5);
        transition: 0.3s all ease-in-out;
    }
    .report-panel summary:hover {
        background: #070094;
        box-shadow: 0px 0px 15px 1px rgb(57,153,255,0.7);
        transform: translateX(1px);
    }
    .report-panel{
        padding: 0;
    }
    .report-form{
        background: #ffffff;
        padding: 40px 30px;
        border-radius: 10px;
        color: #001237;
        border: 1px solid #d7d7d7;
        margin: 40px 0 0;
        box-shadow: 0px 0px 10px rgba(0,77,167,0.1);
    }
    .report-form .fraud-icon{
        background-color: #e9f0f9;
        border-radius: 50%;
        width: 75px;
        height: 75px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .report-form h3{
        color: #4a5778;
        font-weight: 600;
        margin: 0;
    }
    .report-form p{
        color: #95a2b5;
        margin: 0;
    }
    .report-form .form-label{
        color: #4b5d77;
    }
    .report-form .form-label i{
        font-weight: 400;
        color: #adb5c2;
        font-size: 14px;
    }
    .product-gallery__dialog::backdrop{
        background: rgba(28,18,0,0.88) !important;
        backdrop-filter: blur(4px) !important;
    }
    .product-gallery__dialog{
        background: #fffae1 !important;
        color: #001237 !important;
        margin: 20px auto 0;
    }
    .product-gallery__close, .product-gallery__previous, .product-gallery__next, .product-gallery__done{
        color: #001237 !important;
    }
    .product-gallery__thumbnail{
        border: 1px solid #e5e5ff !important;
        background: #f8fafe !important;
    }
    .product-gallery__thumbnails{
        background-color: #faf7f7;
        padding: 5px;
        border-radius: 15px;
    }
    .input-glow {
      animation: inputGlow 1s ease-in-out 5;
      transform: scale(1.01);
      transition: 0.5s ease-in-out;
    }

    @keyframes inputGlow {
      0%, 100% {
        box-shadow: 0 0 0 rgba(124, 92, 255, 0);
        border-color: var(--border, #ccc);
      }
      50% {
        box-shadow: 0 0 18px 4px rgba(124, 92, 255, 0.55);
        border-color: #7c5cff;
      }
    }


    /* ========================================
           Available Batches Section
        ======================================== */

        .batch-section {
          width: 100%;
          padding: 32px;
          background: #f8fcfa;
          border-radius: 18px;
          box-sizing: border-box;
        }

        .batch-header {
          margin-bottom: 20px;
        }

        .batch-header h2 {
          margin: 0 0 6px;
          color: #10251c;
          font-size: 24px;
          line-height: 1.3;
          font-weight: 700;
        }

        .batch-header p {
          margin: 0;
          color: #687b73;
          font-size: 14px;
          line-height: 1.6;
        }


        /* ========================================
           Table Container
        ======================================== */

        .batch-table-wrapper {
          width: 100%;
          overflow-x: auto;
          background: #ffffff;
          border: 1px solid #e4eee9;
          border-radius: 12px;
        }


        /* ========================================
           Table
        ======================================== */

        .batch-table {
          width: 100%;
          min-width: 750px;
          border-collapse: collapse;
        }

        .batch-table thead {
          background: #f3f8f6;
        }

        .batch-table th {
          padding: 15px 18px;
          text-align: left;
          color: #62766d;
          font-size: 12px;
          font-weight: 600;
          border-bottom: 1px solid #e4eee9;
        }

        .batch-table td {
          padding: 16px 18px;
          color: #52665d;
          font-size: 14px;
          border-bottom: 1px solid #edf2ef;
        }

        .batch-table tbody tr:last-child td {
          border-bottom: none;
        }

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

        .batch-table tbody tr:hover {
          background: #f9fcfa;
        }

        .batch-table td strong {
          color: #263d33;
          font-weight: 600;
        }


        /* Batch Dropdown */

        .batch-select {
          min-width: 145px;
          padding: 9px 34px 9px 12px;
          border: 1px solid #dce9e3;
          border-radius: 8px;
          background-color: #ffffff;
          color: #263d33;
          font-size: 13px;
          font-weight: 600;
          cursor: pointer;
          outline: none;
          appearance: none;
          -webkit-appearance: none;
          -moz-appearance: none;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
          background-repeat: no-repeat;
          background-position: right 8px center;
          background-size: 16px;
          transition: border-color 0.2s ease;
        }

        .batch-select:hover {
          border-color: #15966c;
        }

        .batch-select:focus {
          border-color: #15966c;
          box-shadow: 0 0 0 3px rgba(21, 150, 108, 0.1);
        }


        /* PDF Link */

        .report-link {
          display: inline-flex;
          align-items: center;
          gap: 9px;
          color: #13875f;
          font-size: 13px;
          font-weight: 600;
          text-decoration: none;
        }

        .report-link:hover {
          color: #0b6747;
        }

        .pdf-icon {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 27px;
          height: 30px;
          border-radius: 4px;
          background: #e93535;
          color: #ffffff;
          font-size: 8px;
          font-weight: 700;
        }

        .arrow {
          font-size: 16px;
          transition: transform 0.2s ease;
        }

        .report-link:hover .arrow {
          transform: translateX(2px);
        }

        .footer-bottom-menu{
            list-style: none;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            margin: 0;
        }
        .footer-bottom-menu li{
            margin: 0 8px;
        }
        .footer-bottom-menu li a{
            color:#1a1a1a;
        }
        .footer-bottom-menu li a:hover{
            border-bottom: 1px solid #1a1a1a;
        }
        /* ========================================
           Responsive
        ======================================== */

        @media (max-width: 768px) {

          .batch-section {
            padding: 20px;
            border-radius: 14px;
          }

          .batch-header h2 {
            font-size: 20px;
          }

          .batch-header p {
            font-size: 13px;
          }

          .batch-table th,
          .batch-table td {
            padding: 13px 14px;
          }
        }


    /* =========================
       RESPONSIVE
    ========================== */
    @media (max-width: 1300px) {
     .site-body{
/*        padding: 0 15px;*/
     }
    }

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

      .hero {
        text-align: center;
        padding: 30px 15px;
      }
      .hero .verification-card{
        padding: 0;
        border: none;
      }
      .hero p {
        margin-left: auto;
        margin-right: auto;
      }

      .hero-buttons {
        justify-content: center;
      }
    .product-bottom{
        flex-direction: column;
      }
     select.report-btn{
        text-align: center;
     } 

    }

    @media (max-width: 767px) {
        .site-brand img{
            max-width: 200px;
        }

        .verification-wrap{
            padding-block:1rem;
        }
      .site-header{
        gap: 0;
      }

      .hero h1 {
        font-size: 25px;
      }

      .product-grid {
        grid-template-columns: 1fr;
      }

      .features {
        grid-template-columns: 1fr;
      }

      .section-head {
        display: block;
      }
      .hamburger {
        display: flex;
      }

      header > .header-menu {
        display: none;
      }
      /* Slide-in drawer */

      .main-menu {
        position: fixed;
        top: 0;
        right: 0;
        width: 88%;
        height: 0;
        max-width: 320px;
        background: #FFF9D8;
        box-shadow: -10px 0 30px rgba(0,0,0,0.15);
        transform: translateX(300%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1050;
        overflow-y: auto;
      }

      .site-actions nav.main-menu.active {
        transform: translateX(0);
        position: fixed;
        height: 100%;
        padding: 90px 15px 30px;
      }

      .mobile-menu .header-menu {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .main-menu .header-menu > li {
        width: 100%;
        margin: 10px 0;
      }

      .main-menu .header-menu > li > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 4px;
        color: #271700;
        text-decoration: none;
        font-weight: 600;
      }

      .main-menu .dropmenu svg {
        transition: transform 0.3s ease;
      }

      .main-menu li.open > .dropmenu svg {
        transform: rotate(180deg);
      }

      /* Submenu as accordion */

      .site-actions nav ul.header-menu ul.submenu {
        list-style: none;
        padding: 0;
        margin: 0 0 20px;
        overflow: hidden;
        transition: max-height 0.35s ease;
        width: 100%;
        padding: 5px;
        position: relative;
        top: inherit;
      }

      .main-menu .submenu a {
        display: block;
        padding: 8px 4px;
        color: #5a4a30;
        text-decoration: none;
        font-size: 14px;
      }
      .site-action-primary{
        justify-content: center !important;
      }
      .site-actions nav ul.header-menu li a.site-action-primary {
        margin-top: 20px;
      }
      .banner-list li{font-size: 12px;}
      .verification-card form{flex-wrap: wrap;}
      .input-width, .verification-wrap .btn-dark{width: 100%}
      .hero .col-lg-4 .img-fluid{max-width: 125px;}
      .tredmark{margin: 20px 0;padding-bottom: 10px;font-size: 16px;}
      .verification-title{font-size: 20px;}
      .footer-inner{justify-content: center; gap: 15px;}
    }



/* =====================================================
About page — every rule is scoped to #about
===================================================== */

#about {
  --navy: #111e34;
  --ink: #20251f;
  --muted: #59616b;
  --gold: #c19b48;
  --line: #e6e2d7;
  --cream: #fbf8ef;
  --paper: #fff;

  color: var(--ink);
  background: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.65;
}

#about * { box-sizing: border-box; }

#about a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
}

#about a,
#about summary { -webkit-tap-highlight-color: transparent; }

#about a:focus-visible,
#about summary:focus-visible {
  outline: 3px solid #236aae;
  outline-offset: 5px;
}

#about p { margin: 0 0 18px; }

#about h2 {
  font-size: 35px;
  line-height: 1.2;
  letter-spacing: -.8px;
  color: var(--navy);
  margin: 0 0 18px;
}

#about h3 {
  font-size: 18px;
  line-height: 1.4;
  color: var(--navy);
  margin: 0 0 12px;
}

/* ---------- layout helpers ---------- */

#about .wrap { max-width: 1300px; margin: auto; padding: 0 28px; }
#about .section { padding: 40px 0; }

#about .eyebrow {
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 700;
  text-transform: uppercase;
  color: #816123;
  margin: 0 0 18px;
}

#about .inline-image img { position: relative; }
#about .tagline{margin: 0;}
/* ---------- hero ---------- */

#about .hero {
  padding: 40px 0;
  background: radial-gradient(ellipse at 95% 20%, #f7edd44d, transparent 60%);
}

#about .hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 70px;
  align-items: center;
}

#about .tredmark { text-align: left; font-size: 28px; }

#about .lead {
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 540px;
}

#about .hero .lead strong { color: var(--navy); }

#about .tiny { font-size: 12px; color: var(--muted); margin-top: 18px; }

#about .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 28px;
}

#about .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 11px 22px;
  background: linear-gradient(125deg, #edda9b, #dab354);
  border: 1px solid #d3b765;
  border-radius: 5px;
  text-decoration: none !important;
  color: #171b20;
  font-weight: 700;
  font-size: 14px;
}

#about .transition-note {
  border-left: 3px solid var(--gold);
  padding: 15px 18px;
  background: var(--cream);
  font-size: 13px;
  color: var(--muted);
  margin-top: 25px;
}

#about .transition-note strong { color: var(--navy); }
#about .transition-note p { margin: 5px 0 0; }

/* ---------- package anatomy ---------- */

#about .anatomy {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 28px 20px;
}

#about .anatomy-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 24px;
}

#about .anatomy-head b { color: #84631f; }

#about .diagram {
  display: grid;
  grid-template-columns: 185px 1fr;
  gap: 22px;
  align-items: center;
}

#about .package-fields { margin: 14px 0 0; }

#about .field-list { display: grid; gap: 21px; font-size: 12px; line-height: 1.5; }
#about .field-list b { display: block; color: var(--navy); font-size: 13px; }
#about .field-list span { color: var(--muted); }

#about .figure-note { font-size: 11px; line-height: 1.5; color: var(--muted); margin: 18px 0 0; }

/* ---------- why it exists ---------- */

#about .intro { max-width: 710px; color: var(--muted); }

#about .unique-callout {
  margin: 34px 0 10px;
  padding: 30px 34px;
  border: 1px solid #d8bc7e;
  border-left: 5px solid var(--gold);
  background: linear-gradient(110deg, #fffdf8, var(--cream));
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: center;
}

#about .unique-callout .mark {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 25px;
  font-weight: 700;
}

#about .unique-callout .eyebrow { margin-bottom: 6px; }
#about .unique-callout h3 { font-size: 25px; margin: 0 0 5px; }
#about .unique-callout p { margin: 0; color: var(--muted); font-size: 14px; }

#about .purpose {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 34px;
  margin-top: 36px;
}

#about .purpose article { border-top: 2px solid #d8bc7e; padding-top: 22px; }

#about .purpose p,
#about .steps p { font-size: 14px; color: var(--muted); }

#about .number {
  font: italic 27px Georgia, serif;
  color: #99712c;
  display: block;
  margin-bottom: 12px;
}

/* ---------- how to verify ---------- */

#about .process { background: var(--cream); border-block: 1px solid var(--line); }

#about .steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 38px;
}

#about .steps article { position: relative; }

#about .steps .number {
  font: 600 12px Arial, sans-serif;
  background: #efe3c5;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  margin-bottom: 18px;
}

#about .section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

#about .section-head .text-link { font-size: 13px; white-space: nowrap; }

/* ---------- what to check ---------- */

#about .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 55px; }

#about .checks { list-style: none; padding: 0; margin: 22px 0; }

#about .checks li {
  border-bottom: 1px solid var(--line);
  padding: 14px 0 14px 25px;
  position: relative;
  font-size: 14px;
}

#about .checks li:before { content: "✓"; position: absolute; left: 0; color: #866421; }

#about .limits { background: #f4f6f8; padding: 32px; border-radius: 10px; }
#about .limits p { font-size: 14px; color: var(--muted); }
#about .limits .eyebrow { color: #576476; }

/* ---------- FAQ ---------- */

#about .faq { border-top: 1px solid var(--line); }
#about .faq-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 70px; }

#about details { border-bottom: 1px solid var(--line); }

#about summary {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  padding: 20px 30px 20px 0;
  cursor: pointer;
  position: relative;
  list-style: none;
}

#about summary::-webkit-details-marker { display: none; }

#about summary:after {
  content: "+";
  position: absolute;
  right: 2px;
  font-size: 21px;
  font-weight: 400;
  top: 14px;
}

#about details[open] summary:after { content: "−"; }
#about details p { font-size: 14px; color: var(--muted); padding-right: 20px; }

/* ---------- help / no-seal ---------- */

#about .help { padding: 0 0 72px; }

#about .help-box {
  background: var(--navy);
  color: white;
  border-radius: 12px;
  padding: 40px 44px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: center;
}

#about .help h2 { color: #cc9300; font-size: 28px; margin-top: 15px; }
#about .help p { font-size: 14px; color: #d0d7e1; margin-bottom: 0; }
#about .help .actions { margin: 0; justify-content: flex-end; }
#about .help .email { color: #efe0b8; overflow-wrap: anywhere; font-size: 13px; }

#about .transition-box {
  border: 1px solid #d8bc7e;
  background: var(--cream);
  padding: 36px 40px;
  border-radius: 10px;
}

#about .transition-box p { max-width: 850px; color: var(--muted); }
#about .transition-box .actions { margin-top: 20px; }

/* =====================================================
   Responsive
   ===================================================== */

@media (max-width: 1024px) {
  #about .hero-grid { gap: 30px; }
  #about .diagram { grid-template-columns: 160px 1fr; gap: 15px; }
  #about .anatomy { padding: 23px 20px; }
  #about .steps { grid-template-columns: 1fr 1fr; }
  .more-mobile{max-width: 300px;}
}

@media (max-width: 767px) {
  #about .wrap { padding: 0 22px; }
  #about .hero { padding: 38px 0; }

  #about .hero-grid,
  #about .facts,
  #about .faq-grid,
  #about .help-box { grid-template-columns: 1fr; gap: 30px; }

  #about .anatomy { max-width: 460px; }
  #about .diagram { grid-template-columns: minmax(135px, 185px) 1fr; }
  #about .section { padding: 30px 0; }
  #about h2 { font-size: 29px; }

  #about .purpose { grid-template-columns: 1fr; gap: 18px; margin-top: 28px; }
  #about .purpose article { padding-top: 18px; }
  #about .purpose .number { float: left; margin-right: 18px; }

  #about .steps { gap: 22px; }
  #about .section-head { align-items: flex-start; flex-direction: column; gap: 0; }
  #about .limits { padding: 25px; }

  #about .help { padding-bottom: 44px; }
  #about .help-box { padding: 30px 26px; }
  #about .help .actions { justify-content: flex-start; }
  #about .transition-box { padding: 26px 24px; }

  #about .unique-callout { grid-template-columns: 1fr; padding: 25px 24px; }
  #about .unique-callout .mark { width: 44px; height: 44px; font-size: 21px; }
  #about .unique-callout h3 { font-size: 22px; }
  #about .tredmark{font-size: 17px; text-align: center;}
  #about .actions{justify-content: center;}
}

@media (max-width: 420px) {
  #about .steps { grid-template-columns: 1fr; }
  #about .diagram { gap: 12px; }
  #about .anatomy { padding: 18px 14px; }
  #about .field-list { font-size: 11px; }
  #about .field-list b { font-size: 12px; }
  #about .tredmark{font-size: 15px;}
  .more-mobile{max-width: 200px;}
}

/*SECCESS MESSAGE*/
/* Common notice style */
.notice-success,
.notice-danger {
    max-width: 520px;
    margin: 0 auto;

    padding: 14px 18px;

    display: flex;
    align-items: center;
    gap: 12px;

    border-radius: 12px;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);

    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 0.5s ease,
        transform 0.5s ease;
}

/* Success */
.notice-success {
    background: #f0fdf8;
    border: 1px solid #9ee7cc;
    color: #075c49;
}

.notice-success::before {
    content: "✓";

    width: 26px;
    height: 26px;
    min-width: 26px;

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

    background: #16866b;
    color: #fff;

    border-radius: 50%;

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

/* Danger */
.notice-danger {
    background: #fff5f5;
    border: 1px solid #f1b4b4;
    color: #8a1f1f;
}

.notice-danger::before {
    content: "!";

    width: 26px;
    height: 26px;
    min-width: 26px;

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

    background: #c0392b;
    color: #fff;

    border-radius: 50%;

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

/* Hide animation */
.notice-success.hide,
.notice-danger.hide {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
}


/* Mobile */
@media (max-width: 576px) {

    .notice-success,
    .notice-danger {
        margin: 0 15px;
        padding: 12px 14px;
        font-size: 13px;
        border-radius: 10px;
    }

    .notice-success::before,
    .notice-danger::before {
        width: 24px;
        height: 24px;
        min-width: 24px;
        font-size: 13px;
    }

}
.modal-body .report-form{
    margin: 0 !important;
}
/*ADMIN PANEL SOME STYLE*/
.concer-area .h2{
    position: relative;
}
.concer-area .h2:after{
    position: absolute;
    content: "";
    width: 40px;
    height: 5px;
    border-radius: 3px;
    background-color: #906827;
    left: 0;
    bottom: -12%;
}
.concer-area .pro-description{
    padding: 10px;
    border-radius: 3px;
    background-color: #f6f2ea;
    margin:20px 0;
}
.concer-area .pt-img{
    background-color: #f5f0e6;
    padding: 10px 3px;
    border-radius: 3px;
}
.concer-area .pt-des{
    background-color: #faf7f2;
    border-radius: 3px;
    padding: 10px 5px;
    margin: 0;
    color: #392102;
    font-size: 15px;
}
.concer-area .col-sm-4{
    font-weight: 600;
}
.concer-area .col-sm-8{
    font-weight: 400;
    margin: 0;
}
.concer-area .pt-des .row{
    margin: 0 0 10px;
    padding: 0 0 10px;
    border-bottom: 1px solid #eae3d8;
}
.concer-area .pt-des .row:last-child{
    border-bottom: none;
    margin: 0;
    padding: 0;
}