/* Modal / fancybox popup redesign — applies site-wide since every "create/edit pin"-style
   dialog (Repin a Pin, Add a pin from your computer, Add from a website, Gallery pin, Add a
   Place, Create board, the PinIt Button 3-choice picker, Pin edit, etc.) shares the exact same
   legacy .popup/.head/.body shell + fancybox chrome (assets/css/main.css, assets/css/
   fancybox.css). Restyling that shared shell here uplifts all of them consistently instead of
   duplicating a bespoke modal per flow. Same design tokens as the rest of this redesign: brand
   red #e74c3c, navy #1f2f3d/#2d3e4f, muted #97a3ad/#6b7680, neutral border #eeece8/#e9e7e3,
   16-18px card radius. */

.fancybox-skin {
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(31,42,56,.22), 0 6px 18px rgba(31,42,56,.10);
}

.popup {
	min-width: 460px;
	box-sizing: border-box;
}
.popup .head {
	background: #fff;
	border-bottom: 1px solid #f1f0ed;
	border-radius: 0;
	padding: 22px 46px 18px 26px;
	box-sizing: border-box;
}
.popup .head .title-2 {
	font-size: 18px;
	font-weight: 800;
	color: #1f2f3d !important;
	letter-spacing: -.2px;
}
.popup .body {
	background: #fff;
	border-radius: 0;
	padding: 24px 26px 28px;
	box-sizing: border-box;
}

/* Close "X" — flat PNG icon (fancybox.css) replaced with a soft circular button + inline SVG,
   matching the icon-badge language used throughout the rest of this redesign. */
.fancybox-close {
	top: 16px;
	right: 16px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: #f4f3f1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7680' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px 13px;
	transition: background-color .15s;
}
.fancybox-close:hover {
	background-color: #ecebe8;
}

/* File-input row ("Choose File" style controls, e.g. Uploadpin's "Add a pin from your
   computer" modal, and cover/avatar-style pickers reusing the same .input-file markup). */
.popup .input-file input[type=text] {
	height: 46px;
	border: 1.5px solid #e9e7e3;
	border-radius: 10px 0 0 10px;
	padding: 0 14px;
	font-size: 14px;
	font-family: Lato, sans-serif;
	color: #1f2f3d;
	box-sizing: border-box;
}
.popup .input-file .button {
	height: 46px;
	line-height: 46px;
	padding: 0 26px;
	border-radius: 0 10px 10px 0;
	background-color: #e74c3c;
	border: 0;
	font-size: 14px;
	font-weight: 800;
	box-sizing: border-box;
}
.popup .input-file .button:hover { background-color: #ec7063; }

@media (max-width: 560px) {
	.popup { min-width: 0; width: 100%; }
	.popup .head { padding: 18px 44px 14px 18px; }
	.popup .body { padding: 18px; }
}