/* ==========================================================================
   AVIABILETEBI — contact.css
   --------------------------------------------------------------------------
   კონტაქტის გვერდი — სამუშაო საათები + სოციალური (2 სვეტი) + ფორმა + promo.
   --------------------------------------------------------------------------
   TOC
   1. PAGE SCOPE & HEADER
   2. INFO GRID (Hours + Social)
   3. SOCIAL LINKS
   4. CONTENT BLOCK
   5. PROMO CARD
   6. RESPONSIVE
   ========================================================================== */


/* ==========================================================================
   1. PAGE SCOPE & HEADER
   ========================================================================== */
.myavi-container .main-content {
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
    padding: var(--space-10) var(--container-pad) var(--space-16);
}

.myavi-container .header {
    text-align: center;
    margin-bottom: var(--space-12);
}
.myavi-container .header h1 {
    position: relative;
    display: inline-block;
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-3);
    font-size: clamp(var(--fs-2xl), 4vw, var(--fs-3xl));
}
.myavi-container .header h1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-secondary), var(--color-accent));
    border-radius: 2px;
}
.contact-subtitle {
    color: var(--color-text-muted);
    font-size: var(--fs-md);
    max-width: 60ch;
    margin-inline: auto;
}


/* ==========================================================================
   2. INFO GRID — Hours + Social side by side
   ========================================================================== */
.contact-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-10);
}

.contact-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-8);
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}
.contact-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.contact-card-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-divider);
}
.contact-card-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
    color: var(--color-white);
    border-radius: var(--radius-md);
    font-size: var(--fs-lg);
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(52,152,219,.25);
}
.contact-card-title {
    margin: 0;
    font-size: var(--fs-lg);
    color: var(--color-primary);
}
.contact-card-desc {
    margin-bottom: var(--space-5);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
}

/* —— Hours list —— */
.contact-hours {
    margin-bottom: var(--space-5);
    padding: 0;
    list-style: none;
}
.contact-hours li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) 0;
    border-bottom: 1px dashed var(--color-divider);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}
.contact-hours li:last-child { border-bottom: 0; }
.contact-hours strong {
    color: var(--color-primary);
    font-weight: var(--fw-semibold);
}
.contact-hours strong.closed {
    color: var(--color-secondary);
    font-weight: var(--fw-medium);
}

/* —— Quick contact links (in hours card) —— */
.contact-quick {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-divider);
}
.contact-quick-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-accent);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transition: color var(--transition);
}
.contact-quick-link i {
    width: 20px;
    text-align: center;
    color: var(--color-secondary);
}
.contact-quick-link:hover { color: var(--color-secondary); }

/* —— Address in social card —— */
.contact-address {
    margin-top: auto;
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-divider);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}
.contact-address i {
    margin-right: var(--space-2);
    color: var(--color-secondary);
}


/* ==========================================================================
   3. SOCIAL LINKS
   ========================================================================== */
.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.social-link {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-alt);
    color: var(--color-primary);
    border-radius: var(--radius-full);
    font-size: var(--fs-md);
    text-decoration: none;
    transition: background-color var(--transition), color var(--transition), transform var(--transition);
}
.social-link:hover {
    background: var(--color-secondary);
    color: var(--color-white);
    transform: translateY(-3px);
}
/* Brand-specific hover colors */
.social-link[aria-label="Facebook"]:hover  { background: #1877f2; color: #fff; }
.social-link[aria-label="Instagram"]:hover { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: #fff; }
.social-link[aria-label="WhatsApp"]:hover  { background: #25d366; color: #fff; }
.social-link[aria-label="Telegram"]:hover  { background: #0088cc; color: #fff; }
.social-link[aria-label="Viber"]:hover     { background: #7360f2; color: #fff; }


/* ==========================================================================
   4. CONTENT BLOCK
   ========================================================================== */
.contact-content {
    margin-bottom: var(--space-10);
    padding: var(--space-8);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.contact-content .entry-content > * + * { margin-top: var(--space-4); }


/* ==========================================================================
   5. PROMO CARD
   ========================================================================== */
.contact-promo { margin-top: var(--space-12); }
.promo-element {
    position: relative;
    padding: var(--space-12);
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    border-radius: var(--radius-lg);
    color: var(--color-white);
    text-align: center;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.promo-element::before {
    content: '';
    position: absolute;
    top: -50%; right: -50%;
    width: 100%; height: 200%;
    background: rgba(255,255,255,.1);
    transform: rotate(30deg);
    pointer-events: none;
}
.promo-element > * { position: relative; z-index: var(--z-base); }
.promo-title {
    color: var(--color-white);
    font-size: clamp(var(--fs-xl), 3vw, var(--fs-2xl));
    margin-bottom: var(--space-4);
}
.promo-text {
    margin-bottom: var(--space-6);
    font-size: var(--fs-md);
    opacity: .95;
}
.promo-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-10);
    background: var(--color-secondary);
    border-radius: var(--radius-md);
    color: var(--color-white);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition);
    box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
.promo-button:hover {
    background: var(--color-highlight);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0,0,0,.3);
}


/* ==========================================================================
   6. RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
    .contact-info-grid { grid-template-columns: 1fr; gap: var(--space-5); }
}
@media (max-width: 480px) {
    .contact-card { padding: var(--space-5); }
    .promo-element { padding: var(--space-8); }
    .promo-button { width: 100%; padding-inline: var(--space-4); }
}