/* === CONTACT HERO SECTION === */

.contact-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;
}

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

.contact-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);
 font-style: italic;
 margin-bottom: var(--space-4);
}

.hero-description p {
 font-size: var(--font-size-base);
 color: var(--color-text-secondary);
 line-height: var(--line-height-relaxed);
 margin-bottom: var(--space-6);
}

/* Quick contact options */
.quick-contact-options {
 display: flex;
 flex-direction: column;
 gap: var(--space-4);
 margin-top: var(--space-6);
}

.contact-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);
}

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

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

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

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

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

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

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

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

/* 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) {
 .contact-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;
 }
 
 .quick-contact-options {
   flex-direction: row;
   gap: var(--space-6);
 }
 
 .contact-option {
   flex: 1;
 }
}

@media (min-width: 1024px) {
 .quick-contact-options {
   flex-direction: column;
   gap: var(--space-4);
 }
}

/* === CONTACT FORM SECTION === */

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

.section-header {
 text-align: center;
 margin-bottom: var(--space-12);
 max-width: 800px;
 margin-left: auto;
 margin-right: auto;
}

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

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

.contact-form-wrapper {
 max-width: 800px;
 margin: 0 auto;
 background: var(--color-bg-gray-light);
 padding: var(--space-8);
 border-radius: var(--radius-2xl);
 box-shadow: var(--shadow-lg);
}

/* Form messages */
.form-messages {
 margin-bottom: var(--space-8);
}

.form-success,
.form-error-general {
 display: none;
 align-items: flex-start;
 gap: var(--space-3);
 padding: var(--space-5);
 border-radius: var(--radius-lg);
 margin-bottom: var(--space-6);
}

.form-success {
 background: var(--color-success-bg);
 color: var(--color-success);
 border: 2px solid var(--color-success);
}

.form-error-general {
 background: var(--color-error-bg);
 color: var(--color-error);
 border: 2px solid var(--color-error);
}

.form-success.show,
.form-error-general.show {
 display: flex;
}

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

.success-content,
.error-content {
 display: flex;
 flex-direction: column;
 gap: var(--space-2);
}

.success-title,
.error-title {
 font-size: var(--font-size-lg);
 font-weight: var(--font-weight-semibold);
 margin: 0;
}

.success-text,
.error-text {
 font-size: var(--font-size-base);
 margin: 0;
 line-height: var(--line-height-relaxed);
}

/* Form grid */
.form-grid {
 display: grid;
 gap: var(--space-6);
 margin-bottom: var(--space-8);
}

.form-group-full {
 grid-column: 1 / -1;
}

/* Radio groups */
.form-radio-group {
 display: flex;
 flex-direction: column;
 gap: var(--space-3);
}

.form-radio-label {
 display: flex;
 align-items: center;
 gap: var(--space-3);
 cursor: pointer;
 padding: var(--space-3);
 border: 2px solid var(--color-border-light);
 border-radius: var(--radius-lg);
 background: var(--color-bg-white);
 transition: var(--transition-all);
}

.form-radio-label:hover {
 border-color: var(--color-primary);
}

.form-radio {
 position: absolute;
 opacity: 0;
 pointer-events: none;
}

.radio-custom {
 width: 20px;
 height: 20px;
 border: 2px solid var(--color-border-medium);
 border-radius: 50%;
 background: var(--color-bg-white);
 position: relative;
 transition: var(--transition-all);
}

.form-radio:checked + .radio-custom {
 border-color: var(--color-primary);
 background: var(--color-primary);
}

.form-radio:checked + .radio-custom::after {
 content: '';
 position: absolute;
 top: 50%;
 left: 50%;
 width: 8px;
 height: 8px;
 background: var(--color-text-inverse);
 border-radius: 50%;
 transform: translate(-50%, -50%);
}

.radio-text {
 display: flex;
 align-items: center;
 gap: var(--space-2);
 font-size: var(--font-size-base);
 font-weight: var(--font-weight-medium);
}

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

/* Form actions */
.form-actions {
 text-align: center;
}

.form-submit {
 min-width: 200px;
 margin-bottom: var(--space-6);
}

.form-alternative {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: var(--space-3);
 padding: var(--space-4);
 background: var(--color-bg-white);
 border-radius: var(--radius-lg);
 border: 2px dashed var(--color-border-medium);
}

.alternative-text {
 font-size: var(--font-size-sm);
 color: var(--color-text-muted);
 margin: 0;
}

.phone-cta-link {
 display: flex;
 align-items: center;
 gap: var(--space-2);
 color: var(--color-accent-pink);
 text-decoration: none;
 font-size: var(--font-size-lg);
 font-weight: var(--font-weight-bold);
 transition: var(--transition-all);
 padding: var(--space-2);
 border-radius: var(--radius-base);
}

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

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

/* Desktop form layout */
@media (min-width: 768px) {
 .contact-form-wrapper {
   padding: var(--space-12);
 }
 
 .form-grid {
   grid-template-columns: repeat(2, 1fr);
 }
 
 .form-radio-group {
   flex-direction: row;
 }
 
 .form-alternative {
   flex-direction: row;
   justify-content: center;
 }
}

/* === BUSINESS INFO SECTION === */

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

.business-info-grid {
 display: grid;
 gap: var(--space-8);
}

.info-card {
 background: var(--color-bg-white);
 border-radius: var(--radius-2xl);
 box-shadow: var(--shadow-lg);
 border: 2px solid var(--color-border-light);
 overflow: hidden;
}

.card-header {
 display: flex;
 align-items: center;
 gap: var(--space-3);
 padding: var(--space-6);
 background: var(--color-primary-alpha);
 border-bottom: 1px solid var(--color-border-light);
}

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

.card-title {
 font-size: var(--font-size-xl);
 font-weight: var(--font-weight-bold);
 color: var(--color-text-primary);
 margin: 0;
}

.card-content {
 padding: var(--space-6);
}

/* Hours card */
.hours-schedule {
 display: flex;
 flex-direction: column;
 gap: var(--space-3);
 margin-bottom: var(--space-6);
}

.hours-day {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: var(--space-2) var(--space-3);
 background: var(--color-bg-gray-light);
 border-radius: var(--radius-base);
}

.day-name {
 font-weight: var(--font-weight-medium);
 color: var(--color-text-primary);
}

.day-hours {
 font-size: var(--font-size-sm);
 color: var(--color-text-secondary);
}

.hours-simple p {
 font-size: var(--font-size-lg);
 color: var(--color-text-primary);
 margin: 0 0 var(--space-6);
 text-align: center;
 font-weight: var(--font-weight-medium);
}

.current-status {
 display: flex;
 align-items: center;
 gap: var(--space-2);
 padding: var(--space-3);
 background: var(--color-success-bg);
 border: 1px solid var(--color-success);
 border-radius: var(--radius-lg);
 font-weight: var(--font-weight-medium);
}

.current-status.closed {
 background: var(--color-error-bg);
 border-color: var(--color-error);
}

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

.status-text {
 font-size: var(--font-size-sm);
}

/* Location card */
.location-address {
 margin-bottom: var(--space-6);
}

.location-address p {
 font-size: var(--font-size-base);
 color: var(--color-text-primary);
 line-height: var(--line-height-relaxed);
 margin: 0;
}

.location-landmarks {
 margin-bottom: var(--space-6);
}

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

.landmarks-list {
 list-style: none;
 display: flex;
 flex-direction: column;
 gap: var(--space-2);
}

.landmark-item {
 display: flex;
 align-items: center;
 gap: var(--space-2);
 font-size: var(--font-size-sm);
 color: var(--color-text-secondary);
}

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

.location-actions {
 display: flex;
 flex-direction: column;
 gap: var(--space-3);
}

/* Contact methods card */
.contact-methods-list {
 display: flex;
 flex-direction: column;
 gap: var(--space-4);
}

.contact-method {
 border-bottom: 1px solid var(--color-border-light);
 padding-bottom: var(--space-4);
}

.contact-method:last-child {
 border-bottom: none;
 padding-bottom: 0;
}

.method-link {
 display: flex;
 align-items: center;
 gap: var(--space-3);
 color: var(--color-text-primary);
 text-decoration: none;
 transition: var(--transition-all);
 padding: var(--space-2);
 border-radius: var(--radius-base);
}

.method-link:hover {
 background: var(--color-primary-alpha);
 text-decoration: none;
}

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

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

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

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

.method-note {
 font-size: var(--font-size-xs);
 color: var(--color-text-muted);
}

.social-links {
 display: flex;
 gap: var(--space-3);
 flex-wrap: wrap;
}

.social-link {
 display: flex;
 align-items: center;
 gap: var(--space-1);
 padding: var(--space-2) var(--space-3);
 background: var(--color-primary);
 color: var(--color-text-primary);
 text-decoration: none;
 border-radius: var(--radius-full);
 font-size: var(--font-size-sm);
 font-weight: var(--font-weight-medium);
 transition: var(--transition-all);
}

.social-link:hover {
 background: var(--color-primary-dark);
 text-decoration: none;
 transform: translateY(-2px);
}

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

/* Desktop business info layout */
@media (min-width: 768px) {
 .business-info-grid {
   grid-template-columns: repeat(2, 1fr);
 }
 
 .location-actions {
   flex-direction: row;
 }
}

@media (min-width: 1024px) {
 .business-info-grid {
   grid-template-columns: repeat(3, 1fr);
 }
}

/* === DIRECTIONS SECTION === */

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

.directions-content {
 display: grid;
 gap: var(--space-8);
 margin-bottom: var(--space-12);
}

.directions-card {
 background: var(--color-bg-gray-light);
 border-radius: var(--radius-xl);
 padding: var(--space-6);
 border: 2px solid var(--color-border-light);
}

.directions-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: var(--space-6);
 flex-wrap: wrap;
 gap: var(--space-2);
}

.directions-title {
 font-size: var(--font-size-xl);
 font-weight: var(--font-weight-bold);
 color: var(--color-text-primary);
 margin: 0;
}

.directions-duration {
 padding: var(--space-2) var(--space-3);
 background: var(--color-accent-blue);
 color: var(--color-text-inverse);
 border-radius: var(--radius-full);
 font-size: var(--font-size-sm);
 font-weight: var(--font-weight-medium);
}

.steps-list {
 list-style: none;
 counter-reset: step-counter;
}

.step-item {
 display: flex;
 align-items: flex-start;
 gap: var(--space-4);
 padding: var(--space-4);
 margin-bottom: var(--space-3);
 background: var(--color-bg-white);
 border-radius: var(--radius-lg);
 counter-increment: step-counter;
}

.step-item:last-child {
 margin-bottom: 0;
}

.step-number {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 32px;
 height: 32px;
 background: var(--color-primary);
 color: var(--color-text-primary);
 border-radius: 50%;
 font-size: var(--font-size-sm);
 font-weight: var(--font-weight-bold);
 flex-shrink: 0;
}

.step-number::before {
 content: counter(step-counter);
}

.step-text {
 font-size: var(--font-size-base);
 color: var(--color-text-primary);
 line-height: var(--line-height-relaxed);
}

/* Custom directions */
.custom-directions {
 max-width: 600px;
 margin: 0 auto;
}

.custom-directions-form {
 background: var(--color-primary-alpha);
 padding: var(--space-6);
 border-radius: var(--radius-xl);
 border: 2px solid var(--color-primary);
}

.directions-input-group {
 display: flex;
 flex-direction: column;
 gap: var(--space-3);
}

/* Desktop directions layout */
@media (min-width: 768px) {
 .directions-content {
   grid-template-columns: repeat(2, 1fr);
 }
 
 .directions-input-group {
   flex-direction: row;
 }
 
 .directions-input-group .form-input {
   flex: 1;
 }
}

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

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

.faq-items {
 max-width: 800px;
 margin: 0 auto var(--space-8);
}

.faq-item {
 background: var(--color-bg-white);
 border-radius: var(--radius-lg);
 margin-bottom: var(--space-4);
 border: 2px solid var(--color-border-light);
 overflow: hidden;
}

.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);
}

.question-text {
 font-size: var(--font-size-base);
 font-weight: var(--font-weight-semibold);
 color: var(--color-text-primary);
 line-height: var(--line-height-normal);
}

.question-icon {
 font-size: var(--font-size-xl);
 color: var(--color-primary);
 transition: var(--transition-all);
 flex-shrink: 0;
 margin-left: var(--space-3);
}

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

.faq-answer {
 display: none;
 padding: 0 var(--space-5) var(--space-5);
 border-top: 1px solid var(--color-border-light);
}

.faq-answer.show {
 display: block;
}

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

/* Mobile optimizations */
@media (max-width: 480px) {
 .contact-hero-section {
   padding: var(--space-6) 0;
 }
 
 .contact-form-wrapper {
   padding: var(--space-6);
 }
 
 .contact-option-link {
   padding: var(--space-4);
 }
 
 .option-icon {
   font-size: var(--font-size-xl);
 }
 
 .card-header {
   padding: var(--space-4);
 }
 
 .card-content {
   padding: var(--space-4);
 }
 
 .directions-card {
   padding: var(--space-4);
 }
 
 .step-item {
   padding: var(--space-3);
 }
 
 .custom-directions-form {
   padding: var(--space-4);
 }
 
 .faq-question {
   padding: var(--space-4);
 }
}

/* === LOADING STATES === */

.form-submit.loading {
 opacity: 0.7;
 pointer-events: none;
}

.form-submit.loading .btn-text::after {
 content: '';
 display: inline-block;
 width: 16px;
 height: 16px;
 margin-left: var(--space-2);
 border: 2px solid currentColor;
 border-top-color: transparent;
 border-radius: 50%;
 animation: spin 1s linear infinite;
}

@keyframes spin {
 to {
   transform: rotate(360deg);
 }
}

/* === ACCESSIBILITY === */

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

@media (prefers-reduced-motion: reduce) {
 .contact-option:hover,
 .phone-cta-link:hover,
 .social-link:hover {
   transform: none;
 }
 
 .question-icon {
   transition: none;
 }
 
 .form-submit.loading .btn-text::after {
   animation: none;
 }
}

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

@media print {
 .contact-hero-section,
 .business-info-section,
 .contact-faq-section {
   background: none !important;
   padding: var(--space-4) 0;
 }
 
 .contact-form-section,
 .directions-section {
   display: none;
 }
 
 .quick-contact-options,
 .business-info-grid {
   flex-direction: column;
   gap: var(--space-4);
 }
 
 .info-card {
   box-shadow: none;
   border: 1px solid var(--color-border-medium);
 }
}