/* ============================================================
   Shares — Toss Bank-inspired design system
   ============================================================ */

/* --- Reset & base ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo',
                 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #191f28;
    background: #f7f8fa;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5em;
    font-weight: 700;
    line-height: 1.3;
    color: #191f28;
}

p { margin: 0 0 1em; }

a { color: #3182f6; text-decoration: none; }
a:hover { text-decoration: underline; }

code {
    background: #f0f2f5;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.875em;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

hr {
    border: none;
    border-top: 1px solid #e8eaed;
    margin: 24px 0;
}

/* --- Layout helpers ---------------------------------------- */
.page-wrapper {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 16px;
}

.page-wrapper--narrow {
    max-width: 700px;
    margin: 0 auto;
    padding: 40px 16px;
}

.page-wrapper--admin {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 16px;
}

/* --- Cards ------------------------------------------------- */
.card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    padding: 24px;
}

.card--sm { padding: 16px; border-radius: 12px; }
.card--lg { padding: 32px; }

.card + .card { margin-top: 16px; }

/* --- Buttons ----------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s, transform 0.1s;
    white-space: nowrap;
    line-height: 1;
}

.btn:hover { opacity: 0.88; text-decoration: none; }
.btn:active { transform: scale(0.97); }

.btn--primary   { background: #3182f6; color: #fff; }
.btn--success   { background: #00c853; color: #fff; }
.btn--warning   { background: #ff9100; color: #fff; }
.btn--danger    { background: #ff3b30; color: #fff; }
.btn--neutral   { background: #f0f2f5; color: #3d4350; }
.btn--outline   { background: #fff; color: #3182f6; border: 1.5px solid #3182f6; }
.btn--ghost     { background: transparent; color: #3182f6; }

.btn--sm  { padding: 7px 14px; font-size: 0.8125rem; border-radius: 6px; }
.btn--lg  { padding: 14px 28px; font-size: 1rem; }
.btn--full { width: 100%; }

/* HTMX loading state */
.btn.htmx-request,
.add-to-cart-btn.htmx-request {
    opacity: 0.6;
    pointer-events: none;
}

/* add-to-cart success flash */
.add-to-cart-btn {
    width: 100%;
    padding: 9px;
    background: #3182f6;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 700;
    transition: background 0.2s, transform 0.1s;
}

.add-to-cart-btn.htmx-request {
    background: #1a5cc8;
    opacity: 0.7;
    pointer-events: none;
}

.add-to-cart-btn.added {
    background: #00c853;
    animation: cart-added-pulse 0.3s ease;
}

@keyframes cart-added-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}

/* --- Navigation pills -------------------------------------- */
.nav-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.nav-pill {
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    color: #3d4350;
    background: #f0f2f5;
}

.nav-pill:hover { background: #e3e8f0; text-decoration: none; color: #3d4350; }

.nav-pill--active {
    background: #3182f6;
    color: #fff;
}

.nav-pill--active:hover { background: #1a6ce0; color: #fff; }

/* --- Admin nav buttons (dashboard sidebar-style links) ----- */
.admin-nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 16px 0 24px;
}

.admin-nav-btn {
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    transition: opacity 0.15s;
}

.admin-nav-btn:hover { opacity: 0.85; text-decoration: none; color: #fff; }

.admin-nav-btn--menu        { background: #00c853; }
.admin-nav-btn--tables      { background: #3182f6; }
.admin-nav-btn--orders      { background: #ff9100; }
.admin-nav-btn--shares      { background: #8b5cf6; }
.admin-nav-btn--translations{ background: #0ba5a5; }
.admin-nav-btn--stats       { background: #795548; }
.admin-nav-btn--members     { background: #0277bd; }
.admin-nav-btn--logout      { background: #9ea4b0; }

/* --- Forms ------------------------------------------------- */
.form-group { margin-bottom: 16px; }

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #4e5968;
    margin-bottom: 6px;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #e3e8f0;
    border-radius: 10px;
    font-size: 0.9375rem;
    color: #191f28;
    background: #fff;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: #3182f6;
    box-shadow: 0 0 0 3px rgba(49, 130, 246, 0.12);
}

.form-textarea { resize: vertical; min-height: 100px; }

/* --- Tables ------------------------------------------------ */
.table-wrap { overflow-x: auto; border-radius: 12px; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.table th {
    text-align: left;
    padding: 10px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #8b95a1;
    border-bottom: 1px solid #f0f2f5;
    white-space: nowrap;
}

.table td {
    padding: 12px 14px;
    border-bottom: 1px solid #f0f2f5;
    vertical-align: middle;
}

.table tr:last-child td { border-bottom: none; }

.table--info th {
    width: 140px;
    color: #8b95a1;
}

/* --- Status badges ----------------------------------------- */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.badge--active  { background: #e6f9ef; color: #00a843; }
.badge--warning { background: #fff4e5; color: #cc7400; }
.badge--danger  { background: #fff0ef; color: #d92b22; }
.badge--info    { background: #e8f1fe; color: #1a6ce0; }
.badge--neutral { background: #f0f2f5; color: #6b7684; }
.badge--soldout { background: #ffebee; color: #c62828; }

/* --- Section titles ---------------------------------------- */
.section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #191f28;
    margin-bottom: 16px;
}

.section-subtitle {
    font-size: 0.875rem;
    color: #8b95a1;
    margin-top: -12px;
    margin-bottom: 16px;
}

/* --- Store header ------------------------------------------ */
.store-header {
    text-align: center;
    padding: 28px 0 20px;
}

.store-header__name {
    margin: 0 0 6px;
    font-size: 1.75rem;
}

.store-header__hours {
    margin: 0;
    color: #8b95a1;
    font-size: 0.9rem;
}

/* --- Top bar (my orders + language switcher) --------------- */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.lang-switcher {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
}

.lang-switcher__sep { color: #d0d6e0; }

.lang-link         { color: #8b95a1; text-decoration: none; font-weight: 500; }
.lang-link:hover   { color: #3182f6; text-decoration: none; }
.lang-link--active { color: #3182f6; font-weight: 700; }

/* --- Active Shares banner ---------------------------------- */
.shares-banner {
    background: #fff8ee;
    border: 2px solid #ff9100;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 28px;
}

.shares-banner__title {
    margin: 0 0 14px;
    color: #cc5500;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
}

.shares-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.share-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.share-card__name {
    margin: 0 0 6px;
    color: #cc5500;
    font-size: 1rem;
}

.share-card__desc {
    font-size: 0.85rem;
    color: #6b7684;
    margin: 0 0 10px;
}

.share-card__meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #4e5968;
    margin-bottom: 6px;
}

.share-card__limits {
    font-size: 0.8rem;
    color: #8b95a1;
    margin-bottom: 12px;
}

/* --- Category tabs ----------------------------------------- */
.category-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1.5px solid #e8eaed;
}

/* --- Menu items grid --------------------------------------- */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.menu-item-card {
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s;
}

.menu-item-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10); }

.menu-item-card__image {
    height: 160px;
    overflow: hidden;
}

.menu-item-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.menu-item-card__placeholder {
    height: 120px;
    background: #f7f8fa;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #d0d6e0;
}

.menu-item-card__body { padding: 14px; flex: 1; display: flex; flex-direction: column; }

.menu-item-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
    gap: 6px;
}

.menu-item-card__name { font-size: 1rem; font-weight: 600; }

.menu-item-card__desc {
    font-size: 0.85rem;
    color: #8b95a1;
    margin: 4px 0 10px;
    line-height: 1.4;
    flex: 1;
}

.menu-item-card__price {
    font-size: 1.1rem;
    font-weight: 700;
    color: #3182f6;
    margin-bottom: 10px;
}

.menu-item-card__empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px;
    color: #8b95a1;
    font-size: 0.95rem;
}

/* --- Cart panel -------------------------------------------- */
.cart-panel {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 20px;
    margin-top: 28px;
}

.cart-panel__title {
    margin: 0 0 18px;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart-panel__count {
    font-size: 0.85rem;
    color: #8b95a1;
    font-weight: 400;
}

.cart-panel__empty {
    text-align: center;
    padding: 28px;
    color: #b0b8c1;
    font-size: 0.9rem;
}

.cart-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f0f2f5;
    gap: 8px;
}

.cart-item__info { flex: 1; min-width: 0; }

.cart-item__name {
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-item__unit-price {
    font-size: 0.8rem;
    color: #8b95a1;
    margin-top: 2px;
}

.cart-item__qty {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cart-qty-btn {
    width: 28px;
    height: 28px;
    border: 1.5px solid #e3e8f0;
    border-radius: 6px;
    cursor: pointer;
    background: #f7f8fa;
    font-size: 1rem;
    font-weight: 700;
    padding: 0;
    line-height: 1;
    color: #4e5968;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, border-color 0.12s;
}

.cart-qty-btn:hover { background: #e3e8f0; border-color: #c5cdd8; }

.cart-item__qty-val {
    min-width: 22px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
}

.cart-item__amount {
    min-width: 64px;
    text-align: right;
    font-size: 0.9rem;
    font-weight: 700;
    color: #3182f6;
}

.cart-item__remove {
    background: none;
    border: none;
    cursor: pointer;
    color: #d0d6e0;
    font-size: 1rem;
    padding: 0 0 0 6px;
    line-height: 1;
    transition: color 0.12s;
}

.cart-item__remove:hover { color: #ff3b30; }

.cart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 2px solid #f0f2f5;
    font-weight: 700;
}

.cart-total__amount {
    font-size: 1.15rem;
    color: #3182f6;
}

.cart-scan-notice {
    margin-top: 14px;
    text-align: center;
    color: #ff3b30;
    font-size: 0.85rem;
}

/* --- Notice / alert blocks --------------------------------- */
.notice-card {
    border: 1.5px solid #ff9100;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    background: #fff8ee;
}

.notice-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.notice-card__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #cc5500;
}

.notice-card__date {
    font-size: 0.8rem;
    color: #b0b8c1;
}

.notice-card__body {
    font-size: 0.875rem;
    color: #4e5968;
    line-height: 1.6;
    white-space: pre-line;
    margin: 0;
}

/* --- Home page link groups --------------------------------- */
.link-group { display: flex; gap: 8px; flex-wrap: wrap; }

.link-chip {
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    transition: opacity 0.15s;
}

.link-chip:hover { opacity: 0.85; text-decoration: none; color: #fff; }

.link-chip--blue     { background: #3182f6; }
.link-chip--blue-dk  { background: #1a6ce0; }
.link-chip--green    { background: #00c853; }
.link-chip--green-dk { background: #00a843; }
.link-chip--orange   { background: #ff9100; }
.link-chip--purple   { background: #8b5cf6; }
.link-chip--teal     { background: #0ba5a5; }
.link-chip--brown    { background: #795548; }
.link-chip--steel    { background: #0277bd; }
.link-chip--gray     { background: #616161; }

/* --- Store info table -------------------------------------- */
.info-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
}

.info-table th {
    text-align: left;
    padding: 8px 14px;
    width: 140px;
    color: #8b95a1;
    font-weight: 600;
    font-size: 0.875rem;
    vertical-align: top;
}

.info-table td {
    padding: 8px 14px;
    color: #191f28;
    font-size: 0.9rem;
}

/* --- Utility helpers --------------------------------------- */
.text-muted    { color: #8b95a1; }
.text-primary  { color: #3182f6; }
.text-success  { color: #00c853; }
.text-warning  { color: #ff9100; }
.text-danger   { color: #ff3b30; }
.text-bold     { font-weight: 700; }
.text-sm       { font-size: 0.875rem; }
.text-xs       { font-size: 0.75rem; }
.text-center   { text-align: center; }
.text-right    { text-align: right; }
.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.flex  { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center  { display: flex; align-items: center; }
.gap-4  { gap: 4px; }
.gap-8  { gap: 8px; }
.gap-16 { gap: 16px; }

/* --- HTMX global indicator --------------------------------- */
#htmx-indicator {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #3182f6, #00c853);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s;
    z-index: 9999;
    opacity: 0;
}

.htmx-request #htmx-indicator,
#htmx-indicator.htmx-request {
    opacity: 1;
    transform: scaleX(0.7);
}

/* --- Toast notifications ----------------------------------- */
#toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* --- Mobile responsive ------------------------------------- */
@media (max-width: 640px) {
    .page-wrapper,
    .page-wrapper--narrow,
    .page-wrapper--admin { padding: 16px 12px; }

    .store-header__name { font-size: 1.4rem; }

    .menu-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }

    .shares-grid { grid-template-columns: 1fr; }

    .admin-nav { gap: 6px; }
    .admin-nav-btn { padding: 8px 12px; font-size: 0.8rem; }

    .top-bar { flex-wrap: wrap; gap: 10px; }

    .cart-panel { border-radius: 12px; }

    .link-group { gap: 6px; }
    .link-chip { padding: 8px 14px; font-size: 0.8125rem; }
}