/* ── Dark Mode Toggle For Header ──────────────────────────── */
.dark-mode-toggle {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	position: relative;
}

.dark-mode-toggle::after {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	margin-left: var(--space-1);
	border-top-color: transparent;
	border-radius: var(--border-radius-full);
	animation: rotateLoader .8s linear infinite;
	opacity: 0;
	transition: opacity var(--ease-fast);
	backface-visibility: hidden;
}

.dark-mode-toggle.loading::after {
	opacity: 1;
}

@keyframes rotateLoader {
	100% {
		transform: rotate(360deg);
	}
}



/* ----------------------------------------------------------- Global Toast Alerts styles -------------- */

.cd-alert {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(60, 60, 60, 0.9);
    color: #fff;
    padding: 8px;
    border-radius: 8px;
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    font-size: 14px;
    text-align: center;
    width: auto;
    max-width: 90%;
    will-change: transform, opacity;
    pointer-events: none;
}

.cd-alert-bottom {
    bottom: 30px;
    animation: cdFadeInOutBottom 3s forwards;
}

.cd-alert-top {
    top: 30px;
    animation: cdFadeInOutTop 3s forwards;
}

.cd-alert-error { background: rgba(220, 53, 69, 0.9); }
.cd-alert-success { background: rgba(40, 167, 69, 0.9); }

@keyframes cdFadeInOutBottom {
    0% { opacity: 0; transform: translateX(-50%) translateY(20px); }
    10% { opacity: 1; transform: translateX(-50%) translateY(0); }
    90% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(20px); }
}

@keyframes cdFadeInOutTop {
    0% { opacity: 0; transform: translateX(-50%) translateY(-20px); }
    10% { opacity: 1; transform: translateX(-50%) translateY(0); }
    90% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-20px); }
}




/* ── Blog Comments Section ─────────────────────── */
.blog-comments-section {
	margin: 0;
	padding: 16px;
	border-radius: var(--border-radius-md);
	background: var(--bg-card);
}

.blog-comments-section h2 {
	font-size: var(--text-xl);
	margin-bottom: var(--space-4);
	color: var(--text-primary);
}

.blog-comments-container {
	margin-top: var(--space-4);
}

.blog-comment-item {
	padding: var(--space-4) 0;
	border-bottom: var(--border-width) solid var(--border-light);
}

.blog-comment-item:last-child {
	border-bottom: none;
}

.blog-comment-reply {
	margin-left: var(--space-5);
}

.blog-comment-header {
	display: flex;
	justify-content: space-between;
	font-size: var(--text-sm);
	margin-bottom: var(--space-1);
}

.blog-comment-author {
	font-weight: var(--weight-medium);
	color: var(--color-primary);
}

.blog-comment-date {
	color: var(--text-secondary);
	font-size: var(--text-xs);
}

.blog-comment-content {
	margin: var(--space-2) 0;
	line-height: var(--leading-base);
	color: var(--text-body);
}

.blog-comment-actions {
	margin-top: var(--space-1);
}

.blog-comment-reply-btn {
	background: none;
	border: none;
	color: var(--color-primary);
	cursor: pointer;
	font-size: var(--text-xs);
	padding-left: var(--space-2);
	text-decoration: underline dashed;
}

.blog-comment-reply-btn:hover {
	color: var(--color-primary-active);
}

/* ── Load More ─────────────────────────────────── */
.load-more-cmt-btn {
	background: none;
	color: var(--color-primary);
	border: var(--border-width) dotted var(--color-primary);
	padding: .6em 1.2em;
	border-radius: var(--border-radius-sm);
	font-size: var(--text-sm);
	cursor: pointer;
	transition: background var(--ease-fast), color var(--ease-fast), transform var(--ease-fast);
}

.load-more-cmt-btn:hover {
	background: var(--color-primary);
	color: var(--text-white);
	transform: translateY(-1px);
}

.load-more-btn-cont {
	text-align: center;
	margin-top: var(--space-4);
}

/* ── Replying To Banner ────────────────────────── */
.blog-comment-replying-to {
	display: none;
	background: var(--color-primary-soft);
	padding: var(--space-2);
	margin-bottom: var(--space-2);
	align-items: center;
	justify-content: space-between;
}

.blog-comment-replying-to.active {
	display: flex;
}

.blog-comment-cancel-reply {
	background: none;
	border: none;
	color: #c00;
	cursor: pointer;
	font-weight: var(--weight-bold);
	transition: color var(--ease-fast);
}

.blog-comment-cancel-reply:hover {
	color: #900;
}

/* ── Comment Form ──────────────────────────────── */
.blog-comment-form-container {
	margin: var(--space-5) 0;
}

.blog-comment-form-container h2 {
	font-size: var(--text-xl);
	margin-bottom: var(--space-4);
	color: var(--text-primary);
}

#blog-comment-form {
	padding: 0 var(--space-2);
}

.blog-comment-form-group {
	margin-bottom: var(--space-4);
}

.blog-comment-form-group label {
	display: block;
	margin-bottom: var(--space-2);
	font-weight: var(--weight-semibold);
	color: var(--text-body);
}

.blog-comment-form-group input,
.blog-comment-form-group textarea {
	width: 100%;
	padding: var(--space-3);
	border: var(--border-width) solid var(--border-input);
	font-size: var(--text-sm);
	border-radius: var(--border-radius-sm);
	resize: vertical;
}

.blog-comment-form-group input:focus,
.blog-comment-form-group textarea:focus {
	outline: none;
	border-color: var(--border-focus);
}

.blog-comment-form-group textarea {
	min-height: 200px;
}

.blog-comment-remember {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	margin-bottom: var(--space-4);
}

.blog-comment-submit-btn {
	background: var(--color-primary);
	color: var(--text-white);
	border: none;
	padding: var(--space-3) var(--space-8);
	font-size: var(--text-sm);
	cursor: pointer;
	border-radius: var(--border-radius-sm);
	transition: transform var(--ease-fast), background var(--ease-fast);
}

.blog-comment-submit-btn:hover {
	transform: translateY(-1px);
	background: var(--color-primary-hover);
}

.blog-comment-submit-btn:disabled {
	background: var(--text-muted);
	cursor: not-allowed;
}

/* ── Alerts ────────────────────────────────────── */
.blog-comment-alert {
	padding: var(--space-2);
	border-radius: 0;
	margin-bottom: var(--space-4);
	display: none;
}

.blog-comment-alert.show {
	display: block;
}

.blog-comment-alert-success {
	background: #dff0d8;
	color: #3c763d;
	border: var(--border-width) solid #d6e9c6;
}

.blog-comment-alert-error {
	background: #f2dede;
	color: #a94442;
	border: var(--border-width) solid #ebccd1;
}

/* ── Spinner ───────────────────────────────────── */
.blog-comment-loading-spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid var(--border-light);
	border-top: 2px solid var(--color-primary);
	border-radius: var(--border-radius-full);
	animation: spin 1s linear infinite;
	margin-left: var(--space-2);
}

.blog-comment-loading-spinner.active {
	display: inline-block;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}


/* ── Related Posts ─────────────────────────────── */
.related-posts {
	margin: var(--space-4) 0;
	font-family: var(--font-ui);
}

.related-posts h2 {
	font-size: var(--text-xl);
	margin-bottom: var(--space-4);
}

.related-post {
	display: flex;
	gap: var(--space-4);
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-4);
	border-bottom: var(--border-width) solid var(--border-light);
}

.related-post img {
	width: 25%;
	height: auto;
	object-fit: cover;
}

.related-post-info {
	width: 75%;
}

.related-post-title {
	color: var(--text-body);
	font-weight: var(--weight-semibold);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.related-post-info .meta {
	margin-top: var(--space-2);
	font-size: var(--text-xs);
	color: var(--color-primary);
	font-weight: var(--weight-semibold);
}




/* badge css */
.badge {
	display: inline-block;
	line-height: 1;
	padding: .25rem .6rem;
	border-radius: 999px;
	font-weight: 600;
	font-size: .85rem;
	box-sizing: border-box;
	vertical-align: middle;
	user-select: none;
	transition: transform .14s ease;
	will-change: transform;
	cursor: default
}

.badge--free {
	background: #16a34a;
	background: linear-gradient(180deg, #16a34a, #059669);
	color: #fff;
	animation: pulse 1.8s infinite ease-in-out;
	will-change: transform
}

.badge--free::before {
	content: "★";
	display: inline-block;
	margin-right: .25rem;
	font-size: .9em;
	transform: translateY(-1px);
	opacity: .95
}

@keyframes pulse {

	0%,
	100% {
		transform: scale(1)
	}

	50% {
		transform: scale(1.06)
	}
}

/* ── Newsletter Popup ──────────────────────────── */
.nws-popup {
	position: fixed;
	bottom: 0;
	width: 100%;
	max-height: 70vh;
	background: var(--gradient-soft);
	box-shadow: 0 -4px 20px rgba(0, 0, 0, .15);
	border-top-left-radius: var(--border-radius-lg);
	border-top-right-radius: var(--border-radius-lg);
	transition: transform .4s cubic-bezier(.25, .46, .45, .94);
	z-index: var(--z-sidebar);
	overflow: hidden;
	transform: translateY(100%);
}

.nws-popup.nws-show {
	transform: translateY(0);
}

.nws-hidden {
	display: none !important;
}

.nws-popup-content {
	padding: var(--space-5);
	height: auto;
	min-height: 200px;
	overflow-y: auto;
	color: var(--text-body);
}

.nws-illustration {
	text-align: center;
	margin-bottom: 0;
}

.nws-illustration img {
	width: 70%;
	height: auto;
	opacity: .8;
	margin: 0 auto;
}

.nws-popup h2 {
	margin: 0 0 var(--space-1);
	color: var(--color-secondary);
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
	text-align: center;
}

.nws-popup p {
	margin: 0 0 var(--space-2);
	color: var(--text-muted);
	text-align: center;
	font-size: var(--text-sm);
}

/* ── Form ──────────────────────────────────────── */
.nws-form input {
	width: 100%;
	padding: var(--space-3);
	margin: var(--space-2) 0;
	border: 2px solid var(--border-light);
	border-radius: var(--border-radius-sm);
	font-size: var(--text-base);
	transition: border-color var(--ease-normal);
	box-sizing: border-box;
}

.nws-form input:focus {
	outline: none;
	border-color: var(--border-focus);
}

/* ── Buttons ───────────────────────────────────── */
.nws-btn {
	width: 100%;
	padding: var(--space-3);
	margin: var(--space-2) 0;
	border: none;
	border-radius: var(--border-radius-sm);
	font-size: var(--text-base);
	font-weight: var(--weight-bold);
	cursor: pointer;
	transition: transform var(--ease-fast), box-shadow var(--ease-fast);
}

.nws-btn-primary {
	background: var(--gradient-primary);
	color: var(--text-white);
}

.nws-btn-primary:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}

.nws-btn-footer {
	display: block;
	max-width: 60%;
	margin: 0 auto;
}

.nws-btn-success {
	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
	color: var(--text-white);
}

.nws-btn-success:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(16, 185, 129, .3);
}

/* ── Close ─────────────────────────────────────── */
.nws-close {
	float: right;
	background: none;
	border: none;
	font-size: var(--text-lg);
	color: var(--text-faint);
	cursor: pointer;
	padding: var(--space-1);
	border-radius: var(--border-radius-full);
	transition: background var(--ease-normal);
}

.nws-close:hover {
	background: var(--bg-subtle);
}

.nws-success-message,
.nws-error-message {
	text-align: center;
	margin-top: var(--space-5);
	padding: var(--space-4);
	border-radius: var(--border-radius-sm);
}

.nws-success-message {
	background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
	color: #065f46;
	border: var(--border-width) solid #a7f3d0;
}

.nws-error-message {
	background: #fee2e2;
	color: #dc2626;
	border: var(--border-width) solid #fecaca;
}

.nws-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--bg-overlay);
	z-index: var(--z-overlay);
}

/* ── Responsive ────────────────────────────────── */
@media (max-width: 480px) {
	.nws-popup {
		left: 0;
		border-top-left-radius: 28px;
		border-top-right-radius: 28px;
	}

	.nws-popup.nws-show {
		transform: translateY(0);
	}
}

@media (min-width: 481px) {
	.nws-popup {
		left: 50%;
		width: 90%;
		max-width: 400px;
		transform: translateX(-50%) translateY(100%);
	}

	.nws-popup.nws-show {
		transform: translateX(-50%) translateY(0);
	}
}



/* ── Push Subscription Popup ───────────────────── */
.push-popup {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, background 0.3s ease;
}

.push-popup.show {
    opacity: 1;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: all;
}

/* ── Card ───────────────────────────────────────────────────────── */
.push-popup-content {
    display: flex;
    align-items: center;
    position: relative;
    background: var(--bg-card);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    max-width: 480px;
    width: 95%;
    height: 120px;
    overflow: hidden;
    transform: translateY(16px) scale(0.97);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.push-popup.show .push-popup-content {
    transform: translateY(0) scale(1);
}

/* ── Icon block ─────────────────────────────────────────────────── */
.push-popup-icon {
    flex: 1;
    background: linear-gradient(135deg, #ff6b35, #ff9f1c);
    padding: var(--space-2);
    height: 100%;
    object-fit: contain;
}

/* ── Text block ─────────────────────────────────────────────────── */
.push-popup-text-group {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-2);
    position: relative;
}

/* ── Close button ───────────────────────────────────────────────── */
.pushClose {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 1;
    background: none;
    border: none;
    font-size: var(--text-base);
    color: var(--text-faint);
    cursor: pointer;
    transition: color var(--ease-fast);
}

.pushClose:hover {
    color: #ff6b35;
}

/* ── Text ───────────────────────────────────────────────────────── */
.push-popup-title {
    margin: 0 0 var(--space-1);
    font-size: var(--text-md);
    color: var(--text-primary);
    font-weight: var(--weight-semibold);
}

.push-popup-text {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* ── Buttons ────────────────────────────────────────────────────── */
.push-popup-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.push-popup-subscribe {
    background: linear-gradient(90deg, #ff6b35, #ff9f1c);
    color: var(--text-white);
    border: none;
    padding: var(--space-2) var(--space-6);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    transition: transform var(--ease-fast), background 0.2s ease;
}

.push-popup-subscribe:hover {
    transform: translateY(-1px);
    background: linear-gradient(90deg, #ff5c1c, #ff851c);
}

/* ── Success bubble Toast for push ─────────────────────────────────────────────── */
.success-bubble {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: #1db954;
    color: #fff;
    padding: var(--space-2) var(--space-5);
    border-radius: var(--border-radius-sm);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    z-index: var(--z-modal);
    opacity: 1;
    transition: opacity 0.3s ease;
}

.success-bubble.fade-out {
    opacity: 0;
}




/* ── Social Popup ──────────────────────────────── */
.s-p {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%) translateX(0);
	background: var(--bg-card);
	border-radius: 15px 0 0 15px;
	box-shadow: -2px 0 10px rgba(0, 0, 0, .08);
	transition: transform var(--ease-normal);
	z-index: var(--z-overlay);
	display: flex;
	border: var(--border-width) solid var(--border-light);
	-webkit-font-smoothing: antialiased;
}

.s-p.c {
	transform: translateY(-50%) translateX(180px);
}

.s-c {
	width: 180px;
	padding: var(--space-4);
}

.s-t {
	height: 100%;
	background: transparent;
	border: 0;
	padding: var(--space-1);
	border-radius: 15px 0 0 15px;
	cursor: pointer;
	display: flex;
	align-items: center;
	font-size: var(--text-md);
	color: var(--text-muted);
}

.s-t::before {
	content: '▶';
	display: block;
	transition: transform var(--ease-normal);
	padding: var(--space-1) 0 0 var(--space-1);
}

.s-p.c .s-t::before {
	transform: rotate(180deg);
}

.s-h {
	font-weight: var(--weight-semibold);
	margin: 0 0 var(--space-3);
	text-align: center;
	color: var(--text-body);
	font-size: var(--text-md);
}

.s-b {
	display: flex;
	align-items: center;
	padding: var(--space-2) var(--space-3);
	margin-bottom: var(--space-2);
	border-radius: var(--border-radius-sm);
	text-decoration: none;
	color: var(--text-white);
	font-weight: var(--weight-medium);
	transition: transform var(--ease-fast);
}

.s-b:hover {
	transform: translateY(-2px);
}

.wa {
	background: #0F783F;
}

.tg {
	background: #0078b5;
}

.s-b svg {
	margin-right: var(--space-2);
	width: 20px;
	height: 20px;
}

@media (max-width: 768px) {
	.s-p {
		transform: translateY(-50%) translateX(0) scale(.9);
	}

	.s-p.c {
		transform: translateY(-50%) translateX(160px) scale(.9);
	}

	.s-c {
		width: 160px;
		padding: var(--space-3);
	}
}



/* ── Global Pagination UI ────────────────────────────────── */
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-2);
	margin: var(--space-10) 0;
	flex-wrap: wrap;
}

.pagination a,
.pagination span {
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-sm);
	background: var(--bg-card);
	border: var(--border-width) solid var(--border-default);
	text-decoration: none;
	color: var(--text-body);
	transition: background var(--ease-fast), color var(--ease-fast), border-color var(--ease-fast);
	border-radius: 0;
}

.pagination a:hover,
.pagination .current {
	background: var(--color-primary);
	color: var(--text-white);
	border-color: var(--color-primary);
}

.pagination .disabled,
.pagination span:not(.current) {
	color: var(--text-secondary) !important;
	background: var(--bg-subtle) !important;
	border-color: var(--border-light) !important;
	opacity: 1;
	text-shadow: 0 0 1px rgba(0, 0, 0, .05);
	pointer-events: none;
}


/* ─────────────────────────────────────────
   FAQ SECTION
───────────────────────────────────────── */

.faq {
    max-width: var(--container-sm);
    margin: 10px auto;
    padding: 16px;
}

.faq-header h2 {
    text-align: center;
}

.faq a {
    text-decoration: underline;
}


/* ─────────────────────────────────────────
   FAQ ITEM
───────────────────────────────────────── */

.faq-item {
    margin-bottom: var(--space-4);

    background: var(--bg-card);

    border: var(--border-width) solid var(--border-light);
    border-radius: var(--card-radius);

    box-shadow: var(--shadow-xs);

    overflow: hidden;

    transition:
        border-color var(--ease-normal),
        box-shadow var(--ease-normal),
        background var(--ease-normal),
        transform var(--ease-fast);
}

.faq-item:hover {
    background: var(--bg-card-hover);
    box-shadow: var(--shadow-sm);
}

.faq-item[open] {
    border-color: var(--border-focus);
    box-shadow: var(--shadow-md);
}


/* ─────────────────────────────────────────
   FAQ SUMMARY
───────────────────────────────────────── */

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);

    padding: var(--space-5);

    cursor: pointer;

    list-style: none;
    outline: none;
    user-select: none;

    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--letter-tight);

    color: var(--text-primary);

    transition:
        color var(--ease-fast),
        background var(--ease-fast);
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '+';

    flex-shrink: 0;

    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    border-radius: var(--border-radius-full);

    background: var(--color-primary-soft);
    color: var(--color-primary);

    font-size: var(--text-lg);
    font-weight: var(--weight-medium);

    transition:
        transform var(--ease-normal),
        background var(--ease-normal),
        color var(--ease-normal);
}

.faq-item[open] summary {
    color: var(--color-primary);
}

.faq-item[open] summary::after {
    content: '−';

    transform: rotate(180deg);

    background: var(--color-primary);
    color: var(--text-white);
}


.faq-content {
    padding:
        0
        var(--space-5)
        var(--space-5);

    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: var(--leading-loose);

    color: var(--text-secondary);

    animation: faqSlideDown var(--ease-normal);
}

.faq-content p:last-child {
    margin-bottom: 0;
}


@keyframes faqSlideDown {

    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}



/* ─────────────────────────────────────────
   FOOTER UI
───────────────────────────────────────── */

footer.site-footer {
  position: relative;
  background: var(--gradient-dark);
  padding-top: 70px;
  overflow: hidden;
}

.footer-wave-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 70px;
  pointer-events: none;
}

.footer-wave-top svg {
  display: block;
  width: 100%;
  height: 100%;
}

footer.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 15% 60%, rgba(192,132,252,0.13) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 85% 40%, rgba(124,58,237,0.15) 0%, transparent 70%);
  pointer-events: none;
}

footer.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

/* ── INNER LAYOUT ── */
.footer-inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-lg);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-8);
}

/* ── TOP ROW ── */
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Brand */
.footer-brand-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-brand {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.footer-tagline {
  max-width: 320px;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
}

/* Footer Nav */
.footer-top nav li:hover {
  background: none;
}

.footer-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  align-items: center;
}

.footer-nav a {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  position: relative;
  transition: color var(--ease-normal);
}


.footer-nav a:hover {
 color: #ffffff;
}

/* ── BOTTOM ROW ── */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-6);
}

.footer-copy {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.01em;
}

/* Developer credit badge */
.footer-credit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: #ffffff;
  text-decoration: none;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--border-radius-full);
  background: rgba(255, 255, 255, 0.12);
  transition: all var(--ease-normal);
}

.footer-credit svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.footer-credit:hover {
  scale: 0.95;
  color: #ffffff; 
}

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  footer.site-footer {
    padding-top: 50px;
  }

  .footer-wave-top {
    height: 50px;
  }

  .footer-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-nav ul {
    gap: var(--space-2) var(--space-4);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: center;
  }
}




/* ─── SCROLL TO TOP COMPONENT ───────────────────────────── */
.go-to-top {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  width: 52px;
  height: 52px;
  border-radius: var(--border-radius-full);
  background-color: var(--bg-card);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Initial hidden state */
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: all var(--ease-normal);
  z-index: var(--z-overlay);
  
  /* Tap highlight for mobile */
  -webkit-tap-highlight-color: transparent;
}

.go-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.go-to-top:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  background-color: var(--bg-card-hover);
}

/* SVG Positioning */
.go-to-top-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg); 
}

/* Track & Progress rings */
.go-to-top-track {
  fill: none;
  stroke: var(--border-light);
  stroke-width: 3px;
}

.go-to-top-progress {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 3px;
  stroke-linecap: round;  
  will-change: stroke-dashoffset; 
}

/* Arrow Icon */
.go-to-top-icon {
  width: 20px;
  height: 20px;
  fill: var(--color-primary);
  z-index: var(--z-base);
  transition: transform var(--ease-normal);
}

.go-to-top:hover .go-to-top-icon {
  transform: translateY(-2px);
}