/* Extracted from crawls\pass.blade.php (block 1) */
/* Modern Coffee Pass Card Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* CSS Variables */
:root {
--crawl-primary: #d4733f;
--crawl-secondary: #c19a6b;
--crawl-muted: #f5f5f5;
--crawl-border: #e5e7eb;
--crawl-radius: 0.625rem;
}

/* Icon Sizes */
.icon-sm {
width: 1rem;
height: 1rem;
}

.icon {
width: 1.5rem;
height: 1.5rem;
}

.icon-lg {
width: 2rem;
height: 2rem;
}

.icon-xl {
width: 4rem;
height: 4rem;
}

.icon-xs {
width: 0.75rem;
height: 0.75rem;
}

/* Layout Utilities */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}

@media (min-width: 640px) {
.container {
padding: 0 1.5rem;
}
}

.section {
padding: 4rem 0;
}

#pass-display {
margin-top: 3rem;
padding-top: 5rem;
}

/* Pass Page Styles */
.pass-hero {
position: relative;
padding: 6rem 0;
background: linear-gradient(135deg, #fdfcfb 0%, #f7f4f0 100%);
overflow: hidden;
margin-bottom: 0;
}

.pass-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: 
radial-gradient(circle at 20% 50%, rgba(212, 115, 63, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(193, 154, 107, 0.08) 0%, transparent 50%);
pointer-events: none;
}

.pass-hero-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 1;
}

.pass-hero-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
align-items: center;
}

@media (min-width: 768px) {
.pass-hero-grid {
grid-template-columns: 1fr 1fr;
gap: 4rem;
}
}

/* Left Column */
.pass-hero-left {
display: flex;
flex-direction: column;
justify-content: center;
}

.pass-hero-image {
width: 100%;
max-width: 500px;
margin-bottom: 2rem;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.pass-hero-image img {
width: 100%;
height: auto;
display: block;
transition: transform 0.3s ease;
}

.pass-hero-image:hover img {
transform: scale(1.05);
}

.pass-header-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
border-radius: 1rem;
background: linear-gradient(135deg, var(--crawl-primary), var(--crawl-secondary));
margin-bottom: 1.5rem;
color: white;
box-shadow: 0 8px 24px rgba(212, 115, 63, 0.25);
}

.pass-hero-title {
font-size: 2.75rem;
font-weight: 700;
margin-bottom: 1.25rem;
color: #1f2937;
line-height: 1.2;
}

.pass-hero-description {
font-size: 1.125rem;
color: #6b7280;
line-height: 1.7;
margin: 0;
}

/* Right Column */
.pass-hero-right {
display: flex;
align-items: center;
justify-content: center;
}

/* Pass Form */
.pass-form-card {
width: 100%;
max-width: 28rem;
background: white;
padding: 2.5rem;
border-radius: 1rem;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
border: 1px solid rgba(212, 115, 63, 0.1);
transition: all 0.3s ease;
}

.pass-form-card:hover {
box-shadow: 0 8px 32px rgba(212, 115, 63, 0.12);
transform: translateY(-2px);
}

@media (max-width: 767px) {
.pass-hero {
padding: 4rem 0;
}

.pass-hero-title {
font-size: 2rem;
}

.pass-hero-description {
font-size: 1rem;
}
}

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

.form-label {
display: block;
font-size: 0.875rem;
font-weight: 500;
margin-bottom: 0.5rem;
color: #374151;
}

.form-input {
width: 100%;
padding: 0.75rem 1rem;
border-radius: var(--crawl-radius);
border: 1px solid var(--crawl-border);
font-size: 0.875rem;
transition: all 0.2s;
}

.form-input:focus {
outline: none;
border-color: var(--crawl-primary);
box-shadow: 0 0 0 3px rgba(212, 115, 63, 0.1);
}

.btn-block {
width: 100%;
}

.perspective-1000 {
perspective: 1000px;
padding: 0;
margin: 0;
}

.crawl-pass-card-wrapper {
position: relative;
width: 100%;
cursor: pointer;
transition: transform 0.7s;
transform-style: preserve-3d;
aspect-ratio: 1.6 / 1;
max-width: min(28rem, 100%);
margin: 0 auto;
min-height: 280px;
}

@media (max-width: 480px) {
.crawl-pass-card-wrapper {
max-width: 100%;
min-height: 250px;
}
}

@media (min-width: 481px) and (max-width: 768px) {
.crawl-pass-card-wrapper {
max-width: 95%;
min-height: 300px;
}
}

.crawl-pass-card-wrapper.flipped {
transform: rotateY(180deg);
}

.crawl-pass-card-face {
position: absolute;
inset: 0;
backface-visibility: hidden;
border-radius: 1.5rem;
overflow: hidden;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Front Side */
.crawl-pass-card-front {
background: linear-gradient(to bottom right, #78350f, #9a3412, #451a03);
}

.crawl-pass-card-front-inner {
position: relative;
height: 100%;
padding: clamp(0.75rem, 2vw, 1.5rem);
display: flex;
flex-direction: column;
justify-content: space-between;
}

@media (max-width: 320px) {
.crawl-pass-card-front-inner {
padding: 0.5rem;
}
}

/* Decorative elements */
.crawl-pass-glow-1 {
position: absolute;
top: 0;
right: 0;
width: 10rem;
height: 10rem;
background: linear-gradient(to bottom left, rgba(251, 146, 60, 0.2), transparent);
border-radius: 50%;
filter: blur(32px);
}

.crawl-pass-glow-2 {
position: absolute;
bottom: 0;
left: 0;
width: 8rem;
height: 8rem;
background: linear-gradient(to top right, rgba(252, 211, 77, 0.1), transparent);
border-radius: 50%;
filter: blur(24px);
}

.crawl-pass-pattern-overlay {
position: absolute;
inset: 0;
opacity: 0.05;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fillRule='evenodd'%3E%3Cg fill='%23ffffff' fillOpacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Header */
.crawl-pass-header {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: clamp(0.5rem, 1.5vw, 1rem);
flex-shrink: 0;
}

.crawl-pass-logo-group {
display: flex;
align-items: center;
gap: 0.5rem;
}

.crawl-pass-logo-icon {
width: clamp(3rem, 8vw, 5rem);
height: clamp(3rem, 8vw, 5rem);
border-radius: 0.75rem;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
box-shadow: none;
flex-shrink: 0;
}

.crawl-pass-logo-icon svg,
.crawl-pass-logo-icon img {
width: 100%;
height: 100%;
color: white;
object-fit: contain;
}

.crawl-pass-logo-text h3 {
color: white;
font-weight: 700;
font-size: 0.75rem;
letter-spacing: 0.05em;
}

@media (min-width: 640px) {
.crawl-pass-logo-text h3 {
font-size: 0.875rem;
}
}

.crawl-pass-logo-text p {
color: rgba(254, 215, 170, 0.7);
font-size: 0.625rem;
}

@media (min-width: 640px) {
.crawl-pass-logo-text p {
font-size: 0.75rem;
}
}

.crawl-pass-premium-badge {
display: flex;
align-items: center;
gap: 0.25rem;
padding: clamp(0.25rem, 0.5vw, 0.375rem) clamp(0.5rem, 1vw, 0.75rem);
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px);
border-radius: 9999px;
flex-shrink: 0;
}

.crawl-pass-premium-badge svg {
width: clamp(0.625rem, 1.5vw, 0.875rem);
height: clamp(0.625rem, 1.5vw, 0.875rem);
color: #fcd34d;
}

.crawl-pass-premium-badge span {
color: #fef3c7;
font-size: clamp(0.5625rem, 1.2vw, 0.75rem);
font-weight: 500;
white-space: nowrap;
}

/* Member Info */
.crawl-pass-member-section {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 0;
}

.crawl-pass-member-label {
color: rgba(254, 215, 170, 0.6);
font-size: clamp(0.5625rem, 1.2vw, 0.75rem);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.25rem;
}

.crawl-pass-member-name {
color: white;
font-size: clamp(0.875rem, 2.5vw, 1.5rem);
font-weight: 700;
letter-spacing: 0.025em;
margin-bottom: clamp(0.5rem, 1.5vw, 1rem);
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

.crawl-pass-pass-id-row {
display: flex;
align-items: center;
gap: 0.5rem;
}

.crawl-pass-pass-id-box {
flex: 1;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px);
border-radius: 0.5rem;
padding: clamp(0.375rem, 1vw, 0.75rem);
min-width: 0;
}

.crawl-pass-pass-id-label {
color: rgba(254, 215, 170, 0.6);
font-size: clamp(0.5rem, 1vw, 0.625rem);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.125rem;
}

.crawl-pass-pass-id-value {
color: white;
font-family: monospace;
font-size: clamp(0.625rem, 1.5vw, 0.875rem);
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.crawl-pass-copy-btn {
padding: clamp(0.5rem, 1.2vw, 0.75rem);
background: rgba(255, 255, 255, 0.1);
border: none;
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.2s;
backdrop-filter: blur(8px);
flex-shrink: 0;
}

.crawl-pass-copy-btn:hover {
background: rgba(255, 255, 255, 0.2);
}

.crawl-pass-copy-btn:active {
transform: scale(0.95);
}

.crawl-pass-copy-btn svg {
width: clamp(0.875rem, 2vw, 1rem);
height: clamp(0.875rem, 2vw, 1rem);
color: white;
}

.crawl-pass-copy-btn svg.crawl-pass-check {
color: #4ade80;
}

/* Footer Stats */
.crawl-pass-footer-stats {
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(0.25rem, 1vw, 0.75rem);
margin-top: clamp(0.5rem, 1.5vw, 1rem);
padding-top: clamp(0.5rem, 1.5vw, 1rem);
border-top: 1px solid rgba(255, 255, 255, 0.1);
flex-shrink: 0;
}

.crawl-pass-stat-label {
display: flex;
align-items: center;
gap: 0.25rem;
color: rgba(254, 215, 170, 0.6);
font-size: clamp(0.5rem, 1vw, 0.625rem);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.125rem;
}

.crawl-pass-stat-label svg {
width: clamp(0.5rem, 1.2vw, 0.75rem);
height: clamp(0.5rem, 1.2vw, 0.75rem);
flex-shrink: 0;
}

.crawl-pass-stat-value {
color: white;
font-size: clamp(0.5625rem, 1.2vw, 0.75rem);
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.crawl-pass-flip-hint {
position: absolute;
bottom: clamp(0.25rem, 0.8vw, 0.5rem);
right: clamp(0.5rem, 1.5vw, 1rem);
color: rgba(255, 255, 255, 0.3);
font-size: clamp(0.5rem, 1vw, 0.625rem);
}

/* Back Side */
.crawl-pass-card-back {
transform: rotateY(180deg);
background: linear-gradient(to bottom right, #fafaf9, #fff7ed);
}

.crawl-pass-card-back-inner {
position: relative;
height: 100%;
padding: clamp(0.75rem, 2vw, 1.5rem);
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}

@media (max-width: 320px) {
.crawl-pass-card-back-inner {
padding: 0.5rem;
}
}

.crawl-pass-back-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: clamp(0.375rem, 1vw, 0.75rem);
flex-shrink: 0;
}

.crawl-pass-back-logo-group {
display: flex;
align-items: center;
gap: 0.5rem;
}

.crawl-pass-back-logo-icon {
width: clamp(1.25rem, 2.5vw, 1.75rem);
height: clamp(1.25rem, 2.5vw, 1.75rem);
border-radius: 0.5rem;
background: linear-gradient(to bottom right, #78350f, #9a3412);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

.crawl-pass-back-logo-icon svg {
width: clamp(0.625rem, 1.3vw, 0.875rem);
height: clamp(0.625rem, 1.3vw, 0.875rem);
color: white;
}

.crawl-pass-back-logo-text {
color: #78350f;
font-weight: 700;
font-size: clamp(0.5625rem, 1.3vw, 0.75rem);
white-space: nowrap;
}

.crawl-pass-progress-percent {
font-size: clamp(1rem, 2.5vw, 1.5rem);
font-weight: 900;
background: linear-gradient(to right, #d97706, #ea580c);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
flex-shrink: 0;
}

/* Progress Bar */
.crawl-pass-progress-section {
margin-bottom: clamp(0.375rem, 1vw, 0.75rem);
flex-shrink: 0;
}

.crawl-pass-progress-bar-bg {
height: clamp(0.25rem, 0.6vw, 0.375rem);
background: #e7e5e4;
border-radius: 9999px;
overflow: hidden;
}

.crawl-pass-progress-bar-fill {
height: 100%;
background: linear-gradient(to right, #f59e0b, #f97316);
border-radius: 9999px;
transition: width 0.5s;
}

.crawl-pass-progress-text {
color: #78716c;
font-size: clamp(0.5rem, 1vw, 0.625rem);
margin-top: clamp(0.125rem, 0.5vw, 0.25rem);
text-align: center;
line-height: 1.2;
}

/* QR Section */
.crawl-pass-qr-section {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 0;
overflow: visible;
padding: clamp(0.25rem, 1vw, 0.5rem) 0;
max-height: 45%;
}

.crawl-pass-qr-wrapper {
padding: clamp(0.25rem, 0.8vw, 0.5rem);
background: white;
border-radius: 0.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border: 1px solid #f5f5f4;
max-width: 100%;
display: flex;
align-items: center;
justify-content: center;
}

.crawl-pass-qr-placeholder {
width: clamp(2.5rem, 10vmin, 4.5rem);
height: clamp(2.5rem, 10vmin, 4.5rem);
max-width: 100%;
max-height: 100%;
background: #1c1917;
border-radius: 0.375rem;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}

.crawl-pass-qr-placeholder canvas {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
display: block !important;
object-fit: contain;
}

.crawl-pass-qr-placeholder svg {
width: clamp(1.25rem, 6vmin, 2.5rem);
height: clamp(1.25rem, 6vmin, 2.5rem);
color: white;
}

.crawl-pass-qr-text {
color: #57534e;
font-size: clamp(0.4375rem, 0.9vw, 0.5625rem);
font-weight: 500;
margin-top: clamp(0.2rem, 0.6vw, 0.375rem);
text-align: center;
}

/* Credits Section */
.crawl-pass-credits-section {
margin-top: clamp(0.375rem, 1vw, 0.75rem);
padding: clamp(0.375rem, 1vw, 0.625rem);
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(8px);
border-radius: 0.5rem;
border: 1px solid #f5f5f4;
flex-shrink: 0;
}

.crawl-pass-credits-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: clamp(0.25rem, 0.6vw, 0.375rem);
gap: 0.5rem;
}

.crawl-pass-credits-label {
color: #78716c;
font-size: clamp(0.5rem, 1vw, 0.625rem);
white-space: nowrap;
}

.crawl-pass-credits-value {
color: #b45309;
font-weight: 700;
font-size: clamp(0.5625rem, 1.3vw, 0.75rem);
white-space: nowrap;
}

.crawl-pass-credits-bar-bg {
height: clamp(0.2rem, 0.5vw, 0.3rem);
background: #e7e5e4;
border-radius: 9999px;
overflow: hidden;
}

.crawl-pass-credits-bar-fill {
height: 100%;
background: linear-gradient(to right, #4ade80, #14b8a6);
border-radius: 9999px;
}

.crawl-pass-back-flip-hint {
position: absolute;
bottom: clamp(0.25rem, 0.6vw, 0.375rem);
right: clamp(0.5rem, 1.2vw, 0.75rem);
color: #a8a29e;
font-size: clamp(0.4375rem, 0.9vw, 0.5625rem);
}

/* Card shadow effect */
.crawl-pass-card-shadow {
margin-top: 1rem;
margin-left: auto;
margin-right: auto;
width: 80%;
height: 1rem;
background: linear-gradient(to right, transparent, #d6d3d1, transparent);
border-radius: 9999px;
filter: blur(8px);
opacity: 0.5;
}


.card-hero-section::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background-color: #dc2626;
z-index: 3;
}

/* Main Content Section (65% of card height) */
.card-main-content {
flex: 1;
height: 65%;
padding: 1.25rem 1.75rem;
display: flex;
flex-direction: column;
justify-content: space-between;
background: linear-gradient(to bottom, #ffffff, #f9fafb);
}

/* Cardholder Header in Content */
.cardholder-header {
text-align: center;
margin-bottom: 0.875rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid #e5e7eb;
}

.cardholder-header h2,
.cardholder-header h3 {
font-size: 1.25rem;
font-weight: 700;
color: #111827;
margin-bottom: 0.25rem;
line-height: 1.2;
}

.cardholder-header p {
font-size: 0.875rem;
color: #6b7280;
font-weight: 500;
}

.progress-percent-large {
font-size: 1.875rem;
font-weight: 700;
color: var(--crawl-primary);
line-height: 1;
}

.info-items {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
flex: 1;
}

.info-item {
display: flex;
flex-direction: column;
gap: 0.375rem;
padding: 1rem;
background: #f9fafb;
border-radius: 0.5rem;
border: 1px solid #e5e7eb;
transition: all 0.2s;
}

.info-item:hover {
background: #f3f4f6;
border-color: #d1d5db;
}

.info-item:first-child {
grid-column: 1 / -1;
}

.info-label {
font-size: 0.75rem;
color: #6b7280;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.025em;
}

.info-value {
font-size: 1.0625rem;
font-weight: 700;
color: #111827;
font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
display: flex;
align-items: center;
gap: 0.375rem;
}

.info-value.valid {
color: #16a34a;
}

.info-value.currency {
color: #2563eb;
}

.copy-btn-inline {
padding: 0.25rem;
background: white;
border: 1px solid #e5e7eb;
border-radius: 0.25rem;
cursor: pointer;
color: var(--crawl-primary);
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
margin-left: 0.25rem;
}

.copy-btn-inline:hover {
background: var(--crawl-primary);
color: white;
border-color: var(--crawl-primary);
}

.copy-btn-inline:hover {
background: var(--crawl-primary);
color: white;
border-color: var(--crawl-primary);
}

.flip-hint {
text-align: center;
font-size: 0.75rem;
color: #9ca3af;
padding-top: 0.5rem;
margin-top: auto;
}

/* Back Card Content */
.progress-section-back {
margin-bottom: 1rem;
}

.progress-bar {
width: 100%;
height: 0.5rem;
background-color: #e5e7eb;
border-radius: 9999px;
overflow: hidden;
margin-bottom: 0.5rem;
}

.progress-fill {
height: 100%;
background: linear-gradient(to right, #3b82f6, #2563eb);
border-radius: 9999px;
width: 0%;
transition: width 0.5s ease;
}

.progress-note {
font-size: 0.8125rem;
color: #6b7280;
text-align: center;
}

.qr-section-back {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0.75rem 0;
flex: 1;
}

.qr-code-box {
background-color: white;
padding: 0.625rem;
border-radius: 0.5rem;
border: 2px solid #e5e7eb;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
position: relative;
}

.qr-code-box canvas {
width: 100px;
height: 100px;
display: none;
}

.qr-code-box canvas[style*="display: block"],
.qr-code-box canvas:not(:empty) {
display: block !important;
}

.qr-placeholder {
width: 100px;
height: 100px;
}

.qr-code-box canvas:not(:empty) ~ .qr-placeholder {
display: none;
}

.qr-label {
font-size: 0.8125rem;
color: #4b5563;
margin-top: 0.5rem;
font-weight: 500;
}

/* Icon sizes */
.icon-xs {
width: 14px;
height: 14px;
}

/* Visited shops grid */
.stat-card {
background: linear-gradient(135deg, #ffffff 0%, var(--crawl-muted) 100%);
padding: 1.75rem 1.5rem;
border-radius: calc(var(--crawl-radius) + 2px);
text-align: center;
border: 1px solid rgba(212, 115, 63, 0.1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.stat-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(212, 115, 63, 0.15);
}

/* Shops Section */
.shops-section {
margin-bottom: 3rem;
}

.shops-section h2 {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 1.5rem;
}

.shops-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}

.shop-card {
border: 1px solid var(--crawl-border);
border-radius: calc(var(--crawl-radius) + 2px);
overflow: hidden;
transition: all 0.3s;
background: white;
}

.shop-card:hover {
border-color: var(--crawl-primary);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.shop-card.visited {
border-color: rgba(34, 197, 94, 0.5);
background-color: rgba(34, 197, 94, 0.05);
}

.shop-image {
position: relative;
width: 100%;
height: 12rem;
overflow: hidden;
}

.shop-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

.shop-content {
padding: 1.5rem;
}

.shop-header {
display: flex;
align-items: start;
justify-content: space-between;
margin-bottom: 1rem;
}

.shop-name {
font-weight: 600;
font-size: 1.125rem;
flex: 1;
}

.check-badge {
width: 1.5rem;
height: 1.5rem;
border-radius: 9999px;
background-color: rgba(34, 197, 94, 0.2);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #10b981;
}

.shop-details {
margin-bottom: 1.5rem;
}

.shop-detail {
display: flex;
gap: 0.5rem;
margin-bottom: 0.5rem;
font-size: 0.875rem;
}

.shop-detail-label {
font-weight: 500;
color: #374151;
}

.shop-detail-value {
color: #6b7280;
}

/* Visited Shops Section */
#visited-shops-section {
margin-bottom: 2rem;
}

#visited-shops-section h2 {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
color: #10b981;
display: flex;
align-items: center;
gap: 0.5rem;
}

#visited-shops-section h2::before {
content: '✓';
background: #10b981;
color: white;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
font-weight: bold;
}

#visited-shops-grid {
display: flex;
flex-direction: column;
gap: 0.75rem;
}

#visited-shops-grid .stat-card {
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
border: 1px solid rgba(16, 185, 129, 0.2);
padding: 0.875rem 1rem;
margin: 0;
border-radius: var(--crawl-radius);
box-shadow: 0 1px 3px rgba(16, 185, 129, 0.1);
transition: all 0.2s ease;
}

#visited-shops-grid .stat-card::before {
display: none;
}

#visited-shops-grid .stat-card:hover {
transform: translateX(2px);
border-color: rgba(16, 185, 129, 0.3);
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}

.visited-shop-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}

.visited-shop-info {
display: flex;
align-items: center;
gap: 0.5rem;
flex: 1;
}

.visited-shop-name {
font-weight: 600;
font-size: 0.875rem;
color: #064e3b;
}

.visited-shop-credit {
font-size: 0.75rem;
color: #059669;
background: rgba(16, 185, 129, 0.1);
padding: 0.125rem 0.5rem;
border-radius: 9999px;
font-weight: 500;
}

.visited-date {
font-size: 0.75rem;
color: #6b7280;
font-weight: 500;
}

/* Info Banner */
.info-banner {
background-color: rgba(212, 115, 63, 0.1);
padding: 1.5rem;
border-radius: var(--crawl-radius);
border: 1px solid rgba(212, 115, 63, 0.2);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}

.info-banner p {
color: #6b7280;
margin: 0;
}

.info-banner strong {
color: #374151;
}

/* Button Styles */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.625rem 1.5rem;
font-size: 0.875rem;
font-weight: 500;
border-radius: var(--crawl-radius);
border: none;
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
line-height: 1.5;
}

.btn-primary {
background-color: var(--crawl-primary);
color: white;
}

.btn-primary:hover:not(:disabled) {
background-color: #c36636;
transform: translateY(-1px);
}

.btn-primary:disabled {
opacity: 0.5;
cursor: not-allowed;
}

.btn-outline {
background-color: transparent;
color: var(--crawl-primary);
border: 1px solid var(--crawl-border);
}

.btn-outline:hover:not(:disabled) {
background-color: var(--crawl-muted);
}

.btn-outline:disabled {
opacity: 0.5;
cursor: not-allowed;
}

.btn-block {
width: 100%;
}

.btn-lg {
padding: 0.75rem 2rem;
font-size: 1rem;
}

/* Map Container Styling */
#coffee-map {
height: 500px;
border-radius: var(--crawl-radius);
overflow: hidden;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
border: 2px solid var(--crawl-border);
}

/* Mapbox Popup Styles */
.mapboxgl-popup-content {
padding: 12px;
min-width: 200px;
}

.mapboxgl-popup-close-button {
font-size: 20px;
padding: 0 8px;
}

/* Responsive Design */
@media (max-width: 768px) {
#coffee-map {
height: 400px;
}

.pass-hero {
padding: 0;
min-height: auto;
display: block;
}

.pass-hero-bg {
position: relative;
inset: auto;
height: 250px;
width: 100%;
}

.pass-hero-content {
position: relative;
padding: 2rem 1rem;
}

.pass-hero-inner {
margin-bottom: 2rem;
}

.pass-hero h1 {
font-size: 1.75rem;
}

.pass-hero-subtitle {
font-size: 1rem;
}

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

.pass-form-card {
padding: 1.5rem;
}

.digital-pass-card {
padding: 1.5rem;
}

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

.card-container {
max-width: 48rem;
}

.card-wrapper {
height: 30rem;
}

.card-main-content {
padding: 0.875rem 1.25rem;
}

.cardholder-header {
margin-bottom: 0.5rem;
padding-bottom: 0.5rem;
}

.cardholder-header h2,
.cardholder-header h3 {
font-size: 1rem;
}

.cardholder-header p {
font-size: 0.75rem;
}

.info-items {
gap: 0.625rem;
}

.info-item {
padding: 0.625rem;
}

.info-label {
font-size: 0.625rem;
}

.info-value {
font-size: 0.875rem;
}
}

/* Small mobile devices */
@media (max-width: 480px) {
.pass-hero-bg {
height: 200px;
}

.pass-hero h1 {
font-size: 1.5rem;
}

.pass-hero-subtitle {
font-size: 0.9375rem;
}

.pass-header-icon {
width: 3rem;
height: 3rem;
margin-bottom: 1rem;
}

.card-wrapper {
height: 28rem;
}

.card-main-content {
padding: 1rem 1.25rem;
}

.cardholder-header {
margin-bottom: 0.375rem;
padding-bottom: 0.375rem;
}

.cardholder-header h2,
.cardholder-header h3 {
font-size: 0.9375rem;
}

.cardholder-header p {
font-size: 0.6875rem;
}

.progress-percent-large {
font-size: 1.5rem;
}

.info-items {
grid-template-columns: 1fr;
gap: 0.5rem;
}

.info-item {
padding: 0.625rem;
}

.info-item:first-child {
grid-column: 1;
}

.info-label {
font-size: 0.625rem;
}

.info-value {
font-size: 0.8125rem;
}

.icon-xs {
width: 12px;
height: 12px;
}

.copy-btn-inline {
padding: 0.1875rem;
}

.qr-code-box {
padding: 0.5rem;
}

.qr-code-box canvas,
.qr-placeholder {
width: 80px;
height: 80px;
}

.qr-label {
font-size: 0.75rem;
margin-top: 0.375rem;
}

.flip-hint {
font-size: 0.625rem;
padding-top: 0.25rem;
}

.progress-section-back {
margin-bottom: 0.75rem;
}

.progress-bar {
height: 0.375rem;
margin-bottom: 0.375rem;
}

.progress-note {
font-size: 0.75rem;
}
}

.icon-lg {
width: 2.5rem;
height: 2.5rem;
}

.icon-xl {
width: 4rem;
height: 4rem;
}