.wrapper {
	height: 100%;
	width: 100%;
}
.nav_bar {
	float: left;
	height: auto;
	width: 100%;
	margin: 0px;
}
.font_36_blue {
	font-size: 36px;
	font-weight: 700;
	color: #2A415A;
	font-style: italic;
	
}

.font_24 {
	font-size: 36px;
	font-weight: 400;
	color: #333333;
}

.font_18 {
	font-size: 18px;
	font-weight: 400;
	color: #000;
	line-height: 24px;
	
}

.font_18_blue {
	font-size: 18px;
	font-weight: 700;
	color: #2A415A;
	
}
.font_14 {
	font-size: 14px;
	font-weight: 700;
	color: #000;
}

.font_16 {
	font-size: 16px;
	font-weight: 400;
	color: #333;
	line-height: 21px;
}

.font_14_blue {
	font-size: 14px;
	font-weight: 700;
	color: #004B8F;	
}
.font_12 {
	font-size: 12px;
	font-weight: 400;
	color: #000;
	
}
.font_12_blue {
	font-size: 12px;
	font-weight: 400;
	color: #004B8F;
}
a.link:link {
	color: #0099FF;
	text-decoration: none;
}
a.link:visited {
	text-decoration: none;
	color: #3399FF;
}
a.link:hover {
	text-decoration: none;
	color: #000;
}
a.link:active {
	text-decoration: none;
	color: #ccc;
}

a.footlink:link {
	color: #FFFFFF;
	text-decoration: none;
}
a.footlink:visited {
	text-decoration: none;
	color: #FFFFFF;
}
a.footlink:hover {
	text-decoration: none;
	color: #FF6;
}
a.footlink:active {
	text-decoration: none;
	color: #FFF;
}
.scale-table {
	border-collapse: separate;
	border-spacing: 0;	
	width: 100%;
}
.scale-title {
	padding-left: 10px;
	padding-top: 6px;
	padding-bottom: 6px;
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	background: #8E111F;
/*
    background: -moz-linear-gradient(top, #3a5a7d 0%, #2a415a 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3a5a7d), color-stop(100%, #2a415a));
    background: -webkit-linear-gradient(top, #3a5a7d 0%, #2a415a 100%);
    background: -o-linear-gradient(top, #3a5a7d 0%, #2a415a 100%);
    background: -ms-linear-gradient(top, #3a5a7d 0%, #2a415a 100%);
    background: linear-gradient(top, #3a5a7d 0%, #2a415a 100%);	border-bottom-width: 2px;
*/
	border-bottom-style: solid;
	border-bottom-color: #ccc;
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-left-style: solid;
	border-top-color: #ccc;
	border-right-color: #ccc;
	border-left-color: #ccc;
	text-align: center;
	text-shadow: rgb(3, 3, 3) 2px 2px 2px;
	font-family: "Playfair Display", serif;
}
.scale-foot {
	-moz-border-radius-bottomleft:0;
	-moz-border-radius-bottomright:0;
	-webkit-border-bottom-left-radius:0;
	-webkit-border-bottom-right-radius:0;
	border-bottom-left-radius:0;
	border-bottom-right-radius:0;
}
.scale-title {
	-moz-border-radius-topleft:0;
	-moz-border-radius-topright:0;
	-webkit-border-top-left-radius:0;
	-webkit-border-top-right-radius:0;
	border-top-left-radius:0;
	border-top-right-radius:0;
}
.scale-break {
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #999;
	text-align: center;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 20px;
	color: #fff;
    background: #6D0D17;
	font-size: 18px;
	font-weight: 700;
	text-shadow: rgb(3, 3, 3) 2px 2px 2px;
	font-weight: bold;
}
.scale-head {
	background-color: #333;
	font-size: 14px;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	padding: 5px;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #999;
}
.scale-data {
  background-color: rgba(255,255,255,0.7);
  font-size: 13px;
  color: #000;
  text-align: center;
  padding: 5px;
  border-top-width: 2px;
  border-top-style: solid;
  border-top-color: #999;
}
.scale-data:first-child {
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #333;
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: #333;
}
.scale-data:last-child {
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #333;
}
.scale-group {
  background-color: rgba(255,255,255,0.7);
  font-size: 13px;
  color: #000;
  text-align: left;
  padding: 5px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #333;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #333;
}
.scale-span {
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #333;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #333;
}
.scale-foot {
	background-color: #333;
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 12px;
	font-weight: Normal;
	color: #06C;
	background: #333; /* Old browsers */
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #999;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #666;
	border-bottom-color: #666;
	border-left-color: #666;
}
.trip-name {
	font-size: 14px;
	text-align: left;
}
.trip-load {
	font-size: 16px;
	font-weight: bold;
}
.trip-price {
	font-size: 14px;
}
.trip-spots {
	font-size: 16px;
	font-weight: bold;
}
.call-btn {
	color: red;
	text-shadow: -1px -1px 0 #333,  
				  1px -1px 0 #333,
				 -1px 1px 0 #333,
				  1px 1px 0 #333;
	margin-top: 5px;
}
td.filter {
	width: 95%;
	padding-left: 10px;
}
.trip-comments {
	font-size: 14px

}
td.filter > label {
	font-weight: normal;
}
hr.filter {
	margin-top: 3px;
	margin-bottom: 8px;
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
}
.scale-head a:hover,
.scale-head a:visited,
.scale-head a:link
{
	color: white;
}
.rates-table > tbody > tr:nth-child(odd) {
	background: #FFC;
} 
.rates-table > tbody > tr:nth-child(even) {
	background: #FFF;
} 
.rates-table > tbody > tr:first-child {
	background: #9CF;
}
.rates-table > tbody > tr:last-child {
	background: #FFF;
} 
.trip-icons {
	display: block;
	float: right;
	color: #333;
}
.eta-title, .rent-title {
	height: auto;
	width: 100%;
	margin-top: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #036;
	background-color: #9CF;
	padding-left: 5px;
	border-radius: 4px 4px 0px 0px;
	-moz-border-radius: 4px 4px 0px 0px;
	-webkit-border-radius: 4px 4px 0px 0px;
}
.rent-gear {
	height: auto;
	padding-top: 5px;
	padding-bottom: 5px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #999;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #999;
	padding-left: 5px;
	background: white;
	width: 66%;
}
.rent-price {
	height: auto;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 5px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #999;
	background-color: #FFC;
	padding-left: 10px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #999;
	width: 34%;
}
.eta-boat {
	height: auto;
	padding-top: 5px;
	padding-bottom: 5px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #999;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #999;
	padding-left: 5px;
	background: white;
}
.eta-date {
	height: auto;
	padding-top: 5px;
	padding-bottom: 5px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #999;
	background-color: #FFC;
	padding-left: 10px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #999;
}
.eta-time {
	height: auto;
	padding-top: 5px;
	padding-bottom: 5px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #999;
	background-color: #FFC;
	padding-left: 10px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #999;
}
.trip-info .lbl, .trip-depart .lbl, .trip-return .lbl, .trip-load .lbl, .trip-price .lbl, .trip-spots .lbl {
	font-weight: bold;
	font-size: 14px;
}
.trip-info .lbl, .trip-depart .lbl, .trip-return .lbl {
	float: left;
	clear: both;
	display: block;
}
.rent-table {
	width: 100%;
}
.photo_gallery_container {
	text-align: center;
	padding: 4px;
	background-color: #FFF;
	-webkit-box-shadow: 0px 25px 20px -16px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 25px 20px -16px rgba(0,0,0,0.75);
	box-shadow: 0px 25px 20px -16px rgba(0,0,0,0.75);
	margin-bottom: 20px;
	border: 1px solid #999;
	margin-right: 3px;
	margin-left: 3px;
	border-radius: 4px 4px 4px 4px;
	-moz-border-radius: 4px 4px 4px 4px;
	-webkit-border-radius: 4px 4px 4px 4px;
}
.photo_gallery_img {
	max-width: 100%;
	max-height: 240px;
	margin: auto;
}
.section1 {
	height: auto;
	padding: 10px;
}
.announcement_text {
	color: #000000;
	display: inline-block;
	font-family: Cabin,sans-serif;
	font-size: 16px;
}
.contact-row {
	margin-top: 10px;
	margin-bottom: 10px;
}
.contact-submit {
	margin-top: 10px;
	text-align: center;
}
textarea.contact-message {
	height: 150px;
}
.add-shadow {
	border: 4px solid #FFF;
	-webkit-box-shadow: 0px 0px 8px 3px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 0px 8px 3px rgba(0,0,0,0.3);
	box-shadow: 0px 0px 8px 3px rgba(0,0,0,0.3);
}
.pod_bottom2 {
	width: 100%;
}
.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}
a.audio_count {
    display: inline-block;
    cursor: pointer;
    font-size: 14px;
    padding: 8px;
    text-decoration: none;
    height: 14px;
    width: 14px;
    background-image: url(../images/icons/but_audio_play.png);
    background-position: bottom;
}
a.audio_count:hover {
    background-image: url(../images/icons/but_audio_play.png);
}
a.audio_count:active {
    position:relative;
    top:1px;
}
a.down {
    background-image: url(../images/icons/but_audio_no.png);
}
a.down:hover {
    background-image: url(../images/icons/but_audio_no.png);
}
.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}
.with-gutter > [class*='col-'] {
    padding-right:15px;
    padding-left:15px;
}
.fish-report-date {
	vertical-align: top;
}
.scale-text-left {
	text-align: left;
}
ul.charter-guidelines {
}
.home-image {
	margin-bottom: 15px;
	margin-right: 30px;
}
.report_gallery {
	max-width: 75px;
	max-height: 75px;
}
#page-header  {
	margin-top: 15px;
}
.panel {
	background-color: #F7F7F7;
	-webkit-box-shadow: 0px -3px -3px 0px #333;
	-moz-box-shadow: 0px -3px -3px 0px #333;
	box-shadow: 0px -3px -3px 0px #333;
}
.report_img {
	width: 100%;
	border-radius: 5px;
	margin-bottom: 10px;
}
.spec-lbl {
	font-weight: bold;
}
.trip-selected {
	margin: 20px 0 20px 0;
	padding: 20px;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	background-color: #fff;
	border-radius: 6px;
	border: 1px solid rgb(230, 233, 252);
}
.form-inline .row {
	margin-bottom: 15px;
}
.trip-details h4 {
	text-shadow: none;
}
td.chk {
	padding-right: 5px;
}
.manifest-alert ul {
	color: #31708f;
    list-style-type: disc;
    margin-left: 20px;
}
#content {
	font-size: 14px;
}
input, select, textarea {
	color: #333;
}
.table-striped>tbody>tr:nth-of-type(odd) {
	color: #333;
}
label[for^=payment_amount_] {
	margin-top: 10px;
	margin-right: 20px;
}
.payment_amount {
	margin-top: 10px;
}
.pass {
	font-family: "Courier New", Courier, monospace;
	color: #333333;
	font-size: 1.2em;
}
.scale-light {
	background: #fff;
}
.scale-dark {
	background: #f0f0f0;
}
.highlight {
	background: #bce6f6 !important;
	cursor: pointer;
}
h1, h2, h3, h4, h5 {
	font-family: "Playfair Display", serif;
}
p {
	color: #000;
}

/* (2026-10-13: the nav / logo / button rules once copied here from the marketing site are
   gone: style.css v18 and rr3.css cover all of them; Simon measured computed styles
   identical with and without, except the dropdown hover indent, now 20px as on www.) */

/* Trip-details box (usersignin.php): white card, grey border, maroon top rule
   and header row, in place of Bootstrap's blue alert-info / bg-primary.
   Simon, 2026-10-13, for John: maroon and greys. */
.trip-details.alert-info {
  background: #fff;
  border: 1px solid #ccc;
  border-top: 4px solid #8E111F;
  border-radius: 0;
  color: #333; }
.trip-details.alert-info h1, .trip-details.alert-info h2,
.trip-details.alert-info h3, .trip-details.alert-info h4 {
  color: #333; }
.trip-details.alert-info .bg-primary {
  background: #8E111F !important;
  color: #fff;
  padding-block: .35rem; }

/* Buttons, Bootstrap 5.3 variables (hover/focus/active come with them).
   Primary: maroon, darker on hover. Secondary: a quiet grey outline. */
.btn-primary {
  --bs-btn-bg: #8E111F; --bs-btn-border-color: #8E111F;
  --bs-btn-hover-bg: #6D0D17; --bs-btn-hover-border-color: #6D0D17;
  --bs-btn-active-bg: #6D0D17; --bs-btn-active-border-color: #6D0D17;
  --bs-btn-focus-shadow-rgb: 142,17,31;
  --bs-btn-disabled-bg: #8E111F; --bs-btn-disabled-border-color: #8E111F; }
.btn-secondary {
  --bs-btn-color: #333; --bs-btn-bg: #fff; --bs-btn-border-color: #999;
  --bs-btn-hover-color: #333; --bs-btn-hover-bg: #ccc; --bs-btn-hover-border-color: #999;
  --bs-btn-active-color: #333; --bs-btn-active-bg: #ccc; --bs-btn-active-border-color: #999;
  --bs-btn-focus-shadow-rgb: 153,153,153; }

/* Notices (any .alert-info other than the trip box): light grey panel, maroon
   left rule. A notice, not a data card, so it does not pair with .trip-details.
   Simon, 2026-10-13. */
.alert-info:not(.trip-details) {
  --bs-alert-bg: #f5f5f5;
  --bs-alert-border-color: #ccc;
  --bs-alert-color: #333;
  --bs-alert-link-color: #8E111F;
  border-left: 4px solid #8E111F;
  border-radius: 0; }
.alert-info:not(.trip-details) a { color: #8E111F; }

/* Playfair figures at capital height ("15 Day Trip" in the box title) */
h1, h2, h3, h4, h5, .playfair-display { font-variant-numeric: lining-nums; }

/* One corner radius: square alerts too (status colours stay). Simon. */
.alert { border-radius: 0; }

/* ---- S3 (Simon): HTMX pieces ---- */
/* Modals: a backdrop dark enough to separate the dialog from the page */
dialog::backdrop { background: rgba(0,0,0,.55); }
/* One sans in the modal body (it was Open Sans) */
dialog p { font-family: Poppins, sans-serif; }
/* "Showing 10 of 15 trips" / "Showing all 15 trips" (was #0066cc on #333, 2.27:1) */
td.scale-foot, td.scale-foot div { color: #F2C14E !important; }  /* gold, 7.53:1 on #333 (John: yellow); covers the "Showing all" text with no inner div */
/* Back-to-top: maroon and square, not the theme cyan circle */
.go-top { background-color: #8E111F !important; border-radius: 0 !important; }
.go-top:hover { background-color: #6D0D17 !important; }

/* ---- S4 (Simon) ---- */
/* Schedule on phones: the trips first, then the passport note and filters (the first trip was ~1,300px down; now 401px) */
@media (max-width:991.98px){.container.mt-5 > .row > .col-lg-9.order-lg-first{order:-1}}
/* "Trip In Progress": was inline navy in a mistyped "Ariel"; now a class */
.trip-in-progress{font-size:13px;color:#666}
/* Passport note: Bootstrap danger red beside the maroon read as a second, louder brand red */
.col-lg-3.order-lg-last span.text-danger,.col-lg-3.order-lg-last span.text-danger b{color:#8E111F!important}
.col-lg-3.order-lg-last p.text-danger{color:#333!important}
/* Form fields: square, grey edge (they were lavender #E6E9FC, radius 3px), maroon focus */
.form-control{border-radius:0!important;border-color:#ccc!important}
.form-control:focus{border-color:#8E111F!important;box-shadow:0 0 0 .2rem rgba(142,17,31,.18)!important}
/* Checkboxes (trip-length filter) in the brand colour, not browser blue */
input[type=checkbox],input[type=radio]{accent-color:#8E111F}
/* "You have selected" (.trip-selected, check_email.php): the house box */
.trip-selected{border:1px solid #ccc!important;border-top:4px solid #8E111F!important;border-radius:0!important}

/* ---- S5 (Simon) ---- */
/* Schedule: one maroon. The title bar keeps #8E111F; month rows become light section breaks (they were #6D0D17, a near-miss of the same red); no black text shadows */
td.scale-title{text-shadow:none!important}
td.scale-break{background:#e9e9e9!important;color:#8E111F!important;text-shadow:none!important;border-top:2px solid #8E111F!important;letter-spacing:.04em}
/* Month breaks: the same 1px #333 side borders as the trip rows (John) */
td.scale-break{border-left:1px solid #333!important;border-right:1px solid #333!important}

/* Select boxes: square and grey-edged like the text fields, maroon focus (Simon S6, John) */
.form-select,select.form-control,select{border-radius:0!important;border-color:#ccc!important}
.form-select:focus,select:focus{border-color:#8E111F!important;box-shadow:0 0 0 .2rem rgba(142,17,31,.18)!important}

/* Form fields, one size: selects match the theme's text fields (48px, 18px); every field gets right padding (the date picker icon sat on the edge). Simon S7, John. */
.form-select{height:48px!important;font-size:18px!important;padding:0 40px 0 12px!important;line-height:46px!important;background-position:right 12px center!important}
.form-control{padding-right:12px!important}

/* Input addons ("$"): square, grey edge like the fields, a quiet grey fill that reads as a label, not a field (Simon S8, John) */
.input-group-text{border-radius:0!important;border-color:#ccc!important;background-color:#e9e9e9!important;color:#333!important}
.input-group > :first-child,.input-group > :last-child{border-radius:0!important}

/* ---- Compact forms (2026-10-13, John: "the more compressed form look like on Point Loma") ----
   terms.php, user_profile_add.php, user_profile_edit.php and includes/nmi_card_fields.php: labels above
   the fields, related fields side by side on a Bootstrap grid (.row.g-3), one white section per group,
   one column on phones. Layout only: the fields keep S6-S8 (square, #ccc, maroon focus, one size 48px/18px). */
.cf-wrap{max-width:860px;margin-left:auto;margin-right:auto}
.cf-wrap .trip-selected{margin:.5rem auto 1rem}
.cf-section{background:#fff;border:1px solid #ccc;border-radius:0;padding:1.25rem;margin-bottom:1rem}
.cf-title{font-size:1.35rem;color:#333;text-align:left;margin:0 0 .75rem;padding-bottom:.5rem;border-bottom:1px solid #e9e9e9}
.cf-title-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid #e9e9e9}
.cf-title-row .cf-title{margin:0;padding:0;border:0}
.cf-form .form-label{display:block;margin-bottom:.25rem;font-size:14px;font-weight:600;color:#333}
.cf-form .required > .form-label::after{content:" *";color:#8E111F}
.cf-star{color:#8E111F}
.cf-note{font-size:14px;color:#555;margin:0 0 .75rem}
.cf-section > .cf-note:last-child{margin:.75rem 0 0}
.cf-form .alert{margin-bottom:.75rem}
/* Checkboxes with their sentence as one label */
.cf-checks{display:flex;flex-direction:column;gap:.5rem}
.cf-check{display:flex;align-items:flex-start;gap:.6rem;margin:0;font-size:15px;color:#333;cursor:pointer}
.cf-check input{flex-shrink:0;width:18px;height:18px;margin-top:.15rem}
.cf-terms{margin-top:.75rem;padding:.75rem 1rem;border:1px solid #ccc;background:#f5f5f5;max-height:320px;overflow:auto;font-size:14px}
/* Payment options: the radios in one line (overrides the 10px top margins above) */
.cf-options{margin-bottom:.75rem}
.cf-radios{display:flex;flex-wrap:wrap;align-items:center;row-gap:.25rem}
.cf-radios .payment_amount{margin:0}
.cf-radios label[for^=payment_amount_]{margin:0 1.25rem 0 .35rem}
/* Totals: a grey panel, label left, figure right, Total in bold under a rule */
.cf-totals{background:#f5f5f5;border:1px solid #ccc;padding:.5rem 1rem;margin-bottom:1rem}
.cf-total-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.3rem 0}
.cf-total-row > label{margin:0;font-size:15px;color:#333}
.cf-total-row .input-group{flex:0 0 190px;width:190px}
.cf-total-row .form-control{text-align:right}
.cf-grand{border-top:1px solid #ccc;margin-top:.25rem;padding-top:.6rem}
.cf-grand > label,.cf-grand .form-control{font-weight:700}
/* NMI Collect.js containers: the same 48px as the other fields; the iframe brings its own padding */
.form-control.cf-collect{height:48px;padding:0!important;overflow:hidden}
.form-control.cf-collect iframe{display:block;width:100%!important;height:46px!important;border:0}
.form-control.cf-collect:focus-within{border-color:#8E111F;box-shadow:0 0 0 .2rem rgba(142,17,31,.18)}
/* Saved-card radios (NMI): maroon like the other radios, the same size of text as the check rows */
.cf-form .form-check-input{border-color:#999}
.cf-form .form-check-input:checked{background-color:#8E111F;border-color:#8E111F}
.cf-form .form-check-input:focus{border-color:#8E111F;box-shadow:0 0 0 .2rem rgba(142,17,31,.18)}
.cf-form .form-check-label{font-size:15px;color:#333}
.cf-help{display:inline-block;margin-top:.25rem;font-size:14px;color:#8E111F;text-decoration:underline}
.cf-submit{display:flex;justify-content:flex-end;margin-bottom:2rem}
@media (max-width:575.98px){
  .cf-section{padding:1rem}
  .cf-submit .btn{width:100%}
}

/* ---- Account pages (Simon, John 17:13) ---- */
/* The account page's photo: square frame */
.img-thumbnail{border-radius:0!important}
/* Account menu (includes/user_nav.php): the marketing sidebar's treatment: #333 rows, hairlines, maroon current item */
.list-group.user-nav{border-radius:0;--bs-list-group-border-color:#ccc}
.list-group.user-nav > a.list-group-item{background:transparent;border:0;border-bottom:1px solid #ccc;border-radius:0!important;color:#333;padding:10px 0 10px 14px;font-weight:400}
.list-group.user-nav > a.list-group-item:hover{color:#8E111F;background:transparent}
.list-group.user-nav > a.list-group-item.active{color:#8E111F;font-weight:600;border-left:3px solid #8E111F;padding-left:11px;background:transparent}
/* Placeholders: readable, 4.54:1 (they were #C4C5D0, 1.72:1) */
.form-control::placeholder{color:#767676;opacity:1}

/* Helper notes a step below the field text (rr3.css v13 lifted them to 18px). Simon. */
.container p.cf-note{font-size:15px!important;color:#555!important;line-height:1.5!important}

/* ---- Messages: a modal, not alert() (John, 2026-10-13; js/resos-alert.js, js/fields.js) ----
   #resos-alert is the same <dialog> as the sign-in modals (square, Bootstrap btn-primary = maroon, the backdrop
   above); the title in Playfair, the message in Poppins (dialog p), line breaks kept. A field a message points at:
   maroon outline and the message under it (aria-invalid, aria-describedby), never colour alone. */
#resos-alert{max-width:28rem;width:calc(100% - 2rem)}
#resos-alert h2{font-family:"Playfair Display",serif;color:#252525;margin-bottom:.75rem}
#resos-alert p{white-space:pre-line;color:#333}
.form-control[aria-invalid=true],.form-select[aria-invalid=true],select[aria-invalid=true]{border-color:#8E111F!important;box-shadow:0 0 0 .2rem rgba(142,17,31,.18)!important}
input[type=checkbox][aria-invalid=true]{outline:2px solid #8E111F;outline-offset:2px}
.field-error,.container p.field-error{margin:.3rem 0 0;font:600 14px/1.4 Poppins,sans-serif;color:#8E111F}  /* over rr3.css v13 .container p (18px #333) */
.field-error .fa{margin-right:.25rem}
/* usersignin.php: the show-password eye sits at the middle of its row; a message under the field must not pull it down */
.position-relative:has(.field-error) > div > .password-toggle-icon{top:24px}

/* Account page photo: a plain image, no mat or frame (Simon) */
.img-thumbnail{border:0!important;padding:0!important;background:none!important;border-radius:0!important}

/* Account menu below 992: the marketing section-nav's wrapping strip (rr3.css 2e/2g) via .list-group.mb-5;
   its current item is .active here, not .list-group-item-info, so mark it the same way. */
@media (max-width:991.98px){
 .list-group.user-nav > a.list-group-item.active{border-left:0!important;border-bottom:3px solid #8E111F!important;padding-left:7px!important}
}

/* ---- Password card (Simon, 2026-10-13; John 17:50: "a fresh take on this form") ----
   One contained card for every password page: userpassword.php (signed in), password_reset.php (the email link,
   and its spent-link state), password_new.php (after a plaintext sign-in); markup in includes/new_password_form.php.
   The house box (white, #ccc, 4px maroon top, as .trip-selected), no hr's and no right-aligned label column:
   labels above the fields (as .cf-form), fields at S7's one size. The meter is js/password.js's: data-level 0-4 on
   .pw-meter, the verdict written beside it, never colour alone. The rules hint is stacked under it at every width (Simon).
   .container p is 18px #333 in rr3.css v13, hence the !important on the lede. */
.pw-card{max-width:560px;margin:0 auto 48px;background:#fff;border:1px solid #ccc;border-top:4px solid #8E111F;border-radius:0;padding:28px 32px 32px}
.pw-card h2{font-family:"Playfair Display",Georgia,serif;font-size:28px;line-height:1.2;color:#252525;margin:0 0 6px;text-align:left}
.pw-card .pw-lede,.container .pw-card p.pw-lede{font-size:15px!important;color:#555!important;line-height:1.5!important;margin:0 0 24px}
.pw-card .form-label{display:block;font-size:14px;font-weight:600;color:#333;margin:0 0 6px;text-align:left}
.pw-card .pw-field{margin-bottom:20px}
.pw-card .pw-meter{height:6px;background:#e5e5e5;margin-top:8px}
.pw-card .pw-meter > span{display:block;height:100%;width:0;transition:width .2s,background-color .2s}
.pw-card .pw-meter[data-level="1"] > span{width:25%;background:#b02a37}
.pw-card .pw-meter[data-level="2"] > span{width:50%;background:#c77c02}
.pw-card .pw-meter[data-level="3"] > span{width:75%;background:#5a8f29}
.pw-card .pw-meter[data-level="4"] > span{width:100%;background:#2e7d32}
.pw-card .pw-hint{display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:1.45;color:#555;margin-top:6px}
.pw-card .pw-hint b{color:#333;font-weight:600}
.pw-card .pw-match{font-size:13px;margin-top:6px;color:#2e7d32}
.pw-card .pw-match:empty{display:none}
.pw-card .pw-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:28px;padding-top:20px;border-top:1px solid #e5e5e5}
.pw-card .pw-actions-only{margin-top:8px}
.pw-card .alert{margin:0 0 20px}
/* One text size inside the card: the notice at the lede's 15px (rr3.css lifts .container text to 18px); no bold in it,
   the heading carries the weight (Simon). */
.pw-card .alert,.pw-card .alert p{font-size:15px!important;line-height:1.5!important}
@media (max-width:575.98px){
  .pw-card{padding:22px 18px 24px}
  .pw-card .pw-actions .btn{width:100%}
}

/* ---- Busy: "Processing..." in place of blockUI (2026-10-14, John; js/busy.js, ported from Point-Loma-Resos) ----
   A modal <dialog> opened when a form is sent and closed when its answer arrives. The house box (white, square, 4px
   maroon top, as .pw-card and .trip-selected), a maroon ring on a light track, the message in Playfair and a short
   note in Poppins. The ring turns slowly and does not turn at all under prefers-reduced-motion (it pulses instead). */
#resos-busy{max-width:22rem;width:calc(100% - 2rem);border-top:4px solid #8E111F!important;background:#fff}
/* showModal() focuses the dialog itself (nothing in it takes focus); it is a status, not a control, so no focus ring. */
#resos-busy:focus,#resos-busy:focus-visible{outline:none}
#resos-busy .resos-busy-body{display:flex;flex-direction:column;align-items:center;text-align:center;padding:2rem 1.5rem 1.75rem}
#resos-busy .resos-busy-ring{display:block;width:56px;height:56px;border-radius:50%;border:4px solid #f0dcdf;border-top-color:#8E111F;animation:resos-busy-spin .9s linear infinite;margin-bottom:1.25rem}
#resos-busy p.resos-busy-title{font-family:"Playfair Display",Georgia,serif;font-size:22px;font-weight:700;line-height:1.25;color:#252525;margin:0 0 .4rem}
#resos-busy p.resos-busy-note{font-family:Poppins,sans-serif;font-size:14px;line-height:1.45;color:#555;margin:0}
@keyframes resos-busy-spin{to{transform:rotate(360deg)}}
@keyframes resos-busy-pulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){
  #resos-busy .resos-busy-ring{animation:resos-busy-pulse 1.6s ease-in-out infinite}
}

/* ---- Confirmation card (2026-10-14, John: "make it spiffier"; includes/thankyou.php) ----
   The house box (white, #ccc, 4px maroon top, as .pw-card): a maroon check, "You're booked!" in Playfair, the trip
   as a label/value list and the money as the email shows it (balance due bold over a hairline), what happens next
   with an icon per line, and the way on (schedule, My Trips). Two columns from 768px, one below. .ty-note is the
   same box for a new customer's account message (process.php). rr3.css lifts .container p to 18px #333, hence the
   !important on the card's own text sizes. */
.ty-card{max-width:760px;margin:24px auto 32px;background:#fff;border:1px solid #ccc;border-top:4px solid #8E111F;border-radius:0;padding:32px 36px 28px}
.ty-card .ty-head{text-align:center;padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid #e5e5e5}
.ty-card .ty-check{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:#8E111F;color:#fff;font-size:40px;line-height:1;margin-bottom:14px}
.ty-card h1{font-family:"Playfair Display",Georgia,serif;font-size:34px;line-height:1.15;color:#252525;margin:0 0 8px}
.ty-card .ty-lede,.container .ty-card p.ty-lede{font-size:17px!important;line-height:1.5!important;color:#444!important;margin:0}
.ty-card .ty-ref{display:inline-block;margin-left:6px;padding:1px 8px;border:1px solid #ccc;font-size:13px;letter-spacing:.03em;color:#555;white-space:nowrap}
.ty-card .ty-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:768px){.ty-card .ty-grid{grid-template-columns:1.2fr 1fr;gap:32px}}
.ty-card h2{font-family:"Playfair Display",Georgia,serif;font-size:20px;line-height:1.25;color:#252525;margin:0 0 12px;text-align:left}
.ty-card .ty-kv{margin:0}
.ty-card .ty-kv > div{display:flex;gap:12px;padding:7px 0;border-bottom:1px solid #f0f0f0;font-size:15px;line-height:1.45}
.ty-card .ty-kv dt{flex:0 0 110px;font-weight:400;color:#666}
.ty-card .ty-kv dd{flex:1;margin:0;font-weight:600;color:#333}
.ty-card .ty-money{width:100%;background:#f5f5f5;border-left:4px solid #8E111F;font-size:15px;line-height:1.45}
.ty-card .ty-money th,.ty-card .ty-money td{padding:7px 16px;font-weight:400;color:#333}
.ty-card .ty-money tr:first-child th,.ty-card .ty-money tr:first-child td{padding-top:12px}
.ty-card .ty-money td{text-align:right;white-space:nowrap}
.ty-card .ty-money tr.ty-due th,.ty-card .ty-money tr.ty-due td{border-top:1px solid #ccc;font-weight:700;color:#252525;padding-bottom:12px}
.ty-card .ty-next{margin-top:28px}
.ty-card .ty-next ul{list-style:none;margin:0;padding:0}
.ty-card .ty-next li{display:flex;gap:12px;align-items:flex-start;padding:8px 0;font-size:15px;line-height:1.5;color:#333}
.ty-card .ty-next li > i{flex:0 0 22px;font-size:20px;line-height:1.1;color:#8E111F;margin-top:1px}
.ty-card .ty-next li.ty-warn{background:#fdf3f4;padding:10px 12px;border-left:4px solid #8E111F}
.ty-card .ty-next a,.ty-card .ty-head a{color:#8E111F;text-decoration:underline}
.ty-card .ty-next .btn{text-decoration:none}
.ty-card .ty-next .btn-primary,.ty-card .ty-next .btn-primary:hover{color:#fff}
.ty-card .ty-next .btn-outline-secondary{color:#333}
.ty-card .ty-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid #e5e5e5}
.ty-card.ty-note{padding:22px 36px;margin-top:-16px}
.ty-card.ty-note p,.container .ty-card.ty-note p{font-size:15px!important;line-height:1.5!important;color:#333!important;margin:0}
.ty-card.ty-note .pass{display:inline-block;font:700 20px/1.3 "Courier New",Courier,monospace;letter-spacing:.06em;color:#252525;background:#f5f5f5;padding:4px 10px;border:1px solid #ccc}
@media (max-width:575.98px){
  .ty-card{padding:24px 18px 22px;margin-top:12px}
  .ty-card h1{font-size:28px}
  .ty-card .ty-kv dt{flex-basis:96px}
  .ty-card .ty-actions .btn{flex:1 1 100%}
  .ty-card.ty-note{padding:18px}
}

/* ---- Guest list (2026-10-14, guestlist.php; ported from Baja Star) ----
   The page in the compact-form look (.cf-wrap, .cf-section per person, labels above, two fields a row from 576px).
   The head is the house box (.gl-card: white, #ccc, 4px maroon top); each person's section is numbered, with a tag
   (holder, named, not named yet: the open ones in maroon outline). The expiry warning is the page's alert. */
.gl-wrap{margin-top:24px;margin-bottom:24px}
.gl-card{background:#fff;border:1px solid #ccc;border-top:4px solid #8E111F;border-radius:0;padding:24px 28px;margin-bottom:1rem}
.gl-card h1{font-family:"Playfair Display",Georgia,serif;font-size:32px;line-height:1.15;color:#252525;margin:0 0 8px}
.gl-card .gl-eyebrow{display:block;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8E111F;margin-bottom:4px}
.gl-card p,.container .gl-card p{font-size:16px!important;line-height:1.5!important;color:#444!important;margin:0 0 8px}
.gl-card p.gl-passport,.container .gl-card p.gl-passport{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-weight:600;color:#8E111F!important}
.gl-card .gl-passport i{font-size:20px}
.gl-card a{color:#8E111F;text-decoration:underline}
.gl-person .cf-title{display:flex;align-items:center;gap:10px}
.gl-person .gl-num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#8E111F;color:#fff;font:600 15px/1 Poppins,sans-serif}
.gl-tag{display:inline-block;padding:2px 10px;border:1px solid #ccc;font-size:13px;color:#555;white-space:nowrap}
.gl-tag.gl-tag-open{border-color:#8E111F;color:#8E111F}
.gl-person .alert{font-size:15px}
p.gl-note,.container p.gl-note{font-size:15px!important;line-height:1.5!important;color:#555!important;background:#f5f5f5;border-left:4px solid #8E111F;padding:12px 16px;margin:0 0 1rem}
p.gl-note a{color:#8E111F}
@media (max-width:575.98px){
  .gl-card{padding:20px 18px}
  .gl-card h1{font-size:28px}
}
.ty-card .ty-next li.ty-guest{background:#f5f5f5;border-left:4px solid #8E111F;padding:12px 14px;margin:4px 0}
/* Signed in as ... Sign out (includes/header.php), under the menu on every page */
.signed-in-bar{font-size:14px;color:#555}
.signed-in-bar .signed-in-icon{vertical-align:-2px;color:#8E111F;margin-right:.15rem}
.signed-in-bar strong{color:#333;font-weight:600}
.signed-in-out{background:none;border:0;padding:0;color:#8E111F;font-weight:600;text-decoration:underline;cursor:pointer}
.signed-in-out:hover,.signed-in-out:focus{color:#5f0b15}

/* ---- Saved cards (2026-10-14, John; includes/nmi_card_fields.php, includes/payment_methods.php) ----
   Checkout: the saved card's masked number in a read-only field (grey, not a typing field), the note under it.
   Profile Payment Methods: one row per card in the house box style, the default marked in maroon; the actions are
   small buttons; "Update expiration" and "Remove" open in place (<details>), so nothing pops up. */
.cf-note-sm,.container p.cf-note-sm{font-size:14px!important;line-height:1.45!important;color:#555!important;margin:.35rem 0 0}
#nmi-saved-number[readonly]{background:#f5f5f5;color:#252525;font-weight:600;letter-spacing:.06em;cursor:default}
.pm-section{margin-top:1.5rem}
.pm-cards{list-style:none;margin:0 0 1rem;padding:0}
.pm-card{border:1px solid #ccc;border-left:4px solid #ccc;padding:12px 16px;margin-bottom:10px;background:#fff}
.pm-card.pm-default{border-left-color:#8E111F}
.pm-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pm-number{font:600 17px/1.3 Poppins,sans-serif;color:#252525;letter-spacing:.04em}
.pm-number i{color:#8E111F;font-size:20px;vertical-align:-3px;margin-right:4px}
.pm-badge{display:inline-block;padding:2px 10px;background:#8E111F;color:#fff;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.pm-exp{font-size:15px;color:#555;margin:4px 0 8px}
.pm-exp.pm-expired{color:#8E111F;font-weight:600}
.pm-updated{font-size:13px;color:#555;font-weight:400}
.pm-actions{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px}
.pm-actions .pm-inline{margin:0}
.pm-more{flex:0 0 auto}
.pm-more > summary{list-style:none}
.pm-more > summary::-webkit-details-marker{display:none}
.pm-more[open]{flex:1 1 100%;padding:10px 12px;background:#f5f5f5;border:1px solid #e5e5e5}
.pm-more[open] > summary{margin-bottom:8px}
.pm-confirm{font-size:15px;margin:0 0 8px}
.pm-empty,.container p.pm-empty{font-size:15px!important;color:#555!important}
.pm-add{border-top:1px solid #e9e9e9;padding-top:1rem;margin-top:.5rem}
.pm-add-title{font-family:"Playfair Display",Georgia,serif;font-size:19px;color:#252525;margin:0 0 .75rem}
.pm-section .form-label{display:block;font-size:14px;font-weight:600;color:#333;margin-bottom:.25rem}