/* ============================================================
   TikoPet — Contact page
   ============================================================ */

.contact-page {
    padding: 100px 0 64px;
}

/* ---------- Breadcrumb ---------- */
.contact-page .products-breadcrumb ol {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    list-style: none; margin: 0 0 20px; padding: 0;
    font-size: .85rem; color: #6b7280;
}
.contact-page .products-breadcrumb li { display: flex; align-items: center; gap: 6px; }
.contact-page .products-breadcrumb li + li::before { content: "›"; color: #e5e7eb; }
.contact-page .products-breadcrumb a { color: #6b7280; text-decoration: none; }
.contact-page .products-breadcrumb a:hover { color: #1B7A4E; }
.contact-page .products-breadcrumb .active { color: #1f2937; font-weight: 500; }

/* ---------- Header ---------- */
.contact-header { margin-bottom: 32px; }
.contact-title {
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    font-weight: 800; color: #1f2937; margin: 0 0 8px;
}
.contact-subtitle {
    color: #6b7280; font-size: 1rem; line-height: 1.8;
    margin: 0; max-width: 640px;
}

/* ---------- Grid ---------- */
.contact-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 24px;
    align-items: start;
}

/* ---------- Form card ---------- */
.contact-form-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 4px 16px rgba(0,0,0,.04);
}
.contact-card-title {
    font-size: 1.15rem; font-weight: 800; color: #1f2937;
    margin: 0 0 6px; display: flex; align-items: center; gap: 10px;
}
.contact-card-title i { color: #1B7A4E; }
.contact-card-desc {
    color: #6b7280; font-size: .9rem; margin: 0 0 20px; line-height: 1.7;
}

.form-group { margin-bottom: 16px; }
.form-label {
    display: block; font-size: .88rem; font-weight: 600;
    color: #1f2937; margin-bottom: 6px;
}
.form-label .req { color: #dc2626; margin-inline-start: 2px; }
.form-input, .form-select, .form-textarea {
    width: 100%; border: 1px solid #e5e7eb; border-radius: 10px;
    padding: 10px 12px; font-size: .92rem; font-family: inherit;
    background: #fff; color: #1f2937;
    transition: border-color .2s, box-shadow .2s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none; border-color: #1B7A4E;
    box-shadow: 0 0 0 3px rgba(27,122,78,.10);
}
.form-textarea { resize: vertical; min-height: 120px; line-height: 1.7; }
.form-input.is-invalid, .form-textarea.is-invalid {
    border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.08);
}
.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7280' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
    padding-left: 32px;
}

.contact-submit {
    width: 100%; padding: 14px 24px; border-radius: 10px;
    background: linear-gradient(180deg, #1B7A4E 0%, #15643f 100%);
    border: 0; color: #fff; font-weight: 700; font-size: 1rem;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 8px 22px rgba(27,122,78,.22);
    transition: all .25s; cursor: pointer;
}
.contact-submit:hover {
    color: #fff; transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(27,122,78,.32);
}
.contact-submit:disabled { opacity: .6; cursor: not-allowed; }
.contact-submit.loading i { animation: contactSpin 1s linear infinite; }
@keyframes contactSpin { to { transform: rotate(360deg); } }

/* ---------- Info list ---------- */
.contact-info-list {
    display: flex; flex-direction: column; gap: 12px;
}
.contact-info-card {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 16px;
    padding: 16px 18px; display: flex; align-items: center; gap: 14px;
    transition: transform .25s, box-shadow .25s;
}
.contact-info-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0,0,0,.06);
}
.contact-info-icon {
    flex-shrink: 0;
    width: 46px; height: 46px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
}
.contact-info-label {
    font-size: .8rem; color: #6b7280; margin-bottom: 3px;
}
.contact-info-value {
    font-size: .95rem; font-weight: 600; color: #1f2937;
    line-height: 1.5; word-break: break-word;
}

/* ---------- Real map ---------- */
.contact-map {
    position: relative;
    height: 280px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background: #f8fafb;
}
.contact-map iframe {
    width: 100%; height: 100%; border: 0; display: block;
}
.contact-map-link {
    position: absolute; bottom: 12px; inset-inline-start: 12px;
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(27,122,78,.95); color: #fff;
    padding: 8px 14px; border-radius: 20px;
    font-size: .82rem; font-weight: 600; text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    transition: all .2s;
}
.contact-map-link:hover {
    color: #fff; background: #15643f;
    transform: translateY(-1px);
}

/* ---------- FAQ ---------- */
.faq-section {
    padding: 60px 0 80px;
    background: #f8fafb;
}
.faq-section .section-header {
    text-align: center; margin-bottom: 32px;
}
.faq-section .section-title {
    font-size: 1.5rem; font-weight: 800; color: #1f2937; margin: 0 0 8px;
}
.faq-section .section-subtitle {
    color: #6b7280; margin: 0; font-size: .95rem;
}

.faq-accordion {
    max-width: 820px; margin: 0 auto;
    display: flex; flex-direction: column; gap: 10px;
}
.faq-item {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    overflow: hidden;
    transition: border-color .25s, box-shadow .25s;
}
.faq-item.active {
    border-color: #1B7A4E;
    box-shadow: 0 6px 20px rgba(27,122,78,.08);
}
.faq-question {
    width: 100%; background: transparent; border: 0; cursor: pointer;
    padding: 16px 20px; text-align: start;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    font-size: .95rem; font-weight: 600; color: #1f2937; font-family: inherit;
    transition: color .2s;
}
.faq-question:hover { color: #1B7A4E; }
.faq-question i {
    flex-shrink: 0; color: #6b7280; font-size: 1rem;
    transition: transform .3s, color .2s;
}
.faq-item.active .faq-question { color: #1B7A4E; }
.faq-item.active .faq-question i { transform: rotate(180deg); color: #1B7A4E; }

.faq-answer {
    max-height: 0; overflow: hidden;
    transition: max-height .35s cubic-bezier(.4,0,.2,1);
}
.faq-item.active .faq-answer { max-height: 500px; }
.faq-answer-inner {
    padding: 0 20px 18px;
    color: #4b5563; font-size: .9rem; line-height: 1.9;
}

/* ---------- Dark mode ---------- */
[data-theme="dark"] .contact-page .contact-title,
[data-theme="dark"] .contact-card-title,
[data-theme="dark"] .contact-info-value,
[data-theme="dark"] .faq-question,
[data-theme="dark"] .faq-section .section-title { color: #e9ecef; }

[data-theme="dark"] .contact-form-card,
[data-theme="dark"] .contact-info-card,
[data-theme="dark"] .contact-map,
[data-theme="dark"] .faq-item {
    background: #1a1d21; border-color: #343a40;
}
[data-theme="dark"] .faq-section { background: #131619; }
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea {
    background: #23272d; border-color: #343a40; color: #e9ecef;
}
[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%23adb5bd' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
}
[data-theme="dark"] .form-label { color: #e9ecef; }
[data-theme="dark"] .faq-answer-inner { color: #adb5bd; }
[data-theme="dark"] .contact-card-desc,
[data-theme="dark"] .contact-info-label,
[data-theme="dark"] .contact-subtitle,
[data-theme="dark"] .faq-section .section-subtitle { color: #adb5bd; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .contact-page { padding-top: 88px; }
    .contact-grid { grid-template-columns: 1fr; }
    .contact-form-card { padding: 22px; }
    .contact-map { height: 240px; }
}
@media (max-width: 575.98px) {
    .contact-page { padding-top: 84px; }
    .contact-form-card { padding: 18px; }
    .contact-info-card { padding: 14px; }
    .contact-info-icon { width: 40px; height: 40px; font-size: 1.1rem; }
    .contact-map { height: 200px; }
    .faq-question { padding: 14px 16px; font-size: .9rem; }
    .faq-answer-inner { padding: 0 16px 14px; }
}