/* ==========================================
   Plaza Application Global CSS (user.css)
   - Includes template overrides and global styles
   - All modules should use this for consistent styling
========================================== */

/* ========================================================
   USER.CSS SKELETON - GLOBAL & MODULE STYLES
   ======================================================== */
/* ================================
   GLOBAL SITE-WIDE VARIABLES
   ================================ */

/* ==============================
   SITE-WIDE GLOBAL STYLES
   ============================== */

/* ------------------------------
   Buttons
------------------------------ */
button {}
button[type="button"] {}
button[type="submit"] {}

/* ------------------------------
   Form Fields
------------------------------ */
input {}
input[type="hidden"] {}
input[type="text"] {}
input[type="email"] {}
input[type="file"] {}
textarea {}
label {}
select {}

/* ------------------------------
   Form Fields (uniform)
------------------------------ */
.field {}
.field input {}
.field textarea {}
.field button {}


/* ------------------------------
   Images / Thumbnails
------------------------------ */
.thumb {}
.thumb img {}
.thumb_editmode {}
.thumb_editmode img {}
.thumb_editmode .delete-overlay {}
.thumb_editmode .new-badge {}

/* ------------------------------
   Thumbnail Wrappers
------------------------------ */
.thumbnail-wrapper {}
.thumbs-container {}
.thumbs-container::-webkit-scrollbar {}
.thumbs-container::-webkit-scrollbar-thumb {}
.thumbs-container::-webkit-scrollbar-track {}
.thumbs-container::-webkit-scrollbar-track-piece {}

/* ------------------------------
   Lightbox Overlay
------------------------------ */
#lightbox-overlay {}
#lightbox-overlay #lightbox-content {}
#lightbox-overlay #lightbox-content #lightbox-img {}
#lightbox-overlay #lightbox-content #lightbox-close {}
#lightbox-overlay #lightbox-prev {}
#lightbox-overlay #lightbox-next {}

/* ------------------------------
   Drag & Drop Upload Box
------------------------------ */
#image-upload-box {}
#image-upload-box.dragover {}

/* ------------------------------
   Hidden Inputs for JSON tracking
------------------------------ */
input.profile-images-json {}
input.profile-images-to-delete-json {}
input.extra-fields-json {}


/* ==============================
   ==============================
   SITE-WIDE TEMLATE OVERRIDES
   ==============================
   ============================== */


/* Add a wrapper for complete control */
.plaza-header-wrapper .header.container-header.full-width {
  background: #000000;
  padding: 1rem 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Or completely restyle the header */
.plaza-header-wrapper .header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 1rem 0;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}
















/* ==============================
   SITE-WIDE MODULES STYLES
   ============================== */

/* ==============================
   MOD_PLAZA_MENU
   ============================== */


/* Force main template menu vertical at all widths */
.container-header .mod-menu {
    display: block;
   /* list-style: none;*/
}

/* Make link text appear above pseudo-element */
.container-header .mod-menu > li > a {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;       /* optional spacing */
    text-decoration: none;
    color: #fff;
}

/* Make hover/active pseudo-element fill full menu item height */
.container-header .mod-menu > li.active::after,
.container-header .mod-menu > li:hover::after {
    background: red;       
    top: 0;                     /* start at top of li */
    left: 0;
    right: 0;                   /* full width */
    height: 100%;               /* full height of li */
    content: '';                /* ensure pseudo-element exists */
    position: absolute;
    z-index: 0;                 /* behind the text */
}

/* Show submenu when parent li has .open */
.container-header .mod-menu .parent.open > ul {
    display: block;
}

/* Show submenu when parent is clicked */
.container-header .mod-menu .parent.submenu-open > ul.mod-menu__sub {
    display: block;
}

/* Make submenu background white for visibility */
.container-header .mod-menu ul.mod-menu__sub {
  background-color: #fff;
}

/* Remove margin for main menu */
@media (width >= 992px) {
    .container-header .mod-menu>li+li {
        margin-left: 0;
    }
}

/* Remove margin for main menu (commented) */
/*@media (width >= 992px) {
    .container-header .mod-menu>li+li {
        margin-left: 0;
    }
}*/

/* Force main template menu vertical at all widths (commented) */
/*.container-header .mod-menu {
    display: block;
   /* list-style: none;*/
/*}*/

/* Show submenu on hover of parent li */
li.nav-item.parent:hover > ul.mod-menu__sub {
    display: block;
}

/* HAMBURGER */
.plaza-menu .hamburger {
    width: 35px;          /* width of the button */
    height: 35px;         /* height of the button */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    margin: 20px 0 0 20px;
    z-index: 10000;   /* above overlay (9998) and menu (9999) */
}

.plaza-menu .hamburger span {
display: block;
    height: 6px;
    background-color: #d13131;
    border-radius: 2px;
}

/* Example: in plaza.css */
.plaza-menu #hamburger-btn {
    color: #ffffff;
}

/* Off-canvass menu */
.plaza-menu #offcanvas-menu {
    position: fixed;
    top: 0;
    left: -70%;           /* hides left half, shows right half */
    width: 50%;           /* menu width */
    height: 100vh;        /* full viewport height */
    background-color: #68bbb6; /* dark background so itโ€™s visible */
    color: #fff;
    overflow-y: auto;     /* scroll if content taller than screen */
    transition: left 0.3s ease; /* smooth slide */
    z-index: 9999;
    padding: 20px;
}

/* When active, slide menu fully into view */
.plaza-menu #offcanvas-menu.active {
    left: 0;
}

/* Example: menu items */
.plaza-menu #offcanvas-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
}

.plaza-menu #offcanvas-menu li {
    margin-bottom: 10px;
    display: block;  /* ensures items stack vertically */
}

.plaza-menu #offcanvas-menu a {
    color: #000;
    text-decoration: none;
    font-size: 18px;
}

.plaza-menu .offcanvas-menu ul li a {
    text-decoration: none; /* remove underline */
    color: #fff;           /* adjust color if needed */
}

/* Overlay / underlay */
.plaza-menu #offcanvas-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;                /* covers half the screen for testing */
    height: 100%;
    z-index: 9998;             /* below offcanvas menu */
}

/* When active, make overlay fully visible */
.plaza-menu #offcanvas-overlay.active {
    width: 100%; /* full screen overlay */
}

/* Hide all submenus by default */
ul.mod-menu__sub {
    display: none;
}

/* Make submenu links fully clickable (first block) */
ul.mod-menu__sub li > a {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  position: relative;
  z-index: 1;
  text-decoration: none;
  color: #000; /* or whatever fits your design */
}

/* Submenu links: full width clickable (second block) */
ul.mod-menu__sub li > a {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  position: relative;
  z-index: 1;
  text-decoration: none;
  color: #000; /* normal text color */
  background-color: #fff; /* submenu background */
}

/* Submenu link hover */
ul.mod-menu__sub li > a:hover {
  background-color: #ddd; /* light gray when hovering */
  color: #000; /* keep text visible */
}

/* Submenu link active / current page */
ul.mod-menu__sub li.current > a,
ul.mod-menu__sub li.active > a {
  background-color: #bbb; /* darker gray for active page */
  color: #000;
}


/* ==============================
   MOD_PLAZA_USERPROILE
   ============================== */



.plaza-userprofile {
}

.plaza-userprofile .userprofile-name {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}



/* ==========================
   Extra Fields Section CSS
=========================== */
.plaza-userprofile .extra {
}

/* Button to add extra fields */
.plaza-userprofile .extra #add-extra-field {
    margin-top: 10px;
    /* add more styles if needed, e.g., padding, background, etc. */
}

.plaza-userprofile .extra #extra-field-template {
}

.plaza-userprofile .extra #extra-field-template .extra-field-box {
}

.plaza-userprofile .extra #extra-field-template .extra-field-box button {
}

.plaza-userprofile .extra #extra-field-template .extra-field-box input.form-control {
}

.plaza-userprofile .extra #extra-field-template .extra-field-box textarea.form-control {
}

.plaza-userprofile .extra #extra-fields-container {
}

.plaza-userprofile .extra .extra-field-box {
    border: 1px solid #ccc;
    padding: 10px;
    margin-top: 10px;
    position: relative;
    border-radius: 6px;
}

.plaza-userprofile .extra .extra-field-box .form-control {
    width: 100%;
    margin-bottom: 8px;
}

.plaza-userprofile .extra .extra-field-box button {
    display: block;
    margin-top: 8px;
    margin-left: auto;
    margin-right: 0;
    border: none;
    cursor: pointer;
}

.plaza-userprofile .extra .extra-field-box input,
.plaza-userprofile .extra .extra-field-box textarea {
    width: 100%; /* full width */
    margin-bottom: 8px;
    box-sizing: border-box;
}

.plaza-userprofile .extra .extra-field-display {
    margin-bottom: 10px;
}

.plaza-userprofile .extra-field-box textarea.form-control {
    /* You can adjust height via rows attribute or CSS if needed */
}

.plaza-userprofile .extra-field-display {
}

.plaza-userprofile .extra-field-display br {
}

.plaza-userprofile .field {
}

.plaza-userprofile .field input {
}

.plaza-userprofile .field label {
}

.plaza-userprofile .field textarea {
}

.plaza-userprofile .form {
}

.plaza-userprofile .images {
    display: block; /* keep layout simple */
    margin: 0;
    padding: 0;
}

.plaza-userprofile .images #image-upload-box {
    border: 2px dashed #ccc;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    margin-bottom: 10px;
}

.plaza-userprofile .images #image-upload-box button {
    padding: 5px 10px;
    margin-top: 5px;
}

.plaza-userprofile .images #image-upload-box.dragover {
    background-color: #e8f0ff;
    border-color: #3399ff;
}

.plaza-userprofile .images .delete-overlay {
    display: none;
    position: absolute;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    background-color: #ffffff; /* separate from opacity */
    opacity: 0.7;
    color: #000;
    padding: 6px;
    border-radius: 4px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    cursor: pointer;        /* make it a hand pointer */
    user-select: none;      /* optional: prevent text selection */
}

.plaza-userprofile .images .delete-overlay .delete-divider {
    width: 100%;
    border: 0;
    border-top: 5px solid #000; /* line color */
    margin: 4px 0; /* spacing above and below */
}

.plaza-userprofile .images .delete-overlay .delete-text {
}

.plaza-userprofile .images .existing {
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    margin:10px 10px 10px 10px;
    border: 2px solid transparent; /* optional placeholder */   
}

.plaza-userprofile .images .new {
}

.plaza-userprofile .images .thumb {
    position: relative;
    display: inline-block;
    margin-right: 10px;
}

.plaza-userprofile .images .thumb img {
    display: block;
    height: 150px;
    width: auto;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin: 0 0 10px 0;
}

.plaza-userprofile .images .thumb.marked-for-delete .delete-overlay {
    display: flex;
}

.plaza-userprofile .images .thumb.marked-for-delete img {
    opacity: 0.35;
    filter: grayscale(40%);
}

.plaza-userprofile .images label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.plaza-userprofile input {
}

.plaza-userprofile input[type="email"] {
}

.plaza-userprofile input[type="file"] {
}

.plaza-userprofile input[type="hidden"] {
}

.plaza-userprofile input[type="text"] {
}

.plaza-userprofile button {
}

.plaza-userprofile button[type="button"] {
}

.plaza-userprofile button[type="submit"] {
}

.plaza-userprofile #existing-images {
}

.plaza-userprofile .info {
}

.plaza-userprofile .info .field {
}

.plaza-userprofile .info .field input {
}

.plaza-userprofile .info .field label {
}

.plaza-userprofile .info .field textarea {
}

.plaza-userprofile .new-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    background-color: rgba(0, 123, 255, 0.8); /* semi-transparent blue */
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    pointer-events: none; /* allows click through to div */
    z-index: 10;
}

.plaza-userprofile .popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.75);
    display: none; /* hidden by default */
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.plaza-userprofile .popup-overlay img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 6px;
    box-shadow: 0 0 20px #000;
    cursor: default;
}

.plaza-userprofile .popup-overlay .popup-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #fff;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
}

.plaza-userprofile #lightbox-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #800020;   /* red background */
    color: #dddddd;           /* white "ร—" */
    border: none;
    border-radius: 4px;    /* square with small rounding */
    width: 40px;
    height: 40px;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plaza-userprofile #lightbox-close:hover {
    background: #cc0000;
}

.plaza-userprofile #lightbox-controls {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.plaza-userprofile #lightbox-content {
    position: relative;
}

.plaza-userprofile #lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
}

.plaza-userprofile #lightbox-next {
    position: absolute;
    bottom: 10%; /* quarter up from bottom */
    background: rgba(255,255,255,0.8);
    border: none;
    border-radius: 4%;
    width: 50px;
    height: 50px;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 20px;
}

.plaza-userprofile #lightbox-prev {
    position: absolute;
    bottom: 10%; /* quarter up from bottom */
    background: rgba(255,255,255,0.8);
    border: none;
    border-radius: 4%;
    width: 50px;
    height: 50px;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 20px;
}

.plaza-userprofile #lightbox-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}




/* Lightbox spinner for userprofile */
.plaza-userprofile .lightbox-spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    z-index: 10001;
}

.plaza-userprofile #lightbox-img.loading ~ .lightbox-spinner {
    display: block;
}














.plaza-userprofile .thumbnail-wrapper {
    width: 100%;
    position: relative;
}

.plaza-userprofile .thumbnail-wrapper .plaza-user-thumbnails {
}

.plaza-userprofile .thumbnail-wrapper .plaza-user-thumbnails .thumb {
}

.plaza-userprofile .thumbnail-wrapper .plaza-user-thumbnails .thumb img {
}

.plaza-userprofile .thumbnail-wrapper .plaza-user-thumbnails::-webkit-scrollbar {
}

.plaza-userprofile .thumbnail-wrapper .plaza-user-thumbnails::-webkit-scrollbar-thumb {
}

.plaza-userprofile .thumbnail-wrapper .plaza-user-thumbnails::-webkit-scrollbar-track {
}

.plaza-userprofile .thumbnail-wrapper .plaza-user-thumbnails::-webkit-scrollbar-track-piece {
}

.plaza-userprofile .thumbnail-wrapper .thumbnail-arrows {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 5px;
}

.plaza-userprofile .thumbnail-wrapper .thumbnail-arrows .thumb-arrow {
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 12px;
    cursor: pointer;
    font-size: 18px;
}

.plaza-userprofile .thumbnail-wrapper .thumbs-container {
    display: flex;
    overflow-x: auto;
    padding-bottom: 5px;

    /* Firefox (cannot set exact height, only thick/thin/auto) */
    scrollbar-width: thick; 
    scrollbar-color: #888 #f0f0f0;
}

.plaza-userprofile .thumbnail-wrapper .thumbs-container .thumb {
    flex: 0 0 auto;
    margin-right: 5px;
    height: 150px;    
}

.plaza-userprofile .thumbnail-wrapper .thumbs-container .thumb img {
    height: 100%;
    width: auto;
    display: block;
}

.plaza-userprofile .thumbnail-wrapper .thumbs-container::-webkit-scrollbar {
    height: 32px; /* actual pixel height of scrollbar */
}

.plaza-userprofile .thumbnail-wrapper .thumbs-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 16px;
    border: 6px solid #f0f0f0;
}

.plaza-userprofile .thumbnail-wrapper .thumbs-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.plaza-userprofile .thumbnail-wrapper .thumbs-container::-webkit-scrollbar-track {
    background: #f0f0f0;
}

.plaza-userprofile .thumb.thumb_editmode {
    position: relative; /* make badge absolute positioning work */
}



/* Loading overlay */
.plaza-userprofile #image-processing-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.plaza-userprofile .loading-spinner {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

.plaza-userprofile .loading-text {
    color: white;
    font-size: 18px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



/* ==============================
   MOD_PLAZA_SHOPS
   ============================== */



.shop-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: none; /* hidden by default */
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.shop-modal {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    width: 300px;
    max-width: 90%;
    position: relative;
}

.shop-modal .close-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.shop-link-btn {
    display: inline-block;
    padding: 6px 12px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.shop-block .shop-link-btn:hover {
    background-color: #0056b3;
}

.plaza-shops-list .add-new {
    display: block;
    margin: 6px 0;
    width: 100%;
    /* you can style this differently later */
}

.plaza-shops-list .existing {
    display: block;
    margin: 6px 0;
    width: 100%;
}



.plaza-shops .shop-name {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}




/* ==============================
   PLAZA-SHOPS: Extra Fields Section
============================== */
.plaza-shops .extra .extra-field-box {
    border: 1px solid #ccc;
    padding: 10px;
    margin-top: 10px;
    position: relative;
    border-radius: 6px;
}

.plaza-shops .extra .extra-field-box .form-control {
    width: 100%;
    margin-bottom: 8px;
}

.plaza-shops .extra .extra-field-box button {
    display: block;
    margin-top: 8px;
    margin-left: auto;
    margin-right: 0;
    border: none;
    cursor: pointer;
}

.plaza-shops .extra .extra-field-box input,
.plaza-shops .extra .extra-field-box textarea {
    width: 100%;
    margin-bottom: 8px;
    box-sizing: border-box;
}

.plaza-shops .extra .extra-field-display {
    margin-bottom: 10px;
}

/* ==============================
   MOD_PLAZA_SHOPS - LIGHTBOX
   ============================== */

.plaza-shops #lightbox-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.plaza-shops #lightbox-content {
    position: relative;
}

.plaza-shops #lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 6px;
    box-shadow: 0 0 20px #000;
}

.plaza-shops #lightbox-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #800020;   /* dark red */
    color: #dddddd;        /* light ร— symbol */
    border: none;
    border-radius: 4px;
    width: 40px;
    height: 40px;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plaza-shops #lightbox-close:hover {
    background: #cc0000;
}

.plaza-shops #lightbox-prev,
.plaza-shops #lightbox-next {
    position: absolute;
    bottom: 10%;
    background: rgba(255,255,255,0.8);
    border: none;
    border-radius: 4%;
    width: 50px;
    height: 50px;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.plaza-shops #lightbox-prev {
    left: 20px;
}

.plaza-shops #lightbox-next {
    right: 20px;
}

/* Lightbox spinner */
.plaza-shops .lightbox-spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

.plaza-shops #lightbox-img.loading + .lightbox-spinner {
    display: block;
}


/* ==============================
   PLAZA-SHOPS: Image Processing overlay and spinner
============================== */



/* Loading overlay styles for shops */
.plaza-shops #image-processing-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.plaza-shops .loading-spinner {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

.plaza-shops .loading-text {
    color: white;
    font-size: 18px;
    text-align: center;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}












/* ==============================
   PLAZA-SHOPS: Images Section
============================== */
.plaza-shops .images {
    display: block;
    margin: 0;
    padding: 0;
}

.plaza-shops .images #image-upload-box {
    border: 2px dashed #ccc;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    margin-bottom: 10px;
}

.plaza-shops .images #image-upload-box button {
    padding: 5px 10px;
    margin-top: 5px;
}

.plaza-shops .images #image-upload-box.dragover {
    background-color: #e8f0ff;
    border-color: #3399ff;
}

.plaza-shops .images .delete-overlay {
    display: none;
    position: absolute;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    background-color: #ffffff;
    opacity: 0.7;
    color: #000;
    padding: 6px;
    border-radius: 4px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    cursor: pointer;
    user-select: none;
}

.plaza-shops .images .delete-overlay .delete-divider {
    width: 100%;
    border: 0;
    border-top: 5px solid #000;
    margin: 4px 0;
}

.plaza-shops .images .delete-overlay .delete-text {
}

.plaza-shops .images .existing {
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    margin: 10px;
    border: 2px solid transparent;
}

.plaza-shops .images .new {
}

.plaza-shops .images .thumb {
    position: relative;
    display: inline-block;
    margin-right: 10px;
}

.plaza-shops .images .thumb img {
    display: block;
    height: 150px;
    width: auto;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin: 0 0 10px 0;
}

.plaza-shops .images .thumb.marked-for-delete .delete-overlay {
    display: flex;
}

.plaza-shops .images .thumb.marked-for-delete img {
    opacity: 0.35;
    filter: grayscale(40%);
}

.plaza-shops .images label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}


.plaza-shops .new-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    background-color: rgba(0, 123, 255, 0.8);
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    pointer-events: none;
    z-index: 10;
}

/* ==============================
   PLAZA-SHOPS: Thumbnail / Images Layout
============================== */

/* Wrapper around thumbnails */
.plaza-shops .thumbnail-wrapper {
    width: 100%;
    position: relative;
    margin-bottom: 10px;
}

/* Scrollable container for thumbs */
.plaza-shops .thumbnail-wrapper .thumbs-container {
    display: flex;
    overflow-x: auto;
    padding-bottom: 5px;

    scrollbar-width: thin;       /* Firefox */
    scrollbar-color: #888 #f0f0f0;
}

/* Individual thumb container */
.plaza-shops .thumbnail-wrapper .thumbs-container .thumb {
    flex: 0 0 auto;
    margin-right: 8px;
    height: 150px;              /* fixed height for uniformity */
    position: relative;
}

/* Thumbnail image */
.plaza-shops .thumbnail-wrapper .thumbs-container .thumb img {
    height: 100%;
    width: auto;
    display: block;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* New badge on shop images */
.plaza-shops .thumbnail-wrapper .thumbs-container .thumb .new-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    background-color: rgba(0, 123, 255, 0.8);
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 3px;
    pointer-events: none;
    z-index: 10;
}

/* Highlight for marked-for-delete */
.plaza-shops .thumbnail-wrapper .thumbs-container .thumb.marked-for-delete .delete-overlay {
    display: flex;
}

.plaza-shops .thumbnail-wrapper .thumbs-container .thumb.marked-for-delete img {
    opacity: 0.35;
    filter: grayscale(40%);
}

/* Thumbnail arrows below (if you use them) */
.plaza-shops .thumbnail-wrapper .thumbnail-arrows {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 5px;
}

.plaza-shops .thumbnail-wrapper .thumbnail-arrows .thumb-arrow {
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 18px;
}


/* ==============================
   MOD_PLAZA_ADS
   ============================== */



.ad-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: none; /* hidden by default */
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.ad-modal {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    width: 300px;
    max-width: 90%;
    position: relative;
}

.ad-modal .close-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.ad-link-btn {
    display: inline-block;
    padding: 6px 12px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.ad-block .ad-link-btn:hover {
    background-color: #0056b3;
}

.plaza-ads-list .add-new {
    display: block;
    margin: 6px 0;
    width: 100%;
    /* you can style this differently later */
}

.plaza-ads-list .existing {
    display: block;
    margin: 6px 0;
    width: 100%;
}


/* ==============================
   MOD_PLAZA_ADS - LIGHTBOX
   ============================== */

.plaza-ads #lightbox-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.plaza-ads #lightbox-content {
    position: relative;
    display: inline-block;
}

.plaza-ads #lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 6px;
    box-shadow: 0 0 20px #000;
    transition: opacity 0.3s ease;
}

.plaza-ads #lightbox-img.loading {
    opacity: 0;
}

.plaza-ads #lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #800020;   /* dark red */
    color: #dddddd;        /* light ื symbol */
    border: none;
    border-radius: 4px;
    width: 40px;
    height: 40px;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002; /* Ensure close button stays above spinner */
}

.plaza-ads #lightbox-close:hover {
    background: #cc0000;
}

.plaza-ads #lightbox-prev,
.plaza-ads #lightbox-next {
    position: absolute;
    bottom: 10%;
    background: rgba(255,255,255,0.8);
    border: none;
    border-radius: 4%;
    width: 50px;
    height: 50px;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.plaza-ads #lightbox-prev {
    left: 20px;
}

.plaza-ads #lightbox-next {
    right: 20px;
}

/* Lightbox Loading Spinner */
.plaza-ads .lightbox-spinner {
    position: absolute;
    top: 20px;
    right: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    z-index: 10001;
    display: none;
}

.plaza-ads .lightbox-spinner.loading {
    display: block;
}

/* Image Processing Loading Overlay */
.plaza-ads #image-processing-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 9999;
}

.plaza-ads .loading-spinner {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
    margin-bottom: 20px;
}

.plaza-ads .loading-text {
    color: white;
    font-size: 18px;
    text-align: center;
}

/* Animation Keyframes */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



/* ==============================
   PLAZA-ADS: Images Section
============================== */
.plaza-ads .images {
    display: block;
    margin: 0;
    padding: 0;
}

.plaza-ads .images #image-upload-box {
    border: 2px dashed #ccc;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    margin-bottom: 10px;
}

.plaza-ads .images #image-upload-box button {
    padding: 5px 10px;
    margin-top: 5px;
}

.plaza-ads .images #image-upload-box.dragover {
    background-color: #e8f0ff;
    border-color: #3399ff;
}

.plaza-ads .images .delete-overlay {
    display: none;
    position: absolute;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    background-color: #ffffff;
    opacity: 0.7;
    color: #000;
    padding: 6px;
    border-radius: 4px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    cursor: pointer;
    user-select: none;
}

.plaza-ads .images .delete-overlay .delete-divider {
    width: 100%;
    border: 0;
    border-top: 5px solid #000;
    margin: 4px 0;
}

.plaza-ads .images .delete-overlay .delete-text {
}

.plaza-ads .images .existing {
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    margin: 10px;
    border: 2px solid transparent;
}

.plaza-ads .images .new {
}

.plaza-ads .images .thumb {
    position: relative;
    display: inline-block;
    margin-right: 10px;
}

.plaza-ads .images .thumb img {
    display: block;
    height: 150px;
    width: auto;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin: 0 0 10px 0;    
}

.plaza-ads .images .thumb.marked-for-delete .delete-overlay {
    display: flex;
}

.plaza-ads .images .thumb.marked-for-delete img {
    opacity: 0.35;
    filter: grayscale(40%);
}

.plaza-ads .images label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}


.plaza-ads .new-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    background-color: rgba(0, 123, 255, 0.8);
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    pointer-events: none;
    z-index: 10;
}

/* ==============================
   PLAZA-ADS: Thumbnail / Images Layout
============================== */

/* Wrapper around thumbnails */
.plaza-ads .thumbnail-wrapper {
    width: 100%;
    position: relative;
    margin-bottom: 10px;
}

/* Scrollable container for thumbs */
.plaza-ads .thumbnail-wrapper .thumbs-container {
    display: flex;
    overflow-x: auto;
    padding-bottom: 5px;

    scrollbar-width: thin;       /* Firefox */
    scrollbar-color: #888 #f0f0f0;
}

/* Individual thumb container */
.plaza-ads .thumbnail-wrapper .thumbs-container .thumb {
    flex: 0 0 auto;
    margin-right: 8px;
    height: 150px;              /* fixed height for uniformity */
    position: relative;
}

/* Thumbnail image */
.plaza-ads .thumbnail-wrapper .thumbs-container .thumb img {
    height: 100%;
    width: auto;
    display: block;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* New badge on ad images */
.plaza-ads .thumbnail-wrapper .thumbs-container .thumb .new-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    background-color: rgba(0, 123, 255, 0.8);
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 3px;
    pointer-events: none;
    z-index: 10;
}

/* Highlight for marked-for-delete */
.plaza-ads .thumbnail-wrapper .thumbs-container .thumb.marked-for-delete .delete-overlay {
    display: flex;
}

.plaza-ads .thumbnail-wrapper .thumbs-container .thumb.marked-for-delete img {
    opacity: 0.35;
    filter: grayscale(40%);
}

/* Thumbnail arrows below (if you use them) */
.plaza-ads .thumbnail-wrapper .thumbnail-arrows {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 5px;
}

.plaza-ads .thumbnail-wrapper .thumbnail-arrows .thumb-arrow {
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 18px;
}

/* Shop Required Overlay */
.images {
    position: relative;
}

.shop-required-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    color: white;
    /*display: none;*/
    align-items: center;
    justify-content: center;
}

.overlay-content {
    text-align: center;
}



/* ==============================
   PLAZA-PUBLIC: Homepage Ads Display
   ============================== */

.plaza-public .plaza-ads-grid {
    display: block;
    margin-top: 20px;
}

.plaza-public .plaza-ad-item {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    background: #fff;
    margin-bottom: 20px;
}

.plaza-public .plaza-ads-thumbnail-wrapper {
    width: 100%;
    position: relative;
    margin-bottom: 10px;
}

.plaza-public .plaza-ads-thumbnails.plaza-ads-thumbs-container {
    display: flex;
    overflow-x: auto;
    padding-bottom: 5px;
    scrollbar-width: thin;
    scrollbar-color: #888 #f0f0f0;
}

.plaza-public .plaza-ads-thumbnails.plaza-ads-thumbs-container .thumb {
    flex: 0 0 auto;
    margin-right: 8px;
    height: 120px;
    position: relative;
    cursor: pointer;
}

.plaza-public .plaza-ads-thumbnails.plaza-ads-thumbs-container .thumb img {
    height: 100%;
    width: auto;
    display: block;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Lightbox for plaza-public */
.plaza-public #plaza-public-lightbox-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Lightbox for plaza-public */
#plaza-public-lightbox-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#plaza-public-lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

#plaza-public-lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 6px;
    box-shadow: 0 0 20px #000;
}

#plaza-public-lightbox-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #800020;
    color: #dddddd;
    border: none;
    border-radius: 4px;
    width: 40px;
    height: 40px;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#plaza-public-lightbox-close:hover {
    background: #cc0000;
}

#plaza-public-lightbox-prev,
#plaza-public-lightbox-next {
    position: absolute;
    bottom: 10%;
    background: rgba(255,255,255,0.8);
    border: none;
    border-radius: 4%;
    width: 50px;
    height: 50px;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

#plaza-public-lightbox-prev {
    left: 20px;
}

#plaza-public-lightbox-next {
    right: 20px;
}


/* Scrollbar styling for plaza-public thumbnails */
.plaza-public .plaza-ads-thumbnails.plaza-ads-thumbs-container::-webkit-scrollbar {
    height: 12px;
}

.plaza-public .plaza-ads-thumbnails.plaza-ads-thumbs-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 6px;
    border: 3px solid #f0f0f0;
}

.plaza-public .plaza-ads-thumbnails.plaza-ads-thumbs-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.plaza-public .plaza-ads-thumbnails.plaza-ads-thumbs-container::-webkit-scrollbar-track {
    background: #f0f0f0;
}




/* ==============================
   PLAZA-PUBLIC: Homepage Profiles Display
   ============================== */

.plaza-public .plaza-profiles-grid {
    display: block;
    margin-top: 20px;
}

.plaza-public .plaza-profile-item {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    background: #fff;
    margin-bottom: 20px;
}

.plaza-public .plaza-profile-thumbnail-wrapper {
    width: 100%;
    position: relative;
    margin-bottom: 10px;
}

.plaza-public .plaza-profile-thumbnails.plaza-profile-thumbs-container {
    display: flex;
    overflow-x: auto;
    padding-bottom: 5px;
    scrollbar-width: thin;
    scrollbar-color: #888 #f0f0f0;
}

.plaza-public .plaza-profile-thumbnails.plaza-profile-thumbs-container .thumb {
    flex: 0 0 auto;
    margin-right: 8px;
    height: 120px;
    position: relative;
    cursor: pointer;
}

.plaza-public .plaza-profile-thumbnails.plaza-profile-thumbs-container .thumb img {
    height: 100%;
    width: auto;
    display: block;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Scrollbar styling for plaza-public profile thumbnails */
.plaza-public .plaza-profile-thumbnails.plaza-profile-thumbs-container::-webkit-scrollbar {
    height: 12px;
}

.plaza-public .plaza-profile-thumbnails.plaza-profile-thumbs-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 6px;
    border: 3px solid #f0f0f0;
}

.plaza-public .plaza-profile-thumbnails.plaza-profile-thumbs-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.plaza-public .plaza-profile-thumbnails.plaza-profile-thumbs-container::-webkit-scrollbar-track {
    background: #f0f0f0;
}




/* ==============================
   PLAZA-PUBLIC: Homepage Shops Display
   ============================== */

.plaza-public .plaza-shops-grid {
    display: block;
    margin-top: 20px;
}

.plaza-public .plaza-shop-item {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    background: #fff;
    margin-bottom: 20px;
}

.plaza-public .plaza-shop-thumbnail-wrapper {
    width: 100%;
    position: relative;
    margin-bottom: 10px;
}

.plaza-public .plaza-shop-thumbnails.plaza-shop-thumbs-container {
    display: flex;
    overflow-x: auto;
    padding-bottom: 5px;
    scrollbar-width: thin;
    scrollbar-color: #888 #f0f0f0;
}

.plaza-public .plaza-shop-thumbnails.plaza-shop-thumbs-container .thumb {
    flex: 0 0 auto;
    margin-right: 8px;
    height: 120px;
    position: relative;
    cursor: pointer;
}

.plaza-public .plaza-shop-thumbnails.plaza-shop-thumbs-container .thumb img {
    height: 100%;
    width: auto;
    display: block;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Scrollbar styling for plaza-public shop thumbnails */
.plaza-public .plaza-shop-thumbnails.plaza-shop-thumbs-container::-webkit-scrollbar {
    height: 12px;
}

.plaza-public .plaza-shop-thumbnails.plaza-shop-thumbs-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 6px;
    border: 3px solid #f0f0f0;
}

.plaza-public .plaza-shop-thumbnails.plaza-shop-thumbs-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.plaza-public .plaza-shop-thumbnails.plaza-shop-thumbs-container::-webkit-scrollbar-track {
    background: #f0f0f0;
}

/* Shop details styling */
.plaza-public .shop-details {
    margin-top: 10px;
}

.plaza-public .shop-contact {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.plaza-public .shop-extra-field {
    margin-top: 8px;
    padding: 8px;
    background: #f9f9f9;
    border-radius: 4px;
}

/* ==============================
   PLAZA-PUBLIC: Clickable phone numbers for mobile
   ============================== */


.phone-number {
    cursor: pointer;
    color: #0066cc;
    text-decoration: underline;
}

.phone-number:hover {
    color: #004499;
}

/* Make phone numbers clickable only on mobile devices */
@media (max-width: 768px) {
    .phone-number {
        pointer-events: auto;
    }
    
    .phone-number::after {
        content: " ๐Ÿ“ž";
        font-size: 0.9em;
    }
}

/* On desktop, show as regular text */
@media (min-width: 769px) {
    .phone-number {
        pointer-events: none;
        color: inherit;
        text-decoration: none;
        cursor: default;
    }
}