/* ==========================================================================
   SWITA Member Portal — front-end styles
   Matches the theme's Gravity Forms treatment (see /test-form/):
   Refrigerator Deluxe uppercase labels in brand navy, Proxima Nova body,
   white borderless inputs on the light page background, blue headings,
   white → blue uppercase buttons.
   ========================================================================== */

:root {
	--swita-brand: var(--color-brand, #1d2d5a);
	--swita-blue: var(--color-blue, #347ebb);
	--swita-secondary: var(--color-secondary, #3a7fb7);
	--swita-grey: var(--color-grey, #4c4c4c);
	--swita-dark: var(--color-dark, #191919);
	--swita-white: var(--color-white, #fff);
	--swita-orange: var(--color-orange, #c74330);
	--swita-font-display: var(--font-family-refri, "refrigerator-deluxe"), "Oswald", "Arial Narrow", sans-serif;
	--swita-font-body: var(--font-family-base, "proxima-nova"), "Helvetica Neue", Arial, sans-serif;
}

.swita-raklet-page,
.swita-raklet-login,
.swita-raklet-listing {
	font-family: var(--swita-font-body);
	color: var(--swita-grey);
}

/* Portal pages use the theme's secondary (dark-text) header + its content offset;
   see templates/portal.php. */

/* --------------------------------------------------------------------------
   Notices / banners
   -------------------------------------------------------------------------- */
.swita-raklet-notice {
	padding: 16px 20px;
	margin: 0 0 28px;
	border-left: 4px solid var(--swita-blue);
	background: var(--swita-white);
	border-radius: 2px;
	font-size: 17px;
	line-height: 1.5;
}
.swita-raklet-notice strong { color: var(--swita-brand); }
.swita-raklet-notice--success,
.swita-raklet-notice--approved { border-color: #2e8b57; }
.swita-raklet-notice--pending,
.swita-raklet-notice--info { border-color: #d9a400; }
.swita-raklet-notice--rejected { border-color: var(--swita-orange); }
.swita-raklet-notice a { color: var(--swita-blue); }

/* --------------------------------------------------------------------------
   Buttons (mirror .button in the theme)
   -------------------------------------------------------------------------- */
.swita-raklet-button,
.swita-raklet-login button[type="submit"],
.swita-raklet-listing .acf-form-submit .acf-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 15px 28px;
	font-family: var(--swita-font-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.17em;
	text-decoration: none;
	color: var(--swita-blue);
	background-color: var(--swita-white);
	border: 1px solid var(--swita-white);
	border-radius: 3px;
	cursor: pointer;
	transition: 0.2s;
	-webkit-appearance: none;
	appearance: none;
}
.swita-raklet-button:hover,
.swita-raklet-login button[type="submit"]:hover,
.swita-raklet-listing .acf-form-submit .acf-button:hover {
	background-color: var(--swita-secondary);
	border-color: var(--swita-secondary);
	color: var(--swita-white);
}
.swita-raklet-button--primary,
.swita-raklet-login button[type="submit"],
.swita-raklet-listing .acf-form-submit .acf-button {
	color: var(--swita-white);
	background-color: var(--swita-brand);
	border-color: var(--swita-brand);
	letter-spacing: 0.23em;
}
.swita-raklet-button--primary:hover,
.swita-raklet-login button[type="submit"]:hover,
.swita-raklet-listing .acf-form-submit .acf-button:hover {
	background-color: var(--swita-blue);
	border-color: var(--swita-blue);
	color: var(--swita-white);
}
.swita-raklet-listing .acf-form-submit .acf-button:disabled { opacity: 0.6; cursor: wait; }

/* --------------------------------------------------------------------------
   Sign-in / confirm card
   -------------------------------------------------------------------------- */
.swita-raklet-login {
	margin: 0 0 40px;
}
/* Both states are one centred column: the title (see templates/portal.php)
   and intro share a 940px cap — same idea as the theme's .container--md /
   .container--sm width caps — and the form card centres under them. */
.swita-raklet-page__head,
.swita-raklet-login .swita-raklet-login__intro {
	max-width: 940px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.swita-raklet-login .swita-raklet-login__intro {
	font-size: 20px;
	line-height: 1.5;
	margin-top: 0;
	margin-bottom: 32px;
}
/* Notices on the sign-in page share that measure. Their text stays
   left-aligned, reading off the accent border. */
#swita-raklet-login .swita-raklet-notice {
	max-width: 940px;
	margin-left: auto;
	margin-right: auto;
}
.swita-raklet-login form {
	max-width: 620px;
	margin-left: auto;
	margin-right: auto;
	background: var(--swita-white);
	padding: 32px;
	border-radius: 3px;
	box-shadow: 0 1px 2px rgba(29, 45, 90, 0.06);
}
.swita-raklet-login label {
	display: block;
	margin: 0 0 8px;
	font-family: var(--swita-font-display);
	font-size: 18px;
	font-weight: 900;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--swita-brand);
}
.swita-raklet-login input[type="email"] {
	display: block;
	width: 100% !important;
	padding: 15px 12px;
	font-family: inherit;
	font-size: 16px !important;
	color: var(--swita-dark);
	background: #f3f4f8;
	border: 2px solid transparent;
	border-radius: 2px;
	outline: none;
	margin: 0 0 20px;
	transition: border-color 0.2s;
}
.swita-raklet-login input[type="email"]:focus { border-color: var(--swita-blue); }
.swita-raklet-login form p { margin: 0; }
.swita-raklet-login__hint {
	margin-top: 20px !important;
	font-size: 15px;
	color: var(--swita-grey);
}
/* Confirm step: one short sentence, so a tighter measure than the sign-in
   copy — capped at the form-card width and balanced across its two lines. */
.swita-raklet-confirm .swita-raklet-login__intro {
	max-width: 620px;
	text-wrap: balance;
}
/* No card — just the button, centred under the intro. */
.swita-raklet-confirm form {
	max-width: none;
	padding: 0;
	background: none;
	box-shadow: none;
	text-align: center;
}

/* --------------------------------------------------------------------------
   My Listing header
   -------------------------------------------------------------------------- */
.swita-raklet-listing__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px 32px;
	flex-wrap: wrap;
	padding: 0 0 20px;
	margin: 0 0 28px;
	border-bottom: 1px solid #ccc;
}
.swita-raklet-listing__label {
	display: block;
	font-family: var(--swita-font-display);
	font-size: 14px;
	font-weight: 900;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: var(--swita-grey);
}
.swita-raklet-listing__title {
	font-family: var(--swita-font-display);
	font-size: 32px;
	font-weight: 900;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--swita-blue);
}
.swita-raklet-badge {
	display: inline-block;
	vertical-align: middle;
	margin-left: 12px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--swita-brand);
	color: var(--swita-white);
	font-family: var(--swita-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.swita-raklet-listing__links {
	display: flex;
	gap: 24px;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}
.swita-raklet-listing__links a { color: var(--swita-blue); text-decoration: none; }
.swita-raklet-listing__links a:hover { text-decoration: underline; }
.swita-raklet-listing__help {
	margin: 28px 0 0;
	font-size: 15px;
	color: var(--swita-grey);
}

/* --------------------------------------------------------------------------
   ACF form → theme look
   -------------------------------------------------------------------------- */
.swita-raklet-listing .acf-form {
	font-family: var(--swita-font-body);
	font-size: 16px;
}
.swita-raklet-listing .acf-fields {
	border: 0;
	background: transparent;
}
.swita-raklet-listing .acf-fields > .acf-field {
	border: 0;
	padding: 0;
	margin: 0 0 24px;
	min-height: 0;
}
.swita-raklet-listing .acf-fields > .acf-field:last-child { margin-bottom: 0; }

/* Section headings (server-decided): every heading is ::before content on
   that section's first-rendered field (data-section-title), so it stays
   correct after the client-side reorder script moves fields around — the
   pseudo-element travels with its own node. */
.swita-raklet-listing .acf-field.swita-section-start::before {
	content: attr(data-section-title);
	display: block;
	margin: 36px 0 18px;
	padding: 0 0 8px;
	border-bottom: 1px solid #ccc;
	font-family: var(--swita-font-display);
	font-size: 30px;
	font-weight: 900;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--swita-blue);
}
/* No top gap when the heading is the very first thing on the form (no
   unheaded fields, e.g. Hero Image/Logo, ahead of it). */
.swita-raklet-listing .acf-fields > .acf-field.swita-section-start:first-child::before {
	margin-top: 0;
}

.swita-raklet-listing .acf-label {
	margin: 0 0 8px;
}
.swita-raklet-listing .acf-label label {
	display: block;
	margin: 0;
	font-family: var(--swita-font-display);
	font-size: 18px;
	font-weight: 900;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--swita-brand);
}
.swita-raklet-listing .acf-label .acf-required { color: #790000; margin-left: 4px; }
.swita-raklet-listing .acf-label .description,
.swita-raklet-listing .acf-input .description {
	display: block;
	margin: 4px 0 0;
	font-family: var(--swita-font-body);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--swita-grey);
}

.swita-raklet-listing .acf-input input[type="text"],
.swita-raklet-listing .acf-input input[type="email"],
.swita-raklet-listing .acf-input input[type="url"],
.swita-raklet-listing .acf-input input[type="tel"],
.swita-raklet-listing .acf-input input[type="number"],
.swita-raklet-listing .acf-input input[type="search"],
.swita-raklet-listing .acf-input textarea,
.swita-raklet-listing .acf-input select {
	display: block;
	width: 100% !important;
	max-width: none;
	padding: 15px 12px;
	font-family: inherit;
	font-size: 16px !important;
	font-style: normal;
	line-height: 1.4;
	color: var(--swita-dark);
	background: var(--swita-white);
	border: 2px solid transparent;
	border-radius: 2px;
	box-shadow: none;
	outline: none;
	transition: border-color 0.2s;
}
.swita-raklet-listing .acf-input input:focus,
.swita-raklet-listing .acf-input textarea:focus,
.swita-raklet-listing .acf-input select:focus { border-color: var(--swita-blue); }
.swita-raklet-listing .acf-input ::placeholder { color: var(--swita-blue); font-style: italic; }

/* WYSIWYG (content + website). The editor body itself (an iframe) gets the
   matching 16px Proxima Nova / dark text / 12px padding from the
   tiny_mce_before_init + mce_css filters in class-swita-raklet-form.php —
   CSS here cannot reach inside the iframe. */
.swita-raklet-listing .acf-editor-wrap .wp-editor-container,
.swita-raklet-listing .acf-editor-wrap .mce-container,
.swita-raklet-listing .acf-editor-wrap .wp-editor-area {
	border-color: transparent;
	border-radius: 2px;
}
.swita-raklet-listing .acf-editor-wrap .wp-editor-container { background: var(--swita-white); border: 2px solid transparent; }
.swita-raklet-listing .acf-editor-wrap .mce-toolbar-grp,
.swita-raklet-listing .acf-editor-wrap .mce-top-part::before { background: #f3f4f8; box-shadow: none; }
.swita-raklet-listing .acf-editor-wrap .wp-editor-tabs { display: none; }
.swita-raklet-listing .acf-editor-wrap .wp-editor-area { padding: 12px; min-height: 180px; }

/* radio / checkbox / true-false */
.swita-raklet-listing .acf-radio-list li,
.swita-raklet-listing .acf-checkbox-list li {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 20px 8px 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--swita-dark);
}
.swita-raklet-listing .acf-radio-list.acf-hl li { float: none; display: inline-flex; }

/* the theme's jcf custom-select wrapper double-renders selects that select2 already styles */
.swita-raklet-listing .acf-input .jcf-select { display: none !important; }

/* select2 (post object) */
.swita-raklet-listing .acf-input .select2-container--default .select2-selection--single {
	height: auto;
	padding: 11px 12px;
	background: var(--swita-white);
	border: 2px solid transparent;
	border-radius: 2px;
}
.swita-raklet-listing .acf-input .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.4; padding-left: 0; color: var(--swita-dark); }
.swita-raklet-listing .acf-input .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; }
.swita-raklet-listing .acf-input .select2-container--focus .select2-selection--single,
.swita-raklet-listing .acf-input .select2-container--open .select2-selection--single { border-color: var(--swita-blue); }

/* image / gallery */
.swita-raklet-listing .acf-image-uploader .image-wrap {
	border-radius: 2px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}
.swita-raklet-listing .acf-image-uploader .acf-button,
.swita-raklet-listing .acf-gallery-toolbar .acf-button,
.swita-raklet-listing .acf-gallery .acf-button,
.swita-raklet-listing .acf-input .button {
	font-family: var(--swita-font-body);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--swita-blue);
	background: var(--swita-white);
	border: 1px solid var(--swita-blue);
	border-radius: 3px;
	padding: 8px 14px;
	line-height: 1.4;
	height: auto;
	box-shadow: none;
	text-shadow: none;
	cursor: pointer;
	transition: 0.2s;
}
.swita-raklet-listing .acf-image-uploader .acf-button:hover,
.swita-raklet-listing .acf-gallery-toolbar .acf-button:hover,
.swita-raklet-listing .acf-gallery .acf-button:hover,
.swita-raklet-listing .acf-input .button:hover { background: var(--swita-blue); color: var(--swita-white); }
.swita-raklet-listing .acf-gallery {
	border: 2px solid transparent;
	border-radius: 2px;
	background: var(--swita-white);
}
.swita-raklet-listing .acf-gallery .acf-gallery-main { background: var(--swita-white); }
.swita-raklet-listing .acf-gallery .acf-gallery-toolbar { background: #f3f4f8; border-top: 1px solid #e3e5ec; }

/* --------------------------------------------------------------------------
   Media fields: upload and remove only
   -------------------------------------------------------------------------- */
/* Every ACF "edit" affordance opens an attachment-metadata editor that saves
   through get-/save-attachment (image, file) or
   acf/fields/gallery/update_attachment (gallery). All three check edit_post on
   the attachment, which the member role only holds mid-upload — see
   Swita_Raklet_Role::allow_attach_to_own_post() — so for a member these
   controls cannot save even when they open. Members add and remove; that is
   the whole contract. */

/* Image + file fields: drop the pencil, keep the X. */
.swita-raklet-listing .acf-actions a[data-name="edit"] { display: none; }

/* Gallery: the side panel is its entire editing surface (Edit link, metadata
   form, Update button), so it goes wholesale. Thumbnails, drag-reorder,
   per-image remove and "Add to gallery" are untouched. */
.swita-raklet-listing .acf-gallery .acf-gallery-side { display: none; }
/* ACF hides the thumbnail X whenever it flags the gallery sidebar-open; with
   no panel to show, that would strip the only control left. Put it back. */
.swita-raklet-listing .acf-gallery.sidebar-open .acf-gallery-attachment:hover .actions { display: block; }

/* google map */
.swita-raklet-listing .acf-google-map { border: 2px solid transparent; border-radius: 2px; overflow: hidden; background: var(--swita-white); }
.swita-raklet-listing .acf-google-map .title { border-bottom: 1px solid #e3e5ec; }
.swita-raklet-listing .acf-google-map .title input { border: 0; box-shadow: none; }

/* validation */
.swita-raklet-listing .acf-notice { border-radius: 2px; }
.swita-raklet-listing .acf-error-message,
.swita-raklet-listing .acf-notice.-error { background: var(--swita-orange); color: var(--swita-white); }
.swita-raklet-listing .acf-field.acf-error input,
.swita-raklet-listing .acf-field.acf-error textarea,
.swita-raklet-listing .acf-field.acf-error select { border-color: var(--swita-orange); }
.swita-raklet-listing .acf-error-message p { font-size: 13px; }

/* submit row */
.swita-raklet-listing .acf-form-submit {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 36px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid #ccc;
}
.swita-raklet-listing .acf-form-submit .acf-spinner { margin: 0; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.swita-raklet-login form { padding: 24px 20px; }
	.swita-raklet-listing__title { font-size: 26px; }
	.swita-raklet-listing__links { width: 100%; gap: 16px; }
	.swita-raklet-listing .acf-field.swita-section-start::before { font-size: 26px; }
	.swita-raklet-listing .acf-form-submit { flex-direction: column; align-items: stretch; }
	.swita-raklet-listing .acf-form-submit .acf-button { width: 100%; }
}