/* ========================================= */

/* GLOBAL VARIABLES & RESET                  */

/* ========================================= */



:root {

    --bg: #fdfaf7;

    --accent: #d2a256;

    --accent-dark: #b8893d;

    --accent-secondary: #6f8a8f;

    --text-main: #333333;

    --text-muted: #666666;

    --card-bg: #ffffff;

    --border-soft: #e5d9c8;

    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.06);

    --radius-card: 14px;

    --radius-btn: 999px;

    --radius-logo: 999px;

    --max-width: 960px;

    --spacing: 1.5rem;

    --font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

}



*,

*::before,

*::after {

    box-sizing: border-box;

}



body {

    margin: 0;

    font-family: var(--font-main);

    background: var(--bg);

    color: var(--text-main);

    line-height: 1.6;

    text-align: left;

}



a {

    color: var(--accent-dark);

    text-decoration: none;

}

input[type="checkbox"],
input[type="radio"] {
    accent-color: #6f8a8f;
}



a:hover {

    text-decoration: underline;

}



/* ========================================= */

/* SHARED HEADER                             */

/* ========================================= */



.hm-header {

  background: #fff;

  border-bottom: 2px solid #e0dcd7;

  padding: 15px 20px;

  font-family: 'Poppins', sans-serif;

}



.hm-header-inner {

  max-width: 1000px;

  margin: auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.hm-logo {

  width: 90px !important;

  height: auto !important;

  max-width: 120px !important;

  opacity: 0.95;

}



.hm-nav {

  display: flex;

  gap: 15px;

}



.hm-nav a {

  color: #333;

  text-decoration: none;

  font-weight: 500;

}



.hm-nav a:hover {

  color: #d2a256;

}



.hm-menu-toggle {

  display: none;

  font-size: 28px;

  background: none;

  border: none;

  cursor: pointer;

}



@media (max-width: 700px) {

  .hm-menu-toggle {

    display: block;

  }



  .hm-nav {

    display: none;

    flex-direction: column;

    background: #fff;

    padding: 20px;

    border-top: 2px solid #e0dcd7;

    text-align: center;

  }



  .hm-nav.hm-nav-open {

    display: flex;

  }

}



/* ========================================= */

/* SHARED FOOTER                             */

/* ========================================= */



.hm-footer {

  background: #f3f0ec;

  padding: 40px 20px;

  border-top: 2px solid #e0dcd7;

  margin-top: 60px;

  font-family: 'Poppins', sans-serif;

}



.hm-footer-inner {

  max-width: 900px;

  margin: auto;

  text-align: center;

}



.hm-footer-logo {

  width: 90px;

  opacity: 0.95;

  margin-bottom: 10px;

}



.hm-footer-tagline {

  font-size: 14px;

  color: #555;

  margin-bottom: 25px;

}



.hm-footer-nav {
  margin-bottom: 25px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1rem;
}

.hm-footer-nav a {
  color: #333;
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}



.hm-footer-nav a:hover {

  color: #d2a256;

}



.hm-footer-legal {

  font-size: 13px;

  color: #666;

}



.hm-footer-legal a {

  color: #666;

  text-decoration: none;

}



.hm-footer-legal a:hover {

  text-decoration: underline;

}



/* ========================================= */

/* HOMEPAGE STYLES (RENAMED TO .home-*)      */

/* ========================================= */



.home-header,

.home-hero,

.home-makers,

.home-shops,

.home-how,

.home-footer {

    max-width: var(--max-width);

    margin: 0 auto;

    padding: var(--spacing);

}



.home-header {

    display: flex;

    align-items: center;

    justify-content: center;

    padding-top: 1.25rem;

}



.home-logo {

    height: 200px;

    width: auto;

}



.home-hero {

    text-align: center;

    padding-top: 0;

    padding-bottom: 2rem;

}



.home-hero h1 {

    font-size: 2.4rem;

    margin-bottom: 0.5rem;

}



.home-hero p {

    font-size: 1.1rem;

    color: var(--text-muted);

    margin-bottom: 1.5rem;

}



.home-hero-buttons {

    display: flex;

    justify-content: center;

    gap: 0.75rem;

    flex-wrap: wrap;

}



.home-makers,

.home-shops,

.home-how {

    background: var(--card-bg);

    border-radius: var(--radius-card);

    box-shadow: var(--shadow-soft);

    border: 1px solid var(--border-soft);

}



.home-makers h2,

.home-shops h2,

.home-how h2 {

    margin-top: 0;

    margin-bottom: 0.5rem;

    font-size: 1.4rem;

}



.home-makers p,

.home-shops p {

    color: var(--text-muted);

    margin-bottom: 0.75rem;

}



.home-makers ul,

.home-shops ul {

    list-style: none;

    padding-left: 0;

    margin: 0 0 1rem 0;

}



.home-makers ul li,

.home-shops ul li {

    position: relative;

    padding-left: 1.4rem;

    margin-bottom: 0.4rem;

}



.home-makers ul li::before,

.home-shops ul li::before {

    content: "•";

    position: absolute;

    left: 0;

    top: 0;

    color: var(--accent-secondary);

    font-weight: 700;

}



.home-makers .btn,

.home-shops .btn {

    margin-right: 0.5rem;

    margin-top: 0.5rem;

}



.home-how ol {

    margin: 0.5rem 0 0;

    padding-left: 1.4rem;

}



.home-how li {

    margin-bottom: 0.4rem;

}



@media (max-width: 640px) {

    .home-hero h1 {

        font-size: 2rem;

    }



    .home-hero p {

        font-size: 1rem;

    }



    .home-makers,

    .home-shops,

    .home-how {

        padding: 1.1rem;

    }

}



/* ========================================= */

/* SHOP LOGIN / REGISTER / FORMS             */

/* ========================================= */



.page {

    max-width: 480px;

    margin: 0 auto;

    padding: 1.5rem;

}



.page h1 {

    margin-top: 0;

    margin-bottom: 0.75rem;

}



.page p.lead {

    color: var(--text-muted);

    margin-bottom: 1.5rem;

}



.form-card {

    background: var(--card-bg);

    border-radius: var(--radius-card);

    box-shadow: var(--shadow-soft);

    border: 1px solid var(--border-soft);

    padding: 1.5rem;

}



.form-row {

    margin-bottom: 1rem;

}



.form-row label {

    display: block;

    font-weight: 600;

    margin-bottom: 0.35rem;

}



.form-row input,
.form-row textarea,
.form-row select {

    width: 100%;

    padding: 0.55rem 0.7rem;

    border-radius: 8px;

    border: 1px solid #d0c7b8;

    font: inherit;

    accent-color: #6f8a8f;

}



.form-actions {

    margin-top: 1.25rem;

    display: flex;

    gap: 0.75rem;

    align-items: center;

}



.auth-links {

    margin-top: 1rem;

    font-size: 0.9rem;

}



/* ========================================= */

/* DASHBOARD                                 */

/* ========================================= */



#dashboard header {

  background: #2c2c2c;

  color: white;

  padding: 15px 20px;

  font-size: 1.4rem;

  font-weight: 600;

  display: none;

}



#loginBox {

  max-width: 400px;

  margin: 60px auto;

  background: white;

  padding: 30px;

  border-radius: 12px;

  border: 1px solid #ddd;

  text-align: center;

}



#dashboard {

  display: none;

  padding: 20px;

}



table {

  width: 100%;

  border-collapse: collapse;

  margin-top: 20px;

  background: white;

  border-radius: 12px;

  overflow: hidden;

}



th, td {

  padding: 12px;

  border-bottom: 1px solid #eee;

  text-align: left;

}



th {

  background: #f3f3f3;

  font-weight: 600;

}



.delete-btn {

  background: #c62828;

  color: white;

  padding: 6px 10px;

  border: none;

  border-radius: 4px;

  cursor: pointer;

}



.delete-btn:hover {

  background: #b71c1c;

}



#logoutBtn {

  background: #444;

  color: white;

  padding: 10px 16px;

  border: none;

  border-radius: 6px;

  cursor: pointer;

  float: right;

  margin-top: -45px;

  margin-right: 20px;

}


/* ========================================= */
/* ALERTS & FORM EXTRAS                      */
/* ========================================= */

.alert {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
}

.alert-error {
    background: #fff0f0;
    border: 1px solid #ffcdd2;
    color: #c62828;
}

.alert-success {
    background: #f0fff4;
    border: 1px solid #c8e6c9;
    color: #2e7d32;
}

.form-row small {
    display: block;
    margin-top: 0.25rem;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.form-row .optional {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ========================================= */
/* BUTTONS (consolidated)                    */
/* ========================================= */

.btn {
    display: inline-block;
    padding: 0.65rem 1.4rem;
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.btn.primary {
    background: var(--accent);
    color: #fff;
}

.btn.primary:hover {
    background: var(--accent-dark);
}

.btn.secondary {
    background: var(--accent-secondary);
    color: #fff;
}

.btn.secondary:hover {
    background: #5a7378;
}

/* ========================================= */
/* MAKER DASHBOARD                           */
/* ========================================= */

.dashboard-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 1.5rem;
}

.dash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.dash-header h1 {
    margin: 0;
    font-size: 1.6rem;
}

.dash-subtitle {
    margin: 0.25rem 0 0;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.dash-card {
    background: var(--card-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--border-soft);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.dash-card h2 {
    margin: 0 0 0.75rem;
    font-size: 1.2rem;
}

/* Status badges */
.status-badge {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.status-active {
    background: #e8f5e9;
    color: #2e7d32;
}

.status-inactive {
    background: #fff3e0;
    color: #e65100;
}

/* Shop listing cards */
.shop-listings {
    display: grid;
    gap: 1rem;
}

.shop-card {
    background: var(--bg);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 1rem;
}

.shop-card h3 {
    margin: 0 0 0.3rem;
    font-size: 1.05rem;
}

.shop-card .shop-location {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0 0 0.5rem;
}

.shop-card p {
    margin: 0.25rem 0;
    font-size: 0.9rem;
}

/* Locked/teaser state */
.listings-locked {
    position: relative;
}

.locked-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 2;
    padding: 1rem;
}

.locked-overlay p {
    margin-bottom: 1rem;
    font-weight: 500;
}

.locked-preview {
    display: grid;
    gap: 1rem;
    filter: blur(4px);
    opacity: 0.5;
    pointer-events: none;
}

.shop-card.placeholder {
    height: 80px;
    background: linear-gradient(90deg, #f0ebe4 25%, #e8e2da 50%, #f0ebe4 75%);
}

.text-muted {
    color: var(--text-muted);
}

/* ========================================= */
/* HOMEPAGE — VALUE PROPOSITION              */
/* ========================================= */

.home-value {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--spacing);
}

.home-value h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

.value-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}

.value-item {
    background: var(--card-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--border-soft);
    padding: 1.25rem;
    text-align: center;
}

.value-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.value-item h3 {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
}

.value-item p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
}

/* ========================================= */
/* HOMEPAGE — PRICING                        */
/* ========================================= */

.home-pricing {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--spacing);
    text-align: center;
}

.home-pricing h2 {
    margin-bottom: 1.25rem;
    font-size: 1.5rem;
}

.pricing-card {
    background: var(--card-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    border: 2px solid var(--accent);
    padding: 2rem 1.5rem;
    max-width: 360px;
    margin: 0 auto;
}

.pricing-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
}

.pricing-card .price {
    margin: 0 0 1rem;
    font-size: 1rem;
    color: var(--text-muted);
}

.pricing-card .price-amount {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-main);
}

.pricing-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    text-align: left;
}

.pricing-card ul li {
    padding: 0.4rem 0;
    padding-left: 1.4rem;
    position: relative;
    font-size: 0.9rem;
}

.pricing-card ul li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: #2e7d32;
    font-weight: 700;
}

/* ========================================= */
/* SHOP LISTINGS — GROUPED BY COUNTY         */
/* ========================================= */

.county-group {
    margin-bottom: 1.5rem;
}

.county-heading {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-dark);
    border-bottom: 2px solid var(--border-soft);
    padding-bottom: 0.4rem;
    margin: 0 0 0.75rem;
}

.county-shops {
    display: grid;
    gap: 0.75rem;
}

.shop-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.shop-card h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.shop-desc {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0.4rem 0 0;
}

.shop-link {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--accent-secondary);
}

.shop-link:hover {
    text-decoration: underline;
}

/* ========================================= */
/* SHOP SEARCH                               */
/* ========================================= */

.shop-search {
    position: relative;
    margin-bottom: 1rem;
}

.shop-search input {
    width: 100%;
    padding: 0.65rem 2.5rem 0.65rem 0.85rem;
    border-radius: 10px;
    border: 1px solid var(--border-soft);
    font: inherit;
    font-size: 0.95rem;
    background: var(--bg);
}

.shop-search input:focus {
    outline: none;
    border-color: var(--accent-secondary);
    box-shadow: 0 0 0 3px rgba(123, 184, 255, 0.15);
}

.search-clear {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    line-height: 1;
}

.search-clear:hover {
    color: var(--text-main);
}

/* ========================================= */
/* SHOP MAP                                  */
/* ========================================= */

.shop-map {
    width: 100%;
    height: 350px;
    border-radius: 10px;
    border: 1px solid var(--border-soft);
    margin-bottom: 1rem;
    z-index: 0;
}

@media (max-width: 640px) {
    .shop-map {
        height: 250px;
    }
}

/* ========================================= */
/* SHOP DETAIL PAGE                          */
/* ========================================= */

.back-link {
    display: inline-block;
    margin-bottom: 1rem;
    font-weight: 500;
    color: var(--accent-secondary);
    font-size: 0.9rem;
}

.back-link:hover {
    text-decoration: underline;
}

.shop-detail-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.shop-detail-header h1 {
    margin: 0;
    font-size: 1.5rem;
}

.shop-detail-section {
    margin-bottom: 1.5rem;
}

.shop-detail-section h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.5rem;
}

.shop-detail-section p {
    margin: 0;
    line-height: 1.7;
}

.shop-detail-section address {
    font-style: normal;
    line-height: 1.8;
}

.shop-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    background: var(--bg);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-main);
    text-decoration: none;
}

.social-link svg {
    flex-shrink: 0;
}

.social-link:hover {
    background: var(--accent-secondary);
    color: #fff;
    border-color: var(--accent-secondary);
    text-decoration: none;
}

/* Clickable shop name in listings */
.shop-name-link {
    color: var(--text-main);
    text-decoration: none;
}

.shop-name-link:hover {
    color: var(--accent-dark);
    text-decoration: underline;
}

/* ========================================= */
/* REPORT ISSUE BUTTON                       */
/* ========================================= */

.btn-report {
    background: none;
    border: 1px solid var(--border-soft);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-btn);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-report:hover {
    border-color: var(--accent-dark);
    color: var(--accent-dark);
}

/* ========================================= */
/* MODAL                                     */
/* ========================================= */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
}

.modal-card {
    background: var(--card-bg);
    border-radius: var(--radius-card);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    padding: 1.5rem;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.2rem;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    line-height: 1;
}

.modal-close:hover {
    color: var(--text-main);
}

.modal-card .form-row select,
.modal-card .form-row textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    border: 1px solid #d0c7b8;
    font: inherit;
}

.modal-card .form-row textarea {
    resize: vertical;
    min-height: 80px;
}

.modal-footer {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
}

/* ========================================= */
/* DASHBOARD HEADER ACTIONS                  */
/* ========================================= */

.dash-header-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ========================================= */
/* SUBSCRIPTION ACTIONS                      */
/* ========================================= */

.sub-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* ========================================= */
/* TICKET SYSTEM                             */
/* ========================================= */

/* Status badges — ticket statuses */
.status-open        { background: #fff3e0; color: #e65100; }
.status-in-progress { background: #e3f2fd; color: #1565c0; }

/* Ticket list */
.ticket-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ticket-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-soft);
    text-decoration: none;
    color: var(--text-main);
    transition: background 0.15s;
    gap: 1rem;
    flex-wrap: wrap;
}

.ticket-row:hover {
    background: var(--bg);
    text-decoration: none;
}

.ticket-row-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    min-width: 0;
}

.ticket-number {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.ticket-subject {
    font-weight: 600;
    font-size: 0.95rem;
}

.ticket-type {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.ticket-row-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    white-space: nowrap;
}

.ticket-date {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Ticket thread */
.ticket-thread-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.ticket-thread-header h2 {
    margin: 0 0 0.25rem;
}

.ticket-thread {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.ticket-reply {
    border-radius: 10px;
    padding: 1rem;
    border: 1px solid var(--border-soft);
}

.reply-admin {
    background: #f0f7ff;
    border-color: #c5deff;
}

.reply-maker {
    background: var(--bg);
}

.reply-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.reply-meta strong {
    font-weight: 600;
}

.reply-meta span {
    color: var(--text-muted);
}

.reply-body {
    line-height: 1.6;
    font-size: 0.95rem;
}

.ticket-reply-form {
    border-top: 1px solid var(--border-soft);
    padding-top: 1.25rem;
}

.ticket-reply-form h3 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
}

.ticket-reply-form textarea {
    width: 100%;
    padding: 0.65rem;
    border-radius: 8px;
    border: 1px solid #d0c7b8;
    font: inherit;
    min-height: 100px;
    resize: vertical;
}

/* Admin ticket filters */
.ticket-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    align-items: center;
}

.ticket-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #555;
    background: #f3f0ec;
    border: 1px solid #e0dcd7;
    text-decoration: none;
    transition: all 0.15s;
}

.ticket-filter-btn:hover {
    background: #e8e2da;
    text-decoration: none;
}

.ticket-filter-btn.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.filter-count {
    background: rgba(0,0,0,0.1);
    border-radius: 999px;
    padding: 0 6px;
    font-size: 0.75rem;
}

/* Admin status badges */
.hm-status-badge {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.hm-status-open        { background: #fff3e0; color: #e65100; }
.hm-status-in_progress { background: #e3f2fd; color: #1565c0; }
.hm-status-resolved    { background: #e8f5e9; color: #2e7d32; }
.hm-status-closed      { background: #f3f0ec; color: #777; }

/* Admin alert banners */
.hm-alert {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
}

.hm-alert-error   { background: #fff0f0; border: 1px solid #ffcdd2; color: #c62828; }
.hm-alert-success { background: #f0fff4; border: 1px solid #c8e6c9; color: #2e7d32; }

/* Admin dashboard alert card */
.hm-stat-alert {
    border: 2px solid #d2a256 !important;
}

/* ========================================= */
/* SHOP DASHBOARD & LISTING PAGES            */
/* ========================================= */

/* Shop location list on dashboard */
.shop-location-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.shop-location-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--border-soft);
    text-decoration: none;
    color: var(--text-main);
    transition: background 0.15s;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.shop-location-row:hover {
    background: var(--bg);
    text-decoration: none;
}

.shop-location-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.shop-location-logo {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--border-soft);
}

.shop-location-logo-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: var(--bg);
    border: 1px dashed var(--border-soft);
    flex-shrink: 0;
}

/* Enhanced badge */
.enhanced-badge {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    background: linear-gradient(135deg, #fff8e1, #fff3cd);
    border: 1px solid #ffd54f;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #f57f17;
    white-space: nowrap;
}

/* Logo preview on listing edit page */
.shop-logo-preview {
    display: block;
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--border-soft);
    margin-bottom: 0.75rem;
}

/* Photo gallery on listing edit page */
.shop-photo-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.shop-photo-thumb {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-soft);
}

.shop-photo-thumb img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    display: block;
}

.photo-delete-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0,0,0,0.6);
    color: white;
    border: none;
    border-radius: 999px;
    width: 22px;
    height: 22px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-delete-btn:hover {
    background: #c62828;
}

/* Logo and photos on maker-facing shop card */
.shop-card-logo {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--border-soft);
    float: right;
    margin: 0 0 0.5rem 0.75rem;
}

/* Admin status badges for pending shops */
.hm-status-pending { background: #fff8e1; color: #f57f17; }

/* ========================================= */
/* SHOP REGISTRATION — STEP INDICATOR        */
/* ========================================= */

.reg-steps {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.reg-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.4;
    transition: opacity 0.2s;
}

.reg-step.active {
    opacity: 1;
}

.reg-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--border-soft);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}

.reg-step.active .reg-step-num {
    background: var(--accent);
    color: #fff;
}

.reg-step-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
}

.reg-step.active .reg-step-label {
    color: var(--text-main);
}

.reg-step-divider {
    flex: 1;
    height: 2px;
    background: var(--border-soft);
    margin: 0 0.75rem;
}

/* ========================================= */
/* SHOP CLAIM FLOW                           */
/* ========================================= */

.claim-search {
    background: var(--bg);
    border-radius: 10px;
    padding: 1rem;
    border: 1px solid var(--border-soft);
    margin-bottom: 0.5rem;
}

.claim-results-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.claim-result-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--border-soft);
    background: var(--card-bg);
    gap: 1rem;
    flex-wrap: wrap;
}

.claim-result-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.claim-result-info strong {
    font-size: 0.95rem;
}

.claim-result-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.claim-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.claim-badge-free   { background: #e8f5e9; color: #2e7d32; }
.claim-badge-taken  { background: #fff3e0; color: #e65100; }

.claim-selected {
    background: #f0f7ff;
    border: 1px solid #c5deff;
    border-radius: 10px;
    padding: 1rem;
}

.claim-no-results {
    background: var(--bg);
    border-radius: 10px;
    padding: 1rem;
    border: 1px solid var(--border-soft);
}

/* ========================================= */
/* LISTING SOURCE BADGES                     */
/* ========================================= */

.source-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.source-verified {
    background: #e8f5e9;
    color: #2e7d32;
}

.source-admin {
    background: #f3f0ec;
    color: #888;
}

/* ========================================= */
/* SEARCH TABS (Browse / Find Nearby)        */
/* ========================================= */

.search-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--border-soft);
}

.search-tab {
    padding: 0.55rem 1.1rem;
    border: none;
    background: none;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}

.search-tab:hover {
    color: var(--text-main);
}

.search-tab.active {
    color: var(--accent-dark);
    border-bottom-color: var(--accent-dark);
}

/* ========================================= */
/* ADMIN LISTED NOTICE                       */
/* ========================================= */

.admin-listed-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #5d4037;
}

.admin-listed-icon {
    font-size: 1.15rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.notice-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: inherit;
    color: var(--accent-dark);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.notice-link:hover {
    color: var(--accent);
}

/* ========================================= */
/* TOOLTIP                                   */
/* ========================================= */

[data-tooltip] {
    position: relative;
    cursor: help;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.4;
    padding: 0.4rem 0.65rem;
    border-radius: 6px;
    white-space: normal;
    width: 220px;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 1px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 100;
}

[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
    opacity: 1;
}

/* ========================================= */
/* BLOG                                      */
/* ========================================= */

.blog-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.blog-card {
    display: flex;
    border-radius: var(--radius-card);
    border: 1px solid var(--border-soft);
    background: var(--card-bg);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    text-decoration: none;
    color: var(--text-main);
    transition: box-shadow 0.15s, transform 0.1s;
}

.blog-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    transform: translateY(-2px);
    text-decoration: none;
}

.blog-card-image {
    width: 220px;
    flex-shrink: 0;
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-card-body {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blog-card-body h2 {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
}

.blog-meta {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0 0 0.5rem;
}

.blog-excerpt {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0 0 0.75rem;
    line-height: 1.5;
}

.blog-read-more {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-dark);
}

@media (max-width: 600px) {
    .blog-card { flex-direction: column; }
    .blog-card-image { width: 100%; height: 180px; }
}

/* Blog post page */
.blog-post-page {
    max-width: 720px;
}

.blog-post-cover {
    width: 100%;
    max-height: 380px;
    object-fit: cover;
    border-radius: var(--radius-card);
    margin: 1rem 0 1.5rem;
}

.blog-post-title {
    font-size: 2rem;
    margin: 0 0 0.4rem;
    line-height: 1.2;
}

.blog-post-content {
    line-height: 1.8;
    font-size: 1rem;
    margin-top: 1.5rem;
}

.blog-post-content h1,
.blog-post-content h2,
.blog-post-content h3 {
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
}

.blog-post-content p {
    margin: 0 0 1rem;
}

.blog-post-content ul,
.blog-post-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.blog-post-content li {
    margin-bottom: 0.35rem;
}

.blog-post-content blockquote {
    border-left: 4px solid var(--accent);
    margin: 1.5rem 0;
    padding: 0.75rem 1.25rem;
    background: #fff8f9;
    border-radius: 0 8px 8px 0;
    color: var(--text-muted);
    font-style: italic;
}

.blog-post-content a {
    color: var(--accent-dark);
    text-decoration: underline;
}

.blog-post-content img {
    max-width: 100%;
    border-radius: 8px;
    margin: 1rem 0;
}

/* ========================================= */
/* FOOTER SOCIAL LINKS                       */
/* ========================================= */

.hm-footer-social {
    margin-bottom: 1.25rem;
}

.hm-social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #555;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.15s;
}

.hm-social-link:hover {
    color: #d2a256;
    text-decoration: none;
}

/* ========================================= */
/* EMAIL VERIFICATION BANNER                 */
/* ========================================= */

.verify-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    color: #5d4037;
    line-height: 1.5;
}

.verify-banner a {
    color: #d2a256;
    font-weight: 600;
}

/* Ticket row view link */
.ticket-view-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-dark);
    white-space: nowrap;
}