/**
* FRIO Ice Cream & Botana - FAQ Page Styles
* Mobile-first responsive design for FAQ functionality
* All comments in English as requested
*/

/* === FAQ HERO SECTION === */

.faq-hero-section {
 padding: var(--space-8) 0;
 background: linear-gradient(135deg, var(--color-bg-body) 0%, var(--color-primary-light) 100%);
 position: relative;
 overflow: hidden;
}

.faq-hero-section::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: url('/images/patterns/ice-cream-pattern.svg') repeat;
 opacity: 0.02;
 pointer-events: none;
}

.faq-hero-content {
 display: flex;
 flex-direction: column;
 gap: var(--space-8);
 position: relative;
 z-index: 1;
}

.hero-text {
 text-align: center;
}

.hero-title {
 font-size: clamp(2rem, 5vw, 3rem);
 font-weight: var(--font-weight-extrabold);
 color: var(--color-text-primary);
 margin-bottom: var(--space-4);
}

.hero-subtitle {
 font-size: var(--font-size-lg);
 color: var(--color-text-secondary);
 line-height: var(--line-height-relaxed);
 margin-bottom: var(--space-6);
 max-width: 600px;
 margin-left: auto;
 margin-right: auto;
}

/* FAQ stats */
.faq-stats {
 display: flex;
 justify-content: center;
 gap: var(--space-6);
 flex-wrap: wrap;
}

.stat-item {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: var(--space-2);
 padding: var(--space-4);
 background: var(--color-bg-white);
 border: 2px solid var(--color-primary);
 border-radius: var(--radius-xl);
 box-shadow: var(--shadow-sm);
 min-width: 100px;
}

.stat-number {
 font-size: var(--font-size-2xl);
 font-weight: var(--font-weight-extrabold);
 color: var(--color-accent-pink);
}

.stat-label {
 font-size: var(--font-size-sm);
 font-weight: var(--font-weight-medium);
 color: var(--color-text-primary);
 text-align: center;
}

.phone-link {
 color: var(--color-accent-pink);
 text-decoration: none;
 font-weight: var(--font-weight-bold);
 transition: var(--transition-all);
}

.phone-link:hover {
 color: var(--color-accent-pink-dark);
 text-decoration: none;
 transform: scale(1.05);
}

/* Hero image */
.hero-image {
 text-align: center;
 order: -1;
}

.hero-img {
 width: 100%;
 max-width: 500px;
 height: auto;
 border-radius: var(--radius-2xl);
 box-shadow: var(--shadow-xl);
}

/* Desktop layout */
@media (min-width: 768px) {
 .faq-hero-content {
   flex-direction: row;
   align-items: center;
   gap: var(--space-16);
 }
 
 .hero-text {
   flex: 1;
   text-align: left;
 }
 
 .hero-image {
   flex: 1;
   order: 0;
 }
 
 .faq-stats {
   justify-content: flex-start;
 }
}

/* === FAQ SEARCH SECTION === */

.faq-search-section {
 padding: var(--space-12) 0;
 background: var(--color-bg-white);
 border-bottom: 1px solid var(--color-border-light);
}

.search-container {
 max-width: 800px;
 margin: 0 auto;
 padding: 0 var(--space-6);
}

.search-header {
 text-align: center;
 margin-bottom: var(--space-8);
}

.search-title {
 font-size: var(--font-size-2xl);
 font-weight: var(--font-weight-bold);
 color: var(--color-text-primary);
 margin-bottom: var(--space-3);
}

.search-description {
 font-size: var(--font-size-base);
 color: var(--color-text-secondary);
 line-height: var(--line-height-relaxed);
}

/* Search wrapper */
.search-wrapper {
 margin-bottom: var(--space-6);
}

.search-input-wrapper {
 position: relative;
 display: flex;
 align-items: center;
 background: var(--color-bg-white);
 border: 3px solid var(--color-primary);
 border-radius: var(--radius-full);
 box-shadow: var(--shadow-lg);
 overflow: hidden;
}

.search-input {
 flex: 1;
 padding: var(--space-4) var(--space-6);
 border: none;
 background: transparent;
 font-size: var(--font-size-lg);
 color: var(--color-text-primary);
 outline: none;
}

.search-input::placeholder {
 color: var(--color-text-light);
}

.search-btn,
.search-clear {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 50px;
 height: 50px;
 border: none;
 background: var(--color-primary);
 color: var(--color-text-primary);
 cursor: pointer;
 transition: var(--transition-all);
 font-size: var(--font-size-lg);
}

.search-btn:hover,
.search-clear:hover {
 background: var(--color-primary-dark);
 transform: scale(1.1);
}

.search-clear {
 background: var(--color-error);
 color: var(--color-text-inverse);
 margin-right: var(--space-1);
 border-radius: 50%;
 width: 40px;
 height: 40px;
}

.search-clear:hover {
 background: var(--color-error);
 opacity: 0.8;
}

/* Search results info */
.search-results-info {
 text-align: center;
 margin-bottom: var(--space-4);
 min-height: 24px;
}

.search-results-text {
 font-size: var(--font-size-sm);
 color: var(--color-text-muted);
 padding: var(--space-2) var(--space-4);
 background: var(--color-bg-gray-light);
 border-radius: var(--radius-full);
 display: inline-block;
}

/* Popular searches */
.popular-searches {
 display: flex;
 flex-direction: column;
 gap: var(--space-3);
 align-items: center;
}

.popular-label {
 font-size: var(--font-size-sm);
 font-weight: var(--font-weight-medium);
 color: var(--color-text-primary);
}

.popular-tags {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space-2);
 justify-content: center;
}

.popular-tag {
 padding: var(--space-2) var(--space-4);
 background: var(--color-primary-alpha);
 border: 1px solid var(--color-primary);
 border-radius: var(--radius-full);
 color: var(--color-text-primary);
 font-size: var(--font-size-sm);
 font-weight: var(--font-weight-medium);
 cursor: pointer;
 transition: var(--transition-all);
}

.popular-tag:hover {
 background: var(--color-primary);
 transform: translateY(-2px);
 box-shadow: var(--shadow-sm);
}

/* Desktop search layout */
@media (min-width: 768px) {
 .popular-searches {
   flex-direction: row;
   justify-content: center;
 }
}

/* === FAQ CATEGORIES SECTION === */

.faq-categories-section {
 padding: var(--space-8) 0;
 background: var(--color-bg-gray-light);
 border-bottom: 1px solid var(--color-border-light);
}

.categories-nav {
 overflow-x: auto;
 scrollbar-width: none;
 -ms-overflow-style: none;
}

.categories-nav::-webkit-scrollbar {
 display: none;
}

.categories-list {
 display: flex;
 gap: var(--space-3);
 padding: var(--space-2);
 min-width: max-content;
}

.category-btn {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: var(--space-2);
 padding: var(--space-4);
 background: var(--color-bg-white);
 border: 2px solid var(--color-border-light);
 border-radius: var(--radius-xl);
 color: var(--color-text-primary);
 cursor: pointer;
 transition: var(--transition-all);
 min-width: 100px;
}

.category-btn:hover {
 border-color: var(--color-primary);
 background: var(--color-primary-alpha);
 transform: translateY(-2px);
}

.category-btn.active {
 background: var(--color-primary);
 border-color: var(--color-primary);
 color: var(--color-text-primary);
 box-shadow: var(--shadow-md);
}

.category-icon {
 font-size: var(--font-size-xl);
}

.category-name {
 font-size: var(--font-size-sm);
 font-weight: var(--font-weight-semibold);
}

.category-count {
 font-size: var(--font-size-xs);
 padding: var(--space-1) var(--space-2);
 background: var(--color-accent-blue);
 color: var(--color-text-inverse);
 border-radius: var(--radius-full);
 min-width: 24px;
 text-align: center;
}

.category-btn.active .category-count {
 background: var(--color-accent-pink);
}

/* Desktop categories layout */
@media (min-width: 768px) {
 .categories-list {
   justify-content: center;
   flex-wrap: wrap;
 }
}

/* === FAQ CONTENT SECTION === */

.faq-content-section {
 padding: var(--space-16) 0;
 background: var(--color-bg-white);
}

/* Results header */
.faq-results-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: var(--space-8);
 flex-wrap: wrap;
 gap: var(--space-4);
}

.results-info {
 flex: 1;
}

.results-count {
 font-size: var(--font-size-base);
 color: var(--color-text-secondary);
}

.results-sort {
 display: flex;
 align-items: center;
 gap: var(--space-2);
}

.sort-label {
 font-size: var(--font-size-sm);
 font-weight: var(--font-weight-medium);
 color: var(--color-text-primary);
 white-space: nowrap;
}

.sort-select {
 padding: var(--space-2) var(--space-3);
 border: 1px solid var(--color-border-medium);
 border-radius: var(--radius-base);
 background: var(--color-bg-white);
 font-size: var(--font-size-sm);
 color: var(--color-text-primary);
}

/* FAQ items */
.faq-items {
 max-width: 900px;
 margin: 0 auto;
}

/* Category headers */
.faq-category-header {
 margin: var(--space-8) 0 var(--space-6);
}

.faq-category-header:first-child {
 margin-top: 0;
}

.category-header-title {
 display: flex;
 align-items: center;
 gap: var(--space-3);
 font-size: var(--font-size-xl);
 font-weight: var(--font-weight-bold);
 color: var(--color-text-primary);
 margin: 0;
 padding: var(--space-4) 0;
 border-bottom: 2px solid var(--color-primary);
}

.category-header-icon {
 font-size: var(--font-size-2xl);
}

.category-header-count {
 font-size: var(--font-size-base);
 color: var(--color-text-muted);
 font-weight: var(--font-weight-normal);
}

/* FAQ item */
.faq-item {
 margin-bottom: var(--space-4);
 background: var(--color-bg-white);
 border: 2px solid var(--color-border-light);
 border-radius: var(--radius-xl);
 box-shadow: var(--shadow-sm);
 overflow: hidden;
 transition: var(--transition-all);
}

.faq-item:hover {
 border-color: var(--color-primary);
 box-shadow: var(--shadow-md);
}

.faq-item.hidden {
 display: none;
}

/* FAQ question */
.faq-question {
 width: 100%;
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: var(--space-5);
 background: none;
 border: none;
 text-align: left;
 cursor: pointer;
 transition: var(--transition-all);
}

.faq-question:hover {
 background: var(--color-primary-alpha);
}

.faq-question[aria-expanded="true"] {
 background: var(--color-primary-alpha);
 border-bottom: 1px solid var(--color-border-light);
}

.question-text {
 font-size: var(--font-size-lg);
 font-weight: var(--font-weight-semibold);
 color: var(--color-text-primary);
 line-height: var(--line-height-normal);
 flex: 1;
 margin-right: var(--space-4);
}

.question-toggle {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 40px;
 height: 40px;
 background: var(--color-primary);
 color: var(--color-text-primary);
 border-radius: 50%;
 flex-shrink: 0;
 transition: var(--transition-all);
}

.toggle-icon {
 font-size: var(--font-size-xl);
 font-weight: var(--font-weight-bold);
 transition: var(--transition-all);
}

.faq-question[aria-expanded="true"] .toggle-icon {
 transform: rotate(45deg);
}

.faq-question[aria-expanded="true"] .question-toggle {
 background: var(--color-accent-pink);
}

/* FAQ answer */
.faq-answer {
 display: none;
 padding: 0 var(--space-5) var(--space-5);
}

.faq-answer.show {
 display: block;
 animation: slideDown 0.3s ease;
}

@keyframes slideDown {
 from {
   opacity: 0;
   transform: translateY(-10px);
 }
 to {
   opacity: 1;
   transform: translateY(0);
 }
}

.answer-content {
 margin: var(--space-6) 0;
}

.answer-content p {
 font-size: var(--font-size-base);
 color: var(--color-text-secondary);
 line-height: var(--line-height-relaxed);
 margin: 0 0 var(--space-4);
}

/* Related questions */
.related-questions {
 margin-top: var(--space-6);
 padding: var(--space-4);
 background: var(--color-bg-gray-light);
 border-radius: var(--radius-lg);
}

.related-title {
 font-size: var(--font-size-base);
 font-weight: var(--font-weight-semibold);
 color: var(--color-text-primary);
 margin-bottom: var(--space-3);
}

.related-links {
 display: flex;
 flex-direction: column;
 gap: var(--space-2);
}

.related-question-link {
 display: block;
 padding: var(--space-2) var(--space-3);
 background: var(--color-bg-white);
 border: 1px solid var(--color-border-light);
 border-radius: var(--radius-base);
 color: var(--color-accent-blue);
 text-decoration: none;
 font-size: var(--font-size-sm);
 transition: var(--transition-all);
 text-align: left;
 cursor: pointer;
}

.related-question-link:hover {
 background: var(--color-accent-blue-alpha);
 border-color: var(--color-accent-blue);
 text-decoration: none;
}

/* Answer actions */
.answer-actions {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: var(--space-4);
 background: var(--color-bg-gray-light);
 border-radius: var(--radius-lg);
 gap: var(--space-4);
 flex-wrap: wrap;
}

/* Helpful rating */
.helpful-rating {
 display: flex;
 align-items: center;
 gap: var(--space-3);
 flex: 1;
}

.helpful-label {
 font-size: var(--font-size-sm);
 color: var(--color-text-primary);
 font-weight: var(--font-weight-medium);
}

.helpful-buttons {
 display: flex;
 gap: var(--space-2);
}

.helpful-btn {
 display: flex;
 align-items: center;
 gap: var(--space-1);
 padding: var(--space-2) var(--space-3);
 background: var(--color-bg-white);
 border: 1px solid var(--color-border-medium);
 border-radius: var(--radius-full);
 color: var(--color-text-secondary);
 cursor: pointer;
 transition: var(--transition-all);
 font-size: var(--font-size-sm);
}

.helpful-btn:hover {
 border-color: var(--color-primary);
 background: var(--color-primary-alpha);
}

.helpful-btn.voted {
 background: var(--color-success);
 color: var(--color-text-inverse);
 border-color: var(--color-success);
}

.helpful-btn.voted.helpful-no {
 background: var(--color-error);
 border-color: var(--color-error);
}

.helpful-icon {
 font-size: var(--font-size-base);
}

/* Share question */
.share-question-btn {
 display: flex;
 align-items: center;
 gap: var(--space-2);
 padding: var(--space-2) var(--space-4);
 background: var(--color-accent-blue-alpha);
 border: 1px solid var(--color-accent-blue);
 border-radius: var(--radius-full);
 color: var(--color-accent-blue);
 cursor: pointer;
 transition: var(--transition-all);
 font-size: var(--font-size-sm);
 font-weight: var(--font-weight-medium);
}

.share-question-btn:hover {
 background: var(--color-accent-blue);
 color: var(--color-text-inverse);
}

.share-icon {
 font-size: var(--font-size-base);
}

/* Mobile answer actions */
@media (max-width: 480px) {
 .answer-actions {
   flex-direction: column;
   align-items: stretch;
 }
 
 .helpful-rating {
   justify-content: center;
 }
 
 .share-question-btn {
   justify-content: center;
 }
}

/* === NO RESULTS === */

.no-results-found {
 text-align: center;
 padding: var(--space-16) var(--space-8);
}

.no-results-icon {
 font-size: 4rem;
 margin-bottom: var(--space-6);
 opacity: 0.6;
}

.no-results-title {
 font-size: var(--font-size-2xl);
 font-weight: var(--font-weight-bold);
 color: var(--color-text-primary);
 margin-bottom: var(--space-4);
}

.no-results-message {
 font-size: var(--font-size-lg);
 color: var(--color-text-secondary);
 line-height: var(--line-height-relaxed);
 margin-bottom: var(--space-8);
 max-width: 500px;
 margin-left: auto;
 margin-right: auto;
}

.no-results-actions {
 display: flex;
 justify-content: center;
 gap: var(--space-4);
 flex-wrap: wrap;
}

/* === NEED HELP SECTION === */

.need-help-section {
 padding: var(--space-16) 0;
 background: var(--color-bg-gray-light);
}

.help-content {
 display: flex;
 flex-direction: column;
 gap: var(--space-8);
 align-items: center;
}

.help-text {
 text-align: center;
}

.help-title {
 font-size: var(--font-size-3xl);
 font-weight: var(--font-weight-bold);
 color: var(--color-text-primary);
 margin-bottom: var(--space-4);
}

.help-description {
 font-size: var(--font-size-lg);
 color: var(--color-text-secondary);
 line-height: var(--line-height-relaxed);
 margin-bottom: var(--space-8);
 max-width: 600px;
}

/* Help options */
.help-options {
 display: flex;
 flex-direction: column;
 gap: var(--space-4);
 width: 100%;
 max-width: 600px;
}

.help-option {
 background: var(--color-bg-white);
 border-radius: var(--radius-xl);
 border: 2px solid var(--color-border-light);
 box-shadow: var(--shadow-sm);
 transition: var(--transition-all);
}

.help-option:hover {
 border-color: var(--color-primary);
 box-shadow: var(--shadow-md);
 transform: translateY(-2px);
}

.help-option-link {
 display: flex;
 align-items: center;
 gap: var(--space-4);
 padding: var(--space-5);
 color: var(--color-text-primary);
 text-decoration: none;
}

.help-option-link:hover {
 text-decoration: none;
}

.help-option .option-icon {
 font-size: var(--font-size-2xl);
 flex-shrink: 0;
}

.help-option .option-content {
 display: flex;
 flex-direction: column;
 gap: var(--space-1);
}

.help-option .option-title {
 font-size: var(--font-size-lg);
 font-weight: var(--font-weight-semibold);
 color: var(--color-text-primary);
}

.help-option .option-value {
 font-size: var(--font-size-base);
 font-weight: var(--font-weight-medium);
 color: var(--color-accent-pink);
}

.help-option .option-note {
 font-size: var(--font-size-sm);
 color: var(--color-text-muted);
}

/* Help image */
.help-image {
 text-align: center;
 order: -1;
}

.help-img {
 width: 100%;
 max-width: 400px;
 height: auto;
 border-radius: var(--radius-2xl);
 box-shadow: var(--shadow-lg);
}

/* Desktop help layout */
@media (min-width: 768px) {
 .help-content {
   flex-direction: row;
   text-align: left;
 }
 
 .help-text {
   flex: 1;
   text-align: left;
 }
 
 .help-image {
   flex: 1;
   order: 0;
 }
 
 .help-options {
   flex-direction: row;
   gap: var(--space-6);
 }
 
 .help-option {
   flex: 1;
 }
}

@media (min-width: 1024px) {
 .help-options {
   flex-direction: column;
   max-width: 500px;
 }
}

/* === SUGGEST QUESTION SECTION === */

.suggest-question-section {
 padding: var(--space-16) 0;
 background: var(--color-bg-white);
}

.suggestion-form-wrapper {
 max-width: 600px;
 margin: 0 auto;
 background: var(--color-bg-gray-light);
 padding: var(--space-8);
 border-radius: var(--radius-2xl);
 border: 2px solid var(--color-primary);
}

.suggestion-form {
 display: flex;
 flex-direction: column;
 gap: var(--space-6);
}

.suggestion-success {
 display: flex;
 align-items: center;
 gap: var(--space-3);
 padding: var(--space-4);
 background: var(--color-success-bg);
 color: var(--color-success);
 border: 1px solid var(--color-success);
 border-radius: var(--radius-lg);
 margin-top: var(--space-4);
}

.suggestion-success.show {
 display: flex;
}

.success-icon {
 font-size: var(--font-size-xl);
 flex-shrink: 0;
}

.success-text {
 font-size: var(--font-size-base);
 font-weight: var(--font-weight-medium);
}

/* Mobile optimizations */
@media (max-width: 480px) {
 .faq-hero-section {
   padding: var(--space-6) 0;
 }
 
 .search-container {
   padding: 0 var(--space-4);
 }
 
 .search-input {
   font-size: var(--font-size-base);
   padding: var(--space-3) var(--space-4);
 }
 
 .faq-stats {
   gap: var(--space-4);
 }
 
 .stat-item {
   padding: var(--space-3);
   min-width: 80px;
 }
 
 .categories-list {
   gap: var(--space-2);
 }
 
 .category-btn {
   padding: var(--space-3);
   min-width: 80px;
 }
 
 .faq-question {
   padding: var(--space-4);
 }
 
 .question-text {
   font-size: var(--font-size-base);
 }
 
 .question-toggle {
   width: 36px;
   height: 36px;
 }
 
 .faq-answer {
   padding: 0 var(--space-4) var(--space-4);
 }
 
 .suggestion-form-wrapper {
   padding: var(--space-6);
 }
}

/* === ACCESSIBILITY === */

.faq-question:focus {
 outline: 2px solid var(--color-accent-blue);
 outline-offset: 2px;
}

.category-btn:focus,
.popular-tag:focus,
.helpful-btn:focus,
.share-question-btn:focus {
 outline: 2px solid var(--color-primary);
 outline-offset: 2px;
}

/* High contrast support */
@media (prefers-contrast: high) {
 .faq-item {
   border-width: 3px;
 }
 
 .category-btn {
   border-width: 3px;
 }
 
 .search-input-wrapper {
   border-width: 4px;
 }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
 .faq-item:hover,
 .help-option:hover,
 .category-btn:hover {
   transform: none;
 }
 
 .toggle-icon,
 .faq-answer.show {
   animation: none;
 }
}

/* === PRINT STYLES === */

@media print {
 .faq-hero-section,
 .faq-search-section,
 .faq-categories-section,
 .need-help-section,
 .suggest-question-section {
   background: none !important;
   padding: var(--space-4) 0;
 }
 
 .search-wrapper,
 .categories-nav,
 .answer-actions,
 .suggestion-form-wrapper {
   display: none;
 }
 
 .faq-answer {
   display: block !important;
   page-break-inside: avoid;
 }
 
 .faq-item {
   box-shadow: none;
   border: 1px solid var(--color-border-medium);
   margin-bottom: var(--space-3);
 }
 
 .question-toggle {
   display: none;
 }
}