/* 
   ==========================================================================
   BASE STYLE (Shared across all devices)
   ========================================================================== 
*/

:root {
    --bg-color: #ffffff;
    --primary-color: #007bff;
    --text-color: #333;
}

body { 
    font-family: Arial, sans-serif; 
    margin: 0; 
    padding: 0; 
    background: var(--bg-color);
    color: var(--text-color);
}

.header {
    background: #fff;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.logo img { max-height: 50px; }

.menu-toggle {
    display: none;
    background: #f8f9fa;
    border: 1px solid #ddd;
    padding: 10px 15px;
    border-radius: 5px;
    color: #333;
    cursor: pointer;
}

.nav {
    display: flex;
    align-items: center;
}

.nav a { margin-left: 15px; text-decoration: none; color: #333; font-weight: bold; }
.nav a:hover { color: var(--primary-color); }

.container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    min-height: 400px;
}

.main-content { 
    flex: 1; 
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    align-content: flex-start;
}

/* WIDGET CORE STYLES */
.widget-render { width: 100%; margin-bottom: 15px; }
.widget-render h1, .widget-render h2 { margin-top: 0; }
.widget-render img { max-width: 100%; }
.widget-btn { display: inline-block; padding: 10px 20px; background: var(--primary-color); color: #fff !important; text-decoration: none; border-radius: 5px; }

/* Image Widget (Horizontal Flow) */
.widget-render.type-image { 
    width: 20%; /* Default 5 columns for PC */
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin-bottom: 0;
}
.widget-render.type-image img { 
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Gallery Container for AJAX */
#gallery-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 0;
}

/* Hero Banner Core (Proportional) */
.hero-banner { 
    position: relative; 
    width: 100%;
    margin-bottom: 30px;
    border-radius: 8px;
    overflow: hidden;
}
.hero-banner-img {
    width: 100%;
    height: auto;
    display: block;
}
.hero-banner::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1;
}
.hero-banner-content { 
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2; 
    padding: 0 20px; 
    text-align: center;
    width: 90%;
    color: #fff;
}
.hero-banner h1 { margin-bottom: 5px; color: #fff; }
.hero-banner p { opacity: 0.9; color: #fff; margin: 0; }

/* Profile Widget */
.profile-widget {
    display: flex;
    flex-direction: column;
    align-items: inherit;
    gap: 10px;
    padding: 10px 0;
}
.profile-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    border: 3px solid #eee;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.profile-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profile-name {
    font-weight: bold;
    font-size: 18px;
    color: #333;
}
.align-center .profile-widget { align-items: center; text-align: center; }
.align-left .profile-widget { align-items: flex-start; text-align: left; }
.align-right .profile-widget { align-items: flex-end; text-align: right; }

/* Image Slider Horizontal */
.image-slider-horizontal {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding: 10px 0;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin; /* Firefox */
}
.image-slider-horizontal::-webkit-scrollbar {
    height: 6px;
}
.image-slider-horizontal::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}
.slider-item {
    flex: 0 0 150px; /* Base size for images */
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    scroll-snap-align: start;
    cursor: pointer;
    background: #f0f0f0;
}
.slider-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.slider-item:hover img {
    transform: scale(1.05);
}

/* WebView */
.widget-render.type-webview iframe {
    width: 100%;
    height: 600px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.google-map-container iframe {
    width: 100% !important;
    height: 450px;
    border: 0;
    border-radius: 8px;
}

/* Form Styles */
.form-grid { display: flex; flex-wrap: wrap; gap: 15px; width: 100%; }
.form-item { margin-bottom: 5px; }
.btn-group-toggle { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-toggle-input { display: none; }
.btn-toggle-label { 
    padding: 8px 15px; border: 1px solid #ccc; border-radius: 20px; 
    cursor: pointer; font-size: 13px; background: #fff; transition: all 0.2s;
}
.btn-toggle-input:checked + .btn-toggle-label {
    background: var(--primary-color); color: #fff; border-color: var(--primary-color);
}

/* Sosmed Icons */
.sosmed-container { display: flex; flex-wrap: wrap; gap: 15px; padding: 10px 0; width: 100%; }
.sosmed-btn {
    width: 45px; height: 45px; border-radius: 50%; display: flex; 
    align-items: center; justify-content: center; color: #fff !important; 
    text-decoration: none; font-size: 20px; transition: transform 0.2s, opacity 0.2s;
}
.sosmed-btn:hover { transform: scale(1.1); opacity: 0.9; }
.sosmed-gmail { background: #DB4437; }
.sosmed-whatsapp { background: #25D366; }
.sosmed-instagram { background: #E1306C; }
.sosmed-youtube { background: #FF0000; }
.sosmed-facebook { background: #1877F2; }
.sosmed-tiktok { background: #000000; }

/* Lightbox */
#lightbox-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9);
    display: none; justify-content: center; align-items: center;
    z-index: 9999;
}
#lightbox-img { max-width: 90%; max-height: 90%; border: 2px solid #fff; box-shadow: 0 0 20px rgba(0,0,0,0.5); }
#lightbox-close {
    position: absolute; top: 20px; right: 30px;
    color: #fff; font-size: 40px; font-weight: bold; cursor: pointer;
    z-index: 10000;
}

.footer { text-align: center; padding: 20px; background: #343a40; color: #fff; margin-top: 40px; }

/* Alignment Utilities */
.align-left { text-align: left; justify-content: flex-start; }
.align-center { text-align: center; justify-content: center; }
.align-right { text-align: right; justify-content: flex-end; }
.align-justify { text-align: justify; }
.align-left .sosmed-container { justify-content: flex-start; }
.align-center .sosmed-container { justify-content: center; }
.align-right .sosmed-container { justify-content: flex-end; }

/* Column Wrapper */
.column-wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 15px;
    margin-bottom: 20px;
}
.column-wrapper .widget-render {
    width: auto;
    margin-bottom: 0;
}