@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Merriweather:wght@400;700&family=Open+Sans:wght@400;600;700&display=swap');

/* General Styles */
body {
    font-family: 'Open Sans', sans-serif; /* Clean, professional font */
    margin: 0;
    padding: 0;
    color: #333; /* Professional text color */
}

body.theme-romance {
    background-image: linear-gradient(rgba(255, 241, 244, 0.92), rgba(249, 234, 242, 0.96)), url('rabbit.png');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    color: #3e1f3d;
}

body.theme-mainmenu {
    background-color: #0d0f1f;
    background-image:
        radial-gradient(circle at top left, rgba(0, 255, 197, 0.14), transparent 20%),
        radial-gradient(circle at top right, rgba(255, 43, 160, 0.12), transparent 16%),
        linear-gradient(147deg, #0f1226 0%, #110a20 42%, #070810 100%);
    color: #e9f2ff;
    font-family: 'Open Sans', sans-serif;
}

body.theme-mainmenu .header-container {
    position: relative;
    overflow: visible;
    background: rgba(8, 8, 14, 0.92);
    border: 1px solid rgba(107, 247, 255, 0.2);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 24px 70px rgba(0, 0, 0, 0.35);
}

body.theme-mainmenu .header-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 18px 18px;
    opacity: 0.2;
    pointer-events: none;
}

body.theme-mainmenu .header-container::after {
    content: '';
    position: absolute;
    left: -50%;
    top: 0;
    width: 200%;
    height: 4px;
    background: linear-gradient(90deg, rgba(75,247,248,0.85), rgba(255,79,224,0.95), rgba(255,121,242,0.85));
    transform: skewX(-20deg);
    filter: blur(4px);
    animation: slide-neon 3.5s linear infinite;
    opacity: 0.9;
    pointer-events: none;
}

body.theme-mainmenu .title {
    color: #6bf7ff;
    letter-spacing: 0.08em;
    text-shadow: 0 0 18px rgba(107, 247, 255, 0.35);
}

body.theme-mainmenu .nav-button,
body.theme-mainmenu .dropbtn {
    background: rgba(15, 24, 60, 0.95);
    color: #f5f7ff;
    border: 1px solid rgba(107, 247, 255, 0.3);
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    transition: transform 0.2s ease, background 0.2s ease;
}

body.theme-mainmenu .nav-button:hover,
body.theme-mainmenu .dropbtn:hover {
    background: linear-gradient(135deg, rgba(91, 233, 255, 0.95) 0%, rgba(255, 83, 218, 0.95) 100%);
    color: #ffffff;
    transform: translateY(-2px);
}

body.theme-mainmenu .nav-button::after,
body.theme-mainmenu .dropbtn::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    pointer-events: none;
}

body.theme-mainmenu .recommended-item,
body.theme-mainmenu .comic-card,
body.theme-mainmenu .description-container,
body.theme-mainmenu .terms-container,
body.theme-mainmenu .dropdown-content,
body.theme-mainmenu .cart-panel,
body.theme-mainmenu .shop-card {
    background: rgba(13, 18, 34, 0.94);
    border: 1px solid rgba(107, 247, 255, 0.14);
}

body.theme-mainmenu .recommended-item h3,
body.theme-mainmenu .comics-title,
body.theme-mainmenu .check-title,
body.theme-mainmenu .comic-info h3,
body.theme-mainmenu .title,
body.theme-mainmenu .shop-info h3 {
    color: #9ef8ff;
}

body.theme-mainmenu .recommended-item p,
body.theme-mainmenu .comic-info p,
body.theme-mainmenu .shop-format,
body.theme-mainmenu .shop-price {
    color: #d7e5ff;
}

body.theme-mainmenu .recommended-item img,
body.theme-mainmenu .comic-cover,
body.theme-mainmenu .shop-cover {
    filter: brightness(0.95) contrast(1.05);
}

body.theme-mainmenu .genre-link.active {
    background-color: rgba(255, 43, 160, 0.18);
    color: #ff8bf5;
}

body.theme-mainmenu .cart-summary,
body.theme-mainmenu .checkout-button,
body.theme-mainmenu .add-cart-button,
body.theme-mainmenu .remove-cart-item {
    border-color: rgba(255, 43, 160, 0.22);
}

body.theme-mainmenu .checkout-button,
body.theme-mainmenu .add-cart-button {
    background: linear-gradient(135deg, #4bf7f8 0%, #ff4fe0 100%);
    color: #060b1a;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

body.theme-mainmenu .checkout-button::before,
body.theme-mainmenu .add-cart-button::before,
body.theme-mainmenu .nav-button::before,
body.theme-mainmenu .dropbtn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

body.theme-mainmenu .checkout-button:hover,
body.theme-mainmenu .add-cart-button:hover,
body.theme-mainmenu .nav-button:hover,
body.theme-mainmenu .dropbtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 22px rgba(107, 247, 255, 0.35), 0 8px 24px rgba(255, 43, 160, 0.18);
}

body.theme-mainmenu .checkout-button:hover::before,
body.theme-mainmenu .add-cart-button:hover::before,
body.theme-mainmenu .nav-button:hover::before,
body.theme-mainmenu .dropbtn:hover::before {
    opacity: 1;
}

body.theme-mainmenu .nav-button,
body.theme-mainmenu .dropbtn {
    position: relative;
    overflow: hidden;
}

body.theme-mainmenu .nav-button:hover,
body.theme-mainmenu .dropbtn:hover {
    background: linear-gradient(135deg, rgba(91, 233, 255, 0.95) 0%, rgba(255, 83, 218, 0.95) 100%);
    color: #ffffff;
}

body.theme-thriller {
    background-image: linear-gradient(rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.92)), url('thriller.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-blend-mode: multiply;
    color: #f5f5f5;
    font-family: 'Cormorant Garamond', serif;
}

body.theme-thriller h1,
body.theme-thriller h2,
body.theme-thriller h3,
body.theme-thriller h4,
body.theme-thriller h5,
body.theme-thriller h6,
body.theme-thriller p,
body.theme-thriller span,
body.theme-thriller label,
body.theme-thriller a,
body.theme-thriller li,
body.theme-thriller input,
body.theme-thriller button {
    color: #f5f5f5 !important;
}

body.theme-thriller ::placeholder {
    color: rgba(245, 245, 245, 0.6) !important;
}

body.theme-mystery {
    background-image: linear-gradient(180deg, rgba(19, 19, 27, 0.9), rgba(37, 44, 66, 0.92)), url('creepy2.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-blend-mode: multiply;
    color: #e7e7ec;
    font-family: 'Merriweather', serif;
}

body.theme-mystery h1,
body.theme-mystery h2,
body.theme-mystery h3,
body.theme-mystery h4,
body.theme-mystery h5,
body.theme-mystery h6,
body.theme-mystery p,
body.theme-mystery span,
body.theme-mystery label,
body.theme-mystery a,
body.theme-mystery li,
body.theme-mystery input,
body.theme-mystery button {
    color: #eceef3 !important;
}

body.theme-mystery ::placeholder {
    color: rgba(236, 238, 243, 0.65) !important;
}

body.theme-comedy {
    background-image: linear-gradient(135deg, rgba(255, 246, 214, 0.96), rgba(255, 216, 234, 0.88)), url('comedy3.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #3e2d1b;
}

body.theme-action {
    background-image: linear-gradient(180deg, rgba(214, 245, 255, 0.96), rgba(177, 220, 255, 0.95)), url('action.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #0f2d4b;
}

body.theme-romance .header-container,
body.theme-comedy .header-container,
body.theme-action .header-container {
    background-color: rgba(248, 225, 233, 0.88);
}

body.theme-thriller .header-container {
    background-color: rgba(10, 10, 10, 0.92);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

body.theme-romance .title {
    color: #C36C94;
    text-shadow: 0 1px 16px rgba(195,108,148,0.18);
}

body.theme-romance .recommended-item,
body.theme-romance .comic-card,
body.theme-romance .description-container,
body.theme-romance .terms-container,
body.theme-romance .dropdown-content {
    background: rgba(255, 242, 248, 0.88);
}

body.theme-thriller .title,
body.theme-thriller .nav-button,
body.theme-thriller .dropbtn,
body.theme-thriller .genre-link,
body.theme-thriller footer a,
body.theme-thriller .check-title,
body.theme-thriller .comics-title,
body.theme-thriller .comic-info,
body.theme-thriller .recommended-item h3,
body.theme-thriller .recommended-item p {
    color: #f5f5f5;
}

body.theme-mystery .title,
body.theme-mystery .nav-button,
body.theme-mystery .dropbtn,
body.theme-mystery .genre-link,
body.theme-mystery footer a,
body.theme-mystery .check-title,
body.theme-mystery .comics-title,
body.theme-mystery .comic-info,
body.theme-mystery .recommended-item h3,
body.theme-mystery .recommended-item p {
    color: #f3f1eb;
}

body.theme-thriller .nav-button,
body.theme-thriller .dropbtn {
    background: rgba(20, 20, 20, 0.85);
    border: 1px solid rgba(255,255,255,0.12);
}

body.theme-thriller .nav-button:hover,
body.theme-thriller .dropbtn:hover,
body.theme-thriller button:hover {
    background-color: rgba(255,255,255,0.08);
}

body.theme-thriller .recommended-scroll,
body.theme-thriller .comic-card,
body.theme-thriller .create-account-card,
body.theme-thriller .login-card,
body.theme-thriller .terms-container,
body.theme-thriller .dropdown-content {
    background: rgba(10, 10, 10, 0.95);
    border: 1px solid rgba(255,255,255,0.12);
}

body.theme-thriller .recommended-item,
body.theme-thriller .description-container {
    background: rgba(20, 20, 20, 0.9);
    border: 1px solid rgba(255,255,255,0.08);
}

body.theme-mystery .recommended-scroll,
body.theme-mystery .comic-card,
body.theme-mystery .create-account-card,
body.theme-mystery .login-card,
body.theme-mystery .terms-container,
body.theme-mystery .dropdown-content {
    background: rgba(27, 29, 38, 0.96);
    border: 1px solid rgba(227,227,235,0.12);
}

body.theme-mystery .recommended-item,
body.theme-mystery .description-container {
    background: rgba(44, 46, 61, 0.92);
    border: 1px solid rgba(227,227,235,0.1);
}

body.theme-mystery .recommended-item img,
body.theme-mystery .comic-cover {
    filter: grayscale(0.4) contrast(1.1);
}

body.theme-mystery .nav-button,
body.theme-mystery .dropbtn {
    background: rgba(45, 49, 68, 0.88);
    border: 1px solid rgba(227,227,235,0.14);
}

body.theme-mystery .nav-button:hover,
body.theme-mystery .dropbtn:hover {
    background-color: rgba(81, 87, 117, 0.92);
}

body.theme-thriller .recommended-item img,
body.theme-thriller .comic-cover {
    filter: grayscale(1) brightness(0.95);
}

body.theme-thriller .scroll-arrows img {
    filter: invert(1) brightness(1.2);
}

body.theme-thriller .genre-link:hover {
    background-color: rgba(255,255,255,0.12);
}

body.theme-thriller .genre-link.active {
    background-color: rgba(255,255,255,0.15);
    color: #f5f5f5;
}

body.theme-comedy .title {
    color: #99703e;
    text-shadow: 0 0 10px rgba(255,255,255,0.35);
}

/* Webtoon-like viewer styles */
.viewer-toolbar {
    position: sticky;
    top: 0;
    z-index: 40;
    backdrop-filter: blur(6px);
    background: linear-gradient(180deg, rgba(13,18,34,0.92), rgba(13,18,34,0.75));
    border-bottom: 1px solid rgba(255,255,255,0.04);
    padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#viewer-area { background:#0b0d12; }
.viewer-toolbar h2 { margin: 0; font-size: 0.95rem; color: #d7e5ff; text-align:center; }

#reading-area { max-width: 720px; margin: 18px auto; }
/* Panels styled like Webtoons: white card with full-bleed image and subtle shadow */
#reading-area .panel { width: 100%; margin: 18px auto; border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 12px 30px rgba(6,10,18,0.5); }
#reading-area .panel img { width: 100%; height: auto; display: block; }
#reading-area .panel .panel-text { padding: 18px; color:#111; }

/* comment drawer */
#comment-drawer {
    position: fixed;
    right: 12px;
    bottom: 12px;
    width: 360px;
    max-height: 70vh;
    background: rgba(10,12,20,0.96);
    color: #d7e5ff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 60;
}

#comment-drawer .drawer-header { padding: 12px; border-bottom: 1px solid rgba(255,255,255,0.04); display:flex; justify-content:space-between; align-items:center; }
#comment-drawer .drawer-body { padding: 12px; overflow:auto; flex:1; display:grid; gap:8px; }
#comment-drawer .drawer-input { padding: 12px; border-top: 1px solid rgba(255,255,255,0.04); display:flex; gap:8px; align-items:center; }
#comment-drawer textarea { flex:1; padding:8px; border-radius:8px; }

#comment-drawer.show { display: flex; }

/* purchase modal polish */
#purchase-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); align-items:center; justify-content:center; z-index:80; }
#purchase-modal .modal-card { background: linear-gradient(180deg, #0f1226, #0b0d16); padding:20px; border-radius:12px; width:320px; color:#d7e5ff; box-shadow: 0 18px 60px rgba(0,0,0,0.7); }

/* small toolbar buttons */
.viewer-toolbar .small-btn { background: transparent; border: none; color: #d7e5ff; padding:8px 10px; border-radius:8px; cursor:pointer; min-width:44px; }
.viewer-toolbar .small-btn.nav-button { background: rgba(255,255,255,0.03); color:#d7e5ff; border-radius:8px; padding:6px 10px; }
.viewer-toolbar .small-btn:hover { background: rgba(255,255,255,0.04); }

/* center reading column on large screens */
@media (min-width:1000px) {
    #reading-area { max-width: 760px; }
}

body.theme-comedy .recommended-item,
body.theme-comedy .comic-card,
body.theme-comedy .description-container,
body.theme-comedy .terms-container,
body.theme-comedy .dropdown-content {
    background: rgba(255, 248, 214, 0.92);
}

body.theme-comedy .nav-button,
body.theme-comedy .dropbtn {
    background: rgba(255, 255, 255, 0.88);
    color: #5a3b1f;
    border: 1px solid rgba(255,255,255,0.8);
}

body.theme-comedy .nav-button:hover,
body.theme-comedy .dropbtn:hover {
    background-color: rgba(255, 236, 173, 0.9);
}

body.theme-action .title {
    color: #0f2d4b;
    text-shadow: 0 0 10px rgba(255,255,255,0.35);
}

body.theme-action .recommended-item,
body.theme-action .comic-card,
body.theme-action .description-container,
body.theme-action .terms-container,
body.theme-action .dropdown-content {
    background: rgba(219, 238, 250, 0.9);
}

body.theme-action .nav-button,
body.theme-action .dropbtn {
    background: rgba(255, 255, 255, 0.86);
    color: #15416b;
    border: 1px solid rgba(255,255,255,0.8);
}

body.theme-action .nav-button:hover,
body.theme-action .dropbtn:hover {
    background-color: rgba(205, 235, 255, 0.95);
}

body.theme-comedy .genre-link:hover {
    background-color: rgba(255, 226, 175, 0.7);
}

body.theme-action .genre-link:hover {
    background-color: rgba(180, 225, 255, 0.7);
}

.genre-link.active {
    background-color: rgba(195, 108, 148, 0.2);
    color: #C36C94;
}

body.theme-thriller .header-container {
    background-color: rgba(10, 10, 10, 0.88);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

body.theme-thriller .title,
body.theme-thriller .nav-button,
body.theme-thriller .dropbtn,
body.theme-thriller .genre-link,
body.theme-thriller footer a {
    color: #f5f5f5;
}

body.theme-thriller .nav-button:hover,
body.theme-thriller .dropbtn:hover,
body.theme-thriller button:hover {
    background-color: rgba(255,255,255,0.08);
}

body.theme-thriller .recommended-scroll,
body.theme-thriller .comic-card,
body.theme-thriller .create-account-card,
body.theme-thriller .login-card,
body.theme-thriller .terms-container {
    background: rgba(10, 10, 10, 0.85);
    border: 1px solid rgba(255,255,255,0.08);
    color: #f5f5f5;
}

body.theme-comedy .header-container,
body.theme-action .header-container {
    box-shadow: 0 10px 30px rgba(255, 192, 203, 0.15);
}

body.theme-comedy .nav-button,
body.theme-comedy .dropbtn,
body.theme-action .nav-button,
body.theme-action .dropbtn {
    border: 1px solid rgba(255,255,255,0.8);
}

body.theme-romance .header-container {
    background: linear-gradient(145deg, rgba(255, 213, 227, 0.95), rgba(248, 225, 233, 0.94));
    border-bottom: 1px solid rgba(195, 108, 148, 0.2);
}

body.theme-romance .nav-button,
body.theme-romance .dropbtn {
    color: #5a1f3e;
    border: 1px solid rgba(195, 108, 148, 0.3);
    background: rgba(255, 255, 255, 0.7);
}

body.theme-romance .nav-button:hover,
body.theme-romance .dropbtn:hover {
    background-color: rgba(255, 225, 235, 0.85);
}

body.theme-thriller .nav-button,
body.theme-thriller .dropbtn {
    color: #f5f5f5;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(20,20,20,0.85);
}

body.theme-thriller .nav-button:hover,
body.theme-thriller .dropbtn:hover {
    background-color: rgba(255,255,255,0.08);
}

body.theme-comedy .header-container {
    background: linear-gradient(145deg, rgba(255, 243, 196, 0.95), rgba(255, 202, 227, 0.9));
    border-bottom: 1px solid rgba(255, 207, 157, 0.35);
}

body.theme-comedy .nav-button,
body.theme-comedy .dropbtn {
    background: rgba(255, 255, 255, 0.85);
    color: #5a3b1f;
}

body.theme-comedy .nav-button:hover,
body.theme-comedy .dropbtn:hover {
    background-color: rgba(255, 236, 173, 0.9);
}

body.theme-action .header-container {
    background: linear-gradient(145deg, rgba(215, 240, 255, 0.95), rgba(180, 220, 255, 0.92));
    border-bottom: 1px solid rgba(109, 174, 241, 0.35);
}

body.theme-action .nav-button,
body.theme-action .dropbtn {
    background: rgba(255, 255, 255, 0.8);
    color: #15416b;
}

body.theme-action .nav-button:hover,
body.theme-action .dropbtn:hover {
    background-color: rgba(205, 235, 255, 0.95);
}

body.theme-comedy .recommended-item,
body.theme-comedy .comic-card {
    background: rgba(255, 241, 199, 0.9);
}

body.theme-action .recommended-item,
body.theme-action .comic-card {
    background: rgba(209, 235, 255, 0.9);
}

body.theme-action .scroll-arrows,
body.theme-thriller .scroll-arrows,
body.theme-comedy .scroll-arrows,
body.theme-romance .scroll-arrows {
    box-shadow: 0 0 20px rgba(0,0,0,0.12);
}

body.theme-romance .title {
    text-shadow: 0 1px 12px rgba(195,108,148,0.25);
}

body.theme-thriller .title {
    text-shadow: 0 0 12px rgba(255,255,255,0.12);
}

body.theme-comedy .title,
body.theme-action .title {
    text-shadow: 0 0 10px rgba(255,255,255,0.35);
}

body.theme-romance .recommended-item,
body.theme-romance .comic-card {
    background: rgba(242, 178, 196, 0.85);
}

body.theme-comedy .genre-link:hover {
    background-color: rgba(255, 226, 175, 0.7);
}

body.theme-action .genre-link:hover {
    background-color: rgba(180, 225, 255, 0.7);
}

.genre-link.active {
    background-color: rgba(195, 108, 148, 0.2);
    color: #C36C94;
}

/* Header Styles */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: linear-gradient(135deg, rgba(30, 34, 56, 0.95), rgba(42, 46, 70, 0.95));
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.10);
}

.title {
    color: #ffffff; /* White text for modern nav */
    margin: 0;
    font-size: 2.4em; /* Title size */
    font-family: 'Fredoka One', cursive; /* Modern comic-inspired font */
    font-weight: 700; /* Bold */
    letter-spacing: 1px; /* Add spacing for modern look */
}

.nav-button {
    color: #d8dbf2; /* Light menu text */
    text-decoration: none; /* Remove underline */
    padding: 10px 16px; /* Padding */
    border-radius: 999px; /* Pill shape */
}

.shop-container {
    display: grid;
    grid-template-columns: 1.5fr 0.9fr;
    gap: 28px;
    align-items: start;
    margin-bottom: 40px;
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.shop-card {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
}

.shop-cover {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
}

.shop-info {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.shop-info h3 {
    margin: 0;
    color: #3e1f3d;
    font-family: 'Montserrat', sans-serif;
}

.shop-format,
.shop-price {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
}

.shop-price {
    color: #c36c94;
    font-weight: 700;
}

.add-cart-button {
    align-self: flex-start;
    background: #c36c94;
    border: none;
    color: white;
    padding: 12px 18px;
    border-radius: 999px;
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

.add-cart-button:hover {
    transform: translateY(-1px);
    background: #9f4f75;
}

.cart-panel {
    background: rgba(255, 255, 255, 0.94);
    border-radius: 22px;
    padding: 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.08);
}

.cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.cart-badge {
    background: #c36c94;
    color: white;
    padding: 6px 12px;
    border-radius: 999px;
    font-family: 'Open Sans', sans-serif;
}

.cart-items {
    display: grid;
    gap: 14px;
    min-height: 120px;
}

.cart-empty {
    color: #5e2a4a;
    font-family: 'Open Sans', sans-serif;
}

.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 14px 16px;
    background: rgba(243, 212, 220, 0.92);
    border-radius: 16px;
    border: 1px solid rgba(195, 108, 148, 0.18);
}

.cart-item-title,
.cart-item-format {
    margin: 0;
    color: #5e2a4a;
}

.remove-cart-item {
    background: transparent;
    border: 1px solid #c36c94;
    color: #c36c94;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.remove-cart-item:hover {
    background: #c36c94;
    color: white;
}

.cart-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(195,108,148,0.18);
    font-family: 'Montserrat', sans-serif;
    color: #5e2a4a;
}

.checkout-button {
    width: 100%;
    background: #C36C94;
    border: none;
    color: white;
    padding: 14px 16px;
    border-radius: 999px;
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    cursor: pointer;
    margin-top: 18px;
    transition: background 0.2s ease;
}

.checkout-button:hover {
    background: #9f4f75;
}

@media (max-width: 980px) {
    .shop-container {
        grid-template-columns: 1fr;
    }

    .shop-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .header-container {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 14px;
    }

    .title {
        font-size: 1.6em;
        flex: 0 0 auto;
    }

    /* Mobile nav: wrap cleanly with gap, smaller buttons, no overlap. */
    nav {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
    }

    .nav-button,
    .dropbtn {
        padding: 7px 11px;
        font-size: 0.78em;
        margin-left: 0 !important;
        border-radius: 999px;
        line-height: 1.15;
        white-space: nowrap;
    }

    /* Categories dropdown sits on its own line so it never overlaps user pills */
    .dropdown {
        flex: 1 1 100%;
    }
    .dropdown .dropbtn {
        width: 100%;
        text-align: center;
    }

    #coin-display {
        font-size: 0.78em;
        padding: 5px 10px;
    }
}

    transition: background-color 0.3s, transform 0.3s, color 0.3s; /* Transition effect */
    background-color: rgba(255, 255, 255, 0.06); /* Soft button background */
    position: relative; /* Relative positioning for pseudo-element */
    font-family: 'Raleway', sans-serif; /* Modern, clean font */
    font-weight: 600; /* Semi-bold */
    border: 1px solid rgba(255,255,255,0.12);
    margin-left: 12px;
}

.nav-button:first-child {
    margin-left: 0;
}

.nav-button:hover {
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
    transform: translateY(-1px);
}

.nav-button.active,
.nav-button.active:hover {
    background-color: rgba(195, 108, 148, 0.16);
    color: #f9e1f0;
}
    font-family: 'Fredoka One', cursive; /* Modern comic-inspired font */
    font-weight: 700; /* Bold */
    letter-spacing: 1px; /* Add spacing for modern look */
}

/* Navigation Styles */
nav {
    display: flex;
    align-items: center; /* Center items vertically */
}

.nav-button {
    color: #333; /* Professional dark text */
    text-decoration: none; /* Remove underline */
    padding: 8px 12px; /* Padding */
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.3s, transform 0.3s; /* Transition effect */
    background-color: transparent; /* No background color */
    position: relative; /* Relative positioning for pseudo-element */
    font-family: 'Raleway', sans-serif; /* Modern, clean font */
    font-weight: 600; /* Semi-bold */
}

.nav-button::before {
    content: ''; /* Empty content */
    position: absolute; /* Absolute positioning */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Center the image */
    width: 80px; /* Image width */
    height: 80px; /* Image height */
    background-image: url('paintdrop.png'); /* Paintdrop image */
    background-size: contain; /* Fit image in container */
    background-repeat: no-repeat; /* Don't repeat */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.5s ease-in-out; /* Smooth fade */
    z-index: -1; /* Behind the text */
}

.nav-button:hover::before {
    opacity: 1; /* Show on hover */
}

.nav-button:hover {
    background-color: rgba(255, 182, 193, 0.5); /* Light pink spill effect */
    transform: scale(1.1); /* Grow effect on hover */
}

.nav-button:active {
    transform: scale(1.1); /* Grow effect on click */
}

/* Dropdown Styles */
.dropdown {
    position: relative; /* Ensure dropdown is positioned relative */
}

.dropbtn {
    background-color: transparent; /* Transparent background */
    color: #333; /* Professional dark text */
    border: none; /* No border */
    cursor: pointer; /* Pointer on hover */
    padding: 8px 12px; /* Padding */
    text-decoration: none; /* Remove underline */
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.3s, transform 0.3s; /* Transition effect */
    position: relative; /* Relative positioning for pseudo-element */
    font-family: 'Raleway', sans-serif; /* Modern, clean font */
    font-weight: 600; /* Semi-bold */
}

.dropbtn::before {
    content: ''; /* Empty content */
    position: absolute; /* Absolute positioning */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Center the image */
    width: 80px; /* Image width */
    height: 80px; /* Image height */
    background-image: url('paintdrop.png'); /* Paintdrop image */
    background-size: contain; /* Fit image in container */
    background-repeat: no-repeat; /* Don't repeat */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.5s ease-in-out; /* Smooth fade */
    z-index: -1; /* Behind the text */
}

.dropbtn:hover::before {
    opacity: 1; /* Show on hover */
}

.dropbtn:hover {
    background-color: rgba(255, 182, 193, 0.5); /* Light pink spill effect */
    transform: scale(1.1); /* Grow effect on hover */
}

.dropbtn:active {
    transform: scale(1.1); /* Grow effect on click */
}

.dropdown-content {
    display: flex; /* Flex layout for dropdown */
    flex-direction: column; /* Vertical arrangement */
    position: absolute; /* Position below the dropdown */
    background-color: rgba(248, 225, 233, 0.95); /* Semi-transparent background */
    min-width: 160px; /* Minimum width */
    z-index: 1000; /* Layering */
    white-space: nowrap; /* Prevent wrapping */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out; /* Smooth fade effect */
    pointer-events: none; /* Prevent interaction when hidden */
    left: 0; /* Align to the left */
    top: 100%; /* Position below button */
    padding: 10px 0; /* Add padding */
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(-10px);
}

.dropdown:hover .dropdown-content {
    opacity: 1; /* Fully visible on hover */
    pointer-events: auto; /* Allow interaction when visible */
    transform: translateY(0);

}

.genre-link {
    color: #333; /* Professional dark text */
    padding: 10px 15px; /* Add padding */
    display: block; /* Block display */
    transition: background-color 0.3s; /* Transition effect */
    font-family: 'Open Sans', sans-serif; /* Clean font */
}

.genre-link:hover {
    background-color: rgba(255, 182, 193, 0.5); /* Light pink hover effect */
}

/* Recommended Box Styles */
.recommended-scroll {
    position: relative; /* Relative positioning */
    margin: 20px auto; /* Centered with auto margins */
    width: 50%; /* Reduced width */
    height: 400px; /* Increased height */
    background: rgba(248, 225, 233, 0.85); /* Semi-transparent background */
    padding: 20px; /* Padding */
    border-radius: 10px; /* Rounded corners */
    overflow: hidden; /* Hide overflow */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* Shadow effect */
}

.check-title {
    color: #C36C94; /* Title color */
    text-align: center; /* Center title */
    font-family: 'Montserrat', sans-serif; /* Bold, professional font */
    font-weight: 700; /* Bold */
    text-transform: uppercase; /* All caps */
    letter-spacing: 2px; /* Add spacing */
    font-size: 1.3em; /* Slightly larger */
}

.recommended-list {
    display: flex; /* Flex layout for recommended */
    overflow-x: hidden; /* Hide overflow */
    padding: 10px 0; /* Padding */
    height: 100%; /* Full height */
    position: relative; /* Relative positioning */
    mask-image: linear-gradient(to right, transparent 0%, black 96px, black calc(100% - 96px), transparent 100%); /* Blur edges */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 96px, black calc(100% - 96px), transparent 100%); /* Webkit support */
}

.recommended-item {
    background: rgba(242, 178, 196, 0.85); /* Semi-transparent background */
    margin-right: 10px; /* Spacing */
    padding: 15px; /* Padding inside */
    border-radius: 5px; /* Rounded corners */
    min-width: 220px; /* Minimum width for 3 items */
    text-align: center; /* Center text */
    transition: transform 0.3s; /* Scale effect */
    display: flex; /* Flex layout */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items */
    flex-shrink: 0; /* Don't shrink */
}

.recommended-item img {
    width: 180px; /* Image width */
    height: 200px; /* Image height */
    object-fit: cover; /* Cover the area */
    border-radius: 5px; /* Rounded corners */
    margin-bottom: 10px; /* Space below image */
}

.recommended-item h3 {
    margin: 5px 0; /* Spacing */
    font-size: 0.9em; /* Smaller font */
    color: #333; /* Professional dark text */
    font-family: 'Raleway', sans-serif; /* Clean font */
    font-weight: 700; /* Bold */
}

.recommended-item p {
    margin: 5px 0; /* Spacing */
    font-size: 0.8em; /* Smaller font */
    color: #666; /* Professional dark gray */
    font-family: 'Open Sans', sans-serif; /* Clean font */
}

.recommended-item:hover {
    transform: scale(1.05); /* Scale effect on hover */
}

/* Arrow Styles */
.scroll-arrows {
    position: absolute; /* Absolute positioning */
    top: 55px; /* Position below the title */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.5s ease-in-out; /* Smooth fade effect */
    width: 50px; /* Arrow width */
    height: 50px; /* Arrow height */
    cursor: pointer; /* Pointer cursor */
    z-index: 10; /* Ensure arrows are on top */
    display: flex; /* Flex layout */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
}

.scroll-arrows img {
    width: 100%; /* Fill the container */
    height: 100%; /* Fill the container */
    object-fit: contain; /* Maintain aspect ratio */
}

.left-arrow {
    left: 10px; /* Position left arrow inside container */
}

.right-arrow {
    right: 10px; /* Position right arrow inside container */
}

.recommended-scroll:hover .scroll-arrows {
    opacity: 1; /* Fully visible on hover */
}

/* Comics Section Styles */
#comics-section {
    padding: 20px; /* Padding for comics section */
}

.comics-title {
    text-align: center; /* Center the title */
    margin-top: 20px; /* Spacing above */
    font-size: 2.5em; /* Title size */
    font-family: 'Montserrat', sans-serif; /* Professional bold font */
    color: #C36C94; /* Kuromi-inspired color */
    font-weight: 700; /* Bold text */
    text-transform: uppercase; /* All caps */
    padding: 10px; /* Padding for title */
    border: 2px solid #C36C94; /* Cute frame for the title */
    border-radius: 10px; /* Rounded corners */
    background: rgba(255, 182, 193, 0.3); /* Semi-transparent light background */
    letter-spacing: 2px; /* Add spacing */
}

.comics-list {
    display: flex; /* Flex layout for comics */
    flex-direction: column; /* Vertical arrangement */
    align-items: center; /* Center the comics */
}

.comic-card {
    background: rgba(248, 225, 224, 0.85); /* Semi-transparent background */
    margin: 20px 0; /* Spacing between cards */
    padding: 20px; /* Padding inside cards */
    border-radius: 8px; /* Rounded corners */
    width: 80%; /* Wider card */
    display: flex; /* Flex layout for cover and info */
}

.comic-cover {
    width: 40%; /* Adjusted width for the cover image */
    height: auto; /* Maintain aspect ratio */
}

.comic-info {
    padding-left: 20px; /* Space between cover and info */
    font-family: 'Open Sans', sans-serif; /* Clean, professional font */
    font-weight: 600; /* Semi-bold */
    line-height: 1.6; /* Better readability */
}

.comic-card:hover {
    transform: scale(1.05); /* Scale up on hover */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* Shadow effect on hover */
}

/* Description Container */
.description-container {
    background-image: url('Notepad.png'); /* Background for descriptions */
    padding: 20px; /* Padding for description area */
    border-radius: 10px; /* Rounded corners */
}

/* Create Account & Login Page Styles */
.create-account-container,
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Full height of the viewport */
    background-color: #000001; /* Set background to dark */
}

.create-account-card,
.login-card {
    background: rgba(234, 215, 224, 0.85); /* Semi-transparent background */
    padding: 30px; /* Padding for card */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* Shadow effect */
    width: 350px; /* Fixed width */
    text-align: center; /* Centered text */
}

.create-account-header h1,
.login-header h1 {
    color: #C36C94; /* Header color */
    margin: 0 0 10px 0; /* Spacing for header */
}

.create-account-header p,
.login-header p {
    color: #000000; /* Text color for the prompt */
    margin: 0 0 15px; /* Spacing below */
}

label {
    display: block; /* Block display for labels */
    margin: 10px 0 5px; /* Spacing */
    color: #333; /* Professional dark text */
    font-family: 'Open Sans', sans-serif; /* Clean font */
    font-weight: 600; /* Semi-bold */
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"] {
    width: 100%; /* Full width */
    padding: 10px; /* Padding for inputs */
    margin-bottom: 15px; /* Spacing below inputs */
    border: 1px solid #ccc; /* Border */
    border-radius: 5px; /* Rounded corners */
    background-color: #F2B2C4; /* Light background for inputs */
    color: #333; /* Professional dark text */
    font-family: 'Open Sans', sans-serif; /* Clean font */
}

button {
    background-color: transparent; /* Transparent button */
    color: #333; /* Professional dark text */
    border: 2px solid #C36C94; /* Border color */
    padding: 10px; /* Padding for button */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer on hover */
    transition: background-color 0.3s, transform 0.3s; /* Transition effect */
    width: 100%; /* Full width */
    font-family: 'Montserrat', sans-serif; /* Bold, professional font */
    font-weight: 700; /* Bold */
}

button:hover {
    background-color: rgba(255, 182, 193, 0.5); /* Light pink spill effect */
    transform: scale(1.05); /* Scale effect on hover */
}

.remember-me {
    display: flex; /* Flex layout for checkbox */
    align-items: center; /* Center vertically */
    margin-bottom: 15px; /* Spacing */
    color: #000000; /* Checkbox label color */
}

p {
    margin: 10px 0; /* Spacing */
    color: #000000; /* Footer text color */
}

a {
    color: #000; /* Link color */
    text-decoration: none; /* Remove underline */
}

a:hover {
    text-decoration: underline; /* Underline on hover */
}

/* Footer Styles */
footer {
    text-align: center;
    padding: 10px 0; /* Padding for footer */
    background-color: rgba(234, 215, 224, 0.85); /* Semi-transparent footer background */
    position: relative; /* Positioning for footer */
    bottom: 0; /* Stick to the bottom */
    width: 100%; /* Full width */
}

footer a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s;
}

footer a:hover {
    color: #C36C94;
    text-decoration: underline;
}
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Merriweather:wght@400;700&family=Open+Sans:wght@400;600;700&display=swap');

/* General Styles */
body {
    font-family: 'Open Sans', sans-serif; /* Clean, professional font */
    margin: 0;
    padding: 0;
    color: #333; /* Professional text color */
}

body.theme-romance {
    background-image: linear-gradient(rgba(255, 241, 244, 0.92), rgba(249, 234, 242, 0.96)), url('rabbit.png');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    color: #3e1f3d;
}

/* Profile Panel Styles */
.profile-panel {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 16px;
    padding: 28px;
}

/* Header Styles */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: linear-gradient(135deg, rgba(30, 34, 56, 0.95), rgba(42, 46, 70, 0.95));
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.10);
}

.title {
    color: #ffffff; /* White text for modern nav */
    margin: 0;
    font-size: 2.4em; /* Title size */
    font-family: 'Fredoka One', cursive; /* Modern comic-inspired font */
    font-weight: 700; /* Bold */
    letter-spacing: 1px; /* Add spacing for modern look */
}

/* Navigation Styles */
.nav-button {
    color: #333; /* Professional dark text */
    text-decoration: none; /* Remove underline */
    padding: 8px 12px; /* Padding */
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.3s, transform 0.3s; /* Transition effect */
}

/* Responsive Design */
@media (max-width: 980px) {
    .profile-grid {
        grid-template-columns: 1fr; /* Stack the grid items on smaller screens */
    }
}

/* Footer Styles */
footer {
    text-align: center;
    padding: 10px 0; /* Padding for footer */
    background-color: rgba(234, 215, 224, 0.85); /* Semi-transparent footer background */
    position: relative; /* Positioning for footer */
    bottom: 0; /* Stick to the bottom */
    width: 100%; /* Full width */
}