/* Consolidated stylesheet extracted from Blade templates */

/* --- welcome.blade.php normalize + small body rule --- */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}a{background-color:transparent}[hidden]{display:none}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{box-sizing:border-box;border:0 solid #e2e8f0}a{color:inherit;text-decoration:inherit}svg,video{display:block;vertical-align:middle}video{max-width:100%;height:auto}.bg-white{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.bg-gray-100{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity))}.border-gray-200{--border-opacity:1;border-color:#edf2f7;border-color:rgba(237,242,247,var(--border-opacity))}.border-t{border-top-width:1px}.flex{display:flex}.grid{display:grid}.hidden{display:none}.items-center{align-items:center}.justify-center{justify-content:center}.font-semibold{font-weight:600}.h-5{height:1.25rem}.h-8{height:2rem}.h-16{height:4rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.leading-7{line-height:1.75rem}.mx-auto{margin-left:auto;margin-right:auto}.ml-1{margin-left:.25rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.ml-4{margin-left:1rem}.mt-8{margin-top:2rem}.ml-12{margin-left:3rem}.-mt-px{margin-top:-1px}.max-w-6xl{max-width:72rem}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.p-6{padding:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.pt-8{padding-top:2rem}.fixed{position:fixed}.relative{position:relative}.top-0{top:0}.right-0{right:0}.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.text-center{text-align:center}.text-gray-200{--text-opacity:1;color:#edf2f7;color:rgba(237,242,247,var(--text-opacity))}.text-gray-300{--text-opacity:1;color:#e2e8f0;color:rgba(226,232,240,var(--text-opacity))}.text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.text-gray-500{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.text-gray-600{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.text-gray-700{--text-opacity:1;color:#4a5568;color:rgba(74,85,104,var(--text-opacity))}.text-gray-900{--text-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--text-opacity))}.underline{text-decoration:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.w-5{width:1.25rem}.w-8{width:2rem}.w-auto{width:auto}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}@media (min-width:640px){.sm\:rounded-lg{border-radius:.5rem}.sm\:block{display:block}.sm\:items-center{align-items:center}.sm\:justify-start{justify-content:flex-start}.sm\:justify-between{justify-content:space-between}.sm\:h-20{height:5rem}.sm\:ml-0{margin-left:0}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pt-0{padding-top:0}.sm\:text-left{text-align:left}.sm\:text-right{text-align:right}}@media (min-width:768px){.md\:border-t-0{border-top-width:0}.md\:border-l{border-left-width:1px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}}@media (prefers-color-scheme:dark){.dark\:bg-gray-800{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.dark\:bg-gray-900{--bg-opacity:1;background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity))}.dark\:border-gray-700{--border-opacity:1;border-color:#4a5568;border-color:rgba(74,85,104,var(--border-opacity))}.dark\:text-white{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.dark\:text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.dark\:text-gray-500{--tw-text-opacity:1;color:#6b7280;color:rgba(107,114,128,var(--tw-text-opacity))}}

body { font-family: 'Nunito', sans-serif; }

/* --- home.blade.php theme and top-bar --- */
:root {
    --text-color: #1a1a1a;
    --accent-color: #0a6c74;
    --bg-color: #f5f2ea;
}

body.home {
    margin: 0;
    font-family: "Georgia", "Times New Roman", serif;
    color: var(--text-color);
    background-color: var(--bg-color);
    background-image: url('/images/donate.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
}

.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px;
    width: calc(100% - 64px);
    max-width: 1100px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(6px);
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(26, 26, 26, 0.12);
}

.brand { font-size: 28px; font-weight: 700; letter-spacing: 0.5px; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6); }
.menu { display: flex; gap: 16px; flex-wrap: wrap; }
.menu a { text-decoration: none; color: var(--text-color); font-weight: 600; border-bottom: 2px solid transparent; padding-bottom: 2px; }
.menu a:hover { border-bottom-color: var(--accent-color); color: var(--accent-color); }

@media (max-width: 900px) {
    .top-bar { padding: 16px 24px; width: calc(100% - 48px); }
    .brand { font-size: 24px; }
}

@media (max-width: 640px) {
    .top-bar { flex-direction: column; align-items: center; gap: 12px; padding: 14px 18px; width: calc(100% - 36px); }
    .menu { width: 100%; justify-content: center; }
}

/* --- dashboard.blade.php styles --- */
:root.dashboard {
    --ink: #0f172a;
    --muted: #475569;
    --surface: #ffffff;
    --border: #e2e8f0;
    --accent: #0ea5a4;
    --accent-dark: #0f766e;
    --wash-1: #f1f5f9;
    --wash-2: #e2e8f0;
}

* { box-sizing: border-box; }

body.dashboard { margin: 0; font-family: "Space Grotesk", sans-serif; color: var(--ink); background: radial-gradient(1200px 600px at 80% -10%, #d1fae5 0%, rgba(209, 250, 229, 0) 60%), linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%); }

    body.dashboard main.admin-main { flex:1; margin-left: 320px }
.page { max-width: 1400px; margin: 0 auto; padding: 32px 20px 60px; }
.header { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.title-block h1 { margin: 0 0 6px 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.title-block p { margin: 0; color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 28px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08); }
.stat-label { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.stat-value { font-size: 24px; font-weight: 700; }
.table-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 18px; box-shadow: 0 18px 32px rgba(15, 23, 42, 0.08); }
.table-wrap { overflow-x: visible; }
table { width: 100%; border-collapse: collapse; min-width: 0; table-layout: auto; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 14px; white-space: normal; word-break: break-word; }
#donations-table thead tr.filters th input { width: 100%; box-sizing: border-box; padding: 6px 8px; font-size: 13px; white-space: normal; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #e0f2f1; color: var(--accent-dark); border: 1px solid #99f6e4; }
.pill.pending { background: #ffedd5; color: #c2410c; border-color: #fdba74; }
.pill.initiated { background: #e0e7ff; color: #4338ca; border-color: #c7d2fe; }
.pill.active { background: #dcfce7; color: #15803d; border-color: #86efac; }
.empty { text-align: center; padding: 48px 16px; color: var(--muted); }
.meta { font-size: 12px; color: var(--muted); margin-top: 10px; }

tbody tr {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

tbody tr:hover td{
    background-color: #f8fafc;
}

.user-details-row {
    background: #f8fafc;
}

.user-details-container {
    padding: 0px 20px;
    border-top: 1px solid var(--border);
}

.user-details-container h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    margin: 5px 0px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.detail-item {
    padding: 14px 16px;
    background: var(--surface);
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04);
    transition: all 0.2s ease;
}

.detail-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.detail-item strong {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin-bottom: 6px;
}
.expand-icon {
    transition: transform 0.2s ease;
    display: inline-block;
    font-size: 12px;
    margin-right: 6px;
    color: var(--muted);
}

tr.expanded .expand-icon {
    transform: rotate(90deg);
}

@media (max-width: 1024px) {
    .table-wrap { overflow-x: auto; }
    table { min-width: 900px; table-layout: auto; }
    th, td { padding: 8px 10px; font-size: 13px; }
}

@media (max-width: 720px) {
    .page { padding: 24px 16px 48px; }
    .title-block h1 { font-size: 22px; }
    table { min-width: 820px; table-layout: auto; }
    th, td { padding: 6px 8px; font-size: 12px; }
}

@media (min-width: 1025px) {
    #donations-table th:nth-child(2), #donations-table td:nth-child(2) { white-space: nowrap; word-break: normal; }
    #donations-table thead tr.filters th:nth-child(2) input { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* --- admin dashboard specific styles moved from admin/dashboard.blade.php --- */
body.dashboard .page { display:flex; gap:24px; width:100%; margin:0; padding:28px 32px; box-sizing:border-box; align-items:flex-start }
/* Push main admin content down so header and toggle don't overlap */
body.dashboard .page { display:flex; gap:24px; width:100%; margin:0; padding:140px 32px 32px; box-sizing:border-box; align-items:flex-start }
body.dashboard aside.admin-sidebar { width:260px; min-width:220px; flex:0 0 260px }
body.dashboard aside.admin-sidebar .sidebar-menu { padding:8px 0; margin:0 }
body.dashboard aside.admin-sidebar .sidebar-menu li { margin:6px 0 }
body.dashboard aside.admin-sidebar .sidebar-menu a { color:var(--ink, #0f172a); text-decoration:none; padding:8px 10px; display:block; border-radius:6px }
body.dashboard aside.admin-sidebar .sidebar-menu a:hover { background:#eef2ff; color:var(--accent-dark, #0f766e) }
body.dashboard aside.admin-sidebar .sidebar-menu a.active { background: #0f172a; color:#fff }
/* Make sidebar fixed so it doesn't move when the page scrolls */
body.dashboard aside.admin-sidebar.table-card {
    position: fixed;
    left: 32px;
    top: 140px;
    width: 260px;
    max-height: calc(100vh - 180px);
    overflow: auto;
    align-self: flex-start;
    z-index: 1100;
}
body.dashboard aside.admin-sidebar.collapsed { transform: translateX(-320px); transition: transform .18s ease; }
body.dashboard aside.admin-sidebar .sidebar-header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px }
body.dashboard .btn-icon { background: transparent; border: 1px solid transparent; padding: 8px 10px; border-radius: 10px; font-size: 18px; cursor: pointer; line-height:1; z-index:1200 }
body.dashboard .btn-icon:hover { background: #eef2ff; border-color: rgba(15,23,42,0.04); }

/* Keep the toggle visible when sidebar is collapsed: fixed position at left edge */
body.dashboard .btn-icon { position: fixed; left: 20px; top: 56px; box-shadow: 0 6px 18px rgba(2,6,23,0.08); }

@media (max-width:900px) {
    body.dashboard .btn-icon { left: 16px; top: 44px }
}

/* Position the toggle near the sidebar when it's visible, and pull it back when sidebar is collapsed */
body.dashboard aside.admin-sidebar + .btn-icon { left: 304px; }
body.dashboard aside.admin-sidebar.collapsed + .btn-icon { left: 20px; }
@media (max-width:900px) {
    body.dashboard .page { flex-direction:column; padding:110px 16px 16px }
    body.dashboard aside.admin-sidebar { position: static; width:100%; transform:none; max-height: none }
    body.dashboard aside.admin-sidebar.collapsed { transform:none }
    body.dashboard main.admin-main { margin-left: 0 }
}
body.dashboard main.admin-main { flex:1; margin-left: 320px }
/* admin-specific table row behavior */
body.dashboard tbody tr { cursor: default; transition: background-color 0.15s ease; }
body.dashboard tbody tr:hover td { background-color: #f8fafc; }

/* Donor page sidebar (scoped to dashboard) */
body.donors .donor-sidebar { width:260px; min-width:220px; flex:0 0 260px }
/* fix donor sidebar placement to match admin layout */
/* Place donor sidebar inside the page flow (left) using sticky so it doesn't overlay content */
body.donors .donor-sidebar.table-card { position: -webkit-sticky; position: fixed; top: 140px; width: 260px; max-height: calc(100vh - 180px); overflow: auto; align-self: flex-start; z-index: 1200 }
body.donors .donor-sidebar .sidebar-menu { padding:8px 0; margin:0; list-style:none }
body.donors .donor-sidebar .sidebar-menu li { margin:8px 0 }
body.donors .donor-sidebar .sidebar-menu a { color:var(--ink, #0f172a); text-decoration:none; padding:8px 10px; display:flex; align-items:center; gap:10px; border-radius:6px }
body.donors .donor-sidebar .sidebar-menu a:hover { background:#eef2ff; color:var(--accent-dark, #0f766e) }
body.donors .donor-sidebar .sidebar-menu a.active { background: #0f172a; color:#fff }
body.donors .donor-sidebar .sidebar-menu .icon { width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; margin-right:6px }
body.donors .donor-sidebar .sidebar-menu .label { display:inline-block }

/* Donor sidebar toggle button (fixed, keeps visible) */
/* Position the toggle inside the page so it's visually next to the sidebar */
body.donors .page { position: relative }
body.donors .btn-icon-donor { position: absolute; left: 292px; top: 16px; background: transparent; border: 1px solid transparent; padding: 9px 11px; border-radius: 10px; font-size: 20px; cursor: pointer; line-height:1; z-index:1300; box-shadow: 0 6px 18px rgba(2,6,23,0.06); }
body.donors .btn-icon-donor:hover { background: #eef2ff; }

/* When sidebar visible, place the toggle near it; when collapsed pull left */
body.donors aside.donor-sidebar + .btn-icon-donor { left: 304px }
body.donors aside.donor-sidebar.collapsed + .btn-icon-donor { left: 20px }
body.donors aside.donor-sidebar.collapsed { transform: translateX(-320px); transition: transform .18s ease; }
/* keep main content unshifted (flex layout): sidebar occupies left flex slot */
body.donors main.admin-main { flex: 1; margin-left: 0 !important; display:flex; flex-direction:column; align-items:flex-start; }
/* keep the table-card left-aligned within main so it sits beside the sidebar */
body.donors main.admin-main > .table-card { margin: 0; max-width: 1100px; width: 100% }
body.donors main.admin-main > .table-card .table-wrap { overflow-x: auto }

/* When sidebar is collapsed, hide it and make main content take full width */
body.donors aside.donor-sidebar.collapsed { display: none !important }
body.donors aside.donor-sidebar.collapsed ~ .btn-icon-donor { left: 16px }
body.donors main.admin-main.collapsed > .table-card { max-width: none; width: calc(100% - 48px); margin: 0; }
@media (max-width: 900px) {
    body.donors main.admin-main.collapsed > .table-card { width: 100%; }
}
body.donors .page > .table-card { margin-left: 0 }
body.donors aside.donor-sidebar.collapsed + .btn-icon-donor { left: 16px }
body.donors aside.donor-sidebar + .btn-icon-donor { left: 292px }
/* ensure page padding aligns with admin layout so sidebar doesn't overlap header */
body.donors .page { padding: 140px 32px 32px }
/* main.admin-main margin handled earlier */
/* Ensure main content (when using main.admin-main) is pushed by the donor sidebar */
body.donors main.admin-main { flex:1; margin-left: 320px !important }
body.donors main.admin-main.collapsed { margin-left: 0 !important }
body.donors aside.donor-sidebar.collapsed ~ main.admin-main { margin-left: 0 !important }
@media (max-width:900px) {
    body.donors .btn-icon-donor { left: 16px; top: 44px }
    body.donors aside.donor-sidebar.table-card { position: static; width:100%; max-height: none }
    body.donors .page > .table-card { margin-left: 0 }
}

/* --- donate.blade.php styles --- */
body.donate { font-family: 'Inter', sans-serif; background: #f6f7fb; margin: 0; padding: 0; }

.form-group {
    margin-bottom: 16px;
}

.form-control {
    width: 100%;
    height: 44px;
    padding: 12px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.donation-wrapper {
    max-width: 560px;
    margin: 40px auto;
    background: #ffffff;
    /* padding: 30px; */
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.form-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.form-row .form-group {
    flex: 1;
    min-width: 200px;
}

.donation-wrapper h2 {
    margin-bottom: 8px;
    font-size: 22px;
    text-align: center;
}

.donation-wrapper p.subtitle {
    text-align: center;
    color: #666;
    font-size: 14px;
    margin-bottom: 25px;
}

.form-group {
    margin-bottom: 16px;
}

label {
    display: block;
    font-size: 13px;
    margin-bottom: 6px;
    color: #333;
    font-weight: 500;
}

input, select {
    width: 100%;
    padding: 11px 12px;
    border-radius: 8px;
    border: 1px solid #dcdcdc;
    font-size: 14px;
}

input:focus, select:focus {
    outline: none;
    border-color: #064e3b;
}

.amount-input {
    position: relative;
    width: 100%;
}

.amount-input span {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #777;
}

.amount-input .currency {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #555;
    pointer-events: none;
}

.amount-input input {
    width: 100%;
    padding: 12px 12px 12px 36px; /* space for ₹ */
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
}

.interval-box {
    display: flex;
    gap: 10px;
}

.interval-box label {
    flex: 1;
    padding: 12px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
}

.interval-box input {
    display: none;
}

.interval-box input:checked + label {
    background: #064e3b;
    color: #fff;
    border-color: #064e3b;
}

.submit-btn {
    width: 100%;
    background: linear-gradient(45deg,#064e3b,#10b981);
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
}

/* Generic small button class used in admin views */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: #0f172a;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}
.btn.btn-primary { background: #0ea5a4; border-color: rgba(0,0,0,0.05); color: #fff }
.btn.btn-danger { background: #ef4444; color: #fff }
.btn:disabled { cursor: not-allowed; opacity: 0.7 }

.submit-btn:hover {
    background: #064e3b;
}

.secure-note {
    text-align: center;
    font-size: 12px;
    color: #777;
    margin-top: 15px;
}

.secure-note span {
    font-weight: 500;
    color: #333;
}

.frequency-group {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.freq-btn {
    height: 44px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.freq-btn:hover {
    border-color: #064e3b;
}

.freq-btn.active {
    /* background: #6366f1; */
    background: linear-gradient(45deg,#064e3b,#10b981);
    color: #fff;
    border-color: #064e3b;
}

.error-text {
    color: #dc3545;
    font-size: 13px;
    margin-top: 4px;
}

.required::after {
content: " *";
color: red;
font-weight: bold;
}
.flash-message { margin-bottom:15px; padding:12px; background:#ffe5e5; color:#b10000; border-radius:6px; }

/* --- payment-options radio styles --- */
.payment-type-wrapper {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}



/* .radio-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #ddd;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s;
    background: #fff;
} */
/* .payment-type-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 10px;
} */

.radio-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #ddd;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s;
    background: #fff;
}


.radio-card:hover {
    border-color: #064e3b;
}

.radio-card input {
    display: none;
}

.radio-circle {
    width: 18px;
    height: 18px;
    border: 2px solid #064e3b;
    border-radius: 50%;
    position: relative;
}

.radio-card input:checked + .radio-circle::after {
    content: "";
    width: 10px;
    height: 10px;
    background: #064e3b;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
}

.radio-card input:checked ~ .radio-text strong {
    color: #064e3b;
}

.radio-text small {
    display: block;
    color: #666;
    font-size: 12px;
}

/* --- success.blade.php styles --- */
body.success { margin: 0; font-family: "Georgia", "Times New Roman", serif; color: var(--text-color); background-color: var(--bg-color); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.card { width: 100%; max-width: 760px; background: rgba(255, 255, 255, 0.9); border-radius: 22px; box-shadow: 0 18px 40px rgba(26, 26, 26, 0.12); padding: 32px 40px; text-align: center; }
.title { margin: 0 0 12px; font-size: 32px; font-weight: 700; letter-spacing: 0.4px; }
.lead { margin: 0 0 12px; font-size: 18px; }
.copy { margin: 0 0 24px; font-size: 16px; color: #444; }
.button { display: inline-block; padding: 12px 24px; background: var(--accent-color); color: #fff; text-decoration: none; border-radius: 999px; font-weight: 600; }
.button:hover { background: #0f7f6a; }
@media (max-width: 640px) { body.success { padding: 16px; } .card { padding: 24px; } .title { font-size: 26px; } .lead { font-size: 16px; } }

/* small utility */
.sr-only { position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* DataTables controls: align length selector and global search on one line */
.dataTables_wrapper div.top {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    display: flex;
    align-items: center;
    gap: 10px;
}
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted);
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input[type="search"] {
    height: 36px; padding: 6px 10px; border-radius: 8px; border: 1px solid #dcdcdc; font-size: 14px; background: #fff;
}
.dataTables_wrapper .dataTables_length { order: 2; margin-left: auto; float: none; }
.dataTables_wrapper .dataTables_filter { order: 1; margin-left: 0; float: none; text-align: left; }

@media (max-width: 720px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter { width: 100%; justify-content: space-between; margin: 6px 0; }
    .dataTables_wrapper .dataTables_filter { margin-left: 0; }
}