/* ==========================================================================
   NANO WooCommerce - Shared Styles
   ========================================================================== */

/* ---------- Common ---------- */

.nano-tag {
    display: inline-block;
    background: #e8f5e9;
    color: #2e7d32;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.85em;
    margin-right: 4px;
}

.nano-loading {
    padding: 15px;
    color: #666;
    font-style: italic;
}

.nano-error {
    padding: 15px;
    color: #c62828;
}

/* ---------- Stamps ---------- */

.nano-stamp {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 3px;
    border: 2px solid #4caf50;
}

.nano-stamp.filled {
    background: #4caf50;
}

.nano-stamp.empty {
    background: transparent;
}

/* ---------- Points bar ---------- */

.nano-points-bar {
    background: #e0e0e0;
    border-radius: 10px;
    height: 16px;
    overflow: hidden;
    margin: 6px 0;
    max-width: 300px;
}

.nano-points-fill {
    background: linear-gradient(90deg, #4caf50, #66bb6a);
    height: 100%;
    border-radius: 10px;
    transition: width 0.3s ease;
}

/* ---------- Checkout Benefits ---------- */

.nano-benefits-box,
.nano-join-box {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 20px;
    margin: 20px 0;
}

.nano-benefits-title,
.nano-join-title {
    margin: 0 0 12px 0;
    font-size: 1.1em;
    color: #333;
}

.nano-customer-name {
    font-size: 0.95em;
    color: #555;
    margin-bottom: 10px;
}

.nano-bonus-section,
.nano-vouchers-section,
.nano-passes-section {
    margin-top: 15px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

.nano-bonus-balance {
    font-size: 1em;
    margin-bottom: 8px;
}

.nano-bonus-input {
    margin-top: 8px;
    padding-left: 24px;
}

.nano-bonus-input input[type="number"] {
    width: 100px;
    padding: 4px 8px;
}

.nano-checkbox-label {
    display: block;
    padding: 4px 0;
    cursor: pointer;
}

.nano-checkbox-label input[type="checkbox"] {
    margin-right: 6px;
}

.nano-vouchers-section h4 {
    margin: 0 0 8px 0;
    font-size: 0.95em;
}

.nano-pass-display {
    margin: 6px 0;
}

.nano-pass-empty {
    color: #999;
    font-style: italic;
}

.nano-no-benefits {
    color: #666;
    font-style: italic;
}

/* ---------- My Account Loyalty ---------- */

.nano-account-loyalty {
    max-width: 600px;
}

.nano-account-loyalty h2 {
    margin-bottom: 20px;
}

.nano-account-loyalty h3 {
    font-size: 1em;
    margin: 20px 0 10px 0;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.nano-account-loyalty h3:first-of-type {
    border-top: none;
    padding-top: 0;
}

.nano-account-info {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 15px;
}

.nano-account-info p {
    margin: 4px 0;
}

.nano-account-bonus .nano-bonus-amount {
    font-size: 1.4em;
    font-weight: bold;
    color: #2e7d32;
    margin: 5px 0;
}

.nano-bonus-note {
    color: #999;
}

/* Pass cards */
.nano-pass-card {
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 10px;
}

.nano-pass-card h4 {
    margin: 0 0 6px 0;
    font-size: 0.95em;
}

.nano-pass-description {
    color: #666;
    font-size: 0.9em;
    margin-bottom: 8px;
}

.nano-pass-redeemable {
    color: #e65100;
    font-weight: bold;
}

.nano-pass-expires,
.nano-pass-not-started {
    color: #999;
    font-size: 0.85em;
}

/* Voucher cards */
.nano-voucher-card {
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 10px;
}

.nano-voucher-value {
    color: #2e7d32;
    font-weight: bold;
}

.nano-voucher-min,
.nano-voucher-expires {
    color: #999;
}

/* Actions */
.nano-account-actions {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 12px;
}

.nano-account-actions small {
    color: #999;
}

/* No account */
.nano-no-account {
    text-align: center;
    padding: 40px 20px;
}

/* ---------- Invite ---------- */

.nano-invite-box {
    background: #fff3e0;
    border: 1px solid #ffe0b2;
    border-radius: 6px;
    padding: 20px;
    margin: 20px 0;
    max-width: 400px;
}

.nano-invite-box h3 {
    margin: 0 0 8px 0;
    border: none;
    padding: 0;
}

.nano-invite-form {
    margin-top: 12px;
}

.nano-invite-phone {
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.nano-invite-message {
    margin-top: 8px;
    padding: 8px;
    border-radius: 4px;
    font-size: 0.9em;
}

.nano-invite-message.success {
    background: #e8f5e9;
    color: #2e7d32;
}

.nano-invite-message.error {
    background: #ffebee;
    color: #c62828;
}

/* ---------- Shortcode Lookup ---------- */

.nano-lookup-container {
    max-width: 600px;
    margin: 0 auto;
}

.nano-lookup-title {
    margin-bottom: 15px;
}

.nano-lookup-input-group {
    display: flex;
    gap: 8px;
}

.nano-lookup-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
}

.nano-lookup-submit {
    padding: 10px 20px !important;
    white-space: nowrap;
}

.nano-lookup-hint {
    font-size: 0.85em;
    color: #999;
    margin-top: 4px;
}

/* Lookup results */
#nano-lookup-results {
    margin-top: 20px;
}

.nano-lookup-result {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 20px;
}

.nano-result-header {
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    font-size: 1em;
}

.nano-result-info {
    margin-bottom: 15px;
}

.nano-result-info p {
    margin: 4px 0;
}

.nano-result-section {
    margin-top: 15px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

.nano-result-section h5 {
    margin: 0 0 8px 0;
    font-size: 0.95em;
    color: #555;
}

.nano-result-section .nano-bonus-amount {
    font-size: 1.3em;
    font-weight: bold;
    color: #2e7d32;
}

.nano-pass-item,
.nano-voucher-item {
    margin-bottom: 8px;
    padding: 6px 0;
}

.nano-redeemable {
    color: #e65100;
    font-weight: bold;
}

.nano-lookup-not-found {
    background: #fff3e0;
    border: 1px solid #ffe0b2;
    border-radius: 6px;
    padding: 15px;
}

.nano-lookup-error {
    background: #ffebee;
    border: 1px solid #ffcdd2;
    border-radius: 6px;
    padding: 15px;
    color: #c62828;
}

.nano-no-access {
    color: #c62828;
    font-style: italic;
}

/* ---------- Login with NANOid ---------- */

.nano-nanoid-prompt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin: 16px 0;
}

.nano-nanoid-prompt .nano-nanoid-login,
.nano-locked-box .nano-nanoid-login {
    margin: 0;
}

.nano-locked-box .nano-nanoid-login {
    margin-top: 8px;
}