/*
     * contact.html — dashboard-consistent design
     * Matches /clientes/dashboard.html:
     *   bg: #F7F3ED warm cream · card: #FAF5FF + dog-card purple header
     *   text: #000 / #4A1A7A · buttons: purple gradient · Quicksand font
     */

    /* ── Page: warm cream, same as dashboard ── */
    body.jp-page { background: #F7F3ED !important; }
    .jp-main     { background: #F7F3ED !important; padding-top: 32px !important; padding-bottom: 48px !important; }

    /* ── Card: dog-profile-card style ── */
    .jp-card {
      background: #FAF5FF !important;
      border-radius: 22px !important;
      overflow: hidden !important;
      border: none !important;
      padding: 0 !important;
      box-shadow:
        0 0 0 1px rgba(196,168,240,0.35),
        0 8px 32px rgba(74,26,122,0.14),
        0 2px 8px rgba(74,26,122,0.07) !important;
    }

    /* Card purple header strip — exact match to dog card header */
    .contact-card-header {
      background: linear-gradient(135deg, #4A1A7A 0%, #7B52AB 60%, #9B72C8 100%);
      padding: 22px 28px 20px;
      position: relative;
      overflow: hidden;
    }
    .contact-card-header::before {
      content: '';
      position: absolute; top: -20px; right: -20px;
      width: 90px; height: 90px; border-radius: 50%;
      background: radial-gradient(circle, rgba(201,168,255,0.3) 0%, transparent 65%);
      pointer-events: none;
    }
    .contact-card-header::after {
      content: '';
      position: absolute; bottom: -12px; left: -12px;
      width: 60px; height: 60px; border-radius: 50%;
      background: radial-gradient(circle, rgba(242,23,158,0.18) 0%, transparent 65%);
      pointer-events: none;
    }
    .contact-card-header h1 {
      font-family: 'Quicksand', sans-serif !important;
      font-weight: 800 !important;
      font-size: 1.35rem !important;
      color: #ffffff !important;
      margin: 0 0 4px !important;
      line-height: 1.2;
      position: relative; z-index: 1;
    }
    .contact-card-header p {
      font-family: 'Quicksand', sans-serif !important;
      font-size: 0.85rem !important;
      font-weight: 500 !important;
      color: rgba(255,255,255,0.70) !important;
      margin: 0 !important;
      position: relative; z-index: 1;
    }

    /* Card body — lavender gradient, same as dog card body */
    .contact-card-body {
      background: linear-gradient(180deg, #F0EAFF 0%, #FAF5FF 100%);
      padding: 24px 28px 28px;
    }

    /* ── Address/hours info block — same style as dog card notes ── */
    .ct-info-block {
      background: rgba(74,26,122,0.06);
      border: 1px solid rgba(123,82,171,0.18);
      border-left: 3px solid #7B52AB;
      border-radius: 0 10px 10px 0;
      padding: 12px 14px;
      margin-bottom: 20px;
      font-family: 'Quicksand', sans-serif;
      font-size: 0.85rem;
    }
    .ct-info-block strong { color: #4A1A7A; font-weight: 700; }
    .ct-info-block span   { color: #5a2d82; }
    .ct-info-block .ct-hours { color: #9b7ebd; font-size: 0.78rem; margin-top: 6px; display: block; }

    /* ── Form labels — dashboard style ── */
    .jp-label {
      color: #4A1A7A !important;
      font-weight: 700 !important;
      font-size: 0.82rem !important;
    }

    /* ── Inputs — white, soft purple focus ── */
    .jp-input, .jp-textarea {
      background: #ffffff !important;
      border: 1.5px solid #e9d5ff !important;
      border-radius: 12px !important;
      color: #1a0a2e !important;
      font-family: 'Quicksand', sans-serif !important;
      font-weight: 600 !important;
      transition: border-color 0.2s, box-shadow 0.2s !important;
      box-shadow: none !important;
    }
    .jp-input::placeholder, .jp-textarea::placeholder { color: #b89fcf !important; }
    .jp-input:focus, .jp-textarea:focus {
      border-color: #7B52AB !important;
      box-shadow: 0 0 0 3px rgba(123,82,171,0.15) !important;
      outline: none !important;
    }

    /* ── Submit button — same as dog card edit button ── */
    .jp-btn-primary {
      background: linear-gradient(135deg, #4A1A7A, #7B52AB) !important;
      color: #ffffff !important;
      border: none !important;
      border-radius: 50px !important;
      font-weight: 700 !important;
      box-shadow: 0 4px 14px rgba(74,26,122,0.35),
                  inset 0 1px 0 rgba(255,255,255,0.15) !important;
      transition: all 0.22s ease !important;
    }
    .jp-btn-primary:hover {
      background: linear-gradient(135deg, #3d1566, #6B42A0) !important;
      box-shadow: 0 6px 20px rgba(74,26,122,0.45),
                  inset 0 1px 0 rgba(255,255,255,0.20) !important;
      transform: translateY(-1px) !important;
    }

    /* ── Alert — matches dog card parasite warning ── */
    .jp-alert-error {
      background: linear-gradient(135deg, #fef2f2, #fee2e2) !important;
      border: 1px solid #fca5a5 !important;
      color: #7f1d1d !important;
      border-radius: 10px !important;
    }

    /* ── Success state ── */
    .contact-success { display:none; text-align:center; padding: 32px 16px; }
    .contact-success-icon {
      width: 60px; height: 60px; border-radius: 18px;
      background: linear-gradient(135deg, #EDE9FF, #E4D9FF);
      border: 1px solid #C4A8F0;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 16px;
      box-shadow: 0 2px 10px rgba(74,26,122,0.15);
    }
    .contact-success-icon svg { width: 30px; height: 30px; }
    .contact-success h2 { color: #4A1A7A !important; margin-bottom: 8px; font-family: 'Quicksand', sans-serif; font-weight: 800; }
    .contact-success p  { color: #707070 !important; font-family: 'Quicksand', sans-serif; }
    .contact-success .jp-btn-outline {
      background: transparent !important;
      border: 2px solid #e9d5ff !important;
      color: #4A1A7A !important;
      border-radius: 50px !important;
      transition: all 0.2s ease !important;
    }
    .contact-success .jp-btn-outline:hover {
      border-color: #7B52AB !important;
      background: #f5f0ff !important;
    }

    /* ── Character counter ── */
    .char-counter { font-size:0.78rem; color: #b89fcf; text-align:right; margin-top:4px; font-family: 'Quicksand', sans-serif; }
    .char-counter.warn { color: #e53935; }

    /* ── Footer — matches dashboard footer ── */
    .jp-footer { background: #4A1A7A !important; color: rgba(255,255,255,0.8) !important; }
    .jp-footer a { color: rgba(255,255,255,0.70) !important; }
    .jp-footer a:hover { color: #ffffff !important; }

.jp-lang-globe{-webkit-appearance:none!important;appearance:none!important;display:inline-flex!important;align-items:center!important;gap:6px!important;padding:7px 14px!important;border-radius:12px!important;border:none!important;background:var(--jp-lang-btn-bg)!important;color:#000000!important;font-family:inherit!important;font-size:0.82rem!important;font-weight:700!important;cursor:pointer!important;transition:background .15s;outline:none!important;box-shadow:none!important;line-height:1!important;flex-shrink:0!important;text-transform:none!important;letter-spacing:0!important;}
.jp-lang-globe:hover,.jp-lang-globe:focus,.jp-lang-globe:active{background:transparent!important;outline:none!important;box-shadow:none!important;}
.jp-lang-globe svg{flex-shrink:0;width:15px;height:15px;}
.jp-lang-code{font-size:0.82rem;font-weight:700;line-height:1;}
/* Liquid Glass header — matches clientes pages */
.jp-header{background:rgba(247,243,237,0.75)!important;backdrop-filter:blur(20px) saturate(180%)!important;-webkit-backdrop-filter:blur(20px) saturate(180%)!important;border-bottom:1px solid rgba(255,255,255,0.30)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,0.55),inset 0 -1px 0 rgba(74,26,122,0.08),0 2px 16px rgba(74,26,122,0.08)!important;transition:background 0.3s ease;position:relative;}
.jp-header::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.6) 30%,rgba(255,255,255,0.8) 50%,rgba(255,255,255,0.6) 70%,transparent 100%);pointer-events:none;}
.jp-header nav a{border-radius:8px;padding:4px 8px;transition:color 0.2s,background 0.2s;}
.jp-header nav a:hover{background:rgba(74,26,122,0.07);}
/* Desktop: hide toggle-only row, show desktop toggle in links row */
.jp-header .jp-nav-toggle-row { display: none; }
.jp-header .jp-nav-links-row .jp-lang-globe-desktop { display: inline-flex; }
/* Mobile logo — no shadow/glow */
.mob-logo{
  -webkit-filter: none !important;
  filter: none !important;
  transition: none !important;
}
/* Desktop: hide mobile-only elements */
.header-mobile,.mobile-header-padding{display:none!important;}

@media(max-width:768px){
  /* Hide desktop header, show mobile header */
  .jp-header{display:none!important;}
  .jp-lang-toggle-fixed{display:none!important;}
  .mobile-header-padding{display:block!important;height:128px;}

  .header-mobile{position:fixed;top:0;left:0;right:0;width:100%;z-index:99999;display:flex!important;flex-direction:column;background:rgba(247,243,237,0.75);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);overflow:visible!important;}
  .mob-bar-1,.mob-bar-3{width:100%;display:flex;align-items:center;box-sizing:border-box;flex-shrink:0;}
  .mob-bar-1{height:44px;background:transparent;justify-content:space-between!important;padding:0 12px;overflow:visible!important;position:relative;z-index:20;}
  .mob-bar-1-right{display:flex;align-items:center;gap:10px;}
  .mob-logo-link{display:block!important;flex-shrink:0;overflow:visible;}
  .mob-logo{height:178px!important;width:auto!important;padding:0!important;display:block!important;position:relative!important;z-index:20!important;margin-top:2px!important;margin-bottom:-98px!important;transform:translateX(15px) translateY(20px)!important;border-radius:50%!important;filter:none!important;-webkit-filter:none!important;box-shadow:none!important;}
  .mob-bar-1 .jp-lang-globe{border:none!important;outline:none!important;box-shadow:none!important;background:transparent!important;}
  .mob-bar-1 .jp-lang-globe:hover,.mob-bar-1 .jp-lang-globe:focus{border:none!important;outline:none!important;box-shadow:none!important;background:transparent!important;}
  .mob-bar-3{height:44px;flex-shrink:0;justify-content:flex-end;gap:8px;padding:0 12px;background:transparent;position:relative;z-index:10;}
  .mob-bar-3 a{display:inline-flex;width:auto;text-decoration:none!important;}
  .mob-bar-3 button{width:auto!important;height:34px!important;padding:0 22px!important;border-radius:50px!important;float:none!important;margin:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;color:#ffffff!important;font-family:'Quicksand',sans-serif!important;font-weight:700!important;font-size:0.82rem!important;box-shadow:0 3px 12px rgba(74,26,122,0.30);transition:transform .15s ease,box-shadow .15s ease;border:none!important;outline:none!important;cursor:pointer;}
  .mob-bar-3 button:active{transform:scale(0.96);box-shadow:0 2px 6px rgba(74,26,122,0.25);}
  .mob-bar-3 button:hover,.mob-bar-3 button:focus{border:none!important;outline:none!important;}
}
/* ── Custom hamburger trigger (contact page) ── */
#mob-hamburger-trigger{width:44px;height:44px;border:none!important;outline:none!important;box-shadow:none!important;background:transparent!important;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;flex-shrink:0;}
#mob-hamburger-trigger:focus,#mob-hamburger-trigger:hover{border:none!important;outline:none!important;box-shadow:none!important;background:transparent!important;}
.mob-ham-box{position:relative;width:20px;height:16px;display:block;}
.mob-ham-inner{position:absolute;top:7px;left:0;width:20px;height:2px;background-color:#4A1A7A;border-radius:1px;transition:background .2s ease;}
.mob-ham-inner::before,.mob-ham-inner::after{content:'';position:absolute;left:0;width:20px;height:2px;background-color:#4A1A7A;border-radius:1px;transition:transform .2s ease,top .2s ease,bottom .2s ease;}
.mob-ham-inner::before{top:-7px;}
.mob-ham-inner::after{bottom:-7px;top:auto;}
#mob-hamburger-trigger.is-active .mob-ham-inner{background:transparent!important;}
#mob-hamburger-trigger.is-active .mob-ham-inner::before{top:0;transform:rotate(45deg);}
#mob-hamburger-trigger.is-active .mob-ham-inner::after{bottom:0;top:auto;transform:rotate(-45deg);}
/* ── Slide panel ── */
#contact-mob-panel{position:fixed;top:0;left:0;height:100%;width:240px;z-index:100000;overflow-y:auto;background:#F7F3ED;box-shadow:4px 0 24px rgba(0,0,0,0.18);transform:translateX(-100%);transition:transform .28s cubic-bezier(0.4,0,0.2,1);will-change:transform;}
#contact-mob-panel.is-open{transform:translateX(0);}
/* ── Overlay ── */
#contact-mob-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999;background:rgba(0,0,0,0.4);opacity:0;transition:opacity .28s ease;pointer-events:none;}
#contact-mob-overlay.is-open{opacity:1;pointer-events:auto;}
/* ── Panel logo header ── */
.contact-panel-logo-wrap{display:block;padding:20px 12px 16px;border-bottom:1px solid rgba(74,26,122,0.10);text-align:center;}
.contact-panel-logo-wrap img{width:91%!important;max-width:91%!important;height:auto!important;background:transparent!important;border:none!important;box-shadow:none!important;filter:none!important;-webkit-filter:none!important;}
/* ── Panel menu items ── */
.contact-panel-menu{list-style:none;margin:0;padding:8px 0;}
.contact-panel-menu li a{display:block;padding:13px 20px;color:#000000!important;font-family:'Quicksand',sans-serif!important;font-weight:600!important;font-size:0.95rem!important;text-decoration:none!important;border-bottom:1px solid rgba(74,26,122,0.07);transition:background .15s,color .15s;}
.contact-panel-menu li a:hover{background:rgba(74,26,122,0.07)!important;color:#4A1A7A!important;}
/* ── Desktop: hide panel & overlay ── */
@media(min-width:769px){#contact-mob-panel,#contact-mob-overlay{display:none!important;}}


/* Map address link: show underline on hover so it reads as clickable */
.jp-map-link:hover,.jp-map-link:focus-visible{text-decoration:underline!important;}

/* Force light mode always: suppress browser auto-dark (Chrome Android, Samsung Internet) */
:root{color-scheme:only light;}
@media(prefers-color-scheme:dark){:root{color-scheme:only light!important;}html,body.jp-page{background:#F7F3ED!important;color:#0f172a!important;forced-color-adjust:none;}}