/* ================= BASE ============== */
body {margin: 0;font-family: Inter, sans-serif;background: #050816;color: #e5e7eb;}
html, body {max-width: 100%;overflow-x: hidden;}
.container-max {max-width: 1200px;margin: auto;padding: 0 20px;}
.topbar {
    position: sticky;top: 0;z-index: 100;
    background: rgba(5,8,22,.65); backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(148,163,184,.08);
}
.topbar-inner {
    max-width: 1200px;margin: auto;display: flex;
    justify-content: space-between;align-items: center;padding: 14px 20px;
}
.brand {display: flex;align-items: center;gap: 10px;font-weight: 900;color: white;}
.logo-dot {
    width: 10px;height: 10px;border-radius: 50%;
    background: linear-gradient(135deg,#7c3aed,#2563eb);
    box-shadow: 0 0 20px #7c3aed;
}
.nav-links a {color: #cbd5e1;text-decoration: none;font-weight: 500;}
.nav-links a:hover {color: white;}
.nav-actions a {margin-left: 12px;text-decoration: none;}
.login {color: #cbd5e1;}
.signup {
    background: linear-gradient(135deg,#7c3aed,#2563eb);
    padding: 8px 14px;border-radius: 10px;color: white;font-weight: 600;
}

.nav-toggle {
    display: none;cursor: pointer;background: transparent;border: none;
    color: white;font-size: 22px; z-index:1001; position:relative;
}

/* =============== HERO =========== */
.hero {
    padding: 80px 20px 30px;text-align: center;
    background: radial-gradient(circle at top left, rgba(124,58,237,.25), transparent 40%), radial-gradient(circle at top right, rgba(37,99,235,.25), transparent 40%);
}
.hero h1 {font-size: 48px;font-weight: 900;}
.hero p {color: #94a3b8;}

/* ================== SECTION TITLE ================= */
.section-title {
    display: flex;align-items: center;gap: 10px;font-size: 18px;
    font-weight: 800;margin: 25px 0 15px;color: white;
}
.section-title span {color: #7c3aed;}

/* ================= CAROUSEL =============== */
.carousel {display: flex;gap: 14px;overflow-x: auto;padding: 10px 0 20px;}
.carousel::-webkit-scrollbar {display: none;}
.carousel-card {
    min-width: 280px;height:auto;aspect-ratio:16/10;border-radius: 16px;
    overflow: hidden; position: relative;border: 1px solid #1e293b;
}
.carousel-card img {width: 100%;height: 100%;object-fit: cover;opacity: .6;}
.carousel-card span {
    position: absolute; left: 12px; bottom: 12px;font-weight: 700;
    padding: 6px 12px; background: rgba(0,0,0,.5); color: #fff;
    border-radius: 8px; font-size: 14px; backdrop-filter: blur(4px);
}
/* =================== CATEGORIES ================= */
.categories { display: flex;gap: 10px;overflow-x: auto; min-width:0;}
.categories-wrapper { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:15px;align-items:center;}
.categories-wrapper .categories{flex:1 1 auto;display:flex;align-items:center;gap:10px;overflow-x:auto;padding:15px 0;overflow-y:hidden;white-space:nowrap;scrollbar-width:thin;min-width:0;}
.categories-wrapper .categories::-webkit-scrollbar{height:6px;}
.categories-wrapper .categories::-webkit-scrollbar-thumb{background:#1e293b;border-radius:20px;}
.categories-wrapper .category-tools{position:relative;flex:0 0 auto;}
.categories-wrapper .sort-btn{width:38px;height:38px;border:1px solid rgba(124,58,237,.45);border-radius:10px;background:#111827;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.categories-wrapper .sort-btn i{font-size:15px;}
.categories-wrapper .sort-btn:hover{background:#7c3aed;}
.categories-wrapper .sort-menu{display:none;position:absolute;right:100%;top:0;margin-right:10px;min-width:230px;background:#0f172a;border:1px solid #1e293b;border-radius:14px;overflow:hidden;z-index:999;box-shadow:0 20px 40px rgba(0,0,0,.45);}
.categories-wrapper .sort-menu.active{display:block;}
.categories-wrapper .sort-title{padding:14px;font-weight:800;border-bottom:1px solid #1e293b;}
.categories-wrapper .sort-menu a{display:block;padding:12px 14px;color:#cbd5e1;text-decoration:none;}
.categories-wrapper .sort-menu a:hover{background:#111827;color:#fff;}
.cat {
    padding: 8px 14px;border-radius: 20px;border: 1px solid #1e293b;background: #0f172a;
    color: #cbd5e1;cursor: pointer;white-space: nowrap;font-weight: 600;
}
.cat.active {background: #7c3aed;color: white;}

/* ================ GRID =================== */
.grid {display: grid;grid-template-columns: repeat(4,1fr);gap: 20px;}
@media(max-width:1200px) {.grid { grid-template-columns: repeat(3,1fr); } }
@media(max-width:900px) {.grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:450px) {.grid { grid-template-columns: repeat(1,1fr); } }

/* =================== CARD ================== */
.card {
    background: linear-gradient(180deg,#0f172a,#0b1222);
    border: 1px solid rgba(148,163,184,.12);
    border-radius: 18px;overflow: hidden;transition: .3s;
}
.card:hover {
    transform: translateY(-6px); border-color: #7c3aed;
    box-shadow: 0 20px 60px rgba(124,58,237,.18);
}
.card img {width: 100%;height: 230px;object-fit: cover;}
.body {padding: 14px;}
.name {display: flex;align-items: center;gap: 6px;}
.name a {color: white;font-weight: 900;text-decoration: none;}
.verified-badge {width: 18px;height: 18px; flex-shrink: 0;}
.role {color: #94a3b8;font-size: 14px;margin-top: 4px;}
.meta {
    display: flex;justify-content: space-between;
    margin-top: 10px;color: #94a3b8;font-size: 13px;
}
.rating {display: flex;align-items: center;gap: 4px;}
.rating-star {width: 13px;height: 13px;}
.price {color: white;font-weight: 900;}
.book {
    display: flex;align-items: center;justify-content: center;box-sizing: border-box;
    margin-top: 14px;width: 100%;padding: 8px;border-radius: 12px;
    border:1px solid rgba(124,58,237,.45);
    background: #111827;color: white;font-weight: 700;transition: .3s;
}
.book:hover {background: linear-gradient(135deg,#7c3aed,#2563eb);}
.brand img { width: 34px; height: 34px; object-fit: contain;}

.nav-links { display: flex;justify-content: space-between;flex: 1;margin-left: 20px;}
.nav-left { display: flex; gap: 18px;}
.nav-right { display: flex; gap: 18px; margin-left: auto;}
.nav-actions, .header-actions {display: flex;align-items: center;gap: 12px;}
.currency-select {height:40px;background: #0f172a;border:1px solid rgba(124,58,237,.45);color: #e5e7eb;padding: 6px 10px;border-radius: 10px;font-size: 13px;}
.mobile-menu {
    display: none;flex-direction: column;padding: 15px 20px;background: rgba(5,8,22,.95);border-top: 1px solid rgba(148,163,184,.08);
    position: absolute; top: 100%; left: 0;width: 100%;z-index: 999;
}
.mobile-menu.active {display: flex;}
.mobile-menu a {color: #cbd5e1;text-decoration: none;padding: 10px 0;}
.mobile-menu a:hover { color: white; }
.footer {margin-top: 50px;padding: 0;color: #cbd5e1; border-top: 1px solid #1e293b; text-align: left; font-size:16px;}
.footer-container {
    max-width: 1200px;margin: auto;padding: 50px 20px;display: grid;grid-template-columns: 2fr 1fr 1fr 1fr 1fr;gap: 30px;
}
.footer-logo {width: 160px; margin-bottom: 15px; }
.footer p {color: #cbd5e1;font-size: 14px;line-height: 1.7;}
.footer h4 {color: white;font-size: 14px;margin-bottom: 15px;font-weight: 800;text-transform: uppercase;letter-spacing: 0.5px;}
.footer a {display: block;color: #cbd5e1;text-decoration: none;margin-bottom: 10px;font-size: 14px; }
.footer a:hover {color: white; }
.footer-language {
    width: 100%;padding: 8px 10px;border-radius: 10px;background: #0f172a; border: 1px solid #1e293b; color: #e5e7eb; 
}
.footer-bottom {
    border-top: 1px solid #1e293b; padding: 20px; max-width: 1200px; margin: auto; display: flex;justify-content: space-between; color: #cbd5e1; font-size: 13px;
}
.topbar a, .footer a, .mobile-menu a, .card a { text-decoration: none !important;}

/* =============== RESPONSIVE FIXES ONLY ============== */
@media(max-width:992px) {
    .footer-container { grid-template-columns: 1fr 1fr; }
}

@media(max-width:768px) {
    .topbar-inner { padding: 14px 10px; }
    .login {display: none;}
    .nav-links, .nav-actions {display: none;}
    .topbar-inner {justify-content: flex-start;}
    .header-actions {display: flex;margin-left:auto;margin-right:12px;}
    .nav-toggle {display: block;color: white;}
    .brand-name {display: none;}
    .footer-container { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
    .categories-wrapper .sort-menu{right:0;left:auto;top:50px;margin-right:0;} 
}
@media(max-width:350px) {
    .categories-wrapper .sort-menu {
        min-width: 180px;
        max-width: 90vw;
    }
}
.gubergren{background: #00B67A; border-radius: 1px; width:14px; height:14px;margin-top:-3px;}

.margin-bottom10{margin-bottom:10px;}.margin-bottom15{margin-bottom:15px;}
.margin-bottom20{margin-bottom:20px;}.margin-bottom25{margin-bottom:25px;}
.margin-bottom30{margin-bottom:30px;}.margin-bottom35{margin-bottom:35px;}
.margin-bottom40{margin-bottom:40px;}.margin-bottom45{margin-bottom:45px;}
.margin-bottom-10{margin-bottom:-10px;}.margin-bottom-15{margin-bottom:-15px;}
.margin-bottom-20{margin-bottom:-20px;}.margin-bottom-25{margin-bottom:-25px;}
.margin-bottom-30{margin-bottom:-30px;}.margin-bottom-35{margin-bottom:-35px;}
.margin-bottom-40{margin-bottom:-40px;}.margin-bottom-45{margin-bottom:-45px;}
.margin-bottom-50{margin-bottom:-50px;}.margin-bottom-55{margin-bottom:-55px;}
.margin-bottom-60{margin-bottom:-60px;}.margin-bottom-65{margin-bottom:-65px;}
.margin-bottom-70{margin-bottom:-70px;}.margin-bottom-75{margin-bottom:-75px;}
.margin-top10{margin-top:10px;}.margin-top15{margin-top:15px;}
.margin-top20{margin-top:20px;}.margin-top25{margin-top:25px;}
.margin-top-10{margin-top:-10px;}.margin-top-15{margin-top:-15px;}
.margin-top-20{margin-top:-20px;}.margin-top-25{margin-top:-25px;}
.font-weight400{ font-weight:400!important; }.font-weight600{ font-weight:600!important; }
.font-size10{font-size:10px;}.font-size11{font-size:11px;}.font-size12{font-size:12px;}
.font-size13{font-size:13px;}.font-size14{font-size:14px;}.font-size15{font-size:15px;}
.font-size16{font-size:16px;}.font-size16{font-size:16px;}.font-size18{font-size:18px;}
.font-size19{font-size:19px;}.font-size20{font-size:20px;}.font-size21{font-size:21px;}
.font-size22{font-size:22px;}.font-size23{font-size:23px;}.font-size24{font-size:24px;}
.font-size25{font-size:25px;}.font-size26{font-size:26px;}.font-size27{font-size:27px;}
.font-size28{font-size:28px;}.font-size29{font-size:29px;}.font-size30{font-size:30px;}
.text-danger{color:#F93154;}
/*.text-success{color:#00B74A;}*/
.text-warning{color:#FFA900;}
.text-info{color:#39C0ED!important;}
.text-black{color:#262626!important;}
.text-orange{color:#F0B90B!important;}
.text-danger { color: #ef4444 !important; }
.text-success, .text-green { color: #22c55e !important;}
.text-primary { color: #8b5cf6 !important;}

.form-section {max-width: 700px;margin: 0 auto;}
.form-label {display: block;margin-bottom: 8px;color: #e5e7eb;font-weight: 600;font-size: 16px;}
.form-text {color: #94a3b8 !important;}
.form-check {display: flex;align-items: center;gap: 10px;justify-content: flex-start;}
.form-check-input {
    width: 18px; height: 18px;border: 1px solid #475569;
    background-color: #0f172a;cursor: pointer; 
    appearance: auto !important; -webkit-appearance: checkbox !important;
}
.form-check-input:checked { background-color: #7c3aed; border-color: #7c3aed;  background-color: red !important; }

.form-check-label { color: #cbd5e1; cursor: pointer; }
.card-compact {
    max-width: 680px; margin: 20px auto;
    background: linear-gradient(180deg,#0f172a,#0b1222);
    border: 1px solid rgba(148,163,184,.12);border-radius: 15px;
}
.titleCommon { padding: 24px 24px 10px;text-align: center; }
.titleCommon h3 {color: #fff;font-size: 20px;font-weight: 600;margin: 0; }
.padding-content, .padding-content1 { padding: 24px; }
.cmbutton { display: block; background:#1DA1F2; font-size:16px; font-weight:bold; color:#fff !important; text-align: center; padding:10px 24px; border:0 !important; border-radius:15px; border:transparent solid 1px !important; cursor: pointer; }
.cmbutton:hover { border:#1DA1F2 solid 1px !important; color:#1DA1F2 !important; text-decoration:none; background:transparent; }
.btn-disabled, .btn-disabled:hover { border:0 !important; pointer-events: none; padding:0 7px !important; }
.btn-red2 {background:#800009 !important;}
.btn-red2:hover {background:#1DA1F2 !important;}
a.btn-red2:hover {color: rgba(255, 255, 255, 0.95) !important;}
.ogabutton strong, .ogabutton span { display: block; color: #fff; }
.ogabutton strong { text-align: left; white-space: nowrap; flex: 0 0 64%; max-width: 64%; text-overflow: ellipsis; overflow: hidden; }
.cmbutton.ogabutton:hover strong, .cmbutton.ogabutton:hover span { color: #1DA1F2; }

.form-control,
.form-select {
    width: 100%;
    height: 43px;
    /*background: #0f172a;*/
    border: 1px solid #1e293b;
    border-radius: 12px;
    /*color: #e5e7eb;*/
    padding: 0 16px;
    transition: all .2s ease;
}

    .form-control::placeholder,
    .form-select::placeholder {
        /*color: #64748b;*/
    }

    .form-control:focus,
    .form-select:focus {
        /*background: #0f172a;*/
        /*color: #fff;*/
        border-color: #7c3aed;
        box-shadow: 0 0 0 3px rgba(124,58,237,.20);
        outline: none;
    }

    .form-control:disabled,
    .form-select:disabled {
        opacity: .6;
        cursor: not-allowed;
    }

textarea.form-control {
    min-height: 120px;
    padding: 12px 16px;
}

@media(max-width:768px) {
    .padding-content, .padding-content1 { padding: 18px; }
}
    /* ================= FORMS ================= */
    /*
.form-control,
.form-select {
    width: 100%;
    height: 52px;
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 12px;
    color: #e5e7eb;
    padding: 0 16px;
    transition: all .2s ease;
}

.form-control::placeholder,
.form-select::placeholder {
    color: #64748b;
}

.form-control:focus,
.form-select:focus {
    background: #0f172a;
    color: #fff;
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124,58,237,.20);
    outline: none;
}

.form-control:disabled,
.form-select:disabled {
    opacity: .6;
    cursor: not-allowed;
}

textarea.form-control {
    min-height: 120px;
    padding: 12px 16px;
}*/