/* Location-change flow, extending the existing cream/yellow Figma design. */
#changeLocationModal .location-change-card {
  width: 360px; max-width: 100%; max-height: calc(100dvh - 36px);
  padding: 20px; border: 1px solid #f4d7a7; border-radius: 20px;
  color: var(--pf-brown); background: #fff; overscroll-behavior: contain;
}
#changeLocationModal .modal-header { margin: 0 0 8px; align-items: flex-start; gap: 10px; }
#changeLocationModal .modal-small-title { margin: 0 0 6px; font-size: 11px; line-height: 14px; color: var(--pf-brown-light); font-weight: 700; }
#changeLocationModal h2 { margin: 0; font-size: 18px; line-height: 25px; }
#changeLocationModal .close-btn { width: 28px; height: 28px; min-width: 28px; padding: 0; background: var(--pf-bg); color: var(--pf-brown-light); font-size: 22px; }
.location-change-intro { margin: 0 0 16px; font-size: 12px; line-height: 18px; color: var(--pf-brown-light); }
#changeLocationModal .current-location-box {
  display: flex; align-items: center; gap: 12px; padding: 14px; margin: 0 0 20px;
  border: 1px solid #f4d7a7; border-radius: 14px;
  background: linear-gradient(125deg, #fff 5%, var(--pf-cream) 100%);
}
#changeLocationModal .current-location-box img { display: block; flex-shrink: 0; }
#changeLocationModal .current-location-box > div { min-width: 0; }
#changeLocationModal .current-location-box span { display: block; margin: 0 0 5px; font-size: 11px; color: var(--pf-brown-light); }
#changeLocationModal .current-location-box strong { display: block; font-size: 14px; line-height: 21px; overflow-wrap: anywhere; }
#changeLocationForm .form-group { margin: 0 0 16px; }
#changeLocationForm label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 700; color: var(--pf-brown); }
#changeLocationForm input, #changeLocationForm select {
  display: block; width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px;
  border: 1px solid #eedcc1; border-radius: 12px; background: var(--pf-bg);
  color: var(--pf-brown); font: inherit; font-size: 14px; line-height: 22px;
}
#changeLocationForm input::placeholder { color: #a08c76; }
#changeLocationForm input:focus, #changeLocationForm select:focus { outline: 2px solid var(--pf-yellow); outline-offset: 1px; }
#newAddressHelp { display: block; margin-top: 6px; font-size: 11px; line-height: 17px; color: var(--pf-brown-light); }
#changeLocationForm .auto-sync-box { display: block; margin: 4px 0 18px; padding: 12px 14px; border: 0; border-radius: 12px; background: #fff7e3; }
#changeLocationForm .auto-sync-box strong { display: block; font-size: 12px; color: var(--pf-brown); }
#changeLocationForm .auto-sync-box p { margin: 5px 0 0; font-size: 11px; line-height: 18px; color: var(--pf-brown-light); }
.location-change-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
#changeLocationForm .location-change-actions button { width: auto; min-height: 36px; margin: 0; padding: 8px 14px; border: 0; border-radius: 24px; font-size: 12px; font-weight: 700; line-height: 20px; cursor: pointer; }
#changeLocationForm #submitLocationChangeBtn { order: 2; background: var(--pf-yellow); color: var(--pf-brown); }
#changeLocationForm #backToLocationBtn { order: 1; background: var(--pf-cream); color: var(--pf-brown-light); }
.location-change-actions button:focus-visible, .location-update-notice button:focus-visible { outline: 2px solid var(--pf-brown); outline-offset: 2px; }
.location-update-notice { margin: 0 -1px 18px; padding: 16px 20px; border: 1px solid #f4d7a7; border-radius: 20px; background: linear-gradient(125deg,#fff,var(--pf-card)); }
.location-update-notice header { display: flex; align-items: center; gap: 8px; }
.location-update-check { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--pf-yellow); font-size: 14px; }
.location-update-notice h2 { margin: 0; font-size: 16px; line-height: 24px; }
.location-update-notice p { margin: 10px 0 0; font-size: 13px; line-height: 20px; overflow-wrap: anywhere; }
.location-update-notice .location-update-meta { margin-top: 5px; font-size: 11px; color: var(--pf-brown-light); }
.location-update-notice footer { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.location-update-notice button { min-height: 32px; border: 0; padding: 6px 12px; border-radius: 20px; background: var(--pf-cream); color: var(--pf-brown); font-size: 12px; cursor: pointer; }
.location-update-notice #dismissLocationUpdateBtn { background: var(--pf-yellow); }
#locationHistoryCard { padding: 18px; border: 1px solid #f4d7a7; border-radius: 20px; scroll-margin-top: 128px; }
#locationHistoryCard .section-title { margin-bottom: 16px; font-size: 16px; }
#locationHistoryCard .internal-tag { border-radius: 20px; padding: 4px 8px; background: var(--pf-cream); color: var(--pf-brown-light); font-size: 11px; }
#locationHistoryList { display: flex; flex-direction: column; gap: 12px; }
#locationHistoryList .history-item { position: relative; margin: 0; padding: 12px 14px; border: 1px solid #eee8df; border-left: 3px solid var(--pf-yellow); border-radius: 12px; background: var(--pf-bg); }
#locationHistoryList .history-top { display: flex; flex-wrap: wrap; gap: 6px; justify-content: space-between; font-size: 13px; color: var(--pf-brown); }
#locationHistoryList .history-time { font-size: 11px; color: var(--pf-brown-light); }
#locationHistoryList .history-address { margin: 8px 0; font-size: 13px; line-height: 20px; overflow-wrap: anywhere; }
#locationHistoryList .history-reason { margin: 0; font-size: 11px; line-height: 18px; color: var(--pf-brown-light); }