/* ================================
   SNAPMENU FRONTEND STYLES
   ================================ */

/* ================================
   CARD WRAPPER
   ================================ */
.snapmenu-card-wrapper {
    box-sizing: border-box;
}

.snapmenu-card-wrapper *,
.snapmenu-card-wrapper *::before,
.snapmenu-card-wrapper *::after {
    box-sizing: border-box;
}

/* ================================
   CARD CONTAINER
   ================================ */
.snapmenu-card {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* ================================
   CONTAINER IMAGE
   ================================ */
.snapmenu-container-image {
    flex-shrink: 0;
}

.snapmenu-container-image img {
    max-width: 100%;
    height: auto;
}

/* ================================
   CARD HEADER
   ================================ */
.snapmenu-card-header {
    display: flex;
    align-items: center;
}

.snapmenu-card-icon {
    flex-shrink: 0;
}

.snapmenu-card-title {
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ================================
   MENU ITEMS
   ================================ */
.snapmenu-card-items {
    padding: 5px 0;
}

.snapmenu-card-item {
    display: flex;
    align-items: baseline;
    line-height: 1.4;
    overflow: hidden;
}

.snapmenu-item-name {
    white-space: nowrap;
    flex-shrink: 0;
}

.snapmenu-item-dots {
    flex: 1;
    border-bottom: 1px dotted;
    margin: 0 5px;
    min-width: 10px;
    height: 0;
    position: relative;
    top: -4px;
}

.snapmenu-item-prices {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 1;
    min-width: 0;
    max-width: 70%;
}

.snapmenu-price-labels {
    display: flex;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.snapmenu-price-labels span {
    min-width: 40px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
    flex-shrink: 1;
}

/* Tighter spacing when 3 labels present */
.snapmenu-price-labels span:nth-child(3) {
    /* Third label exists - indicates 3-column layout */
}

.snapmenu-price-values {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.snapmenu-price {
    min-width: 40px;
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Responsive adjustments for narrow cards with multiple prices */
@media (max-width: 400px) {
    .snapmenu-price-labels {
        gap: 5px;
    }
    
    .snapmenu-price-labels span {
        min-width: 30px;
        max-width: 60px;
        font-size: 0.85em;
    }
    
    .snapmenu-price-values {
        gap: 5px;
    }
    
    .snapmenu-price {
        min-width: 35px;
    }
}

/* ================================
   MULTILINE ITEM NAME SUPPORT
   ================================ */
.snapmenu-item-wrapper {
    display: block;
}

.snapmenu-item-wrapper .snapmenu-card-item {
    padding: 0;
}

.snapmenu-item-name-continued {
    display: block;
    padding-left: 0;
    line-height: 1.3;
    margin-top: 1px;
}


/* ================================
   IMAGE ROWS
   ================================ */
.snapmenu-image-row {
    width: 100%;
    overflow: hidden; /* Required for border-radius to clip properly */
}

.snapmenu-image-row img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ================================
   CONTAINER IMAGE
   ================================ */
.snapmenu-container-image {
    flex-shrink: 0;
    overflow: hidden; /* Required for border-radius to clip properly */
}

.snapmenu-container-image img {
    max-width: 100%;
    height: auto;
    display: block;
}


/* ================================
   IMAGE ANIMATIONS - HOVER EFFECTS
   ================================ */
.snapmenu-image-animated {
    transition: all 0.3s ease;
}

/* Hover: Zoom In */
.snapmenu-hover-zoom-in:hover {
    transform: scale(1.1);
}

/* Hover: Zoom Out */
.snapmenu-hover-zoom-out:hover {
    transform: scale(0.9);
}

/* Hover: Brighten */
.snapmenu-hover-brighten:hover {
    filter: brightness(1.2);
}

/* Hover: Darken */
.snapmenu-hover-darken:hover {
    filter: brightness(0.8);
}

/* Hover: Rotate Clockwise */
.snapmenu-hover-rotate-cw:hover {
    transform: rotate(5deg);
}

/* Hover: Rotate Counter-Clockwise */
.snapmenu-hover-rotate-ccw:hover {
    transform: rotate(-5deg);
}

/* Hover: Shadow Lift */
.snapmenu-hover-shadow-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

/* Hover: Grayscale to Color */
.snapmenu-hover-grayscale {
    filter: grayscale(100%);
}
.snapmenu-hover-grayscale:hover {
    filter: grayscale(0%);
}

/* Hover: Blur to Clear */
.snapmenu-hover-blur {
    filter: blur(2px);
}
.snapmenu-hover-blur:hover {
    filter: blur(0);
}

/* Hover: Glow */
.snapmenu-hover-glow:hover {
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.6);
}

/* Hover: Flip Horizontal */
.snapmenu-hover-flip-h:hover {
    transform: scaleX(-1);
}

/* Hover: Flip Vertical */
.snapmenu-hover-flip-v:hover {
    transform: scaleY(-1);
}

/* ================================
   IMAGE ANIMATIONS - KEYFRAMES
   ================================ */

/* Bounce */
@keyframes snapmenu-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-15px); }
    60% { transform: translateY(-7px); }
}

/* Pulse */
@keyframes snapmenu-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Float */
@keyframes snapmenu-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Shake */
@keyframes snapmenu-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Wiggle */
@keyframes snapmenu-wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-3deg); }
    75% { transform: rotate(3deg); }
}

/* Swing */
@keyframes snapmenu-swing {
    0%, 100% { transform: rotate(0deg); transform-origin: top center; }
    20% { transform: rotate(10deg); }
    40% { transform: rotate(-8deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-3deg); }
}

/* Heartbeat */
@keyframes snapmenu-heartbeat {
    0%, 100% { transform: scale(1); }
    14% { transform: scale(1.1); }
    28% { transform: scale(1); }
    42% { transform: scale(1.1); }
    70% { transform: scale(1); }
}

/* Spin Slow */
@keyframes snapmenu-spin-slow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Rock */
@keyframes snapmenu-rock {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

/* Jello */
@keyframes snapmenu-jello {
    0%, 11.1%, 100% { transform: none; }
    22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
    33.3% { transform: skewX(6.25deg) skewY(6.25deg); }
    44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
    55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
    66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
    77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); }
    88.8% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
}

/* Rubber Band */
@keyframes snapmenu-rubber-band {
    0%, 100% { transform: scale3d(1, 1, 1); }
    30% { transform: scale3d(1.25, 0.75, 1); }
    40% { transform: scale3d(0.75, 1.25, 1); }
    50% { transform: scale3d(1.15, 0.85, 1); }
    65% { transform: scale3d(0.95, 1.05, 1); }
    75% { transform: scale3d(1.05, 0.95, 1); }
}

/* Tada */
@keyframes snapmenu-tada {
    0%, 100% { transform: scale3d(1, 1, 1) rotate(0); }
    10%, 20% { transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); }
    30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); }
    40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); }
}

/* Flash */
@keyframes snapmenu-flash {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0.5; }
}

/* ================================
   CONTINUOUS ANIMATION CLASSES
   ================================ */
.snapmenu-anim-bounce {
    animation: snapmenu-bounce 2s ease infinite;
}

.snapmenu-anim-pulse {
    animation: snapmenu-pulse 2s ease-in-out infinite;
}

.snapmenu-anim-float {
    animation: snapmenu-float 3s ease-in-out infinite;
}

.snapmenu-anim-shake {
    animation: snapmenu-shake 0.8s ease-in-out infinite;
}

.snapmenu-anim-wiggle {
    animation: snapmenu-wiggle 1s ease-in-out infinite;
}

.snapmenu-anim-swing {
    animation: snapmenu-swing 2s ease-in-out infinite;
    transform-origin: top center;
}

.snapmenu-anim-heartbeat {
    animation: snapmenu-heartbeat 1.5s ease-in-out infinite;
}

.snapmenu-anim-spin-slow {
    animation: snapmenu-spin-slow 8s linear infinite;
}

.snapmenu-anim-rock {
    animation: snapmenu-rock 1.5s ease-in-out infinite;
}

.snapmenu-anim-jello {
    animation: snapmenu-jello 2s ease-in-out infinite;
}

.snapmenu-anim-rubber-band {
    animation: snapmenu-rubber-band 1.5s ease-in-out infinite;
}

.snapmenu-anim-tada {
    animation: snapmenu-tada 1.5s ease-in-out infinite;
}

.snapmenu-anim-flash {
    animation: snapmenu-flash 2s ease-in-out infinite;
}



/* ================================
   DIVIDER
   ================================ */
.snapmenu-card-divider {
    width: 100%;
}

/* ================================
   SOLD OUT STYLES
   ================================ */
.snapmenu-card-item {
    position: relative;
}

.snapmenu-card-item.snapmenu-sold-out {
    transition: opacity 0.3s ease;
}

.snapmenu-strikethrough {
    pointer-events: none;
}

.snapmenu-soldout-indicator {
    font-size: inherit;
    white-space: nowrap;
}

.snapmenu-soldout-emoji {
    font-size: 1.2em;
}

/* ================================
   LABEL-ONLY ROW (FRONTEND)
   ================================ */
.snapmenu-card-item.snapmenu-label-row {
    display: flex;
    justify-content: flex-end;
}

.snapmenu-label-row .snapmenu-label-text {
    display: flex;
    gap: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.snapmenu-label-row .snapmenu-label-text span {
    min-width: 45px;
    text-align: right;
}

/* Tighter gap when 3 labels present */
.snapmenu-label-row.snapmenu-labels-3 .snapmenu-label-text {
    gap: 6px;
}




/* ================================
   LAYOUT GRID (SMART COLUMNS)
   ================================ */
.snapmenu-layout {
    display: grid;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.snapmenu-layout-column {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    min-width: 0; /* Prevent overflow */
}

.snapmenu-layout-item {
    width: 100%;
    display: block;
    margin: 0;
    padding: 0;
}

/* Ensure card wrapper fills container */
.snapmenu-layout-item .snapmenu-card-wrapper {
    width: 100%;
    max-width: 100%;
}

/* Ensure card respects container unless explicit width set */
.snapmenu-layout-item .snapmenu-card {
    max-width: 100%;
}

/* Elementor Canvas & Fullscreen Support */
body.elementor-template-canvas, 
body.elementor-template-canvas #content {
    background-color: #1a1a2e;
}

.elementor-widget-html .snapmenu-layout {
    min-height: 100vh;
}

/* Mobile Responsive: Stack columns on small screens */
@media (max-width: 768px) {
    .snapmenu-layout {
        grid-template-columns: 1fr !important;
    }
}


/* ================================
   LAYOUT PLACEMENT MODES
   ================================ */

/* Masonry (Default) - Cards stack naturally */
.snapmenu-layout.snapmenu-placement-masonry .snapmenu-layout-column {
    align-items: flex-start;
}

.snapmenu-layout.snapmenu-placement-masonry .snapmenu-layout-item {
    width: 100%;
}

/* Uniform Horizontal - Equal height rows */
.snapmenu-layout.snapmenu-placement-uniform-horizontal {
    align-items: stretch;
}

.snapmenu-layout.snapmenu-placement-uniform-horizontal .snapmenu-layout-column {
    justify-content: stretch;
}

.snapmenu-layout.snapmenu-placement-uniform-horizontal .snapmenu-layout-item {
    flex: 1;
    display: flex;
}

.snapmenu-layout.snapmenu-placement-uniform-horizontal .snapmenu-layout-item .snapmenu-card-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.snapmenu-layout.snapmenu-placement-uniform-horizontal .snapmenu-layout-item .snapmenu-card {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.snapmenu-layout.snapmenu-placement-uniform-horizontal .snapmenu-layout-item .snapmenu-card-items {
    flex: 1;
}

/* Uniform Vertical - Equal width columns (already default behavior) */
.snapmenu-layout.snapmenu-placement-uniform-vertical .snapmenu-layout-column {
    align-items: stretch;
}

.snapmenu-layout.snapmenu-placement-uniform-vertical .snapmenu-layout-item .snapmenu-card-wrapper,
.snapmenu-layout.snapmenu-placement-uniform-vertical .snapmenu-layout-item .snapmenu-card {
    width: 100%;
}

/* Uniform Grid - Equal sized cells */
.snapmenu-layout.snapmenu-placement-uniform-grid {
    align-items: stretch;
}

.snapmenu-layout.snapmenu-placement-uniform-grid .snapmenu-layout-column {
    justify-content: stretch;
    align-items: stretch;
}

.snapmenu-layout.snapmenu-placement-uniform-grid .snapmenu-layout-item {
    flex: 1;
    display: flex;
}

.snapmenu-layout.snapmenu-placement-uniform-grid .snapmenu-layout-item .snapmenu-card-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.snapmenu-layout.snapmenu-placement-uniform-grid .snapmenu-layout-item .snapmenu-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100% !important;
}

.snapmenu-layout.snapmenu-placement-uniform-grid .snapmenu-layout-item .snapmenu-card-items {
    flex: 1;
}

/* Centered - Cards centered with auto margins */
.snapmenu-layout.snapmenu-placement-centered {
    justify-items: center;
}

.snapmenu-layout.snapmenu-placement-centered .snapmenu-layout-column {
    align-items: center;
}

.snapmenu-layout.snapmenu-placement-centered .snapmenu-layout-item {
    display: flex;
    justify-content: center;
}

/* ================================
   CARD WIDTH BEHAVIOR
   ================================ */

/* Stretch - Cards fill their columns */
.snapmenu-layout.snapmenu-width-stretch .snapmenu-layout-item .snapmenu-card-wrapper {
    width: 100%;
}

.snapmenu-layout.snapmenu-width-stretch .snapmenu-layout-item .snapmenu-card {
    width: 100% !important;
}

/* Original Left - Cards keep width, align left */
.snapmenu-layout.snapmenu-width-original-left .snapmenu-layout-column {
    align-items: flex-start;
}

/* Original Center - Cards keep width, centered */
.snapmenu-layout.snapmenu-width-original-center .snapmenu-layout-column {
    align-items: center;
}

/* Original Right - Cards keep width, align right */
.snapmenu-layout.snapmenu-width-original-right .snapmenu-layout-column {
    align-items: flex-end;
}



/* ================================
   RESOLUTION SCALING SUPPORT
   ================================ */
.snapmenu-layout[data-resolution] {
    transform-origin: top left;
}

/* Wrapper for scaled layouts to prevent overflow issues */
.snapmenu-layout-wrapper {
    overflow: hidden;
    width: 100%;
}
/* ================================
   THREE-PRICE ITEM ADJUSTMENTS
   ================================ */
.snapmenu-card-item.snapmenu-prices-3 .snapmenu-price-labels {
    gap: 6px;
}

.snapmenu-card-item.snapmenu-prices-3 .snapmenu-price-labels span {
    min-width: 35px;
    max-width: 70px;
    letter-spacing: 0;
}

.snapmenu-card-item.snapmenu-prices-3 .snapmenu-price-values {
    gap: 6px;
}

.snapmenu-card-item.snapmenu-prices-3 .snapmenu-price {
    min-width: 38px;
}

/* Extra tight for very narrow cards */
.snapmenu-card-item.snapmenu-prices-3 .snapmenu-item-dots {
    min-width: 5px;
    margin: 0 3px;
}