/* Custom styles for Bestek Kitchen Table Website */

/* ==================== RESET STYLES ==================== */
html, body {
    margin: 0 !important;
    padding: 0 !important;
}

/* ==================== DESKTOP CANVAS STYLES ==================== */
/* Disable text selection during drag */
#viewport {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: none;
}

/* World container */
#world {
    width: 4000px;
    height: 4200px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform-origin: 0 0;
}

/* ==================== MOBILE STYLES ==================== */
@media (max-width: 767px) {
    /* Ensure body can scroll on mobile */
    body {
        overflow-y: auto !important;
        overflow-x: hidden;
        height: auto !important;
    }
    
    /* Hide viewport on mobile */
    #viewport {
        display: none !important;
    }
    
    /* Optimize fonts for mobile */
    .card-title {
        font-size: 1.75rem;
    }
    
    /* Improve tap targets */
    button, a {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Native smooth scrolling (CSS-only, no JS needed) */
    html {
        scroll-behavior: smooth;
    }
    
    /* Ensure smooth scroll on iOS Safari */
    * {
        -webkit-overflow-scrolling: touch;
    }
}

/* Section cards */
.section-card {
    position: absolute;
    background: rgba(255, 250, 239, 0.75);
    border: 3px solid #000;
    border-radius: 12px;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 750px;
    width: 750px;
    backdrop-filter: blur(12px);
    transform: rotate(-1deg);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.section-card:hover {
    transform: rotate(0deg) scale(1.02);
    box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.3);
}

.section-card:nth-child(even) {
    transform: rotate(1deg);
}

.section-card:nth-child(even):hover {
    transform: rotate(0deg) scale(1.02);
}

/* Card title */
.section-card h2 {
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: 0.5rem;
}

/* Polaroid style images */
.polaroid {
    background: #fff;
    padding: 12px 12px 40px 12px;
    border: 2px solid #000;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
    transform: rotate(3deg);
    display: inline-block;
}

/* Navigation buttons */
nav button {
    font-family: 'Courier New', monospace;
}

/* Smooth camera movement */
#world.animating {
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Logo styling */
.fixed img[alt="BESTEK"] {
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
    transition: transform 0.3s ease;
}

.fixed img[alt="BESTEK"]:hover {
    transform: scale(1.05);
}

/* ==================== COOKIE CONSENT STYLING ==================== */
/* Main modal container */
#cc-main .cm {
    background: rgba(255, 250, 239, 0.95) !important;
    border: 2px solid #000 !important;
    border-radius: 6px !important;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(12px) !important;
    font-family: 'Courier New', monospace !important;
    max-width: 280px !important;
    padding: 0.6rem !important;
}

/* Title */
#cc-main .cm__title {
    font-size: 0.7rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    color: #000 !important;
    padding-bottom: 0.4rem !important;
    border-bottom: 1px solid #000 !important;
    margin-bottom: 0.4rem !important;
}

/* Description text */
#cc-main .cm__desc {
    font-family: 'Courier New', monospace !important;
    font-size: 0.6rem !important;
    color: #000 !important;
    line-height: 1.35 !important;
}

/* Button container */
#cc-main .cm__btns {
    gap: 0.25rem !important;
    border-top: 1px solid #000 !important;
    padding-top: 0.4rem !important;
    margin-top: 0.4rem !important;
}

/* All buttons base */
#cc-main .cm__btn {
    font-family: 'Courier New', monospace !important;
    font-weight: 700 !important;
    font-size: 0.55rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    border: 2px solid #000 !important;
    border-radius: 4px !important;
    padding: 0.3rem 0.5rem !important;
    transition: all 0.2s ease !important;
    min-height: 26px !important;
}

/* Primary button (Accept all) */
#cc-main .cm__btn--accept-all {
    background: #000 !important;
    color: #fff56e !important;
}

#cc-main .cm__btn--accept-all:hover {
    background: #fff56e !important;
    color: #000 !important;
}

/* Secondary button (Reject/Only necessary) */
#cc-main .cm__btn--accept-necessary {
    background: #fff56e !important;
    color: #000 !important;
}

#cc-main .cm__btn--accept-necessary:hover {
    background: #000 !important;
    color: #fff56e !important;
}

/* Manage preferences button */
#cc-main .cm__btn--manage-settings {
    background: transparent !important;
    color: #000 !important;
    border-color: #000 !important;
}

#cc-main .cm__btn--manage-settings:hover {
    background: rgba(0, 0, 0, 0.1) !important;
}

/* Footer links */
#cc-main .cm__footer {
    border-top: 1px solid rgba(0,0,0,0.3) !important;
    padding-top: 0.3rem !important;
    margin-top: 0.3rem !important;
}

#cc-main .cm__footer a {
    font-family: 'Courier New', monospace !important;
    font-size: 0.5rem !important;
    color: #000 !important;
    text-decoration: underline !important;
}

#cc-main .cm__footer a:hover {
    color: #666 !important;
}

/* Preferences modal */
#cc-main .pm {
    background: rgba(255, 250, 239, 0.98) !important;
    border: 2px solid #000 !important;
    border-radius: 8px !important;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25) !important;
    font-family: 'Courier New', monospace !important;
    max-width: 400px !important;
}

#cc-main .pm__header {
    border-bottom: 2px solid #000 !important;
    padding: 0.75rem !important;
}

#cc-main .pm__title {
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #000 !important;
    font-size: 0.85rem !important;
}

#cc-main .pm__close-btn {
    border: 1px solid #000 !important;
    border-radius: 4px !important;
    background: transparent !important;
    width: 24px !important;
    height: 24px !important;
}

#cc-main .pm__close-btn:hover {
    background: rgba(0, 0, 0, 0.1) !important;
}

#cc-main .pm__section {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
    padding: 0.6rem 0.75rem !important;
}

#cc-main .pm__section-title {
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    font-size: 0.7rem !important;
    color: #000 !important;
}

#cc-main .pm__section-desc {
    font-family: 'Courier New', monospace !important;
    font-size: 0.65rem !important;
    color: #000 !important;
    line-height: 1.4 !important;
}

/* Badge (Always enabled) */
#cc-main .pm__badge {
    background: #fff56e !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    border-radius: 9999px !important;
    font-size: 0.5rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 0.1rem 0.4rem !important;
}

/* Toggle switch */
#cc-main .pm__toggle {
    background: #dcd3cc !important;
    border: 1px solid #000 !important;
    transform: scale(0.85) !important;
}

#cc-main .pm__toggle.is-on {
    background: #fff56e !important;
}

#cc-main .pm__toggle-handle {
    background: #000 !important;
}

/* Footer buttons in preferences */
#cc-main .pm__footer {
    border-top: 2px solid #000 !important;
    background: rgba(0, 0, 0, 0.02) !important;
    padding: 0.6rem !important;
}

#cc-main .pm__btn {
    font-family: 'Courier New', monospace !important;
    font-weight: 700 !important;
    font-size: 0.6rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    border: 2px solid #000 !important;
    border-radius: 6px !important;
    padding: 0.4rem 0.6rem !important;
    transition: all 0.2s ease !important;
}

#cc-main .pm__btn--accept-all {
    background: #000 !important;
    color: #fff56e !important;
}

#cc-main .pm__btn--accept-all:hover {
    background: #fff56e !important;
    color: #000 !important;
}

#cc-main .pm__btn--accept-necessary {
    background: #fff56e !important;
    color: #000 !important;
}

#cc-main .pm__btn--accept-necessary:hover {
    background: #000 !important;
    color: #fff56e !important;
}

#cc-main .pm__btn--save {
    background: transparent !important;
    color: #000 !important;
}

#cc-main .pm__btn--save:hover {
    background: rgba(0, 0, 0, 0.1) !important;
}