/* ==========================================================================
   EatPal seal tile and paper menu
   --------------------------------------------------------------------------
   EatPal has no dish photography. Rather than faking it, the interface is
   built around the restaurant's own mark and its data. Cards lead with a
   seal tile; the menu is set like a printed one.
   ========================================================================== */

/* ------------------------------------------------------------- seal tile */

.ep-seal {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    background: #e6f1ed;
    text-decoration: none;
}

@supports not (aspect-ratio: 4 / 3) {
    .ep-seal {
        height: 0;
        padding-bottom: 75%;
    }
}

.ep-seal--logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ep-seal__disc {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 58%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(30, 36, 34, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}

@supports not (aspect-ratio: 1 / 1) {
    .ep-seal__disc {
        width: 58%;
        height: 77.33%;
    }
}

.ep-seal__logo {
    width: 68%;
    height: 68%;
    object-fit: contain;
    display: block;
}

.ep-seal--type {
    background: #faf7f2;
    border-bottom: 1px solid #e7e1d7;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    text-align: center;
}

.ep-seal__name {
    font-family: Estedad, IRANSansX, Vazirmatn, sans-serif;
    font-weight: 800;
    font-size: 20px;
    line-height: 28px;
    color: #1e2422;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.ep-seal__rule {
    width: 24px;
    height: 3px;
    border-radius: 2px;
    background: #c8871b;
    margin: 10px 0 8px;
    flex: none;
}

.ep-seal__cat {
    font-family: Dana, IRANSansX, Vazirmatn, sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #5c635f;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ep-seal--type[data-len="long"] .ep-seal__name {
    font-size: 17px;
    line-height: 24px;
}

.ep-seal--type[data-len="xlong"] .ep-seal__name {
    font-size: 15px;
    line-height: 22px;
}

.ep-seal__badges {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: calc(100% - 16px);
    z-index: 2;
}

.ep-badge {
    font-family: Dana, IRANSansX, Vazirmatn, sans-serif;
    font-size: 11px;
    line-height: 18px;
    font-weight: 500;
    color: #1e2422;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #e7e1d7;
    border-radius: 6px;
    padding: 1px 7px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ep-badge--open::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #186b3a;
    flex: none;
}

.ep-badge--fresh {
    color: #0a4438;
    border-color: #cfe2da;
}

.closed-business .ep-seal__disc,
.closed-business .ep-seal__logo {
    filter: grayscale(1);
    opacity: 0.75;
}

/* -------------------------------------------------------- card container */

.business-card--seal {
    background: #ffffff;
    border: 1px solid #e7e1d7;
    border-radius: 12px;
    box-shadow: none;
    overflow: hidden;
    padding-bottom: 14px;
}

.business-card--seal .ep-seal-wrap {
    position: relative;
    width: 100%;
}

.business-card--seal .details .info {
    padding: 12px 14px 0;
    margin-top: 0;
}

.business-card--seal .details .info .title {
    margin-bottom: 4px;
}

.business-card--seal .details .info .title .name,
.business-card--seal .details .info .title .name span {
    font-family: Dana, IRANSansX, Vazirmatn, sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 24px;
    color: #1e2422 !important;
}

.business-card--seal .details .info .categories {
    margin-top: 2px;
    font-family: Dana, IRANSansX, Vazirmatn, sans-serif;
    font-size: 13px;
    line-height: 22px;
    color: #5c635f;
}

.business-card--seal .discount-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    min-width: 0;
    border-radius: 6px;
    background: #c8871b;
    padding: 2px 8px;
    display: inline-flex;
    align-items: center;
}

.business-card--seal .discount-badge span {
    font-family: Dana, IRANSansX, Vazirmatn, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    color: #ffffff;
}

/* ------------------------------------------------------------ paper menu */

/* A grid with a fixed price column, not flex: a long description would
   otherwise push the price onto its own line and the row would stop
   reading as a menu entry. */

.ep-menu {
    margin: 0 0 32px;
    padding: 0;
    max-width: 680px;
}

.ep-menu__section {
    font-family: Estedad, IRANSansX, Vazirmatn, sans-serif;
    font-weight: 800;
    font-size: 18px;
    line-height: 28px;
    color: #0e5c4b;
    margin: 28px 0 4px;
    padding-bottom: 8px;
    border-bottom: 2px solid #0e5c4b;
    max-width: 680px;
    text-align: right;
}

.ep-menu__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    align-items: start;
    padding: 12px 0;
    border-bottom: 1px dashed #e7e1d7;
    width: 100%;
}

.ep-menu__row:last-child {
    border-bottom: none;
}

.ep-menu__main {
    grid-column: 1;
    min-width: 0;
    text-align: right;
}

.ep-menu__link {
    text-decoration: none !important;
    display: inline-block;
    max-width: 100%;
}

.ep-menu__name {
    font-family: Dana, IRANSansX, Vazirmatn, sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 24px;
    color: #1e2422;
    margin: 0;
    text-decoration: none;
}

.ep-menu__desc {
    font-family: Dana, IRANSansX, Vazirmatn, sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 22px;
    color: #5c635f;
    margin: 2px 0 0;
    text-align: right;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ep-menu__side {
    grid-column: 2;
    align-self: start;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.ep-menu__price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.ep-menu__now {
    font-family: Dana, IRANSansX, Vazirmatn, sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #1e2422;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    direction: rtl;
}

.ep-menu__was {
    font-family: Dana, IRANSansX, Vazirmatn, sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #5c635f;
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ep-menu__off {
    font-family: Dana, IRANSansX, Vazirmatn, sans-serif;
    font-weight: 600;
    font-size: 11px;
    line-height: 18px;
    color: #c8871b;
    white-space: nowrap;
}

.ep-menu a,
.ep-menu a:hover {
    text-decoration: none !important;
}

/* ---------------------------------------------------------------- mobile */

@media (max-width: 480px) {
    .ep-seal__name {
        font-size: 17px;
        line-height: 24px;
    }

    .ep-seal--type[data-len="long"] .ep-seal__name {
        font-size: 15px;
        line-height: 22px;
    }

    .ep-seal--type[data-len="xlong"] .ep-seal__name {
        font-size: 14px;
        line-height: 20px;
    }

    .ep-badge {
        font-size: 10px;
        padding: 0 6px;
    }

    .ep-menu__name {
        font-size: 14px;
        line-height: 22px;
    }

    .ep-menu__desc {
        font-size: 12px;
        line-height: 20px;
    }

    .ep-menu__now {
        font-size: 15px;
    }

    .ep-menu__section {
        font-size: 16px;
        margin-top: 22px;
    }

    .ep-menu__row {
        column-gap: 10px;
    }
}

@media (max-width: 768px) {
    .business-card--seal .details .info {
        padding: 10px 12px 0 !important;
    }
}

/* ==========================================================================
   Restaurant page cover
   --------------------------------------------------------------------------
   The old cover was a generated pastel shopfront drawing, the single loudest
   reminder that no real photo exists. It is replaced by a dark green field
   derived from the restaurant's own logo hue, with the logo on a white disc
   sitting over it. Nothing pretends to be a photograph.
   ========================================================================== */

.ep-cover {
    position: relative;
    width: 100%;
    height: 140px;
    background: #0a4438;
    border-radius: 0 0 20px 20px;
    overflow: visible;
}

.ep-cover__field {
    position: absolute;
    inset: 0;
    border-radius: 0 0 20px 20px;
    overflow: hidden;
}

/* a 45 degree hairline pattern, barely visible, so the block reads as a
   printed surface rather than a flat colour swatch */
.ep-cover__field::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.04) 0,
        rgba(255, 255, 255, 0.04) 1px,
        transparent 1px,
        transparent 9px
    );
}

.ep-cover__disc {
    position: absolute;
    bottom: 0;
    right: 2rem;
    transform: translateY(50%);
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e7e1d7;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    overflow: hidden;
}

.ep-cover__logo {
    width: 66%;
    height: 66%;
    object-fit: contain;
    display: block;
}

.ep-cover__initial {
    font-family: Estedad, IRANSansX, Vazirmatn, sans-serif;
    font-weight: 800;
    font-size: 34px;
    line-height: 1;
    color: #0e5c4b;
}

.ep-cover__discount {
    position: absolute;
    left: 2rem;
    top: 1.6rem;
    z-index: 4;
    font-family: Dana, IRANSansX, Vazirmatn, sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    color: #ffffff;
    background: #c8871b;
    border-radius: 6px;
    padding: 4px 12px;
}

@media (min-width: 768px) {
    .ep-cover {
        height: 180px;
    }

    .ep-cover__disc {
        width: 104px;
        height: 104px;
    }
}

/* ==========================================================================
   Section chips
   --------------------------------------------------------------------------
   The section strip used to show a generated illustration above each name.
   Those pictures carried no information and repeated across sections, so
   only the name is kept, as a chip.
   ========================================================================== */

.ep-chip-nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0 10px;
    scrollbar-width: none;
}

.ep-chip-nav::-webkit-scrollbar {
    display: none;
}

.ep-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    font-family: Dana, IRANSansX, Vazirmatn, sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 22px;
    color: #1e2422;
    background: #ffffff;
    border: 1px solid #e7e1d7;
    border-radius: 8px;
    padding: 5px 14px;
    white-space: nowrap;
    text-decoration: none !important;
    transition: border-color 0.15s, color 0.15s;
}

.ep-chip:hover {
    border-color: #0e5c4b;
    color: #0e5c4b;
}

.ep-chip.active {
    border-color: #0e5c4b;
    color: #0e5c4b;
    background: #e6f1ed;
    font-weight: 600;
}

/* the old strip stacked an image above the label; the chip is a single row */
.linkTag.ep-chip {
    flex-direction: row !important;
    padding-top: 5px !important;
}

/* the disc hangs half below the cover, so the block that follows needs room */
.shop .ep-cover {
    margin-bottom: 56px;
}

@media (min-width: 768px) {
    .shop .ep-cover {
        margin-bottom: 64px;
    }
}


/* The menu column is capped at a readable measure, but the cap belongs to
   the container, not to the list inside it. Capping only the list left the
   whole left half of a desktop page empty while the rows huddled against
   the right edge. */
@media (min-width: 992px) {
    .changingContent .menu {
        max-width: 760px;
        margin-right: auto;
        margin-left: auto;
    }
}

/* ==========================================================================
   Restaurant masthead
   --------------------------------------------------------------------------
   Removing the photo left a coloured bar carrying no information, which
   announced the missing image as loudly as the drawing had. The header now
   carries the content itself: name, category, mark, and the three facts we
   actually hold. Nothing is shown that the data cannot support, so no
   opening hours and no neighbourhood, because every row in this dataset
   claims to open at midnight and sit in "Tehran".
   ========================================================================== */

.ep-mast {
    position: relative;
    background: #0a4438;
    border-radius: 0 0 20px 20px;
    overflow: hidden;
    padding: 28px 24px 0;
    margin-bottom: 24px;
}

.ep-mast::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.05) 0,
        rgba(255, 255, 255, 0.05) 1px,
        transparent 1px,
        transparent 10px
    );
    pointer-events: none;
}

.ep-mast__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    max-width: 1100px;
    margin: 0 auto;
    padding-bottom: 22px;
}

.ep-mast__mark {
    flex: none;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ep-mast__logo {
    width: 66%;
    height: 66%;
    object-fit: contain;
    display: block;
}

/* Tier C has no serveable logo. The full name reads as a shop sign and is
   far more credible than an initial in a circle. */
.ep-mast__mark--type {
    width: auto;
    min-width: 92px;
    max-width: 190px;
    height: auto;
    min-height: 92px;
    border-radius: 14px;
    background: #faf7f2;
    border: 1px solid #e7e1d7;
    flex-direction: column;
    padding: 12px 14px;
    text-align: center;
}

.ep-mast__markname {
    font-family: Estedad, IRANSansX, Vazirmatn, sans-serif;
    font-weight: 800;
    font-size: 15px;
    line-height: 22px;
    color: #0e5c4b;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ep-mast__markrule {
    width: 22px;
    height: 3px;
    border-radius: 2px;
    background: #c8871b;
    margin-top: 8px;
}

.ep-mast__body {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
}

.ep-mast__title {
    font-family: Estedad, IRANSansX, Vazirmatn, sans-serif;
    font-weight: 900;
    font-size: 28px;
    line-height: 40px;
    color: #ffffff;
    margin: 0 0 6px;
    word-break: break-word;
}

.ep-mast__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.ep-mast__cat {
    font-family: Dana, IRANSansX, Vazirmatn, sans-serif;
    font-size: 13px;
    line-height: 22px;
    font-weight: 500;
    color: #e6f1ed;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 2px 12px;
}

.ep-mast__off {
    font-family: Dana, IRANSansX, Vazirmatn, sans-serif;
    font-size: 13px;
    line-height: 22px;
    font-weight: 700;
    color: #ffffff;
    background: #c8871b;
    border-radius: 8px;
    padding: 2px 12px;
}

/* --- the fact strip --- */

.ep-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    overflow: hidden;
}

.ep-fact {
    flex: 1 1 auto;
    min-width: 120px;
    padding: 10px 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.ep-fact:last-child {
    border-left: none;
}

.ep-fact__label {
    display: block;
    font-family: Dana, IRANSansX, Vazirmatn, sans-serif;
    font-size: 11px;
    line-height: 18px;
    color: rgba(230, 241, 237, 0.75);
    margin-bottom: 2px;
}

.ep-fact__value {
    display: block;
    font-family: Dana, IRANSansX, Vazirmatn, sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 24px;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

/* price freshness is the one fact no competitor shows, so it is marked */
.ep-fact--fresh .ep-fact__value {
    color: #f0c47a;
}

.ep-mast__actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.ep-mast__call {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: Dana, IRANSansX, Vazirmatn, sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 22px;
    color: #0a4438;
    background: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 8px 20px;
    cursor: pointer;
    text-decoration: none !important;
}

@media (max-width: 768px) {
    .ep-mast {
        padding: 20px 16px 0;
        border-radius: 0 0 16px 16px;
    }

    .ep-mast__inner {
        gap: 14px;
        padding-bottom: 18px;
    }

    .ep-mast__mark {
        width: 68px;
        height: 68px;
    }

    .ep-mast__mark--type {
        min-width: 68px;
        max-width: 130px;
        min-height: 68px;
        padding: 8px 10px;
    }

    .ep-mast__markname {
        font-size: 13px;
        line-height: 19px;
        -webkit-line-clamp: 2;
    }

    .ep-mast__title {
        font-size: 21px;
        line-height: 32px;
    }

    .ep-fact {
        min-width: 50%;
        border-left: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .ep-fact:nth-child(odd) {
        border-left: 1px solid rgba(255, 255, 255, 0.12);
    }
}

/* The theme applies a fixed 88px bar to every <header> element, so the
   masthead must not be one, and must override the rule if it ever ends up
   inside a header context. */
.ep-mast {
    position: relative !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: auto !important;
    display: block !important;
    box-shadow: none !important;
    width: 100%;
}