/* =========================================
   PALAMANER TOWN - PREMIUM LIGHT MODE + PHYSICS
   ========================================= */

:root {
    /* Brand Colors */
    --primary: #2563eb;       
    --primary-hover: #1d4ed8;
    --business: #f59e0b;      
    --danger: #ef4444;
    --success: #10b981;
    
    /* Surface Colors (Locked to Light Mode) */
    --bg-base: #f3f4f6;       
    --bg-card: #ffffff;
    --bg-input: #f9fafb;
    --border: rgba(0, 0, 0, 0.05);
    --glass-bg: rgba(255, 255, 255, 0.85);
    
    /* Text Colors */
    --text-main: #111827;     
    --text-muted: #6b7280;    
    
    /* Geometry & Physics */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy physics curve */
    
    /* Elevation / Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-float: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* --- GLOBAL RESETS --- */
* {
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent; 
}

body {
    margin: 0;
    padding-top: 70px; 
    padding-bottom: 90px; 
    background-color: var(--bg-base);
    color: var(--text-main);
    overflow-x: hidden;
}

::-webkit-scrollbar { width: 0px; background: transparent; }

/* --- GLASSMORPHISM NAVIGATION --- */
.top-bar, .bottom-nav {
    position: fixed; left: 0; width: 100%;
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    z-index: 1000;
}

.top-bar {
    top: 0; display: flex; justify-content: space-between; align-items: center;
    padding: 12px 20px; box-shadow: var(--shadow-sm);
    border-bottom: 1px solid var(--border);
}

.bottom-nav {
    bottom: 0; display: flex; justify-content: space-around; align-items: center;
    padding: 10px 0; padding-bottom: calc(10px + env(safe-area-inset-bottom)); 
    border-top: 1px solid var(--border);
}

.top-bar h2 {
    font-size: 22px; font-weight: 800; letter-spacing: -0.5px;
    background: linear-gradient(135deg, var(--primary), #60a5fa);
    -webkit-background-clip: text; 
    background-clip: text; /* <-- ADD THIS LINE */
    -webkit-text-fill-color: transparent; margin: 0;
}

.bottom-btn {
    background: none; border: none; font-size: 13px; font-weight: 700;
    color: var(--text-muted); padding: 10px 20px; border-radius: var(--radius-md);
    cursor: pointer; transition: 0.3s var(--spring);
}
.bottom-btn.active { color: var(--primary); transform: scale(1.1); }
.bottom-btn:active { transform: scale(0.85); }

.create-btn {
    background: linear-gradient(135deg, var(--primary), #3b82f6);
    color: white; font-size: 26px; font-weight: 300;
    width: 55px; height: 55px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; box-shadow: var(--shadow-float);
    transform: translateY(-15px);
    transition: 0.4s var(--spring);
}
.create-btn:hover { transform: translateY(-20px) scale(1.05); box-shadow: 0 15px 30px rgba(37, 99, 235, 0.4); }
.create-btn:active { transform: translateY(-10px) scale(0.9); }

/* --- PHYSICS-DRIVEN FEED CARDS --- */
.container { max-width: 600px; margin: 0 auto; padding: 0 12px; }

.card, .post {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 20px; margin-bottom: 16px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
    animation: slideUpFade 0.6s var(--spring) both;
    transition: 0.4s var(--spring);
    transform-origin: center bottom;
}

/* Hover Physics for posts */
.post:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: var(--shadow-float);
    border-color: rgba(37, 99, 235, 0.2);
}

@keyframes slideUpFade {
    0% { opacity: 0; transform: translateY(40px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- TEXT BEHAVIOR & CLAMPING --- */
.post-text { 
    font-size: 15px; 
    line-height: 1.6; 
    margin-top: 12px; 
    color: var(--text-main); 
    word-wrap: break-word; 
    overflow-wrap: anywhere; /* NEW: Forces continuous letters like 'VVVV' to break */
}

.text-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Limits the post to exactly 4 lines */
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.read-more-btn {
    background: none; border: none; padding: 6px 0 0 0;
    color: var(--text-muted); font-size: 14px; font-weight: 700;
    cursor: pointer; display: block; text-align: left;
    transition: 0.2s var(--spring);
}
.read-more-btn:hover { color: var(--primary); }
.read-more-btn:active { transform: scale(0.95); }

.card-title { margin-top: 0; font-size: 20px; font-weight: 800; color: var(--text-main); }

/* --- TACTILE BUTTONS --- */
.primary-btn {
    background: var(--primary); color: white; border: none;
    padding: 14px 24px; border-radius: var(--radius-md);
    font-weight: 700; font-size: 15px; cursor: pointer;
    transition: 0.3s var(--spring); width: 100%;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}
.primary-btn:hover { background: var(--primary-hover); transform: translateY(-2px); }
.primary-btn:active { transform: scale(0.95) translateY(2px); box-shadow: none; }

.secondary-btn {
    background: var(--bg-input); color: var(--text-main);
    border: 1px solid var(--border); padding: 10px 18px;
    border-radius: var(--radius-md); font-weight: 700;
    cursor: pointer; transition: 0.2s ease;
}
.secondary-btn:hover { background: #e5e7eb; }
.secondary-btn:active { transform: scale(0.96); }

/* --- ELASTIC INPUTS --- */
input[type="text"], input[type="tel"], textarea, select {
    width: 100%; padding: 14px 16px; border: 2px solid transparent;
    border-radius: var(--radius-md); font-size: 15px; margin-bottom: 15px;
    background: var(--bg-input); color: var(--text-main);
    transition: 0.3s var(--spring);
}
input:focus, textarea:focus, select:focus {
    outline: none; border-color: var(--primary); background: var(--bg-card);
    transform: scale(1.02); /* Input expands slightly when typing */
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15); 
}
textarea { resize: vertical; min-height: 90px; }

/* --- ANIMATED MODALS --- */
.modal {
    display: none; position: fixed; z-index: 2000;
    left: 0; top: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    overflow-y: auto; padding: 20px 0;
}
.modal-content {
    background-color: var(--bg-card);
    margin: auto; padding: 28px; border: 1px solid var(--border);
    width: 92%; max-width: 450px; border-radius: var(--radius-xl);
    box-shadow: var(--shadow-float); position: relative;
    animation: modalPop 0.5s var(--spring);
}

@keyframes modalPop {
    0% { transform: translateY(60px) scale(0.9); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

.close-btn {
    position: absolute; right: 20px; top: 20px;
    color: var(--text-muted); font-size: 24px; cursor: pointer;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--bg-input); transition: 0.4s var(--spring);
}
.close-btn:hover { background: var(--danger); color: white; transform: rotate(180deg) scale(1.1); }

/* --- REACTION PHYSICS --- */
.react-btn, .view-comments-btn { padding: 6px 12px; border-radius: 20px; transition: 0.3s var(--spring); }
.react-btn:hover { background: var(--bg-input); transform: translateY(-2px); }
.react-btn:active { transform: scale(0.7) translateY(4px); } /* Violent snap-back on like */

/* --- SEARCH BAR --- */
.search-container { margin: 15px 0; position: sticky; top: 70px; z-index: 999; }
.search-input {
    border-radius: 30px !important;
    padding: 14px 24px !important;
    background: var(--bg-card) !important;
    box-shadow: var(--shadow-md) !important;
    border: 1px solid var(--border) !important;
}

/* --- UTILITIES --- */
.menu-list-btn {
    width: 100%; padding: 16px; border-radius: var(--radius-md);
    border: 1px solid var(--border); background: var(--bg-card);
    font-size: 16px; font-weight: 700; color: var(--text-main);
    cursor: pointer; text-align: left; transition: 0.3s var(--spring);
    box-shadow: var(--shadow-sm);
}
.menu-list-btn:hover { background: var(--bg-input); transform: translateX(8px); }
.loading-msg { text-align: center; color: var(--text-muted); margin: 20px 0; font-weight: 600; font-size: 14px; }
.user-greeting { font-weight: 700; font-size: 14px; color: var(--text-main); }


.skeleton-box {
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: pulse 1.5s infinite;
  border-radius: 8px;
}

@keyframes pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.like-button {
  transition: transform 0.15s ease-in-out;
}

.like-button:active {
  transform: scale(1.2); /* Makes the button pop slightly when pressed */
}

/* =========================================
   SYSTEM-SYNCED DARK MODE OVERRIDES
   ========================================= */
@media (prefers-color-scheme: dark) {
    :root {
        --primary: #60a5fa;
        /* Deep OLED & Zinc colors for premium feel */
        --bg-base: #000000;       
        --bg-card: #18181b;
        --bg-input: #27272a;
        --border: rgba(255, 255, 255, 0.08);
        --glass-bg: rgba(24, 24, 27, 0.85);
        
        --text-main: #f4f4f5;     
        --text-muted: #a1a1aa;    
        
        /* Adjusting shadows for dark mode */
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
        --shadow-float: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
    }

    /* Keep the primary blue text legible against dark backgrounds */
    .top-bar h2 {
        background: linear-gradient(135deg, #60a5fa, #93c5fd);
        -webkit-background-clip: text; 
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}