/* ==================================================
   WARRATRACK - FINAL COMPLETE STYLE
   Homepage + Navbar + Login + Register + Forms
   Dashboard + Warranty Cards + Footer + Mobile
================================================== */


/* ==================================================
   GLOBAL RESET
================================================== */

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    width: 100%;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    background: #f5f7fb;
    color: #172033;

    line-height: 1.5;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: #3158d5;
}

button,
input,
select,
textarea {
    font: inherit;
}


/* ==================================================
   MAIN NAVBAR
================================================== */

.main-nav {
    width: 100%;
    height: 95px;
    min-height: 95px;

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

    padding: 0 14px;

    background: #ffffff;
    border-bottom: 1px solid #e5e9ef;

    position: relative;
    z-index: 100;

    overflow: hidden;
}


/* ==================================================
   LOGO
================================================== */

.main-nav .logo-link {
    width: 165px;
    min-width: 165px;
    max-width: 165px;

    height: 95px;
    min-height: 95px;
    max-height: 95px;

    flex: 0 0 165px;

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

    overflow: hidden;

    text-decoration: none;

    position: relative;
    z-index: 5;
}

.main-nav .logo-link .main-logo {
    width: 165px;
    min-width: 165px;
    max-width: 165px;

    height: auto;
    max-height: 90px;

    display: block;

    object-fit: contain;
}


/* ==================================================
   NAVIGATION LINKS
================================================== */

.main-nav .nav-links {
    display: flex;

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

    gap: 10px;

    flex-shrink: 0;

    position: relative;
    z-index: 20;
}

.main-nav .nav-links a {
    text-decoration: none;

    white-space: nowrap;

    font-size: 16px;

    color: #3158d5;
}

.main-nav .nav-links a:hover {
    text-decoration: none;
}


/* ==================================================
   REGISTER BUTTON
================================================== */

.main-nav .nav-links .nav-register {
    display: inline-flex;

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

    padding: 10px 14px;

    min-height: 44px;

    background: #3158d5;
    color: #ffffff;

    border-radius: 10px;

    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;
}


/* ==================================================
   MAIN
================================================== */

main {
    width: 100%;
}


/* ==================================================
   GENERAL CONTAINER
================================================== */

.container {
    width: 100%;
    max-width: 1100px;

    margin: 0 auto;

    padding: 55px 30px;
}

.container.narrow {
    max-width: 820px;
}


/* ==================================================
   CARD
================================================== */

.card {
    width: 100%;

    background: #ffffff;

    border: 1px solid #dfe5ee;

    border-radius: 24px;

    padding: 42px;

    box-shadow:
        0 8px 30px rgba(23, 32, 51, 0.04);
}


/* ==================================================
   CARD HEADINGS
================================================== */

.card h1,
.card h2,
.card h3 {
    color: #172033;
}

.card h2 {
    margin-top: 0;
    margin-bottom: 35px;

    font-size: 42px;

    line-height: 1.15;
}


/* ==================================================
   FORM
================================================== */

form {
    width: 100%;
}

form label {
    display: block;

    margin-top: 22px;
    margin-bottom: 9px;

    font-size: 18px;

    font-weight: 700;

    color: #172033;
}

form input,
form select,
form textarea {
    width: 100%;

    min-height: 58px;

    padding: 13px 16px;

    background: #ffffff;

    border: 2px solid #dce2eb;

    border-radius: 12px;

    color: #172033;

    outline: none;
}

form input:focus,
form select:focus,
form textarea:focus {
    border-color: #3158d5;
}


/* ==================================================
   BUTTON
================================================== */

.btn {
    display: inline-flex;

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

    width: 100%;

    min-height: 58px;

    margin-top: 18px;

    padding: 14px 22px;

    border: none;

    border-radius: 12px;

    background: #3158d5;

    color: #ffffff;

    font-size: 18px;

    font-weight: 700;

    text-decoration: none;

    cursor: pointer;
}

.btn:hover {
    background: #284bc0;
}


/* ==================================================
   ERROR
================================================== */

.error {
    margin-bottom: 20px;

    padding: 13px 16px;

    border: 1px solid #f0b8b8;

    border-radius: 10px;

    background: #fff3f3;

    color: #c62828;

    font-weight: 600;
}


/* ==================================================
   HOMEPAGE HERO
================================================== */

.hero {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    padding: 65px 35px 70px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(320px, 0.9fr);

    align-items: center;

    gap: 55px;
}


/* ==================================================
   HERO LEFT CONTENT
================================================== */

.hero-content {
    width: 100%;
}

.hero-content .tag {
    margin: 0 0 18px;

    color: #3158d5;

    font-size: 15px;

    font-weight: 800;

    letter-spacing: 1.5px;

    line-height: 1.4;
}

.hero-content h1 {
    max-width: 700px;

    margin: 0 0 24px;

    color: #172033;

    font-size: 58px;

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -1.5px;
}

.hero-content .hero-text {
    max-width: 650px;

    margin: 0 0 30px;

    color: #657086;

    font-size: 21px;

    line-height: 1.6;
}


/* ==================================================
   HERO BUTTON
================================================== */

.hero-content .big-btn {
    width: auto;

    max-width: 320px;

    min-height: 58px;

    margin-top: 0;

    padding: 14px 26px;

    font-size: 18px;
}


/* ==================================================
   DEMO CARD
================================================== */

.demo-card {
    width: 100%;

    padding: 32px;

    background: #ffffff;

    border: 1px solid #dfe5ee;

    border-radius: 24px;

    box-shadow:
        0 12px 35px rgba(23, 32, 51, 0.07);
}

.demo-card h3 {
    margin: 0;

    color: #172033;

    font-size: 24px;

    line-height: 1.3;
}


/* ==================================================
   DEMO CHECK
================================================== */

.demo-card .check {
    width: 58px;
    height: 58px;

    margin: 25px 0 20px;

    display: flex;

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

    border-radius: 50%;

    background: #eaf7ee;

    color: #087443;

    font-size: 30px;

    font-weight: 800;
}


/* ==================================================
   DEMO LINE
================================================== */

.demo-line {
    width: 100%;

    height: 2px;

    margin: 0 0 22px;

    background: #edf0f4;
}


/* ==================================================
   DEMO WARRANTY
================================================== */

.demo-warranty {
    width: 100%;

    margin-top: 15px;

    padding: 20px;

    display: flex;

    flex-direction: column;

    gap: 7px;

    background: #f8fafc;

    border: 1px solid #dfe5ee;

    border-radius: 16px;
}

.demo-warranty strong {
    color: #172033;

    font-size: 18px;

    line-height: 1.3;
}

.demo-warranty span {
    color: #657086;

    font-size: 15px;

    line-height: 1.4;
}

.demo-warranty b {
    width: fit-content;

    margin-top: 5px;

    padding: 6px 10px;

    border-radius: 20px;

    background: #eaf7ee;

    color: #087443;

    font-size: 12px;

    letter-spacing: .4px;
}


/* ==================================================
   REMINDER DEMO
================================================== */

.demo-warranty.reminder {
    background: #fffdf8;

    border-color: #f2bd4a;
}

.demo-warranty.reminder b {
    background: #fff5e8;

    color: #b54708;
}


/* ==================================================
   DEMO NOTE
================================================== */

.demo-card .demo-note {
    margin: 20px 0 0;

    color: #7a8496;

    font-size: 13px;

    line-height: 1.5;

    text-align: center;
}


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

.features {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    padding: 10px 35px 70px;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 22px;
}

.features .feature {
    margin: 0;

    padding: 28px 25px;

    background: #ffffff;

    border: 1px solid #dfe5ee;

    border-radius: 20px;

    box-shadow:
        0 5px 20px rgba(23, 32, 51, 0.035);
}

.features .feature h3 {
    margin: 0 0 10px;

    color: #172033;

    font-size: 21px;

    line-height: 1.3;
}

.features .feature p {
    margin: 0;

    color: #657086;

    font-size: 16px;

    line-height: 1.55;
}


/* ==================================================
   OLD HOMEPAGE SUPPORT
================================================== */

.example-dashboard {
    max-width: 1200px;

    margin: 40px auto 70px;

    padding: 42px 35px;

    background: #ffffff;

    border: 1px solid #dfe5ee;

    border-radius: 24px;

    box-shadow:
        0 8px 30px rgba(23, 32, 51, 0.04);
}

.example-dashboard h2 {
    margin-top: 0;

    color: #172033;

    font-size: 38px;
}

.example-dashboard .check {
    margin: 30px 0;

    font-size: 58px;

    color: #172033;
}

.example-dashboard hr {
    border: 0;

    border-top: 2px solid #edf0f4;

    margin: 25px 0 40px;
}

.example-product,
.example-warranty {
    padding: 30px;

    margin-top: 22px;

    background: #ffffff;

    border: 2px solid #dfe5ee;

    border-radius: 20px;
}

.example-product h3,
.example-warranty h3 {
    margin: 0 0 10px;

    font-size: 30px;
}

.example-product p,
.example-warranty p {
    margin: 5px 0;

    color: #657086;

    font-size: 20px;
}

.example-warranty {
    border-color: #f2bd4a;

    background: #fffdf8;
}


/* ==================================================
   DASHBOARD
================================================== */

.dashboard {
    max-width: 1200px;

    margin: 0 auto;

    padding: 55px 35px;
}

.dashboard h1 {
    margin-top: 0;
    margin-bottom: 10px;

    font-size: 58px;

    line-height: 1.1;
}

.dashboard .welcome {
    margin-bottom: 40px;

    font-size: 25px;
}


/* ==================================================
   DASHBOARD HEADER
================================================== */

.dashboard-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 25px;
}

.dashboard-header h1 {
    margin-top: 0;
}


/* ==================================================
   DASHBOARD USER
================================================== */

.dashboard-user {
    display: flex;

    align-items: center;

    gap: 8px;

    flex-wrap: wrap;
}


/* ==================================================
   ADD WARRANTY
================================================== */

.dashboard .add-warranty,
.add-warranty {
    display: flex;

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

    width: 100%;

    min-height: 64px;

    margin-bottom: 40px;

    padding: 15px 20px;

    border-radius: 14px;

    background: #3158d5;

    color: #ffffff;

    font-size: 22px;

    font-weight: 700;

    text-decoration: none;
}


/* ==================================================
   DASHBOARD STATS
================================================== */

.stats {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 25px;

    margin-bottom: 40px;
}

.stat-card {
    min-height: 180px;

    padding: 30px;

    background: #ffffff;

    border: 1px solid #dfe5ee;

    border-radius: 20px;
}

.stat-card h3 {
    margin: 0 0 20px;

    font-size: 25px;
}

.stat-card .number {
    font-size: 52px;

    font-weight: 700;
}

.stat-total {
    border-left: 8px solid #3158d5;
}

.stat-active {
    border-left: 8px solid #34804e;
}

.stat-expiring {
    border-left: 8px solid #ef9a22;
}

.stat-expired {
    border-left: 8px solid #d84335;
}


/* ==================================================
   SEARCH
================================================== */

.search {
    width: 100%;

    margin: 30px 0;
}

.search input {
    width: 100%;

    min-height: 58px;

    padding: 14px 18px;

    border: 2px solid #dfe5ee;

    border-radius: 14px;

    background: #ffffff;
}


/* ==================================================
   WARRANTY LIST
================================================== */

.warranty-list {
    width: 100%;

    background: #ffffff;

    border: 1px solid #dfe5ee;

    border-radius: 20px;

    overflow: hidden;
}

.warranty-item {
    padding: 25px 30px;

    border-bottom: 1px solid #e5e9ef;
}

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


/* ==================================================
   WARRANTY CARD
================================================== */

.warranty {
    position: relative;
}

.product-title {
    margin-top: 0;

    margin-bottom: 15px;

    line-height: 1.3;
}

.days-left {
    margin-top: 10px;

    font-weight: 600;

    font-size: 17px;
}


/* ==================================================
   BADGES
================================================== */

.badge {
    display: inline-block;

    margin-top: 12px;

    padding: 7px 12px;

    border-radius: 20px;

    background: #eaf7ee;

    color: #087443;

    font-weight: 700;
}

.badge.expired {
    background: #fff0ef;

    color: #d92d20;
}

.badge.reminder-soon {
    background: #fff5e8;

    color: #b54708;
}


/* ==================================================
   REMINDER
================================================== */

.reminder-sent {
    margin-top: 10px;

    color: #087443;

    font-weight: 600;
}

.reminder-pending {
    margin-top: 10px;

    color: #b54708;

    font-weight: 600;
}


/* ==================================================
   NO RESULTS
================================================== */

.no-results {
    text-align: center;

    padding: 30px;

    color: #666;
}


/* ==================================================
   FOOTER
================================================== */

footer {
    width: 100%;

    margin-top: 50px;

    padding: 40px 25px;

    text-align: center;

    background: #ffffff;

    border-top: 1px solid #e5e9ef;

    color: #657086;
}

footer a {
    margin: 0 5px;

    color: #3158d5;

    text-decoration: none;
}


/* ==================================================
   HOMEPAGE TABLET
================================================== */

@media screen and (max-width: 900px) {

    .hero {
        grid-template-columns: 1fr;

        gap: 35px;

        padding: 50px 30px 55px;
    }

    .hero-content h1 {
        font-size: 52px;
    }

    .hero-content .hero-text {
        font-size: 20px;
    }

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

        padding-left: 30px;
        padding-right: 30px;
    }

}


/* ==================================================
   MOBILE
   600px
================================================== */

@media screen and (max-width: 600px) {


    /* ==================================================
       NAVBAR
    ================================================== */

    .main-nav {
        width: 100%;

        height: 95px;
        min-height: 95px;

        padding: 0 10px;

        overflow: hidden;
    }


    /* ==================================================
       MOBILE LOGO
    ================================================== */

    .main-nav .logo-link {
        width: 155px;
        min-width: 155px;
        max-width: 155px;

        height: 95px;
        min-height: 95px;
        max-height: 95px;

        flex: 0 0 155px;

        overflow: hidden;
    }

    .main-nav .logo-link .main-logo {
        width: 155px;
        min-width: 155px;
        max-width: 155px;

        height: auto;

        max-height: 90px;

        object-fit: contain;
    }


    /* ==================================================
       NAV LINKS
    ================================================== */

    .main-nav .nav-links {
        gap: 7px;

        flex-shrink: 0;
    }

    .main-nav .nav-links a {
        font-size: 15px;
    }

    .main-nav .nav-links .nav-register {
        padding: 9px 11px;

        min-height: 42px;

        font-size: 14px;
    }


    /* ==================================================
       CONTAINER
    ================================================== */

    .container {
        padding: 28px 16px;
    }

    .container.narrow {
        padding: 28px 16px;
    }


    /* ==================================================
       CARD
    ================================================== */

    .card {
        padding: 30px 22px;

        border-radius: 20px;
    }

    .card h2 {
        font-size: 40px;

        margin-bottom: 30px;
    }


    /* ==================================================
       FORM
    ================================================== */

    form label {
        font-size: 17px;
    }

    form input,
    form select,
    form textarea {
        min-height: 56px;
    }


    /* ==================================================
       HOMEPAGE HERO
    ================================================== */

    .hero {
        width: 100%;

        padding: 38px 20px 35px;

        grid-template-columns: 1fr;

        gap: 28px;
    }


    .hero-content .tag {
        margin-bottom: 14px;

        font-size: 13px;

        letter-spacing: 1.2px;
    }


    .hero-content h1 {
        font-size: 40px;

        line-height: 1.1;

        letter-spacing: -0.8px;

        margin-bottom: 20px;
    }


    .hero-content .hero-text {
        font-size: 18px;

        line-height: 1.55;

        margin-bottom: 25px;
    }


    .hero-content .big-btn {
        width: 100%;

        max-width: 100%;

        min-height: 56px;

        padding: 13px 20px;

        font-size: 18px;
    }


    /* ==================================================
       DEMO CARD
    ================================================== */

    .demo-card {
        padding: 24px 18px;

        border-radius: 18px;
    }


    .demo-card h3 {
        font-size: 21px;
    }


    .demo-card .check {
        width: 52px;

        height: 52px;

        margin: 20px 0 18px;

        font-size: 27px;
    }


    .demo-warranty {
        padding: 17px;

        border-radius: 14px;
    }


    .demo-warranty strong {
        font-size: 17px;
    }


    .demo-warranty span {
        font-size: 14px;
    }


    .demo-card .demo-note {
        font-size: 12px;
    }


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

    .features {
        width: 100%;

        grid-template-columns: 1fr;

        padding: 5px 20px 45px;

        gap: 12px;
    }


    .features .feature {
        padding: 22px 18px;

        border-radius: 17px;
    }


    .features .feature h3 {
        font-size: 20px;
    }


    .features .feature p {
        font-size: 16px;
    }


    /* ==================================================
       DASHBOARD
    ================================================== */

    .dashboard {
        padding: 35px 20px;
    }

    .dashboard h1 {
        font-size: 46px;
    }

    .dashboard .welcome {
        font-size: 22px;

        margin-bottom: 30px;
    }


    /* ==================================================
       DASHBOARD HEADER
    ================================================== */

    .dashboard-header {
        flex-direction: column;

        align-items: stretch;

        gap: 10px;

        margin-bottom: 18px;
    }

    .dashboard-header h1 {
        font-size: 42px;

        line-height: 1.1;

        margin: 0 0 8px;
    }

    .dashboard-header p {
        font-size: 20px;

        margin: 0;
    }

    .dashboard-header .btn {
        width: 100%;

        min-height: 56px;

        margin-top: 16px;

        font-size: 20px;
    }


    /* ==================================================
       OLD STATS
    ================================================== */

    .stats {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .stat-card {
        min-height: 150px;
    }


    /* ==================================================
       NEW STATUS SUMMARY
    ================================================== */

    .status-summary {
        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 10px !important;

        margin: 18px 0 20px !important;
    }


    .status-summary .status-box {
        width: 100% !important;

        min-height: 0 !important;

        height: 108px !important;

        padding: 14px 18px !important;

        margin: 0 !important;

        border-radius: 16px !important;

        display: flex !important;

        flex-direction: column !important;

        justify-content: center !important;

        box-shadow:
            0 2px 10px rgba(23, 32, 51, 0.03) !important;
    }


    .status-summary .status-box h3 {
        margin: 0 0 4px !important;

        font-size: 19px !important;

        line-height: 1.2 !important;
    }


    .status-summary .status-number {
        display: block !important;

        font-size: 36px !important;

        line-height: 1 !important;

        margin: 3px 0 0 !important;
    }


    .status-summary .status-total {
        border-left: 6px solid #2f5bd3 !important;
    }


    .status-summary .status-active {
        border-left: 6px solid #087443 !important;
    }


    .status-summary .status-soon {
        border-left: 6px solid #f79009 !important;
    }


    .status-summary .status-expired {
        border-left: 6px solid #d92d20 !important;
    }


    /* ==================================================
       WARRANTY TOOLS
    ================================================== */

    .warranty-tools {
        width: 100%;

        margin: 20px 0 !important;

        padding: 13px !important;

        border-radius: 16px !important;
    }


    .warranty-search {
        min-height: 52px !important;

        margin-bottom: 9px !important;

        font-size: 16px !important;
    }


    .warranty-filter {
        min-height: 52px !important;

        font-size: 16px !important;
    }


    .filter-buttons {
        margin-top: 9px !important;

        gap: 7px !important;
    }


    .filter-buttons a {
        padding: 9px 6px !important;

        font-size: 15px !important;

        border-radius: 9px !important;
    }


    .search-result-count {
        margin-top: 10px !important;

        font-size: 14px !important;
    }


    /* ==================================================
       WARRANTY GRID
    ================================================== */

    #warrantyGrid {
        margin-top: 18px !important;
    }


    #warrantyGrid .card.warranty {
        width: 100%;

        padding: 22px 18px !important;

        margin-bottom: 14px !important;

        border-radius: 18px !important;
    }


    .product-title {
        font-size: 24px !important;

        margin-bottom: 12px !important;
    }


    .warranty p {
        font-size: 17px !important;

        margin: 10px 0 !important;
    }


    .days-left {
        font-size: 17px !important;

        margin-top: 8px !important;
    }


    .warranty .btn {
        min-height: 54px !important;

        margin-top: 14px !important;

        font-size: 18px !important;
    }

}


/* ==================================================
   VERY SMALL PHONE
   380px
================================================== */

@media screen and (max-width: 380px) {


    /* ==================================================
       NAVBAR
    ================================================== */

    .main-nav {
        height: 90px;

        min-height: 90px;

        padding: 0 7px;
    }


    .main-nav .logo-link {
        width: 145px;

        min-width: 145px;

        max-width: 145px;

        height: 90px;

        min-height: 90px;

        max-height: 90px;

        flex: 0 0 145px;
    }


    .main-nav .logo-link .main-logo {
        width: 145px;

        min-width: 145px;

        max-width: 145px;

        max-height: 85px;
    }


    .main-nav .nav-links {
        gap: 5px;
    }


    .main-nav .nav-links a {
        font-size: 14px;
    }


    .main-nav .nav-links .nav-register {
        padding: 8px 9px;

        font-size: 13px;
    }


    /* ==================================================
       CONTAINER
    ================================================== */

    .container {
        padding: 24px 13px;
    }


    .container.narrow {
        padding: 24px 13px;
    }


    /* ==================================================
       CARD
    ================================================== */

    .card {
        padding: 25px 18px;

        border-radius: 18px;
    }


    .card h2 {
        font-size: 36px;
    }


    /* ==================================================
       HOMEPAGE
    ================================================== */

    .hero {
        padding: 32px 15px 30px;

        gap: 25px;
    }


    .hero-content h1 {
        font-size: 35px;

        letter-spacing: -0.5px;
    }


    .hero-content .hero-text {
        font-size: 17px;
    }


    .hero-content .big-btn {
        min-height: 54px;

        font-size: 17px;
    }


    .demo-card {
        padding: 21px 15px;
    }


    .demo-card h3 {
        font-size: 19px;
    }


    .demo-warranty {
        padding: 15px;
    }


    .features {
        padding-left: 15px;

        padding-right: 15px;
    }


    /* ==================================================
       DASHBOARD
    ================================================== */

    .dashboard {
        padding: 30px 15px;
    }


    .dashboard-header h1 {
        font-size: 36px !important;
    }


    .dashboard-header p {
        font-size: 18px !important;
    }


    .dashboard-header .btn {
        min-height: 52px !important;

        font-size: 18px !important;
    }


    /* ==================================================
       STATUS
    ================================================== */

    .status-summary {
        gap: 8px !important;

        margin-top: 16px !important;
    }


    .status-summary .status-box {
        height: 98px !important;

        padding: 12px 15px !important;

        border-radius: 14px !important;
    }


    .status-summary .status-box h3 {
        font-size: 17px !important;
    }


    .status-summary .status-number {
        font-size: 32px !important;
    }


    /* ==================================================
       WARRANTY
    ================================================== */

    #warrantyGrid .card.warranty {
        padding: 22px 18px !important;
    }


    .warranty-tools {
        padding: 12px !important;
    }

}