/* =========================================
   Izziekitty's Saloon - Global Styles
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');

body, html {
    margin: 0; padding: 0; 
    font-family: 'Patrick Hand', cursive, sans-serif;
}

/* --- Universal Nav Buttons (with Back Arrow SVG) --- */
.back-btn {
    position: fixed; 
    top: 20px; left: 20px; 
    background-color: #ff4757; color: white; text-decoration: none; 
    font-size: 1.2rem; font-weight: bold; padding: 10px 20px; 
    border-radius: 30px; border: 3px solid #ff6b81; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.2); transition: transform 0.2s; z-index: 1000;
    display: inline-flex; align-items: center; gap: 6px;
}
.back-btn:hover { transform: scale(1.05); }

.back-link { /* For smaller text links that go back */
    display: inline-flex; align-items: center; gap: 4px;
}

.back-btn::before, .back-link::before {
    content: ""; display: inline-block;
    width: 18px; height: 18px;
    background-color: currentColor; 
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- Smol Toggle Button (with Custom Tall/Short Swap SVG) --- */
.smol-btn { 
    position: fixed; top: 20px; left: 20px; 
    background-color: #9b59b6; color: white; border: 4px solid #fff; 
    border-radius: 30px; padding: 10px 20px; font-size: 1.2rem; font-weight: bold;
    cursor: pointer; z-index: 1000; font-family: inherit;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3); transition: all 0.2s;
    display: inline-flex; align-items: center; gap: 10px; 
}
.smol-btn:hover { 
    background-color: #8e44ad; 
    transform: scale(1.05);
}
.smol-btn::before {
    content: ""; display: inline-block;
    width: 24px; height: 24px;
    background-color: currentColor; 
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M 6 5 Q 12 0 18 5'/%3E%3Cpolyline points='4 4 6 5 7 3'/%3E%3Cpolyline points='17 3 18 5 20 4'/%3E%3Ccircle cx='7' cy='10' r='3'/%3E%3Cpath d='M3 21v-2a4 4 0 0 1 4-4h0a4 4 0 0 1 4 4v2'/%3E%3Ccircle cx='17' cy='13' r='2.5'/%3E%3Cpath d='M14 21v-1a3 3 0 0 1 3-3h0a3 3 0 0 1 3 3v1'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M 6 5 Q 12 0 18 5'/%3E%3Cpolyline points='4 4 6 5 7 3'/%3E%3Cpolyline points='17 3 18 5 20 4'/%3E%3Ccircle cx='7' cy='10' r='3'/%3E%3Cpath d='M3 21v-2a4 4 0 0 1 4-4h0a4 4 0 0 1 4 4v2'/%3E%3Ccircle cx='17' cy='13' r='2.5'/%3E%3Cpath d='M14 21v-1a3 3 0 0 1 3-3h0a3 3 0 0 1 3 3v1'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- Global Notifications --- */
#global-unread-btn {
    position: fixed; top: 20px; right: 20px; 
    background-color: #ff4757; color: white; text-decoration: none; 
    font-size: 1.2rem; font-weight: bold; padding: 10px 20px; 
    border-radius: 30px; border: 3px solid #ff6b81; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.2); transition: transform 0.2s; z-index: 1000;
}
#global-unread-btn:hover { transform: scale(1.05); }

#global-toast-container { position: fixed; top: 80px; right: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; }
@keyframes popInDown { 0% { transform: translateY(-50px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.global-toast-msg { background: #f1c40f; color: #2c3e50; padding: 15px 25px; border-radius: 15px; font-weight: bold; font-size: 1.1rem; border: 3px solid #e67e22; box-shadow: 0 5px 15px rgba(0,0,0,0.3); animation: popInDown 0.3s ease-out; cursor: pointer; }

/* --- Universal SVG Delete Button --- */
.delete-btn {
    background-color: rgba(255, 71, 87, 0.1); color: #ff4757; border: 2px solid rgba(255, 71, 87, 0.3);
    border-radius: 10px; padding: 5px 12px; font-weight: bold; cursor: pointer; font-size: 0.9rem;
    transition: all 0.2s; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; 
}
.delete-btn:hover { background-color: #ff4757; color: white; transform: scale(1.05); }
.delete-btn::before {
    content: ""; display: inline-block; width: 16px; height: 16px; background-color: currentColor; 
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E") no-repeat center / contain;
}
.delete-btn.icon-only { padding: 6px; border-radius: 50%; }
.delete-btn.icon-only::before { margin: 0; }

/* --- Universal SVG Add Friend Button --- */
.add-friend-btn {
    background-color: rgba(29, 209, 161, 0.1); color: #10ac84; border: 2px solid rgba(29, 209, 161, 0.3);
    border-radius: 10px; padding: 5px 12px; font-weight: bold; cursor: pointer; font-size: 0.9rem;
    transition: all 0.2s; font-family: inherit; display: inline-flex; align-items: center; gap: 6px;
}
.add-friend-btn:hover { background-color: #1dd1a1; color: white; transform: scale(1.05); }
.add-friend-btn::before {
    content: ""; display: inline-block; width: 16px; height: 16px; background-color: currentColor; 
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'%2F%3E%3Ccircle cx='8.5' cy='7' r='4'%2F%3E%3Cline x1='20' y1='8' x2='20' y2='14'%2F%3E%3Cline x1='23' y1='11' x2='17' y2='11'%2F%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'%2F%3E%3Ccircle cx='8.5' cy='7' r='4'%2F%3E%3Cline x1='20' y1='8' x2='20' y2='14'%2F%3E%3Cline x1='23' y1='11' x2='17' y2='11'%2F%3E%3C/svg%3E") no-repeat center / contain;
}
.add-friend-btn.icon-only { padding: 6px; border-radius: 50%; }
.add-friend-btn.icon-only::before { margin: 0; }