/* =========================================
   JW Prayer Times — Frontend Styles (self-contained)
   Palette + tokens (scoped defaults)
========================================= */
:root{
  --jwpt-green:#003823;
  --jwpt-blue:#041E36;
  --jwpt-gold:#533100;
  --jwpt-crimson:#531A00;
  --jwpt-muted:#666;
  --jwpt-border:#ccd1d5;
  --jwpt-soft:#f6f8f9;
  --jwpt-focus:rgba(0,56,35,.18);
  --jwpt-bg:#fff;
}

/* =========================================
   Wrapper Card
========================================= */
.jwpt-wrap{
  background:#fff;
  border-radius:12px;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  padding:16px;
  margin-bottom:24px;
}
.jwpt-wrap > h3{
  margin:0 0 10px 0;
  color:var(--jwpt-blue);
  font-weight:700;
  letter-spacing:.2px;
}
.jwpt-note{
  color:var(--jwpt-muted);
  font-size:.9em;
  margin:4px 0 14px;
}

/* =========================================
   Rows & Inline Actions
========================================= */
.jwpt-row{ margin-bottom:12px; }
.jwpt-inline{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* Primary / Secondary buttons (IDs used by shortcode) */
#jwpt-set-btn{
  background:var(--jwpt-green);
  color:#fff;
  border:none;
  border-radius:8px;
  padding:8px 12px;
  font-weight:700;
  cursor:pointer;
}
#jwpt-set-btn:hover{ background:var(--jwpt-blue); }

#jwpt-show-map-btn{
  background:#fff;
  color:var(--jwpt-green);
  border:1px solid var(--jwpt-green);
  border-radius:8px;
  padding:8px 12px;
  font-weight:700;
  cursor:pointer;
}
#jwpt-show-map-btn:hover{ background:var(--jwpt-green); color:#fff; }

/* Status badge */
#jwpt-status{
  display:inline-block;
  min-width:120px;
  padding:6px 10px;
  border-radius:999px;
  font-size:.85em;
  text-align:center;
  border:1px solid var(--jwpt-border);
  color:#333;
  background:#fff;
}
#jwpt-status.is-idle   { border-color:var(--jwpt-blue);   color:var(--jwpt-blue); }
#jwpt-status.is-ok     { background:var(--jwpt-green);    color:#fff; border-color:var(--jwpt-green); }
#jwpt-status.is-warn   { background:var(--jwpt-gold);     color:#fff; border-color:var(--jwpt-gold); }
#jwpt-status.is-err    { background:var(--jwpt-crimson);  color:#fff; border-color:var(--jwpt-crimson); }

/* =========================================
   Map container
========================================= */
#jwpt-map{
  width:100%;
  height:320px;
  background:#e9eef1;
  border-radius:12px;
  box-shadow:inset 0 0 0 1px var(--jwpt-border);
  margin:8px 0 16px;
}
#jwpt-map.collapsed{ display:none; }

/* =========================================
   Inputs / selects
========================================= */
.jwpt-wrap input[type="text"],
.jwpt-wrap input[type="number"],
.jwpt-wrap select{
  width:100%;
  max-width:520px;
  padding:10px 12px;
  border:1px solid var(--jwpt-border);
  border-radius:8px;
  font-size:.95em;
  background:#fff;
  color:#222;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.jwpt-wrap select{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--jwpt-blue) 50%),
    linear-gradient(135deg, var(--jwpt-blue) 50%, transparent 50%),
    linear-gradient(to right, #fff, #fff);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px),
    calc(100% - 2.2em) .4em;
  background-size:6px 6px, 6px 6px, 1px 2em;
  background-repeat:no-repeat;
  padding-right:2.2em;
}
.jwpt-wrap input:focus,
.jwpt-wrap select:focus{
  outline:none;
  border-color:var(--jwpt-green);
  box-shadow:0 0 0 3px var(--jwpt-focus);
}

.jwpt-wrap label{
  display:inline-block;
  font-weight:600;
  color:var(--jwpt-blue);
  margin-bottom:6px;
}

/* Coordinates: override inline widths */
#jwpt-lat,#jwpt-lng,#jwpt-tz{ width:100% !important; max-width:520px; }

/* Offsets — optional chip style (if markup wrapped) */
#jwpt-offsets-row .jwpt-offset-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--jwpt-soft);
  border:1px solid var(--jwpt-border);
  border-radius:999px;
  padding:6px 10px;
  margin:4px 8px 0 0;
  font-size:.9em;
}
#jwpt-offsets-row input[type="number"]{
  width:70px;
  padding:6px 8px;
  border-radius:8px;
  border:1px solid var(--jwpt-border);
  background:#fff;
}

/* Save button */
#jwpt-save-btn{
  background:var(--jwpt-green);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:10px 14px;
  font-weight:700;
  min-width:200px;
  cursor:pointer;
}
#jwpt-save-btn:hover{ background:var(--jwpt-blue); }

/* =========================================
   Prayer times table
========================================= */
.jwpt-wrap table.widefat.striped{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.jwpt-wrap table.widefat.striped tbody tr{
  border-bottom:1px solid #eef1f3;
}
.jwpt-wrap table.widefat.striped tbody tr:nth-child(odd){
  background:#fafcfd;
}
.jwpt-wrap table.widefat.striped td{
  padding:12px 14px;
  font-size:.95em;
}
.jwpt-wrap table.widefat.striped td:first-child{
  width:40%;
  color:var(--jwpt-blue);
  font-weight:600;
}
.jwpt-wrap .jwpt-note{
  margin-top:10px;
  font-size:.85em;
  color:var(--jwpt-muted);
  background:#f8fafb;
  border:1px solid var(--jwpt-border);
  border-radius:8px;
  padding:8px 10px;
}

/* =========================================
   Responsive niceties
========================================= */
@media (max-width:768px){
  .jwpt-inline {
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-between;
  }
  .jwpt-inline .button {
    flex:1 1 auto;
    min-width:45%;
    text-align:center;
  }
}


/* --- Selects: prevent cut-off & improve readability --- */
.jwpt-wrap select {
  max-width: 100% !important;   /* override inline max-widths */
  min-height: 40px;
  line-height: 1.2;
  font-size: 1rem;
  padding-right: 2.6em;         /* leave space for arrow */
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%,
    calc(100% - 2.4em) .4em;
}

/* If you want extra-wide on specific ones, uncomment:
#jwpt-method, #jwpt-timeformat, #jwpt-asr, #jwpt-angle { max-width: 720px !important; }
*/

/* --- Status: plain text only --- */
#jwpt-status {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  min-width: 0 !important;
  color: inherit !important;
  font-weight: 600;
}

/* --- Map: always visible (your inline CSS had display:none) --- */
#jwpt-map {
  display: block !important;
  width: 100%;
  height: 320px;
  border: 1px solid #ccd1d5;
  border-radius: 12px;
}

/* --- Optional: timezone chip overlay in the map --- */
#jwpt-map { position: relative; }
#jwpt-map .jwpt-tz-chip {
  position: absolute; top: 10px; left: 10px; z-index: 1000;
  background: rgba(255,255,255,.95);
  border: 1px solid #ccd1d5;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: .85em;
  color: #041E36;
  pointer-events: none;
}


.jwpt-info{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; background:#fff; border:1px solid #ccd1d5; border-radius:12px;
  padding:10px 12px; margin-bottom:12px;
}
.jwpt-info-main strong{ color:#041E36; }
.jwpt-info-sub{ color:#555; font-size:.9em; }
.jwpt-info-actions .button{ border-radius:8px; }
.jwpt-info-actions .jwpt-danger{
  background:#fff; color:#531A00; border:1px solid #531A00;
}
.jwpt-info-actions .jwpt-danger:hover{
  background:#531A00; color:#fff;
}


.jwpt-actions {
  display:flex;
  align-items:center;
  gap:10px;
}

.jwpt-status,
#jwpt-status,
#jwpt-status-save {
  display:inline-block;
  padding:4px 8px;
  border-radius:9999px;
  background:#f3f4f6;   /* neutral chip */
  color:#041E36;
  font-size:12px;
  line-height:1.2;
}


/* =========================================
   Change / Reset buttons (same layout as Set/Pick)
========================================= */
#jwpt-change-btn {
  background:#fff;
  color:var(--jwpt-blue);
  border:1px solid var(--jwpt-blue);
  border-radius:8px;
  padding:8px 12px;
  font-weight:700;
  cursor:pointer;
}
#jwpt-change-btn:hover {
  background:var(--jwpt-blue);
  color:#fff;
}

#jwpt-reset-btn {
  background:#fff;
  color:var(--jwpt-crimson);
  border:1px solid var(--jwpt-crimson);
  border-radius:8px;
  padding:8px 12px;
  font-weight:700;
  cursor:pointer;
}
#jwpt-reset-btn:hover {
  background:var(--jwpt-crimson);
  color:#fff;
}

/* =========================================
   Advanced Settings block
========================================= */
.jwpt-advanced {
  display:block;
  margin:18px 0;
  padding:0;
  border:1px solid var(--jwpt-border);
  border-radius:12px;
  background:var(--jwpt-soft);
}

.jwpt-advanced > summary {
  display:block;
  width:100%;
  padding:12px 16px;
  font-weight:700;
  color:var(--jwpt-blue);
  cursor:pointer;
  border-bottom:1px solid var(--jwpt-border);
  background:#f0f3f5;
  border-radius:12px 12px 0 0;
}
.jwpt-advanced[open] > summary {
  background:var(--jwpt-blue);
  color:#fff;
}

.jwpt-advanced details {
  margin:0;
  padding:12px 16px;
  border-top:1px solid var(--jwpt-border);
}
.jwpt-advanced details summary {
  font-weight:600;
  color:var(--jwpt-green);
  cursor:pointer;
  margin-bottom:6px;
}
.jwpt-advanced details[open] summary {
  color:var(--jwpt-blue);
}

.jwpt-advanced p {
  font-size:.85em;
  color:var(--jwpt-muted);
  margin:0 0 8px;
}

/* Advanced button prominence */
.jwpt-advanced > summary {
  text-align:center;
  font-size:1rem;
}
@media (max-width:768px) {
  .jwpt-advanced > summary {
    width:100%;
  }
}

/* =========================================
   Help text / sublabels
========================================= */
.jwpt-label-help {
  display:block;
  font-size:.8em;
  color:var(--jwpt-muted);
  margin-top:2px;
}



/* Saved header chips */
.jwpt-chip {
  display:inline-block;
  background:var(--jwpt-soft);
  border:1px solid var(--jwpt-border);
  border-radius:999px;
  padding:4px 10px;
  font-size:.8em;
  margin:2px 6px 2px 0;
  color:var(--jwpt-blue);
  white-space:nowrap;
}

.jwpt-info-sub {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:6px;
}