/*
 * DJ Romello — WPForms Dark Cinematic Skin  v2.0
 * Exact 2-column field layout · black bg · red accents · full-width submit
 */

/* ============================================================
   CONTACT SECTION — left column (label · headline · line · sub)
   ============================================================ */
.djr-contact-section {
	background:  var(--black);
	padding:     100px 24px;
	border-top:  1px solid rgba(255,255,255,0.05);
}
.djr-contact-inner {
	max-width:             1200px;
	margin:                0 auto;
	display:               grid;
	grid-template-columns: 1fr 1.5fr;
	gap:                   80px;
	align-items:           start;
}

/* RED "GET IN TOUCH" label */
.djr-contact-left .djr-section-label {
	margin-bottom: 18px;
}

/* Bold uppercase headline */
.djr-contact-headline {
	font-size:      clamp(1.9rem, 3.2vw, 2.8rem);
	font-weight:    900;
	text-transform: uppercase;
	letter-spacing: -0.03em;
	line-height:    1.05;
	color:          var(--white);
	margin:         0 0 20px;
}

/* Red accent line */
.djr-contact-red-line {
	width:         56px;
	height:        3px;
	background:    var(--red);
	border-radius: 2px;
	margin-bottom: 24px;
}

/* Subtitle */
.djr-contact-sub {
	font-size:   0.95rem;
	line-height: 1.75;
	color:       var(--grey);
	max-width:   380px;
}

/* ============================================================
   WPFORMS WRAPPER
   ============================================================ */
.djr-contact-right.djr-wpforms-wrap {
	background:    rgba(255,255,255,0.025);
	border:        1px solid rgba(255,255,255,0.06);
	border-radius: 4px;
	padding:       36px 32px 32px;
}

/* Hide WPForms own title / description */
.djr-wpforms-wrap .wpforms-title,
.djr-wpforms-wrap .wpforms-description { display: none !important; }

/* Full width form */
.djr-wpforms-wrap .wpforms-form { width: 100% !important; }

/* ============================================================
   FIELD CONTAINER — 2-column grid
   Row 1 : Full Name  | Phone #
   Row 2 : Email      | Event Date
   Row 3 : Venue Name | Type of Event
   Row 4 : Message             (full width)
   Row 5 : How Did You Hear    (full width)
   Row 6 : SEND MESSAGE button (full width)
   ============================================================ */
.djr-wpforms-wrap .wpforms-field-container {
	display:               grid            !important;
	grid-template-columns: 1fr 1fr         !important;
	gap:                   20px            !important;
	padding:               0               !important;
	margin:                0               !important;
}

/* Every individual field — reset WPForms padding */
.djr-wpforms-wrap .wpforms-field {
	padding: 0 !important;
	margin:  0 !important;
}

/* Textarea fields span both columns */
.djr-wpforms-wrap .wpforms-field-textarea {
	grid-column: 1 / -1 !important;
}

/* Paragraph text that acts as the "How did you hear" field — full width too */
.djr-wpforms-wrap .wpforms-field-text.wpforms-field-large,
.djr-wpforms-wrap .wpforms-field:nth-child(n+7) {
	grid-column: 1 / -1 !important;
}

/* Submit button container — full width */
.djr-wpforms-wrap .wpforms-submit-container {
	grid-column: 1 / -1 !important;
	padding:     0       !important;
	margin-top:  8px     !important;
	text-align:  left    !important;
}

/* ============================================================
   LABELS
   ============================================================ */
.djr-wpforms-wrap .wpforms-field-label,
.djr-wpforms-wrap label.wpforms-field-label {
	font-family:    inherit              !important;
	font-size:      0.68rem              !important;
	font-weight:    700                  !important;
	letter-spacing: 0.14em               !important;
	text-transform: uppercase            !important;
	color:          rgba(255,255,255,0.70) !important;
	margin-bottom:  8px                  !important;
	display:        block                !important;
}

/* ============================================================
   INPUTS · SELECTS · TEXTAREAS
   ============================================================ */
.djr-wpforms-wrap input[type="text"],
.djr-wpforms-wrap input[type="email"],
.djr-wpforms-wrap input[type="tel"],
.djr-wpforms-wrap input[type="url"],
.djr-wpforms-wrap input[type="number"],
.djr-wpforms-wrap input[type="date"],
.djr-wpforms-wrap select,
.djr-wpforms-wrap textarea {
	background:     rgba(255,255,255,0.04)        !important;
	border:         1px solid rgba(255,255,255,0.10) !important;
	border-radius:  4px                            !important;
	color:          #ffffff                        !important;
	font-family:    inherit                        !important;
	font-size:      0.925rem                       !important;
	line-height:    1.5                            !important;
	padding:        13px 16px                      !important;
	width:          100%                           !important;
	box-sizing:     border-box                     !important;
	box-shadow:     none                           !important;
	outline:        none                           !important;
	transition:     border-color 0.25s ease, background 0.25s ease !important;
	-webkit-appearance: none                       !important;
	appearance:     none                           !important;
}

.djr-wpforms-wrap input::placeholder,
.djr-wpforms-wrap textarea::placeholder {
	color: rgba(144,144,160,0.45) !important;
}

/* Focus */
.djr-wpforms-wrap input:focus,
.djr-wpforms-wrap select:focus,
.djr-wpforms-wrap textarea:focus {
	border-color: var(--red)                 !important;
	background:   rgba(220,20,60,0.05)       !important;
	outline:      none                        !important;
	box-shadow:   0 0 0 3px rgba(220,20,60,0.12) !important;
}

/* Date input calendar icon colour fix */
.djr-wpforms-wrap input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(1) opacity(0.4);
}

/* ============================================================
   SELECT — custom red chevron
   ============================================================ */
.djr-wpforms-wrap select {
	background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23dc143c' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat:   no-repeat                  !important;
	background-position: right 14px center           !important;
	background-size:     12px                        !important;
	padding-right:       42px                        !important;
	cursor:              pointer                      !important;
}
.djr-wpforms-wrap select option {
	background: #1a1a22 !important;
	color:      #ffffff !important;
}

/* ============================================================
   TEXTAREA — message & referral fields
   ============================================================ */
.djr-wpforms-wrap textarea {
	resize:     vertical  !important;
	min-height: 110px     !important;
}

/* ============================================================
   VALIDATION ERRORS
   ============================================================ */
.djr-wpforms-wrap .wpforms-error,
.djr-wpforms-wrap label.wpforms-error {
	color:          #ff4d6d  !important;
	font-size:      0.73rem  !important;
	letter-spacing: 0        !important;
	text-transform: none     !important;
	font-weight:    500      !important;
	margin-top:     5px      !important;
	display:        block    !important;
}
.djr-wpforms-wrap input.wpforms-error,
.djr-wpforms-wrap select.wpforms-error,
.djr-wpforms-wrap textarea.wpforms-error {
	border-color: #ff4d6d !important;
}

/* ============================================================
   SUBMIT BUTTON — full-width red, uppercase SEND MESSAGE
   ============================================================ */
.djr-wpforms-wrap button[type="submit"],
.djr-wpforms-wrap input[type="submit"],
.djr-wpforms-wrap .wpforms-submit {
	/* Size & shape */
	display:         block       !important;
	width:           100%        !important;
	padding:         17px 32px   !important;
	border:          none        !important;
	border-radius:   4px         !important;
	cursor:          pointer     !important;
	box-sizing:      border-box  !important;

	/* Typography */
	font-family:     inherit     !important;
	font-size:       0.875rem    !important;
	font-weight:     700         !important;
	letter-spacing:  0.12em      !important;
	text-transform:  uppercase   !important;
	color:           #ffffff     !important;

	/* Red with breathing glow */
	background:      var(--red)  !important;
	box-shadow:      0 4px 24px rgba(220,20,60,0.35) !important;

	/* Animation + interaction */
	position:        relative    !important;
	overflow:        hidden      !important;
	animation:       djr-btn-breathe 3s ease-in-out infinite !important;
	transition:      transform 0.25s ease, box-shadow 0.25s ease !important;
}
.djr-wpforms-wrap button[type="submit"]:hover,
.djr-wpforms-wrap .wpforms-submit:hover {
	transform:   translateY(-2px) !important;
	box-shadow:  0 8px 36px rgba(220,20,60,0.60) !important;
	animation:   none             !important;
}

/* Shimmer sweep on submit button */
.djr-wpforms-wrap button[type="submit"]::before,
.djr-wpforms-wrap .wpforms-submit::before {
	content:    ''    !important;
	position:   absolute !important;
	top:        0        !important;
	left:       -75%     !important;
	width:      55%      !important;
	height:     100%     !important;
	background: linear-gradient(
		105deg,
		transparent            0%,
		rgba(255,255,255,0.10) 40%,
		rgba(255,255,255,0.18) 50%,
		rgba(255,255,255,0.10) 60%,
		transparent           100%
	)                    !important;
	transform:  skewX(-18deg)   !important;
	animation:  djr-btn-shimmer 4s ease-in-out infinite !important;
	pointer-events: none !important;
}
.djr-wpforms-wrap button[type="submit"]:hover::before,
.djr-wpforms-wrap .wpforms-submit:hover::before {
	animation: djr-btn-shimmer 1.2s ease-in-out infinite !important;
}

/* ============================================================
   SUCCESS / CONFIRMATION MESSAGE
   ============================================================ */
.djr-wpforms-wrap .wpforms-confirmation-container,
.djr-wpforms-wrap .wpforms-confirmation-container-full {
	background:    rgba(220,20,60,0.08)    !important;
	border:        1px solid rgba(220,20,60,0.30) !important;
	border-radius: 4px                      !important;
	color:         var(--white)             !important;
	font-size:     1rem                     !important;
	line-height:   1.7                      !important;
	padding:       28px 32px                !important;
	text-align:    center                   !important;
}

/* ============================================================
   CONTACT PAGE HERO (page-contact.php)
   ============================================================ */
.djr-contact-hero {
	background: var(--black);
	padding:    160px 24px 80px;
	text-align: center;
	border-bottom: 1px solid rgba(255,255,255,0.05);
	position:   relative;
}
.djr-contact-hero::before {
	content:  '';
	position: absolute;
	inset:    0;
	background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(220,20,60,0.10) 0%, transparent 65%);
	pointer-events: none;
}
.djr-contact-hero-inner { position: relative; z-index: 1; }
.djr-contact-hero h1 {
	font-size:      clamp(2.4rem, 5vw, 4rem);
	font-weight:    900;
	text-transform: uppercase;
	letter-spacing: -0.03em;
	color:          var(--white);
	margin:         10px 0 16px;
}
.djr-contact-hero-sub {
	font-size:  1rem;
	color:      var(--grey);
	max-width:  500px;
	margin:     0 auto;
	line-height: 1.7;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
	.djr-contact-inner {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.djr-contact-sub { max-width: 100%; }
}
@media (max-width: 640px) {
	.djr-contact-right.djr-wpforms-wrap { padding: 24px 16px; }
	/* Stack field pairs on small screens */
	.djr-wpforms-wrap .wpforms-field-container {
		grid-template-columns: 1fr !important;
	}
}