/* =============================================================================
   CYBERPHOTO CHAT WIDGET STYLES - ORGANIZED BY FUNCTIONALITY
   ============================================================================= */

/* =============================================================================
   1. CURSOR & INTERACTION STYLING
   ============================================================================= */

/* Makes carousel cards clickable with pointer cursor */
.vfrc-carousel .vfrc-card[data-enhanced="true"],
.vfrc-carousel .vfrc-card[data-enhanced="true"] *,
.vfrc-card[role="button"],
.vfrc-card[role="button"] * {
  cursor: pointer !important;
}

/* Ensure hover state shows pointer cursor */
.vfrc-carousel .vfrc-card[data-enhanced="true"]:hover,
.vfrc-carousel .vfrc-card[data-enhanced="true"]:hover *,
.vfrc-card[role="button"]:hover,
.vfrc-card[role="button"]:hover * {
  cursor: pointer !important;
}

/* =============================================================================
   2. PROACTIVE MESSAGES
   ============================================================================= */

/* Proactive message container spacing */
._6r9xee4 {
  margin: 8px 0 16px 0;
}

/* Proactive message bubble styling */
._6r9xee3.o231sh1 {
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
}

/* Proactive message close button sizing */
.vfrc-button._1q15b0b0.c26d8x0._1q15b0b2._1q15b0b5._6r9xee5 {
    width: 28px;
    height: 28px;
}

/* =============================================================================
   3. AVATAR STYLING
   ============================================================================= */

/* Avatar alignment - positioned at top */
.g3dqfd1 {
    align-items: flex-start !important;
}

/* Main avatar styling - transparent background with custom dimensions */
.vfrc-avatar.g931q10.g931q12 {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    height: 27px !important;
    width: 240px !important;
}

/* Bot message avatar transparent background */
.vfrc-avatar.g931q10.g931q11.g3dqfd2 {
    background: transparent !important;
    background-color: transparent !important;
}

/* Typing indicator avatar styling */
.vfrc-avatar.g931q10.g931q11 {
    background: transparent !important;
    border-radius: 9999px;
}

/* Base avatar styling */
.vfrc-avatar.g931q10 {
    border-radius: 0px;
}

/* Bot message avatar border radius */
.vfrc-avatar.g931q10.g931q11.g3dqfd2 {
    border-radius: 9999px;
}

/* =============================================================================
   4. TYPING INDICATOR
   ============================================================================= */

/* Base typing indicator dot - CyberPhoto theme */
.xaffbq2 {
    background-color: #d7091e !important;
}

/* First typing dot with base animation delay */
.xaffbq2.xaffbq3 {
    background-color: #a60717 !important;
    animation-delay: 0ms !important;
}

/* Second typing dot with medium animation delay */
.xaffbq2.xaffbq4 {
    background-color: #9b0615 !important;
    animation-delay: 333ms !important;
}

/* Third typing dot with longest animation delay */
.xaffbq2.xaffbq5 {
    background-color: #9b0615 !important;
    animation-delay: 666ms !important;
}

/* Typing indicator text color */
.vfrc-typing-indicator.xaffbq1 * {
    color: #ffffff !important;
}

/* Typing indicator background color */
._1ayyscc1 {
    background-color: #ffffff;
}

/* =============================================================================
   5. ICONS & BRAND COLORS
   ============================================================================= */

/* General icon color - CyberPhoto brand red */
.vfrc-icon {
    color: #72040d;
}

/* Specific icon color override */
.vfrc-icon._1t7e06e0 {
    color: #72040d !important;
}

/* =============================================================================
   6. HEADER STYLING
   ============================================================================= */

/* Chat widget header background */
.vfrc-header {
    background-color: rgb(0, 0, 0, 0%) !important;
}

/* === MAIN CHAT WINDOW GLASS EFFECTS === */
.vfrc-chat {
      position: relative;
      background: rgb(255, 255, 255, 0.85);
      backdrop-filter: blur(10px) saturate(180%);
      -webkit-backdrop-filter: blur(10px) saturate(180%); /* Safari */
      border: 1px solid rgba(255, 255, 255, 0.8);
      border-radius: 2rem;
      box-shadow:
        0 8px 32px rgba(31, 38, 135, 0.2),
        inset 0 4px 20px rgba(255, 255, 255, 0.3);
      z-index: 1;
      overflow: hidden;
}

/* Smooth scrolling for chat container */
.vfrc-chat--container {
    scroll-behavior: smooth;
    /* Improve mobile scrolling */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Optional: Hide scrollbar while keeping scroll functionality */
.vfrc-chat--container::-webkit-scrollbar {
    width: 6px;
}

.vfrc-chat--container::-webkit-scrollbar-track {
    background: transparent;
}

.vfrc-chat--container::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.vfrc-chat--container::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Input container liquid glass styling */
.vfrc-input-container._1gdvh9t1 {
    background: rgb(255, 255, 255, 0.15);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow:
        0 8px 32px rgba(31, 38, 135, 0.2),
        inset 0 4px 20px rgba(255, 255, 255, 0.3);
    overflow: hidden;
    margin-top: 20px;
    transition: all 0.2s ease;
}

/* Input field inside container */
.vfrc-input-container._1gdvh9t1 input,
.vfrc-input-container._1gdvh9t1 textarea {
    background: transparent !important;
    border: 0px !important;
    border-radius: 0rem;
    color: #333 !important;
    transition: all 0.3s ease;
    box-shadow: none !important;
}

.vfrc-input-container._1gdvh9t1 input:focus,
.vfrc-input-container._1gdvh9t1 textarea:focus {
    background: transparent !important;
    outline: none !important;
    border: 0px !important;
    box-shadow: none !important;
}

/* Override Voiceflow's focus-within styling - maintain same border size to prevent movement */
.vfrc-input-container._1gdvh9t1:focus-within {
    border: 1px solid rgb(129, 49, 49, 0.8);
    background: transparent;
    box-shadow: 
        0 8px 32px rgba(31, 38, 135, 0.25) !important,
        inset 0 4px 20px rgba(255, 255, 255, 0.35) !important;
}

/* Focus effect for input container */
._1gdvh9t4 {
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 25px;
    pointer-events: none;
    opacity: 0;
    box-shadow: inset 0 0 0 0 var(--_1bof89n5);
    transition: opacity .15s ease,box-shadow .15s ease,border-radius .15s ease
}

._1gdvh9t1:focus-within ._1gdvh9t4 {
    opacity: 0;
    box-shadow: inset 0 0 0 0px var(--_1bof89n5)
}

/* Send button glass effect */
.vfrc-input-container._1gdvh9t1 button {
    background: rgb(255, 255, 255, 0.3);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        0 4px 16px rgba(31, 38, 135, 0.2),
        inset 0 2px 8px rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.vfrc-input-container._1gdvh9t1 button:hover {
    background: rgb(255, 255, 255, 0.4);
    box-shadow:
        0 6px 20px rgba(31, 38, 135, 0.3),
        inset 0 3px 12px rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}

.vfrc-input-container._1gdvh9t1 button:focus-within {
    background: rgba(129, 49, 49, 0.4);
    border: 1px solid rgb(129, 49, 49, 0.8);
    box-shadow:
        0 6px 20px rgba(31, 38, 135, 0.3),
        inset 0 3px 12px rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}

/* === MESSAGE BUBBLES === */
/* Bot message bubble - Assistant/bot response messages */
.vfrc-message._11kfxpg0 {
    background-color: rgb(255, 255, 255) !important;
    box-shadow:
    0 6px 10px rgba(31, 38, 135, 0.1),
    inset 0 3px 12px rgba(255, 255, 255, 0.4);
}

/* User message bubble - User input messages */
._15emaa41 {
    background-color: #9b0615 !important;
    color: #ffffff !important;
}

/* Footer/bottom area background */
._1xyscpy0 {
    background-color: rgb(0, 0, 0, 0%)
}

.vfrc-footer _1vj16242 {
    background-color: rgb(0, 0, 0, 0%)
}

._1vj16245 {
    background: rgb(0, 0, 0, 0%)
}

/* =============================================================================
   7. LINKS & LISTS
   ============================================================================= */

/* Card description links - brand styled */
.vfrc-card--description ._1lbxmyd8 {
    display: block !important;
    margin-top: 6px !important;
    color: #72040d !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

/* Card description link hover effects */
.vfrc-card--description ._1lbxmyd8:hover {
    color: #4a1a1a !important;
    text-decoration: underline !important;
}

/* Bullet point markers - CyberPhoto brand red */
.vfrc-message._11kfxpg0 ul li::marker {
    color: #72040d !important;
}

/* Numbered list markers - CyberPhoto brand red */
.vfrc-message._11kfxpg0 ol li::marker {
    color: #72040d !important;
}

/* List styling for bot messages */
.vfrc-message._11kfxpg0 ol {
    margin: 16px 0px 0px 0px !important;
    padding-left: 20px !important;
}

.vfrc-message._11kfxpg0 ol li {
    margin-bottom: 16px !important;
    color: rgb(0, 0, 0, 0.95) !important;
}

.vfrc-message._11kfxpg0 ol li:last-child {
    margin-bottom: 0 !important;
}

/* Unordered list styling for bot messages */
.vfrc-message._11kfxpg0 ul {
    margin: 8px 0 16px 0 !important;
    padding-left: 20px !important;
}

.vfrc-message._11kfxpg0 ul li {
    margin-bottom: 0px !important;
    color: rgb(0, 0, 0, 0.95) !important;
}

.vfrc-message._11kfxpg0 ul li:last-child {
    margin-bottom: 0 !important;
}

/* Make markdown bullet points red */
.markdown ul li:before {
    content: "";
    height: 4px;
    width: 4px;
    background-color: #72040d !important;
    border-radius: 50%;
    position: absolute;
    transform: translate(-14px, 7px);
}

/* Markdown list paragraph line height */
.markdown li p {
    line-height: 1.1;
}

._11kfxpgc {
      margin-bottom: 8px; 
}

/* Fix gap mellan titel (<strong>) TITEL + BESKRIVNING I LISTOR: exakt, tajt radbrytning */
.vfrc-message._11kfxpg0 :is(ol, ul) li p strong + br {
  display: none !important;            /* ta bort br */
}

/* Keep strong titles and immediately following text (including punctuation) together */
.vfrc-message._11kfxpg0 :is(ol, ul) li p strong {
  display: inline !important;          /* ensure strong stays inline */
  white-space: nowrap !important;      /* prevent breaking within strong */
}

/* Prevent line breaks immediately after strong elements */
.vfrc-message._11kfxpg0 :is(ol, ul) li p {
  line-height: 1.4 !important;
  white-space: normal !important;      /* allow normal wrapping for the rest */
}

/* Target the text node immediately after strong to stay on same line */
.vfrc-message._11kfxpg0 :is(ol, ul) li p strong + * {
  display: inline !important;
  margin-left: 0 !important;
}

/* Ensure no unwanted margins on strong elements */
.vfrc-message._11kfxpg0 :is(ol, ul) li p strong {
  margin: 0 !important;
}

/* Links in bot messages - CyberPhoto theme */
.vfrc-message._11kfxpg0 a,
.vfrc-message._11kfxpg0 .markdown-link,
.vfrc-message._11kfxpg0 ._11kfxpgi {
    color: #72040d !important;
    text-decoration: underline !important;
    transition: all 0.3s ease !important;
}

/* =============================================================================
   8. LAUNCHER BUTTON & ANIMATIONS
   ============================================================================= */

/* Launcher button pulse animation - only when widget is closed */
.vfrc-launcher._15s29m94 {
    animation: gentlePulse 3s ease-in-out infinite !important;
}

/* Remove pulse when widget is open */
.vfrc-launcher._15s29m93 {
    animation: none !important;
}

/* Enhanced hover effects */
.vfrc-launcher:hover {
    animation-play-state: paused !important;
    box-shadow: 
        0 12px 40px color-mix(in srgb, var(--_1bof89n5, #72040d) 40%, transparent) !important,
        0 6px 20px rgba(0, 0, 0, 0.2) !important,
        inset 0 4px 20px rgba(255, 255, 255, 0.4) !important;
}

/* Active state (click) */
.vfrc-launcher:active {
    transform: scale(1.02) !important;
    box-shadow: 
        0 8px 25px color-mix(in srgb, var(--_1bof89n5, #72040d) 30%, transparent) !important,
        inset 0 2px 10px rgba(255, 255, 255, 0.2) !important;
}

/* Accessibility - respect motion preferences */
@media (prefers-reduced-motion: reduce) {
    .vfrc-launcher {
        animation: none !important;
    }
}

/* Pulse animation keyframes with CyberPhoto color scheme */
@keyframes gentlePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 
            0 8px 25px color-mix(in srgb, var(--_1bof89n5, #72040d) 20%, transparent),
            0 0 20px color-mix(in srgb, var(--_1bof89n5, #72040d) 30%, transparent);
    }
    50% {
        transform: scale(1.03);
        box-shadow: 
            0 12px 35px color-mix(in srgb, var(--_1bof89n5, #72040d) 40%, transparent),
            0 4px 15px rgba(255, 255, 255, 0.2),
            0 0 20px color-mix(in srgb, var(--_1bof89n5, #72040d) 45%, transparent),
            0 0 35px color-mix(in srgb, var(--_1bof89n5, #72040d) 20%, transparent);
    }
}

/* =============================================================================
   9. CAROUSEL & CARDS
   ============================================================================= */

/* Carousel spacing */
.vfrc-carousel.w2917p5 {
    margin-bottom: 30px;
}

/* Main card styling - modern glass effect */
.vfrc-card {
    width: 280px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgb(222, 222, 222, 0.6) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Card hover effects */
.vfrc-card:hover {
    transform: none !important;
    border: 1px solid rgba(129, 49, 49, 0.3) !important;
}

/* Card content layout */
.vfrc-card--content {
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    min-height: 120px !important;
}

/* Card image styling with zoom effects */
.vfrc-card img._1lbxmyd1 {
    width: 100% !important;
    height: 200px !important;
    padding-top: 10px;
    object-fit: contain !important;
    border-radius: 0 !important;
    transition: all 0.4s ease !important;
    display: block !important;
}

/* Image zoom-in effect */
._1lbxmyd1 {
    transform: scale(1.06);
    transition: transform 0.3s ease !important;
}

/* Image zoom-out on card hover */
.vfrc-card:hover ._1lbxmyd1 {
    transform: scale(1) !important;
}

/* Card header/title styling */
.vfrc-card--header._1lbxmyd4 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1a1e23 !important;
    white-space: normal !important;
}

/* Card description paragraph styling */
.vfrc-card--description ._1lbxmyd7 {
    font-size: 14px !important;
    line-height: 1.6 !important;
    white-space: pre-line !important;
}

/* Description strong text styling */
.vfrc-card--description ._1lbxmyd7 strong {
    display: inline !important;
    font-weight: 600 !important;
    color: #333 !important;
}

/* Strong text spacing adjustment */
.vfrc-card--description ._1lbxmyd7 strong + * {
    margin-left: 0 !important;
}

/* Hide default product links (cards are clickable) */
.vfrc-card--description a._1lbxmyd8 {
    display: none !important;
}

/* =============================================================================
   10. PRICE STYLING
   ============================================================================= */

/* CSS-Only Carousel Description Formatting (Working Solution) */

/* First paragraph prices - red styling (ONLY first strong element = price) */
._1lbxmyd7:first-child strong:first-of-type {
  color: #e74c3c !important;
  font-weight: 900 !important;
  font-size: 1.1em !important;
  text-shadow: 0 0 1px #e74c3c !important;
}

/* Keep other strong elements (like "Tillgänglighet:") in default color */
._1lbxmyd7:first-child strong:not(:first-of-type) {
  color: inherit !important;
  font-weight: 600 !important;
}

/* =============================================================================
   LAYOUT FIX: Only PRICE on its own line, rest flows naturally
   Result: Price on line 1, description on line 2, "Tillgänglighet: I lager" 
   stays together on same line
   ============================================================================= */

/* PRICE (first strong): Place on its own line with spacing below */
._1lbxmyd7:first-child strong:first-of-type {
  display: block !important;           /* Forces price to take full width (own line) */
  margin-bottom: 0.4em !important;     /* Space after price (reduced to 0.4em) */
}

/* AVAILABILITY LABEL (second strong): Start on new line, "I lager" text follows naturally */
._1lbxmyd7:first-child strong:not(:first-of-type) {
  display: block !important;           /* Forces new line before "Tillgänglighet:" */
  margin-top: 0.4em !important;        /* Space above (reduced to 0.4em) */
  margin-bottom: 0 !important;         /* No space below - text flows after strong */
}

/* Third paragraph availability - green text */
._1lbxmyd7:nth-child(3) {
  color: #27ae60 !important;
  font-weight: 600 !important;
}

/* Keep availability label normal colored */
._1lbxmyd7:nth-child(3) strong {
  color: #333 !important;
  font-weight: 600 !important;
}

/* =============================================================================
   11. BUTTONS
   ============================================================================= */

/* Suggested message button */
._1q15b0b1 {
    color: #D52627 !important;
    background-color: rgb(255, 255, 255) !important;
    box-shadow: 0 6px 10px rgba(31, 38, 135, 0.1), inset 0 3px 12px rgba(255, 255, 255, 0.4);
    transition: all 0.4s ease !important;
}

/* Suggested message button */
._1q15b0b1:hover {
    color: #72040d !important;
    background-color: rgb(255, 214, 214) !important;
    box-shadow: 0 6px 10px rgba(31, 38, 135, 0.1), inset 0 3px 12px rgba(255, 255, 255, 0.4);
}

/* General carousel buttons - CyberPhoto brand styling */
.vfrc-button._1q15b0b0.c26d8x0._1q15b0b3 {
    background-color: #D52627 !important;
    color: #ffffff !important;
    transition: all 0.4s ease !important;
}

/* Carousel button hover effects */
.vfrc-button._1q15b0b0.c26d8x0._1q15b0b3:hover {
    background-color: #72040d !important;
    color: #ffffff !important;
}

/* Cancel button styling - override red theme for neutral appearance */
.vfrc-prompt button.vfrc-button._1q15b0b0.c26d8x0._1q15b0b3._1q15b0b4,
.vfrc-prompt button.vfrc-button._1q15b0b0.c26d8x0._1q15b0b3._1q15b0b4:hover {
  background: none !important;
  background-color: transparent !important;
  color: transparent !important;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Cancel button content styling */
.vfrc-prompt button.vfrc-button._1q15b0b0.c26d8x0._1q15b0b3._1q15b0b4::after {
  content: "Avbryt";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  padding: inherit;
  z-index: 1;
  background-color: #191d2214;
  color: rgba(0,0,0,.9);
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

/* Cancel button hover effects */
.vfrc-prompt button.vfrc-button._1q15b0b0.c26d8x0._1q15b0b3._1q15b0b4:hover::after {
  background-color: #16191d14 !important;
  color: rgba(0,0,0,.95);
}

/* Start new chat button positioning */
.vfrc-prompt button.vfrc-button._1q15b0b0.c26d8x0._1q15b0b2._1q15b0b4 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Start new chat button content styling */
.vfrc-prompt button.vfrc-button._1q15b0b0.c26d8x0._1q15b0b2._1q15b0b4::after {
  content: "Starta ny konversation";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  padding: inherit;
  z-index: 1;
  background-image: linear-gradient(180deg, #460610, #6d1725 65%, #9b0615 90%, #9b0615 0, #a80717);
  color: #fff;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}


/* Start new chat button hover effects */
.vfrc-prompt button.vfrc-button._1q15b0b0.c26d8x0._1q15b0b2._1q15b0b4:hover::after {
  background-color: #B01E1F;
}



/* Launcher background */ 
._15s29m92 {
    background-image: linear-gradient(180deg, #460610, #6d1725 65%, #9b0615 90%, #9b0615 0, #a80717);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* =============================================================================
   12. UNKNOWN/AUTO-GENERATED CLASSES
   ============================================================================= */

/* VoiceFlow auto-generated class with unclear purpose */
._1lbxmyd5 {
    white-space: pre-line;
}

/* Hide "See More" buttons with auto-generated classes */
._1lbxmydc ._1lbxmydb,
._1lbxmyde ._1lbxmydb,
button._1lbxmydb {
    display: none !important;
}

/* Unknown positioning class */
.betklm4 {
    top: 150px;
}

/* Unknown margin class */
._11kfxpgc {
    margin-top: 0px;
}

/* =============================================================================
   13. MARKDOWN TABLE STYLING
   ============================================================================= */

/* Table container - full width with clean borders */
.markdown table {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
    margin: 1em 0 !important;
}

/* Table header cells - bold black text, bottom border */
.markdown table thead th {
    font-weight: 700 !important;
    color: #333 !important;
    text-align: left !important;
    padding: 0.4em 0.6em !important;
    border-bottom: 2px solid #333 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

/* Table data cells - padding and borders */
.markdown table td {
    text-align: left !important;
    padding: 0.4em 0.6em !important;
    border: 1px solid #ddd !important;
    color: #333 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

/* Zebra-striping for better readability */
.markdown table tbody tr:nth-child(even) {
    background-color: #f9f9f9 !important;
}

/* Zebra-striping odd rows - white background */
.markdown table tbody tr:nth-child(odd) {
    background-color: #ffffff !important;
}