/* assets/css/design-system.css */

/* Base Tokens */
:root {
    --bg-body: #161B22;
    --bg-deep: #0D1117;
    --bg-card: #1F1F1F;
    --bg-card-hover: #282828;
    --text-heading: #FFFFFF;
    --text-body: rgba(255, 255, 255, 0.65);
    --primary: #A2FF00;
    --primary-dim: rgba(162, 255, 0, 0.08);
    --border: rgba(255, 255, 255, 0.10);
    --font-heading: 'DM Sans', sans-serif;
    --font-body: 'Inter', sans-serif;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Typography Overrides */
body {
    background: var(--bg-body);
    color: var(--text-body);
    font-family: var(--font-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-heading);
    font-family: var(--font-heading);
    font-weight: 700;
}

/* Subtle Film Grain Overlay */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9999;
}

/* Animated Drop-in Background Lines */
.bg-lines {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.bg-lines span {
    position: absolute;
    top: 0;
    width: 1px;
    height: 0;
    background: rgba(255, 255, 255, 0);
    animation: lineGrow 1.5s var(--ease) forwards;
}

.bg-lines span:nth-child(1) {
    left: 10%;
    animation-delay: 0.1s
}

.bg-lines span:nth-child(2) {
    left: 20%;
    animation-delay: 0.15s
}

.bg-lines span:nth-child(3) {
    left: 30%;
    animation-delay: 0.2s
}

.bg-lines span:nth-child(4) {
    left: 40%;
    animation-delay: 0.25s
}

.bg-lines span:nth-child(5) {
    left: 50%;
    animation-delay: 0.3s
}

.bg-lines span:nth-child(6) {
    left: 60%;
    animation-delay: 0.35s
}

.bg-lines span:nth-child(7) {
    left: 70%;
    animation-delay: 0.4s
}

.bg-lines span:nth-child(8) {
    left: 80%;
    animation-delay: 0.45s
}

.bg-lines span:nth-child(9) {
    left: 90%;
    animation-delay: 0.5s
}

@keyframes lineGrow {
    to {
        height: 100%;
    }
}

/* Project Filter Navigation */
.project-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-bottom: 50px;
    list-style: none;
    padding: 0;
}

.project-filter li {
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-body);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 8px 24px;
    border: 1px solid var(--border);
    border-radius: 30px;
    transition: all 0.4s var(--ease);
}

.project-filter li:hover,
.project-filter li.current {
    color: var(--bg-deep);
    background: var(--primary);
    border-color: var(--primary);
}

/* Custom Counter Units */
.about-counter-wrap .counter-item .count-text.b:after {
    content: 'B';
}

.about-counter-wrap .counter-item .count-text.m:after {
    content: 'M';
}

.about-counter-wrap .counter-item .count-text.x:after {
    content: 'x';
}

/* Counter Item Shape Adjustments */
.about-counter-wrap .counter-item {
    padding-left: 25px;
    padding-right: 25px;
}

/* ============================================================
   Sticky Glassmorphism Navbar  (production version)
   Uses position:fixed + dynamic spacer because .page-wrapper has
   overflow:hidden which silently breaks position:sticky.
   The .scrolled class is added by initStickyGlassNavbar() in
   assets/js/script.js once scrollY > 50px.
   ============================================================ */
header.main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
    background-color: rgba(20, 20, 20, 0.45);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    transition: background-color 0.5s ease, box-shadow 0.5s ease;
}

header.main-header .header-upper {
    padding-top: 18px;
    padding-bottom: 18px;
    transition: padding 0.5s ease;
}

header.main-header.scrolled {
    background-color: rgba(8, 8, 8, 0.88);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.40);
}

header.main-header.scrolled .header-upper {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Spacer so page content isn't hidden behind the fixed navbar.
   Exact value is set dynamically by initStickyGlassNavbar() via --navbar-spacer. */
body>.page-wrapper {
    padding-top: var(--navbar-spacer, 147px);
}

/* ============================================================
   .theme-btn — primary CTA
   The body.home-two selectors are required to outrank the
   `@media (min-width: 992px) { .home-two .theme-btn }` rule
   that lives in vendor style.css. Remove that media-query
   block in style.css if you want to shorten this selector list.
   ============================================================ */
.theme-btn,
a.theme-btn,
body .home-two .theme-btn,
body .home-two a.theme-btn,
body.home-two .theme-btn,
body.home-two a.theme-btn {
    display: inline-flex;
    padding: 10px 35px;
    margin-left: 26px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
    text-decoration: none;
    background-color: rgb(162, 255, 0);
    color: rgb(7, 7, 7);
    border-radius: 15px;
    border: none;
    cursor: pointer;
    position: relative;
    transition: all 0.5s ease;
}

.theme-btn:hover,
a.theme-btn:hover,
body .home-two .theme-btn:hover,
body.home-two .theme-btn:hover {
    opacity: 0.9;
}

/* ============================================================
   Footer logo alignment
   - Mobile (<768px): center the footer logo within its column.
   (Desktop alignment relies on Bootstrap container defaults —
   prior -15px shift was removing alignment, not adding it.)
   ============================================================ */
@media (max-width: 767.98px) {

    .footer-widget.widget_logo,
    .footer-widget.widget_logo .logo,
    .footer-widget.widget_logo .logo-outer {
        text-align: center !important;
    }

    .footer-widget.widget_logo .logo,
    .footer-widget.widget_logo .logo-outer {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .footer-widget.widget_logo .logo img {
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Project Card Hover (Neon Gradient) from Design System */
.card-demo {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 4/5;
    border-radius: 8px;
    margin-bottom: 30px;
}

.card-demo-bg {
    position: absolute;
    inset: 0;
    transition: transform 0.5s var(--ease);
    background-size: cover;
    background-position: center;
}

.card-demo:hover .card-demo-bg {
    transform: scale(1.05);
}

.card-demo::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(180deg, rgba(162, 255, 0, 0) 0%, rgba(162, 255, 0, 0.95) 100%);
    z-index: 2;
    opacity: 0;
    transition: opacity 0.5s var(--ease);
}

.card-demo:hover::before {
    opacity: 1;
}

.card-demo-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2rem;
    z-index: 3;
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.5s var(--ease);
}

.card-demo:hover .card-demo-info {
    opacity: 1;
    transform: translateY(0);
}

.card-demo-info h4 {
    color: var(--bg-deep);
    font-size: 1.25rem;
    font-family: var(--font-heading);
    margin-bottom: 5px;
}

.card-demo-info p {
    color: rgba(7, 7, 7, 0.7);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
}

/* ============================================================
   Column Width Overrides for Skill Area and Layout
   Explicit widths for .col-8 and .col-4 to ensure
   consistent sizing across all screen sizes
   ============================================================ */
.col-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
    width: 66.666667%;
}

.col-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    width: 33.333333%;
    image-rendering: bottom;
}

/* Contact Form Button Alignment Fix
   Ensures button takes full width and removes conflicting margin
   ============================================================ */
.contact-form-two .theme-btn {
    margin-left: 0 !important;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Contact section layout alignment */
.contact-two-content .arrow {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure form group spacing is consistent */
.contact-form-two .form-group {
    position: relative;
    margin-bottom: 25px;
}

.contact-form-two .form-group:last-of-type {
    margin-bottom: 0;
}

/* Fix contact form icon vertical alignment */
.form-style-one .form-group .for-icon,
.contact-form-two .form-group .for-icon {
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0 !important;
}

/* ============================================================
   Responsive adjustments for mobile devices
   ============================================================ */

/* Mobile: Ensure proper button sizing on small screens */
@media (max-width: 768px) {
    .contact-form-two .theme-btn {
        min-height: 48px;
        font-size: 14px;
        padding: 12px 20px;
    }

    .contact-form-two {
        padding: 40px 30px;
    }

    .contact-two-content .arrow {
        font-size: 80px;
    }
}

/* Extra small screens */
@media (max-width: 576px) {
    .contact-form-two .form-group {
        margin-bottom: 20px;
    }

    .contact-form-two .theme-btn {
        padding: 12px 15px;
        font-size: 13px;
    }
}

/* ============================================================
   Skill Section Icon Percent - Perfect Circle
   Makes circular skill badges into perfect circles with centered content
   ============================================================ */
.skill-item-two .icon-percent {
    width: 180px !important;
    height: 180px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    border-radius: 50% !important;
    background: #171717;
    margin-bottom: 15px;
}

.skill-item-two .icon-percent img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 10px;
}

.skill-item-two .icon-percent .percent {
    display: block !important;
    font-size: 28px !important;
    margin-top: 0 !important;
    color: var(--primary-color);
    font-weight: 600;
}

/* Responsive circle sizing */
@media (max-width: 768px) {
    .skill-item-two .icon-percent {
        width: 150px !important;
        height: 150px !important;
    }

    .skill-item-two .icon-percent img {
        width: 65px;
        height: 65px;
    }

    .skill-item-two .icon-percent .percent {
        font-size: 22px !important;
    }
}

@media (max-width: 576px) {
    .skill-item-two .icon-percent {
        width: 120px !important;
        height: 120px !important;
    }

    .skill-item-two .icon-percent img {
        width: 50px;
        height: 50px;
        margin-bottom: 5px;
    }

    .skill-item-two .icon-percent .percent {
        font-size: 18px !important;
    }
}

/* ============================================================
   Contact Page Custom Form Styling
   Dark mode form controls and contact info boxes
   ============================================================ */
.form-control {
    background-color: transparent;
    border: 1px solid var(--border);
    color: var(--text-heading);
    border-radius: 8px;
    padding: 18px 25px;
    margin-bottom: 20px;
    transition: all 0.3s var(--ease);
    font-family: var(--font-body);
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(162, 255, 0, 0.1);
    background-color: transparent;
    color: var(--text-heading);
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.form-group label {
    display: none;
}

.contact-info-box {
    background: var(--bg-card);
    padding: 40px;
    border-radius: 12px;
    border: 1px solid var(--border);
    transition: transform 0.4s var(--ease);
}

.contact-info-box:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
}

.contact-detail-item {
    margin-bottom: 25px;
}

.contact-detail-item span {
    color: var(--primary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.contact-detail-item h5 {
    color: var(--text-heading);
    font-size: 1.2rem;
    font-weight: 500;
}

.contact-detail-item a {
    color: var(--text-heading);
    text-decoration: none;
    transition: color 0.3s;
}

.contact-detail-item a:hover {
    color: var(--primary);
}

/* ============================================================
   08 SELECTORS & NAVIGATION (Form Elements, Tabs, Breadcrumbs)
   ============================================================ */

/* Checkbox */
.ds-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--text-body);
    transition: color 0.3s var(--ease);
}
.ds-checkbox-label:hover {
    color: var(--text-heading);
}
.ds-checkbox {
    display: none;
}
.ds-checkbox-box {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-radius: 4px;
    position: relative;
    transition: all 0.3s var(--ease);
    display: inline-block;
    background: var(--bg-card);
}
.ds-checkbox:checked + .ds-checkbox-box {
    background: var(--primary);
    border-color: var(--primary);
}
.ds-checkbox:checked + .ds-checkbox-box::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid var(--bg-deep);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Radio */
.ds-radio-label {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--text-body);
    transition: color 0.3s var(--ease);
}
.ds-radio-label:hover {
    color: var(--text-heading);
}
.ds-radio {
    display: none;
}
.ds-radio-circle {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-radius: 50%;
    position: relative;
    transition: all 0.3s var(--ease);
    display: inline-block;
    background: var(--bg-card);
}
.ds-radio:checked + .ds-radio-circle {
    border-color: var(--primary);
}
.ds-radio:checked + .ds-radio-circle::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: var(--primary);
    border-radius: 50%;
}

/* Toggle */
.ds-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--text-body);
}
.ds-toggle {
    display: none;
}
.ds-toggle-slider {
    position: relative;
    width: 44px;
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    transition: background 0.3s var(--ease);
}
.ds-toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: var(--text-heading);
    border-radius: 50%;
    transition: transform 0.3s var(--ease);
}
.ds-toggle:checked + .ds-toggle-slider {
    background: var(--primary);
}
.ds-toggle:checked + .ds-toggle-slider::before {
    transform: translateX(20px);
    background: var(--bg-deep);
}

/* Dropdowns & Inputs */
.ds-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ds-input-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-body);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ds-select, .ds-input {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-heading);
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    transition: all 0.3s var(--ease);
    appearance: none;
}
.ds-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' 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 1rem center;
    padding-right: 2.5rem;
}
.ds-select:focus, .ds-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-dim);
}
.ds-select option {
    background-color: var(--bg-deep);
    color: var(--text-heading);
}
.ds-select-lg {
    padding: 1rem 1.25rem;
    font-size: 1.1rem;
}
/* Date picker icon color fix for dark mode */
.ds-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

/* Breadcrumbs */
.ds-breadcrumbs ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.ds-breadcrumbs li {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: var(--text-body);
}
.ds-breadcrumbs li:not(:last-child)::after {
    content: '/';
    margin-left: 0.5rem;
    color: var(--border);
}
.ds-breadcrumbs a {
    color: var(--text-body);
    text-decoration: none;
    transition: color 0.3s var(--ease);
}
.ds-breadcrumbs a:hover {
    color: var(--primary);
}
.ds-breadcrumbs li.active {
    color: var(--text-heading);
    font-weight: 500;
}

/* Tabs */
.ds-tabs {
    display: inline-flex;
    background: var(--bg-card);
    padding: 0.35rem;
    border-radius: 8px;
    border: 1px solid var(--border);
}
.ds-tab {
    background: transparent;
    border: none;
    color: var(--text-body);
    padding: 0.6rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s var(--ease);
}
.ds-tab:hover {
    color: var(--text-heading);
}
.ds-tab.active {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-heading);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Pagination */
.ds-pagination ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 0.5rem;
}
.ds-pagination a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-body);
    font-weight: 600;
    transition: all 0.3s var(--ease);
}
.ds-pagination a:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-heading);
    border-color: rgba(255, 255, 255, 0.2);
}
.ds-pagination a.active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--bg-deep);
}