@import url('buttons.css');
@import url('modals.css');
@import url('cards.css');
@import url('forms.css');
@import url('banners.css');
@import url('controls.css');
@import url('layouts.css');
@import url('feedback.css');
@import url('payments.css');
@import url('dashboard.css');
@import url('investment.css');
@import url('login.css');

/* Font Declarations */
@font-face {
    font-family: 'Circular Std';
    src: url('../assets/fonts/CircularStd-Light.otf') format('opentype');
    font-weight: var(--font-weight-light);
    font-style: normal;
}

/* Design System Variables */
:root {
    /* Typography */
    --font-family-primary: "Circular Std";
    --font-family-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --letter-spacing: 0.024px;
    --line-height: 24px;
    
    /* Colors */
    --color-text-primary: #000;
    --color-text-secondary: #333;
    --color-text-white: #FFF;
    --color-background-primary: #FFF;
    --color-background-black: #000;
    --color-border-light: #E0E0E0;
    --color-success: #5CB85C;
    --color-link: #007BFF;
    --color-error: #DC3545;
    --color-warning: #FFC107;
    --color-error-bg: #F8D7DA;
    --color-warning-bg: #FFF3CD;
    
    /* Layout */
    --container-edge-width: calc(100% + 44px);
    --container-edge-margin: -22px;
    --container-max-width: 600px;
    --container-side-margin: 22px;
    --grid-gutter: 12px;
    
    /* Common Dimensions */
    --border-radius-default: 8px;
    --border-radius-large: 12px;
    --border-radius-round: 50%;
    
    /* Font Sizes */
    --font-size-base: 16px;
    --font-size-small: 14px;
    --font-size-medium: 18px;
    --font-size-large: 21px;
    --font-size-xlarge: 25px;
}

/* DRY: Utility Classes for Common Patterns */
.clickable {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.clickable:hover {
    opacity: 0.8;
}

.clickable:active {
    opacity: 0.6;
}

/* Remove transition from top banner center logo */
.top-banner-center-logo.clickable {
    transition: none;
}

.selected {
    /* Base selected state - can be overridden by specific components */
    opacity: 1;
}

.loading {
    pointer-events: none;
    opacity: 0.6;
}

.error-state {
    border-color: var(--color-error, #ff4444);
    background-color: var(--color-error-light, #fff2f2);
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    letter-spacing: var(--letter-spacing);
    line-height: var(--line-height);
}

body {
    font-family: var(--font-family-system);
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
    color: var(--color-text-secondary);
    background-color: var(--color-background-primary);
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Global image rendering optimization for entire site */
img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Global Body Text Base Class */
.body-text {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-light);
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
    font-style: normal;
}

/* Luxury Page Transitions */
#app {
    opacity: 1;
    transition: opacity 0.02s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                filter 0.02s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#app.dissolve {
    opacity: 0;
    filter: blur(8px);
    pointer-events: none;
}

#app.fade-in {
    opacity: 0;
    animation: luxuryFadeIn 0.02s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes luxuryFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Utility Classes */
.edge-to-edge {
    width: var(--container-edge-width);
    margin-left: var(--container-edge-margin);
    margin-right: var(--container-edge-margin);
}

/* Product Specifics Save Container */
.product-specifics-save-container {
    display: flex;
    padding: 36px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}

/* ProductInfo Component */
.product-info-container {
    display: flex;
    padding: 60px 0px;
    flex-direction: column;
    align-items: center;
    gap: 96px;
    align-self: stretch;
}

.product-information-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 36px;
    align-self: stretch;
}

.product-info-top-container {
    display: flex;
    align-items: center;
    gap: 50px;
    align-self: stretch;
}

.product-info-input {
    display: flex;
    height: 50px;
    padding: 10px;
    align-items: center;
    gap: 10px;
    flex: 1 1 0;
    min-width: 0;
    border: 1px solid #E2E2E2;
    font-family: var(--font-family-primary), -apple-system, sans-serif;
    font-size: 17px;
    font-weight: 300;
    background: transparent;
    outline: none;
}

.product-info-input::placeholder {
    color: #E2E2E2;
}

.product-info-image {
    width: 90px;
    height: 65px;
    object-fit: cover;
    cursor: pointer;
    flex-shrink: 0;
}

.product-info-desc-title {
    color: var(--color-text-primary);
    font-family: var(--font-family-primary), -apple-system, sans-serif;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-light);
    line-height: 16px;
}

/* AddPicture Component */
.add-picture-container {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    gap: 122px;
}

.add-picture-container:hover {
    background-color: #f5f5f5;
}

.add-picture-text {
    color: var(--color-text-primary);
    font-family: var(--font-family-primary), -apple-system, sans-serif;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-light);
}

.add-picture-image {
    width: 100px;
    height: 69px;
    object-fit: cover;
    border: 1px solid #ddd;
}

/* 12-Column Grid Overlay - Always Visible for Development */
/* Settings: 12 columns, red (#FF0000) at 16% opacity, 22px margins, 12px gutters, 600px max width */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 44px);
    max-width: calc(600px - 44px);
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
    /* background-image: repeating-linear-gradient(
        90deg,
        rgba(255, 0, 0, 0.16) 0,
        rgba(255, 0, 0, 0.16) calc((100% - 132px) / 12),
        transparent calc((100% - 132px) / 12),
        transparent calc((100% - 132px) / 12 + 12px)
    ); */
}


/* AddressBar Component */
.address-bar-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border: 1px solid #000;
    position: relative;
    margin: 60px 0px;
    height: 54px;
    overflow: hidden; /* Prevent content overflow */
    -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
    contain: layout; /* Prevent layout shifts on iOS */
    box-sizing: border-box;
}

.address-center-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-text-primary);
    text-align: center;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-style: normal;
    font-weight: var(--font-weight-light);
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
}

.gps-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* Ensure proper stacking context */
    -webkit-transform: translateZ(0); /* Force GPU acceleration on iOS */
    transform: translateZ(0);
    box-sizing: border-box;
}

.gps-image {
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    -webkit-user-select: none;
    user-select: none;
}

/* ProductListHeadings Component */
.product-list-headings {
    display: flex;
    padding: 16px 0;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border-bottom: 0.22px solid #000;
    width: var(--container-edge-width);
    margin-left: var(--container-edge-margin);
    margin-right: var(--container-edge-margin);
}

.product-list-headings-info-container {
    display: flex;
    align-items: center;
    gap: 22px;
}

.product-list-headings-blank-filler {
    width: 56px;
    height: 40px;
    fill: #FFF;
}

.product-list-headings-product-title {
    display: flex;
    width: 170px;
    height: 29px;
    flex-direction: column;
    justify-content: center;
    color: #000;
    text-align: center;
    font-family: "Circular Std";
    font-size: 15px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.product-list-headings-edit-title {
    display: flex;
    width: 37px;
    height: 29px;
    flex-direction: column;
    justify-content: center;
    color: #000;
    text-align: center;
    font-family: "Circular Std";
    font-size: 15px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.product-list-heading-text {
    color: var(--color-text-primary);
    text-align: left;
    font-family: var(--font-family-primary);
    font-size: 15px;
    font-style: normal;
    font-weight: var(--font-weight-light);
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
    display: block;
    width: 100%;
}

.product-info-title {
    width: 115px;
    height: 32px;
    color: var(--color-text-primary);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-style: normal;
    font-weight: var(--font-weight-light);
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
}

.product-info-lower-container {
    display: flex;
    min-height: 100px;
    padding: 10px;
    align-items: flex-start;
    align-self: stretch;
    border: 1px solid #E2E2E2;
}

.product-info-desc-input {
    flex: 1 0 0;
    color: #000;
    font-family: var(--font-family-primary), -apple-system, sans-serif;
    font-size: 17px;
    font-weight: 300;
    line-height: var(--line-height);
    border: none;
    outline: none;
    resize: none;
    background: transparent;
    overflow: hidden;
}

.product-info-desc-input::placeholder {
    color: #E2E2E2;
}

/* AddPicture Component */

.add-picture-text {
    height: 31px;
    flex-shrink: 0;
    color: var(--color-text-primary);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-style: normal;
    font-weight: var(--font-weight-light);
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
    display: flex;
    align-items: center;
}

.add-picture-image {
    width: 100px;
    height: 69px;
    flex-shrink: 0;
    object-fit: cover;
}

/* Container */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 22px;
    background-color: white;
    position: relative;
}

/* Product page specific container height - only for product pages */
body .container.product-page-container {
    height: 1192px;
}

/* AI page uses full viewport height for dynamic chatbot interface */
.container.ai-page-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Ensure all other containers have flexible height */
.container:not(.product-page-container):not(.ai-page-container) {
    height: auto;
    min-height: auto;
}

/* Grid System */
.row {
    display: flex;
    margin: 0 -6px;
}

/* Grid Positioning System - Just specify column start */
.grid-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
    margin: 0;
}

/* Column start positions */
.start-col-1 { grid-column-start: 1; }
.start-col-2 { grid-column-start: 2; }
.start-col-3 { grid-column-start: 3; }
.start-col-4 { grid-column-start: 4; }
.start-col-5 { grid-column-start: 5; }
.start-col-6 { grid-column-start: 6; }
.start-col-7 { grid-column-start: 7; }
.start-col-8 { grid-column-start: 8; }
.start-col-9 { grid-column-start: 9; }
.start-col-10 { grid-column-start: 10; }
.start-col-11 { grid-column-start: 11; }
.start-col-12 { grid-column-start: 12; }

/* Column span options */
.span-1 { grid-column-end: span 1; }
.span-2 { grid-column-end: span 2; }
.span-3 { grid-column-end: span 3; }
.span-4 { grid-column-end: span 4; }
.span-5 { grid-column-end: span 5; }
.span-6 { grid-column-end: span 6; }
.span-7 { grid-column-end: span 7; }
.span-8 { grid-column-end: span 8; }
.span-9 { grid-column-end: span 9; }
.span-10 { grid-column-end: span 10; }
.span-11 { grid-column-end: span 11; }
.span-12 { grid-column-end: span 12; }

.col-1 { width: calc(8.333% - 12px); margin: 0 6px; }
.col-2 { width: calc(16.667% - 12px); margin: 0 6px; }
.col-3 { width: calc(25% - 12px); margin: 0 6px; }
.col-4 { width: calc(33.333% - 12px); margin: 0 6px; }
.col-5 { width: calc(41.667% - 12px); margin: 0 6px; }
.col-6 { width: calc(50% - 12px); margin: 0 6px; }
.col-7 { width: calc(58.333% - 12px); margin: 0 6px; }
.col-8 { width: calc(66.667% - 12px); margin: 0 6px; }
.col-9 { width: calc(75% - 12px); margin: 0 6px; }
.col-10 { width: calc(83.333% - 12px); margin: 0 6px; }
.col-11 { width: calc(91.667% - 12px); margin: 0 6px; }
.col-12 { width: calc(100% - 12px); margin: 0 6px; }

/* Header */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
    background-color: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.logo {
    font-size: 24px;
    font-weight: bold;
    color: #d32f2f;
}

.cart-btn {
    background-color: #d32f2f;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: background-color 0.3s;
}

.cart-btn:hover {
    background-color: #b71c1c;
}

/* Main Content */
.main-content {
    padding: 20px 0;
    min-height: calc(100vh - 100px);
}

/* Views */
.view {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Shop Selection View */
.shop-select-view h2 {
    margin-bottom: 20px;
    text-align: center;
}

.address-search {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.address-input {
    flex: 1;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: var(--font-size-base);
}

.area-result {
    margin-top: 20px;
}

.area-message {
    text-align: center;
    padding: 15px;
    background-color: #f0f0f0;
    border-radius: 4px;
    margin-bottom: 20px;
}

.shops-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ButcherShopHeader Component */
.butcher-shop-header-wrapper {
    text-align: center;
}

.butcher-shop-header {
    color: var(--color-text-primary);
    text-align: center;
    -webkit-text-stroke-width: 0.2px;
    -webkit-text-stroke-color: var(--color-text-primary);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-xlarge);
    font-style: normal;
    font-weight: var(--font-weight-light);
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
    margin: 46px 0px 30px 0px;
    position: relative;
    display: inline-block;
}

.butcher-shop-tooltip-icon {
    position: absolute;
    width: 16px;
    height: 16px;
    cursor: pointer;
    top: 0;
    right: -24px;
}

.butcher-shop-tooltip-icon svg {
    width: 16px;
    height: 16px;
    fill: #000;
    margin-bottom: 1.2rem;
}

/* TooltipIcon Component - Proper implementation */
.tooltip-icon-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    transform: translateX(86%) translateY(-42%);
    padding: 16px;
    cursor: pointer;
    /* Creates 28x28px clickable area (16px icon + 12px padding) */
}

.tooltip-icon-wrapper svg {
    display: block;
    width: 16px;
    height: 16px;
}

/* DeliveryInformation Component - Figma specifications */
.delivery-information-container {
    display: flex;
    height: 369px;
    padding: 26px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 90px;
}

.delivery-information-text {
    width: 344px;
    color: #000;
    text-align: center;
    font-family: var(--font-family-primary);
    font-size: 20px;
    font-style: normal;
    font-weight: var(--font-weight-light);
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
}


/* SearchBar Component */
.search-bar-container {
    display: flex;
    min-width: 270px;
    max-width: var(--container-max-width);
    padding-left: 14px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border: 0.22px solid #000;
    margin: 22px 0px;
}

.search-bar-input {
    display: flex;
    flex: 1;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    align-self: stretch;
}

.search-bar-input::placeholder {
    color: var(--color-text-primary);
    opacity: 1;
}


.search-bar-icon {
    width: 62px;
    height: 52px;
    cursor: pointer;
}

.search-bar-icon svg {
    width: 62px;
    height: 52px;
}

/* BasketIcon Component */
.basket-icon-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 32px 22px;
}

.basket-icon-svg {
    width: 32px;
    height: 20px;
    cursor: pointer;
}

.basket-icon-svg svg {
    width: 37px;
    height: 24px;
    fill: #000;
}

/* Product Page Image */
.product-page-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* Product Page Message */
.product-page-message {
    text-align: center;
    padding: 50px 0;
    color: #666;
    font-family: var(--font-family-primary), -apple-system, sans-serif;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-light);
}

/* ProductDescription Component */
.product-description-container {
    display: flex;
    padding: 32px 0px 12px 0px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}

.product-description-container {
    display: flex;
    padding: 36px 12px 12px 12px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}

.product-description-text {
    color: #000;
    text-align: center;
    -webkit-text-stroke-width: 0.22px;
    -webkit-text-stroke-color: #000;
    font-family: var(--font-family-primary);
    font-size: 15px;
    font-style: normal;
    font-weight: var(--font-weight-light);
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
}

/* Admin Helper Classes */
.admin-category-wrapper {
    margin-bottom: 20px;
}

.admin-button-container-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    padding: 60px 0;
}

.admin-delete-button-col {
    display: flex;
    justify-content: flex-end;
    min-width: 96px;
}

.admin-delete-button-col-hidden {
    display: none;
}

.admin-add-picture-row {

}

.admin-file-input-hidden {
    display: none;
}

.admin-add-button-row {
    margin-top: 40px;
    margin-bottom: 20px;
}

.admin-add-button-col {
    display: flex;
    justify-content: center;
}

.admin-add-option-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.admin-button-container-spacing {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    padding: 60px 0;
}

.admin-address-input-clickable {
    cursor: pointer;
}

/* Product List View */
.shop-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #d32f2f;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Utility Classes */
.hidden {
    display: none !important;
}

/* Product page specific styles */

/* Add Basket Button Container */
.add-basket-button-container {
    display: flex;
    height: 116px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}

/* Control Spacing for Payment Success/Failed Pages */
.control-spacing {
    display: flex;
    padding: 112px 0px 90px 0px;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

/* PageTitle Component */
.page-title-container {
    display: flex;
    padding: 46px 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

/* PaymentSuccess specific PageTitle styling */
.page-title-container.payment-success {
    display: block;
    padding: 112px 0px;
    justify-content: unset;
    align-items: unset;
}

/* DeliveryInfo specific PageTitle styling */
.page-title-container.delivery-info {
    padding: 32px 20px;
}

/* ConfigureCut specific PageTitle styling */
.page-title-container.configure-cut {
    padding: 36px 20px;
}

/* UpdateKgPrice specific PageTitle styling */
.page-title-container.update-kg-price {
    padding: 36px 20px;
}

/* CustomerOrderPostPaymentInformation Component */
.customer-order-post-payment-container {
    display: flex;
    padding: 9px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 29px;
}

.customer-order-post-payment-text {
    color: #000;
    text-align: center;
    font-family: var(--font-family-primary);
    font-size: 21px;
    font-style: normal;
    font-weight: var(--font-weight-light);
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
}

/* Form Validation Error States */
.checkout-input-field.error {
    border-color: #FF0000 !important;
}

.checkout-input-field.error:focus {
    border-color: #FF0000 !important;
    outline: none;
}

.page-title-text {
    color: var(--color-text-primary);
    text-align: center;
    -webkit-text-stroke-width: 0.2px;
    -webkit-text-stroke-color: var(--color-text-primary);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-xlarge);
    font-style: normal;
    font-weight: var(--font-weight-light);
    line-height: normal;
}

/* AddPictureModal Component */
.add-picture-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: white;
    z-index: 1000;
}

.add-picture-modal-container {
    display: flex;
    padding-bottom: 70px;
    flex-direction: column;
    align-items: center;
    gap: 76px;
    grid-column: 1 / 13;
}

/* TrustPilot Component - Exact Figma Specifications */
.trustpilot-container {
    display: flex;
    padding: 46px 0px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.trustpilot-logo {
    width: 104px;
    height: 26px;
}

/* Contact Page Title - Exact Figma Specifications */
.contact-page-title {
    display: flex;
    padding: 52px 0px 50px 0px;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
}

/* Contact Page Wrapper */
.contact-page-wrapper {
    margin: 92px 0px;
}


/* ContactInfo Component - Exact Figma Specifications */
.contact-info-container {
    display: flex;
    padding: 22px 0px;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.contact-info-text {
    width: 358px;
    height: 219px;
    color: #000;
    text-align: center;
    font-family: var(--font-family-primary);
    font-size: 16px;
    font-style: normal;
    font-weight: var(--font-weight-light);
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
}

/* Orders Grid Container - For admin orders page */
.orders-grid-container {
    margin-top: 20px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ========================================
   PRODUCTS AREA CONTAINER
   ======================================== */

.products-area {
    /* Container for all category banners and product cards */
    width: 100%;
    padding-bottom: 120px;
}

.gallery-area {
    /* Container for all gallery category banners - matches products-area */
    width: 100%;
}

.no-results-message {
    text-align: center;
    padding: 20px;
    color: #666;
    font-family: var(--font-family-primary);
}

/* ========================================
   UPDATE OPENING TIME TITLE
   ======================================== */

.update-opening-time-container {
    display: flex;
    height: 48px;
    min-width: 135px;
    max-width: 600px;
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    flex-shrink: 0;
}

.update-opening-time-text {
    align-self: stretch;
    color: #AAA;
    font-family: var(--font-family-primary);
    font-size: 20px;
    font-style: normal;
    font-weight: var(--font-weight-light);
    line-height: normal;
}

/* ========================================
   GOOGLE PROFILE SECTION CONTAINER
   ======================================== */

.google-profile-section-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 20px 0;
    max-width: 600px;
}

/* ========================================
   ENTER ADDRESS INSTRUCTION TEXT COMPONENT
   ======================================== */

.enter-address-instruction-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    padding: 62px 0;
    gap: 10px;
}

.enter-address-instruction-text {
    color: var(--color-text-primary);
    text-align: center;
    font-family: var(--font-family-primary);
    font-size: 17px;
    font-style: normal;
    font-weight: var(--font-weight-light);
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
}

/* ========================================
   HERE COMPONENT
   ======================================== */

.here-container {
    display: flex;
    padding-bottom: 10px;
    justify-content: flex-start; /* Changed to align with start of column 7 */
    align-items: center;
    gap: 7px;
}

.here-arrow {
    width: 36.522px;
    height: 31.245px;
    fill: var(--color-text-primary);
}

.here-text-container {
    display: flex;
    height: 56px;
    padding: 60px 0px 10px 0px;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.here-text {
    color: var(--color-text-primary);
    font-family: var(--font-family-primary);
    font-size: 17px;
    font-style: normal;
    font-weight: var(--font-weight-light);
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
}

/* BottomPageSpacer Component - Figma Specifications */
.bottom-page-spacer {
    height: 172px;
    align-self: stretch;
}