/* ==========================================================================
   Kalasoon — contact page (/contact)

   Loaded from front::contact through @push('styles'), which is the last
   stylesheet in <head>, and scoped under .contact-page so nothing here reaches
   the rest of the shop. Same arrangement product-single.css and
   partnership.css use.

   Why this file exists: the three address / phone / email tiles at the bottom
   of the page were markup from a template kit that was never ported. Across
   main.css, styles.css, custom.css and kalasoon.css the whole block had
   exactly two rules to its name -- `.tiles__title` and `.tiles__content p` --
   so `.row-deck`, `.contact_tile`, `.block` and `.tiles__icon` were all dead
   class names, and the three `.icon-*` spans asked for simple-line-icons,
   which this theme does not ship (the only icon font here is Material Design
   Icons). The result was three underlined centre-aligned headings with an
   invisible glyph above each and no card around them.

   Tokens are the --ps-* set from product-single.css, repeated rather than
   shared because that file is full of product-page geometry and must not be
   loaded here. Keep the two in step.
   ========================================================================== */

.contact-page {
    --ct-primary: #00bcd4;
    --ct-primary-dark: #0097a7;
    --ct-light: #ebf6f8;
    --ct-divider: #f1f1f1;
    --ct-border: #e8eaed;
    --ct-muted: #7a7a7a;
    --ct-radius: 14px;
}

/* --- Contact tiles -------------------------------------------------------

   A flex row rather than three col-md-4 cells: `.row-deck` was meant to be the
   equal-height modifier and does not exist, so the tiles were three
   independent columns whose boxes ended at their own content. flex stretches
   them for free, and `flex-basis: 240px` lets them fall to two-up and then
   one-up without a second breakpoint.
   ------------------------------------------------------------------------- */

.contact-page .contact-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
    padding: 0 8px;
}

/* 2 : 3 : 2 across the row. The ratio is carried by flex-grow on a ZERO basis:
   with an equal non-zero basis (the 240px this used to have) flex-grow only
   splits the *leftover* space, so the tiles would have come out far closer to
   even than 2/7 : 3/7 : 2/7. min-width:0 matters for the same reason -- without
   it a long unbreakable address sets its own floor and overrides the ratio. */
.contact-page .contact-tile {
    flex: 2 1 0%;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #fbfdfe;
    border: 1px solid var(--ct-divider);
    border-radius: 12px;
}

/* The middle tile. Keyed off a class rather than :nth-child(2) because a tile
   whose option is blank is not rendered at all -- with no address configured,
   "second child" would be the email. */
.contact-page .contact-tile--wide {
    flex: 3 1 0%;
}

.contact-page .contact-tile-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background-color: var(--ct-light);
    color: var(--ct-primary-dark);
}

.contact-page .contact-tile-icon i {
    font-size: 22px;
    line-height: 1;
}

.contact-page .contact-tile-body {
    min-width: 0;
    flex: 1 1 auto;
}

/* styles.css gives .tiles__title a bottom rule, centre alignment and a 48px
   line box, which is the whole of the old look. These are labels above a
   value, so they are small, quiet and start-aligned like the rest of the page. */
.contact-page .contact-tile-title {
    margin: 0 0 3px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.8;
    color: #55565a;
    border: 0;
    text-align: start;
}

.contact-page .contact-tile-value {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.95;
    color: #1f1f1f;
    text-align: start;
    /* An address has no spaces to break on in the worst case, and a tile this
       narrow must not push the row wide. */
    overflow-wrap: break-word;
    word-break: break-word;
}

/* "label: value" pairs, split out of the option text by the blade. Same key
   colour the product page gives .params-list-key, so a label reads as a label
   and not as emphasis on the value. */
.contact-page .contact-tile-value strong {
    font-weight: 700;
    color: #55565a;
}

/* A multi-entry value is a short stack of lines rather than one paragraph. */
.contact-page .contact-tile-value br + strong {
    display: inline-block;
    margin-top: 4px;
}

/* Phone and email are the two values that are latin-script inside an RTL page,
   so they are marked dir="ltr" in the markup; this keeps them aligned with the
   label above rather than against the far edge of the tile. */
.contact-page .contact-tile-value--ltr {
    direction: ltr;
    text-align: start;
}

.contact-page a.contact-tile-value {
    display: inline-block;
    text-decoration: none;
    transition: color 0.15s ease-in;
}

.contact-page a.contact-tile-value:hover,
.contact-page a.contact-tile-value:focus {
    color: var(--ct-primary-dark);
    text-decoration: none;
}

@media (max-width: 991.98px) {
    .contact-page .contact-tiles {
        gap: 10px;
        margin-top: 18px;
        padding: 0 4px;
    }

    .contact-page .contact-tile {
        padding: 13px;
        gap: 10px;
    }

    .contact-page .contact-tile-icon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .contact-page .contact-tile-icon i {
        font-size: 20px;
    }

    .contact-page .contact-tile-value {
        font-size: 13px;
    }
}

@media (max-width: 767.98px) {
    /* One per row, and the ratio is dropped with it. Three columns in a 540px
       container leaves the narrow tiles about 95px of text next to a 42px icon,
       which is narrower than the address they have to hold. */
    .contact-page .contact-tile,
    .contact-page .contact-tile--wide {
        flex: 1 1 100%;
    }
}


/* --- Send button ---------------------------------------------------------

   This replaces a `position: absolute; bottom: 38px; left: 24px` that was on
   the bare `.btn-primary-cm.btn-with-icon`. Two reasons it could not stay:

   1. Nothing in the button's ancestor chain is positioned. #contact-form,
      .form-ui, .additional-info, .col-lg-6, .row, .page, .dt-sn, .dt-sl,
      .container, .main-container, main and .wrapper are all static -- main.css
      only makes `.form-ui .form-row.with-icon` relative, and the submit row is
      not .with-icon. So the offsets resolved against the initial containing
      block, which put the button near the bottom-left of the first viewport of
      the document rather than of the form, and took it out of the form flow.

   2. Even with a positioned ancestor it could not sit at a fixed offset.
      contact.js calls jQuery('#contact-form').validate() with no
      errorPlacement, so jQuery Validate inserts a <label class="error"> after
      each invalid field; four required fields can add roughly 80px of height,
      and an out-of-flow button pinned to `bottom` would end up over the
      captcha.

   In flow, aligned to the end of its own row, gets the same look and survives
   both the validation messages and every viewport width.
   ------------------------------------------------------------------------- */

.contact-page .contact-submit-row {
    display: flex;
    /* RTL: flex-end is the left edge -- where `left: 24px` was aiming. */
    justify-content: flex-end;
    /* .form-row brings bootstrap's -5px side margins, which would let a
       full-width button hang 5px past each edge of the form column. */
    margin: 24px 0 0;
}

/* main.css gives the icon an absolutely positioned 50px slot
   (`.btn-with-icon { padding-right: 50px }` plus
   `.btn-with-icon i { position: absolute; right: 10px; top: 7px }`) and
   kalasoon.css then forces that top to 0 !important, which pins the glyph to
   the top edge of a button this tall. position:static drops both offsets --
   the `top` override becomes inert rather than needing another !important --
   and a flex gap places the icon instead. Same fix section 10 of
   product-single.css applies to the reviews CTA, so the two agree. */
/* Keyed off `#contact-form` rather than the .contact-submit-row class added to
   the blade: the submit button is the only .btn-primary-cm inside the form, and
   this way the stylesheet does not need the markup change to land with it. The
   id also puts the specificity (0,1,2) clear of everything in main.css and
   styles.css without an !important. */
.contact-page #contact-form .btn-primary-cm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 150px;
    /* min-height, not height: the label is translated (fa "ارسال پیام", en
       "Send message") and a fixed height clips a label that wraps. max-width
       keeps min-width from overflowing a container narrower than 150px. */
    min-height: 44px;
    max-width: 100%;
    padding: 9px 20px;
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.6;
    text-decoration: none;
    transition: filter 0.15s ease-in;
}

.contact-page #contact-form .btn-primary-cm.btn-with-icon i {
    position: static;
    top: auto;
    right: auto;
    font-size: 20px;
    line-height: 1;
}

/* The translucent sheen is sized for the padding slot given up above, so it
   would otherwise sit over the label. Hover moves to the whole button;
   brightness() needs no !important to beat the palette fill styles.css sets. */
.contact-page #contact-form .btn-primary-cm.btn-with-icon::before {
    display: none;
}

.contact-page #contact-form .btn-primary-cm:hover,
.contact-page #contact-form .btn-primary-cm:focus {
    color: #fff;
    filter: brightness(0.94);
}


/* The submit row's own breakpoint has to live down here, after the base rules
   above. The tile @media block further up the file comes BEFORE them, and at
   equal specificity the later declaration wins -- putting these there left
   `height` resolving to the desktop 44px on a phone. */
@media (max-width: 767.98px) {
    /* Full width. A 150px button pushed to one edge of a phone-width form is
       the smallest tap target on the page, and there is no second column left
       for it to align with once the map has stacked. */
    .contact-page .contact-submit-row {
        margin-top: 20px;
    }

    .contact-page #contact-form .btn-primary-cm {
        width: 100%;
        min-height: 46px;
    }
}