@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/*
Name: Duo Oceano e Coral
Category: Personalizado
Color: #ff7a59
Price: 4.99
Original Price: 4.99
Currency: BRL
Theme Builder: 1
Theme Engine: 2
Theme Builder Config: eyJidWlsZGVyX3ZlcnNpb24iOjEsIm5hbWUiOiJEdW8gT2NlYW5vIGUgQ29yYWwiLCJzbHVnIjoiZHVvLW9jZWFuby1jb3JhbCIsImNhdGVnb3J5IjoiUGVyc29uYWxpemFkbyIsImlzX3BhaWQiOnRydWUsInByaWNlIjo0Ljk5LCJiYWNrZ3JvdW5kX21vZGUiOiJncmFkaWVudCIsImJhY2tncm91bmRfY29sb3IiOiIjMDgxNjJmIiwiZ3JhZGllbnRfZGlyZWN0aW9uIjoiMTM1ZGVnIiwiZ3JhZGllbnRfY29sb3JfYSI6IiMwYjFkM2EiLCJncmFkaWVudF9jb2xvcl9iIjoiIzA2MTIyYSIsImJhY2tncm91bmRfaW1hZ2UiOiIiLCJiYWNrZ3JvdW5kX2ltYWdlX21vZGUiOiJjb3ZlciIsInRleHRfY29sb3IiOiIjZjhmYWZjIiwibXV0ZWRfY29sb3IiOiIjYThiMGJkIiwiYnV0dG9uX2NvbG9yIjoiIzEwMjc0ZiIsImJ1dHRvbl90ZXh0X2NvbG9yIjoiI2ZmZmZmZiIsImN0YV9jb2xvciI6IiNmZjdhNTkiLCJjdGFfdGV4dF9jb2xvciI6IiNmZmZmZmYiLCJidXR0b25faGlnaGxpZ2h0X2NvbG9yIjoiI2ZmN2E1OSIsImJ1dHRvbl9oaWdobGlnaHRfdGV4dF9jb2xvciI6IiNmZmZmZmYiLCJsaW5rc19leHRyYXNfY29sb3IiOiIjMTAyNzRmIiwibGlua3NfZXh0cmFzX3RleHRfY29sb3IiOiIjZDRkOGRlIiwiYWNjZW50X2NvbG9yIjoiI2ZmN2E1OSIsInN1cmZhY2VfY29sb3IiOiIjMGQyMjQ2IiwiYm9yZGVyX2NvbG9yIjoiI2ZmN2E1OSIsImRlbnNpdHkiOiJkZWZhdWx0IiwicmFkaXVzIjoxOCwic2hhZG93IjoibWVkaXVtIiwiZ2xhc3NfYmx1ciI6MTYsInBhcnRpY2xlc19lbmFibGVkIjpmYWxzZSwicGFydGljbGVzX2RpcmVjdGlvbiI6ImZsb2F0aW5nIiwicGFydGljbGVzX2RlbnNpdHkiOiJtZWRpdW0iLCJzbW9rZV9lbmFibGVkIjpmYWxzZSwic3RhcnNfZW5hYmxlZCI6ZmFsc2UsImZvbnRfZmFtaWx5IjoiaW50ZXIiLCJncmFkaWVudF90aHJlZV9zdG9wcyI6ZmFsc2UsImdyYWRpZW50X2NvbG9yX2MiOiIjN2ZmZmZmIiwib3ZlcmxheV9vcGFjaXR5IjowLCJsaXF1aWRfZ2xhc3MiOmZhbHNlLCJpc19leGNsdXNpdmUiOmZhbHNlLCJwYXR0ZXJuIjoiY29ydGVfZHVwbG8iLCJwYXR0ZXJuX2NvbG9yIjoiI2U4NTcyYSIsInBhdHRlcm5fb3BhY2l0eSI6NzAsInBhdHRlcm5fY29sb3JfMiI6IiIsInBhdHRlcm5fY29sb3JfMyI6IiIsInBvcnRhbF9oZXJvX2EiOiIjM2E3YmZmIiwicG9ydGFsX2hlcm9fYiI6IiMxYTRmZTAiLCJwb3J0YWxfaGVyb19jIjoiIzBhMWE0YSIsInBvcnRhbF9oZXJvX3RleHQiOiIjZmZmZmZmIn0=
*/

:root {
    color-scheme: dark;
    --tb-text: #f8fafc;
    --tb-muted: #a8b0bd;
    --tb-accent: #ff7a59;
    --tb-accent-soft: rgba(255, 122, 89, 0.16);
    --tb-surface: rgba(13, 34, 70, 0.66);
    --tb-surface-strong: rgba(13, 34, 70, 0.96);
    --tb-border: rgba(255, 122, 89, 0.28);
    --tb-hairline: rgba(255, 255, 255, 0.10);
    --tb-button: #10274f;
    --tb-button-text: #ffffff;
    --tb-button-hl: #ff7a59;
    --tb-button-hl-text: #ffffff;
    --tb-links-extras: #10274f;
    --tb-links-extras-text: #d4d8de;
    --tb-cta: #ff7a59;
    --tb-cta-text: #ffffff;
    --tb-cta-soft: rgba(255, 122, 89, 0.3);
    --tb-radius: 18px;
    --tb-radius-sm: calc(18px * 0.72);
    --tb-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 12px 32px -8px rgba(0, 0, 0, 0.45);
    --tb-blur: 16px;
    --tb-wrap-padding: 96px 18px 44px;
    --tb-link-padding: 16px 18px;
    --tb-gap: 12px;
    --tb-link-font: 0.92rem;
    --tb-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
    --tb-bg: #08162f;
    --tb-surface-solid: #0d2246;
    --tb-border-solid: #ff7a59;
    --tb-hero-a: #3a7bff;
    --tb-hero-b: #1a4fe0;
    --tb-hero-c: #0a1a4a;
    --tb-hero-text: #ffffff;
    --tb-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
    min-height: 100%;
    background-color: #08162f !important;
    -webkit-text-size-adjust: 100%;
}

body {
    background: linear-gradient(135deg, #0b1d3a 0%, #06122a 100%) !important;
    background-attachment: scroll !important;
    font-family: var(--tb-font) !important;
    color: var(--tb-text) !important;
    position: relative;
    z-index: 1 !important;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Foto de fundo (quando o tema tem imagem). */
body::before {
    content: none;
}

/* Luz, vinheta e grao de filme: profundidade sem trocar as cores do tema.
   Camada fixa propria (nao usa background-attachment: fixed, que o iPhone ignora). */
body::after {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"), radial-gradient(60% 45% at 12% 8%, rgba(255, 122, 89, 0.42), transparent 72%), radial-gradient(55% 45% at 92% 88%, rgba(6, 18, 42, 0.38), transparent 72%), radial-gradient(45% 35% at 85% 18%, rgba(255, 122, 89, 0.26), transparent 70%), radial-gradient(130% 90% at 50% 120%, rgba(0, 0, 0, 0.45), transparent 60%), linear-gradient(115deg, transparent 0 44%, rgba(232, 87, 42, 0.35) 44% 60%, rgba(232, 87, 42, 0.7) 60% 100%);
    background-size: 180px 180px, auto, auto, auto, auto, auto;
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
    background-repeat: repeat, repeat, repeat, repeat, repeat, repeat;
}

.profile-wrap,
.gb-wrap,
.hotel-wrap,
.imo-wrap {
    position: relative;
    z-index: 2;
    padding: var(--tb-wrap-padding) !important;
}

/* Barra do topo: vidro fino. */
.top-nav {
    background: rgba(13, 34, 70, 0.62) !important;
    border-bottom: 1px solid var(--tb-hairline) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.11) inset !important;
}

.nav-logo,
.nav-logo span,
.menu-links a {
    color: var(--tb-text) !important;
}

.menu-toggle span {
    background: var(--tb-text) !important;
}

/* Painel do menu na cor do tema (claro ou escuro), links sempre legiveis. */
.nav-menu {
    background: rgba(6, 16, 33, 0.97) !important;
}

.menu-links a:hover {
    background: var(--tb-accent-soft) !important;
}

.menu-links .menu-highlight {
    background: var(--tb-accent-soft) !important;
    color: var(--tb-text) !important;
}

.menu-links .menu-highlight svg {
    color: var(--tb-accent);
}

.menu-links li.menu-divider {
    background: var(--tb-hairline) !important;
}

/* ETAPA 227: recado do dia e "Sair da Conta" legiveis no painel do menu claro
   (o recado era texto claro feito para o menu escuro; o vermelho do Sair era
   trocado pela cor do texto do tema). */
.menu-recado {
    background: var(--tb-accent-soft) !important;
    border-color: var(--tb-hairline) !important;
}

.menu-recado-selo {
    color: var(--tb-accent) !important;
}

.menu-recado-texto {
    color: var(--tb-text) !important;
    opacity: 0.82;
}

.menu-links a[href^="logout.php"] {
    color: #e5484d !important;
    opacity: 1 !important;
}

/* Tipografia: titulo firme e enxuto, texto de apoio limpo. */
.profile-name,
.gb-name,
.name-h1,
.hotel-name,
.imo-name,
.product-name,
.hotel-panel-title,
.menu-cat-title,
.hotel-guide-head strong {
    color: var(--tb-text) !important;
    letter-spacing: -0.022em !important;
    text-shadow: none !important;
    text-wrap: balance;
}

.profile-bio,
.gb-bio,
.gb-views,
.biz-desc,
.hotel-desc,
.hotel-address,
.hotel-message,
.product-desc,
.hotel-guide-head span,
.hotel-text-section p,
.hotel-info-card small,
.ios-action-label,
.hotel-action-label,
.view-count,
.stats-bar {
    color: var(--tb-muted) !important;
    text-shadow: none !important;
    line-height: 1.55;
}

/* O modulo de pagina pessoal forca sombra preta pesada no nome, bio e
   compartilhar em qualquer tema (era o efeito "impressao antiga" nos temas
   claros). Seletor mais forte para o tema decidir. */
html body .profile-name,
html body .gb-name,
html body .name-h1 {
    text-shadow: none !important;
}

html body .profile-bio,
html body .view-count,
html body .gb-views {
    text-shadow: none !important;
}

html body .btn-share,
html body .gb-share {
    text-shadow: none !important;
}

/* Areas grandes: superficie com luz no topo, borda de luz e sombra em camadas. */
.identity-card,
.links-panel,
.empty-menu,
.hotel-hero,
.hotel-panel,
.hotel-text-section {
    background: linear-gradient(180deg, rgba(37, 56, 89, 0.8), rgba(13, 34, 70, 0.66)) !important;
    border: 1px solid var(--tb-hairline) !important;
    border-radius: var(--tb-radius) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), var(--tb-shadow) !important;
}

/* Cartoes menores: mesmo acabamento, sem desfoque (leve para rolar). */
.hotel-info-card,
.biz-product-card {
    background: linear-gradient(180deg, rgba(37, 56, 89, 0.8), rgba(13, 34, 70, 0.66)) !important;
    border: 1px solid var(--tb-hairline) !important;
    border-radius: var(--tb-radius-sm) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), 0 1px 2px rgba(0, 0, 0, 0.22), 0 12px 32px -8px rgba(0, 0, 0, 0.3) !important;
}

/* Vidro so onde o navegador tem desfoque; sem ele, a superficie fica mais firme. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .top-nav,
    .identity-card,
    .links-panel,
    .empty-menu,
    .hotel-hero,
    .hotel-panel,
    .hotel-text-section {
        -webkit-backdrop-filter: blur(16px) saturate(1.7) !important;
        backdrop-filter: blur(16px) saturate(1.7) !important;
    }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .identity-card,
    .links-panel,
    .empty-menu,
    .hotel-hero,
    .hotel-panel,
    .hotel-text-section {
        background: var(--tb-surface-strong) !important;
    }
}

/* Botoes de link: relevo suave, toque responsivo, sem desfoque individual. */
.link-item,
.hotel-link {
    color: var(--tb-button-text) !important;
    background: linear-gradient(180deg, #283d61, #10264d) !important;
    border: 1px solid var(--tb-hairline) !important;
    border-radius: var(--tb-radius-sm) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), 0 1px 2px rgba(0, 0, 0, 0.22), 0 12px 32px -8px rgba(0, 0, 0, 0.3) !important;
    padding: var(--tb-link-padding) !important;
    margin-bottom: var(--tb-gap) !important;
    font-size: var(--tb-link-font) !important;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transition: transform 0.35s var(--tb-ease), box-shadow 0.35s var(--tb-ease), border-color 0.25s ease, background 0.25s ease !important;
    -webkit-tap-highlight-color: transparent;
}

.link-item.tb-highlight,
.hotel-link.tb-highlight {
    color: var(--tb-button-hl-text) !important;
    background: linear-gradient(180deg, #ff8d70, #ff7a59) !important;
    border-color: transparent !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 30px -6px rgba(255, 122, 89, 0.38) !important;
}

.le-btn {
    color: var(--tb-links-extras-text, #a8b7c7) !important;
    background: var(--tb-links-extras, #101f2d) !important;
    border-color: var(--tb-hairline) !important;
}

@media (hover: hover) {
    .link-item:hover,
    .hotel-link:hover,
    .ios-action-btn:hover,
    .hotel-action:hover {
        border-color: rgba(255, 122, 89, 0.28) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), 0 1px 2px rgba(0, 0, 0, 0.26), 0 12px 32px -8px rgba(0, 0, 0, 0.42) !important;
        transform: translateY(-2px);
    }
}

.link-item:active,
.hotel-link:active,
.ios-action-btn:active,
.hotel-action:active {
    transform: scale(0.985) !important;
    transition-duration: 0.12s !important;
}

.link-item:focus-visible,
.hotel-link:focus-visible,
.ios-action-btn:focus-visible,
.btn-share:focus-visible,
.cta-btn-pro:focus-visible {
    outline: 2px solid var(--tb-accent) !important;
    outline-offset: 3px !important;
}

.link-icon-svg,
.link-item svg,
.hotel-link svg,
.hotel-small-btn svg,
.view-count svg,
.ios-action-circle,
.hotel-action-circle,
.price-tag,
.hotel-chip,
.table-chip {
    color: var(--tb-accent) !important;
}

.ios-action-circle,
.hotel-action-circle {
    background: linear-gradient(180deg, rgba(37, 56, 89, 0.8), rgba(255, 122, 89, 0.16)) !important;
    border: 1px solid var(--tb-hairline) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), 0 1px 2px rgba(0, 0, 0, 0.22), 0 12px 32px -8px rgba(0, 0, 0, 0.3) !important;
    transition: transform 0.35s var(--tb-ease);
}

/* Botoes de destaque: cor do tema com brilho e luz propria. */
.btn-share,
.btn-share-hotel,
.cta-btn-pro,
.hotel-small-btn,
.pix-button.primary,
.cart-floater {
    background: linear-gradient(180deg, #ff8d70, #ff7a59) !important;
    color: var(--tb-cta-text) !important;
    text-shadow: none !important;
    border-color: transparent !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 10px 28px -8px var(--tb-cta-soft) !important;
    transition: transform 0.35s var(--tb-ease), box-shadow 0.35s var(--tb-ease), filter 0.25s ease !important;
}

@media (hover: hover) {
    .btn-share:hover,
    .btn-share-hotel:hover,
    .cta-btn-pro:hover,
    .hotel-small-btn:hover {
        filter: brightness(1.06);
        transform: translateY(-1px);
    }
}

/* Chips do topo da Loja (compartilhar, localizacao, site, e-mail...): no padrao do tema.
   WhatsApp e Pix mantem a cor de marca, so ganham o relevo. */
.gb-share,
.gb-contact-btn:not(.wa):not(.pix) {
    background: linear-gradient(180deg, rgba(37, 56, 89, 0.8), rgba(13, 34, 70, 0.66)) !important;
    border: 1px solid var(--tb-hairline) !important;
    color: var(--tb-text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), 0 1px 2px rgba(0, 0, 0, 0.22), 0 12px 32px -8px rgba(0, 0, 0, 0.3) !important;
}

.gb-share {
    color: var(--tb-accent) !important;
}

.gb-contact-btn.wa,
.gb-contact-btn.pix {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), 0 1px 2px rgba(0, 0, 0, 0.22), 0 12px 32px -8px rgba(0, 0, 0, 0.3) !important;
}

.gb-views {
    text-shadow: none !important;
}

.cta-navbar {
    background: linear-gradient(to top, #08162f 58%, transparent) !important;
}

/* Foto/logo: anel fino na cor do tema, separado do fundo. */
.avatar-main,
.gb-avatar,
.biz-logo,
.hotel-logo,
.imo-logo {
    border-color: transparent !important;
    box-shadow: 0 0 0 3px #08162f, 0 0 0 5px var(--tb-accent), 0 18px 44px -10px rgba(0, 0, 0, 0.55) !important;
}

.system-footer,
.system-footer * {
    color: var(--tb-muted) !important;
}

/* Entrada suave em cascata (respeita "reduzir movimento" do aparelho). */
@media (prefers-reduced-motion: no-preference) {
    @keyframes tbEntra {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: none; }
    }
    .identity-card,
    .links-panel > *,
    .link-item {
        animation: tbEntra 0.6s var(--tb-ease) backwards;
    }
    .link-item:nth-child(2) { animation-delay: 0.04s; }
    .link-item:nth-child(3) { animation-delay: 0.08s; }
    .link-item:nth-child(4) { animation-delay: 0.12s; }
    .link-item:nth-child(5) { animation-delay: 0.16s; }
    .link-item:nth-child(6) { animation-delay: 0.20s; }
    .link-item:nth-child(n+7) { animation-delay: 0.24s; }
}

@media (max-width: 520px) {
    .profile-wrap,
    .gb-wrap,
    .hotel-wrap,
    .imo-wrap {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}