/* ros-popup.css */

/* Overlay-Hintergrund */
.ros-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 9998;
}

/* Popup-Container */
.ros-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 420px; /* je nach Geschmack anpassen */
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  border-radius: 10px; /* abgerundete Ecken */
  z-index: 9999;
}

/* Header: Titel, Rahmen unten */
.ros-popup-header {
  margin-bottom: 15px;
  border-bottom: 1px solid #ececec;
}

.ros-popup-header h2 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
}

/* Body: Labels, Inputs */
.ros-popup-body label {
  display: block;
  margin: 8px 0 5px;
  font-weight: 500;
}

.ros-popup-body input[type="text"] {
  width: 100%;
  margin-bottom: 10px;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Buttons */
#ros-popup-search-btn,
#ros-popup-close-btn {
  margin-top: 5px;
  margin-right: 8px;
  font-size: 14px;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 4px;
  box-shadow: none;
}

/* Der "Suchen"-Button (Primär) */
#ros-popup-search-btn.button-primary {
  background: #0073aa;
  border-color: #0073aa;
  color: #fff;
}

#ros-popup-search-btn.button-primary:hover {
  background: #006799;
  border-color: #006799;
}

/* Der "Schließen"-Button (Sekundär) */
#ros-popup-close-btn.button-secondary {
  background: #eee;
  border-color: #ccc;
  color: #333;
}

#ros-popup-close-btn.button-secondary:hover {
  background: #ddd;
}

/* Ausgabebereich für Statusmeldungen */
#ros-popup-search-result {
  margin-top: 15px;
  min-height: 30px;
  font-size: 14px;
}
/* Der Container (zentriert) */
#ros-manual-popup-btn-wrapper {
  text-align: center;
  margin: 15px 0; 
}

/* Der eigentliche Button */
#ros-manual-popup-btn {
  display: inline-block;
  padding: 10px 22px;
  font-size: 15px;
  font-weight: 600; 
  color: #fff; 
  background: #0073aa;      /* Standard-WordPress-Farbe oder anpassen */
  border: 1px solid #0073aa;
  border-radius: 6px;       /* abgerundete Ecken */
  cursor: pointer;
  text-decoration: none;
  transition: background 0.3s, border-color 0.3s;
}

/* Hover-Effekt */
#ros-manual-popup-btn:hover {
  background: #006799; 
  border-color: #006799;
}
#signature-pad {
    touch-action: none; 
    cursor: crosshair; /* falls gewünscht */
}


#ros-popup-search-btn.is-disabled {
    opacity: .6;
    cursor: not-allowed;
}



/* Ergebnisbox im Popup */
#ros-popup-search-result {
    margin-top: 10px;
}

/* Modernes Notice-Design */
.ros-notice {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, .08);
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .08);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ros-notice__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ros-notice__title {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .2px;
    color: #111827;
}

.ros-notice__desc {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.35;
}

/* Pills / Countdown */
.ros-pill,
.ros-countdown {
    font-variant-numeric: tabular-nums;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .06);
    color: #111827;
    font-weight: 800;
}

/* Progressbar */
.ros-progress {
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(0, 0, 0, .06);
}

.ros-progress>span {
    display: block;
    height: 100%;
    width: 0;
    transition: width .25s linear;
    background: currentColor;
    opacity: .35;
}

/* Varianten */
.ros-notice--success {
    color: #059669;
    border-color: rgba(16, 185, 129, .28);
}

.ros-notice--warning {
    color: #b45309;
    border-color: rgba(245, 158, 11, .30);
}

.ros-notice--error {
    color: #dc2626;
    border-color: rgba(220, 38, 38, .25);
}

/* Mini-Button in der Notice */
.ros-notice__btn {
    border: 0;
    background: transparent;
    color: inherit;
    font-weight: 700;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 10px;
    cursor: pointer;
}

.ros-notice__btn:hover {
    background: rgba(0, 0, 0, .06);
}

/* Disabled Search Button */
#ros-popup-search-btn.is-disabled {
    opacity: .6;
    cursor: not-allowed;
}


/* =========================
   ROS – Kunden-Popup (Modern)
   ========================= */

/* Overlay milchig + Blur */
#ros-find-order-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: rgba(15, 23, 42, .38);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
    display: none;
}

/* Modal Card */
#ros-find-order-popup {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999;

    width: min(92vw, 820px);
    max-height: min(86vh, 760px);
    overflow: auto;
    /* wichtig für kleine Screens */

    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 18px;
    box-shadow: 0 26px 90px rgba(0, 0, 0, .30);

    padding: 18px 22px calc(16px + env(safe-area-inset-bottom, 0px));
    -webkit-font-smoothing: antialiased;
}

/* Titel + Linie */
#ros-find-order-popup h1,
#ros-find-order-popup h2 {
    margin: 0 0 14px;
    padding: 4px 0 14px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    font: 800 28px/1.15 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: #0f172a;
}

/* Text */
#ros-find-order-popup p {
    margin: 10px 0 16px;
    font: 600 15px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: #475569;
}

/* Labels + Inputs zentriert + NICHT zu breit */
#ros-find-order-popup label {
    display: block;
    max-width: 640px;
    margin: 14px auto 8px;
    font: 800 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: #111827;
}

#ros-find-order-popup input[type="text"],
#ros-find-order-popup input[type="tel"],
#ros-find-order-popup input[type="number"],
#ros-find-order-popup input {
    display: block;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;

    box-sizing: border-box;
    /* ✅ verhindert „zu breit“ */
    -webkit-appearance: none;
    appearance: none;

    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, .16);
    background: #fff;

    font: 700 16px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: #0f172a;

    transition: border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}

/* ✅ Fix: beim Anklicken NICHT an den Seiten abgeschnitten
   -> kein äußeres Outline, sondern INSET-Ring */
#ros-find-order-popup input:focus {
    outline: none !important;
    border-color: rgba(78, 111, 231, .60);
    box-shadow: inset 0 0 0 2px rgba(78, 111, 231, .28);
}

/* Buttons modern */
#ros-popup-search-btn,
#ros-popup-close-btn {
    border-radius: 12px;
    padding: 10px 18px;
    font: 800 14px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    cursor: pointer;
}

#ros-popup-search-btn {
    border: 1px solid rgba(78, 111, 231, .45);
    background: #fff;
    color: #0f172a;
}

#ros-popup-search-btn:hover {
    transform: translateY(-1px);
}

#ros-popup-close-btn {
    border: 1px solid rgba(0, 0, 0, .10);
    background: #0f172a;
    color: #fff;
}



/* =========================================================
   ROS Kunden-Popup – „Security Look“ + feinere Linien
   (unter dein bestehendes Popup-CSS setzen)
   ========================================================= */

/* Modal: feinere Border + ruhigerer Shadow + kleine „Security“-Topline */
#ros-find-order-popup {
    border: 1px solid rgba(2, 6, 23, .06) !important;
    box-shadow: 0 22px 70px rgba(0, 0, 0, .24) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .94) 0%, rgba(248, 250, 252, .92) 100%) !important;
}

#ros-find-order-popup::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg,
            rgba(34, 197, 94, .0),
            rgba(34, 197, 94, .45),
            rgba(59, 130, 246, .35),
            rgba(34, 197, 94, .0));
    pointer-events: none;
}

/* Overlay etwas „seriöser“ */
#ros-find-order-popup-overlay {
    background: rgba(15, 23, 42, .42) !important;
    -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
    backdrop-filter: blur(12px) saturate(120%) !important;
}

/* Titel: feinere Trennlinie + Security-Badge rechts */
#ros-find-order-popup h1,
#ros-find-order-popup h2 {
    border-bottom: 1px solid rgba(2, 6, 23, .06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
}

#ros-find-order-popup h1::after,
#ros-find-order-popup h2::after {
    content: "🔒 SSL-verschlüsselt";
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font: 800 12px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: #065f46;
    background: rgba(34, 197, 94, .10);
    border: 1px solid rgba(34, 197, 94, .18);
    white-space: nowrap;
}

/* ✅ Labels NICHT mittig – linksbündig wie die Inputs */
#ros-find-order-popup label {
    text-align: left !important;
    justify-content: flex-start !important;
    margin-left: auto !important;
    margin-right: auto !important;
    /* Block bleibt mittig im Popup, Text aber links */
}

/* Inputs: noch feinere Linien + sanfter Fokus (ohne „abgeschnitten“) */
#ros-find-order-popup input {
    border: 1px solid rgba(15, 23, 42, .12) !important;
}

#ros-find-order-popup input:focus {
    border-color: rgba(59, 130, 246, .45) !important;
    box-shadow: inset 0 0 0 2px rgba(59, 130, 246, .18) !important;
}

/* Buttons: etwas „cleaner“ (feinere Ränder) */
#ros-popup-search-btn {
    border: 1px solid rgba(59, 130, 246, .28) !important;
}

#ros-popup-close-btn {
    border: 1px solid rgba(2, 6, 23, .10) !important;
}


/* =========================================================
   Popup-Labels: kleiner, weniger fett, linksbündig (HART)
   ========================================================= */

/* Standard: alle Feld-Labels im Popup */
#ros-find-order-popup label {
    width: 100% !important;
    max-width: 640px !important;
    margin: 12px auto 6px !important;
    text-align: left !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    /* weniger dick als vorher */
    letter-spacing: .2px !important;
    color: rgba(15, 23, 42, .74) !important;
    /* dezent, aber gut lesbar */
}

/* Extra-hart nur für diese beiden (falls Theme sie anders anfässt) */
#ros-find-order-popup label[for="ros-popup-orderid"],
#ros-find-order-popup label[for="ros-popup-zip"] {
    text-align: left !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    color: rgba(15, 23, 42, .74) !important;
}

/* FALLS “PLZ:” KEIN <label> ist (z.B. <div> oder <p>) */
#ros-find-order-popup .plz-label,
#ros-find-order-popup .zip-label,
#ros-find-order-popup .ros-zip-label,
#ros-find-order-popup .ros-popup-zip-label {
    width: 100% !important;
    max-width: 640px !important;
    margin: 12px auto 6px !important;
    text-align: left !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .2px !important;
    color: rgba(15, 23, 42, .74) !important;
}


#ros-find-order-popup .ros-popup-zip-label {
    width: 100% !important;
    max-width: 640px !important;
    margin: 12px auto 6px !important;
    text-align: left !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .2px !important;
    color: rgba(15, 23, 42, .74) !important;
}


/* =========================================================
   Labels harmonisch zu Inputs (Padding-Align) + dezenter
   ========================================================= */

#ros-find-order-popup {
    --ros-field-w: 640px;
    --ros-input-pad-x: 14px;
    /* muss zu input padding-left passen */
}

/* Label: kleiner, weniger fett, links wie Input-Text (nicht wie Rahmen) */
#ros-find-order-popup label {
    max-width: var(--ros-field-w) !important;
    width: 100% !important;
    margin: 16px auto 7px !important;

    padding-left: var(--ros-input-pad-x) !important;
    /* ✅ harmoniert mit Placeholder/Text */
    text-align: left !important;

    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: .22px !important;
    line-height: 1.2 !important;
    color: rgba(15, 23, 42, .62) !important;
    /* dezent aber gut lesbar */
}

/* Inputs: gleiche Breite + Padding fixieren */
#ros-find-order-popup input {
    max-width: var(--ros-field-w) !important;
    width: 100% !important;
    margin: 0 auto !important;

    padding-left: var(--ros-input-pad-x) !important;
    padding-right: var(--ros-input-pad-x) !important;
}

/* Placeholder etwas ruhiger (wirkt “sicher/seriös”) */
#ros-find-order-popup input::placeholder {
    font-weight: 650 !important;
    color: rgba(15, 23, 42, .34) !important;
}

/* Falls "PLZ:" NICHT als <label> kommt (dein JS-Fallback setzt die Klasse) */
#ros-find-order-popup .ros-popup-zip-label {
    max-width: var(--ros-field-w) !important;
    width: 100% !important;
    margin: 16px auto 7px !important;

    padding-left: var(--ros-input-pad-x) !important;
    text-align: left !important;

    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: .22px !important;
    line-height: 1.2 !important;
    color: rgba(15, 23, 42, .62) !important;
}